Summary - Split HeaderBar into maintainable components and hooks - Centralized skeleton loading UI via a reusable SkeletonWrapper - Improved navigation UX with primary-colored hover indication - Preserved API surface and passed linters Why - Improve readability, reusability, and testability of the header - Remove duplicated skeleton logic across files - Provide clearer hover feedback consistent with the theme What’s changed - Components (web/src/components/layout/HeaderBar/) - New container: index.js - New UI components: HeaderLogo.js, Navigation.js, ActionButtons.js, UserArea.js, MobileMenuButton.js, NewYearButton.js, NotificationButton.js, ThemeToggle.js, LanguageSelector.js - New shared skeleton: SkeletonWrapper.js - Updated entry: HeaderBar.js now re-exports ./HeaderBar/index.js - Hooks (web/src/hooks/common/) - New: useHeaderBar.js (state and actions for header) - New: useNotifications.js (announcements state, unread calc, open/close) - New: useNavigation.js (main nav link config) - Skeleton refactor - Navigation.js: replaced inline skeletons with <SkeletonWrapper type="navigation" .../> - UserArea.js: replaced inline skeletons with <SkeletonWrapper type="userArea" .../> - HeaderLogo.js: replaced image/title skeletons with <SkeletonWrapper type="image"/>, <SkeletonWrapper type="title"/> - Navigation hover UX - Added primary-colored hover to nav items for clearer pointer feedback - Final hover style: hover:text-semi-color-primary (kept rounded + transition classes) Non-functional - No breaking API changes; HeaderBar usage stays the same - All modified files pass lint checks Notes for future work - SkeletonWrapper is extensible: add new cases (e.g., card) in one place - Components are small and test-friendly; unit tests can be added per component Affected files (key) - web/src/components/layout/HeaderBar.js - web/src/components/layout/HeaderBar/index.js - web/src/components/layout/HeaderBar/Navigation.js - web/src/components/layout/HeaderBar/UserArea.js - web/src/components/layout/HeaderBar/HeaderLogo.js - web/src/components/layout/HeaderBar/ActionButtons.js - web/src/components/layout/HeaderBar/MobileMenuButton.js - web/src/components/layout/HeaderBar/NewYearButton.js - web/src/components/layout/HeaderBar/NotificationButton.js - web/src/components/layout/HeaderBar/ThemeToggle.js - web/src/components/layout/HeaderBar/LanguageSelector.js - web/src/components/layout/HeaderBar/SkeletonWrapper.js - web/src/hooks/common/useHeaderBar.js - web/src/hooks/common/useNotifications.js - web/src/hooks/common/useNavigation.js
89 lines
2.6 KiB
JavaScript
89 lines
2.6 KiB
JavaScript
/*
|
|
Copyright (C) 2025 QuantumNous
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU Affero General Public License as
|
|
published by the Free Software Foundation, either version 3 of the
|
|
License, or (at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU Affero General Public License for more details.
|
|
|
|
You should have received a copy of the GNU Affero General Public License
|
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
|
|
For commercial licensing, please contact support@quantumnous.com
|
|
*/
|
|
|
|
import { useState, useEffect } from 'react';
|
|
|
|
export const useNotifications = (statusState) => {
|
|
const [noticeVisible, setNoticeVisible] = useState(false);
|
|
const [unreadCount, setUnreadCount] = useState(0);
|
|
|
|
const announcements = statusState?.status?.announcements || [];
|
|
|
|
// Helper functions
|
|
const getAnnouncementKey = (a) => `${a?.publishDate || ''}-${(a?.content || '').slice(0, 30)}`;
|
|
|
|
const calculateUnreadCount = () => {
|
|
if (!announcements.length) return 0;
|
|
let readKeys = [];
|
|
try {
|
|
readKeys = JSON.parse(localStorage.getItem('notice_read_keys')) || [];
|
|
} catch (_) {
|
|
readKeys = [];
|
|
}
|
|
const readSet = new Set(readKeys);
|
|
return announcements.filter((a) => !readSet.has(getAnnouncementKey(a))).length;
|
|
};
|
|
|
|
const getUnreadKeys = () => {
|
|
if (!announcements.length) return [];
|
|
let readKeys = [];
|
|
try {
|
|
readKeys = JSON.parse(localStorage.getItem('notice_read_keys')) || [];
|
|
} catch (_) {
|
|
readKeys = [];
|
|
}
|
|
const readSet = new Set(readKeys);
|
|
return announcements.filter((a) => !readSet.has(getAnnouncementKey(a))).map(getAnnouncementKey);
|
|
};
|
|
|
|
// Effects
|
|
useEffect(() => {
|
|
setUnreadCount(calculateUnreadCount());
|
|
}, [announcements]);
|
|
|
|
// Actions
|
|
const handleNoticeOpen = () => {
|
|
setNoticeVisible(true);
|
|
};
|
|
|
|
const handleNoticeClose = () => {
|
|
setNoticeVisible(false);
|
|
if (announcements.length) {
|
|
let readKeys = [];
|
|
try {
|
|
readKeys = JSON.parse(localStorage.getItem('notice_read_keys')) || [];
|
|
} catch (_) {
|
|
readKeys = [];
|
|
}
|
|
const mergedKeys = Array.from(new Set([...readKeys, ...announcements.map(getAnnouncementKey)]));
|
|
localStorage.setItem('notice_read_keys', JSON.stringify(mergedKeys));
|
|
}
|
|
setUnreadCount(0);
|
|
};
|
|
|
|
return {
|
|
noticeVisible,
|
|
unreadCount,
|
|
announcements,
|
|
handleNoticeOpen,
|
|
handleNoticeClose,
|
|
getUnreadKeys,
|
|
};
|
|
};
|