93 lines
3.1 KiB
TypeScript
93 lines
3.1 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react';
|
|
import { useLocalStorage } from '@/hooks/use-local-storage';
|
|
import { Announcement } from '@/app/types/announcement';
|
|
|
|
type AnnouncementRead = {
|
|
[id: string]: boolean;
|
|
};
|
|
|
|
export function useUnreadAnnouncements() {
|
|
const [hasUnread, setHasUnread] = useState(false);
|
|
const [announcements, setAnnouncements] = useState<Announcement[]>([]);
|
|
const [readAnnouncements, setReadAnnouncements] = useLocalStorage<AnnouncementRead>('read-announcements', {});
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
// Memoized function to check if there are unread announcements
|
|
const checkUnreadStatus = useCallback((anncs: Announcement[], readState: AnnouncementRead) => {
|
|
return anncs.some((announcement: Announcement) => !readState[announcement.id]);
|
|
}, []);
|
|
|
|
// Fetch announcements and check if there are any unread
|
|
const checkForUnreadAnnouncements = useCallback(async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
const response = await fetch('/api/announcements');
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to fetch announcements');
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
// Check if there are any unread announcements with the current read state
|
|
const hasUnreadAnnouncements = checkUnreadStatus(data, readAnnouncements);
|
|
|
|
// Update both states in a single render cycle
|
|
setAnnouncements(data);
|
|
setHasUnread(hasUnreadAnnouncements);
|
|
} catch (err) {
|
|
console.error('Error checking for unread announcements:', err);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, [readAnnouncements, checkUnreadStatus]);
|
|
|
|
// Mark an announcement as read
|
|
const markAsRead = useCallback((announcementId: string) => {
|
|
setReadAnnouncements((prev: AnnouncementRead) => {
|
|
// Create new state object without mutating the original
|
|
const newReadState = { ...prev, [announcementId]: true };
|
|
|
|
// Schedule the unread status update for the next tick
|
|
// This prevents state updates from interfering with each other
|
|
setTimeout(() => {
|
|
setHasUnread(checkUnreadStatus(announcements, newReadState));
|
|
}, 0);
|
|
|
|
return newReadState;
|
|
});
|
|
}, [announcements, checkUnreadStatus, setReadAnnouncements]);
|
|
|
|
// Mark all announcements as read
|
|
const markAllAsRead = useCallback(() => {
|
|
const allRead: AnnouncementRead = {};
|
|
announcements.forEach(announcement => {
|
|
allRead[announcement.id] = true;
|
|
});
|
|
|
|
setReadAnnouncements(allRead);
|
|
|
|
// Schedule the unread status update for the next tick
|
|
setTimeout(() => {
|
|
setHasUnread(false);
|
|
}, 0);
|
|
}, [announcements, setReadAnnouncements]);
|
|
|
|
// Check for unread announcements on mount or when dependencies change
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
checkForUnreadAnnouncements();
|
|
}, 0);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, [checkForUnreadAnnouncements]);
|
|
|
|
return {
|
|
hasUnread,
|
|
isLoading,
|
|
announcements,
|
|
checkForUnreadAnnouncements,
|
|
markAsRead,
|
|
markAllAsRead
|
|
};
|
|
}
|