diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.tsx similarity index 83% rename from src/components/Header/Header.jsx rename to src/components/Header/Header.tsx index bd4b821..07e8785 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.tsx @@ -1,5 +1,5 @@ import { Link, NavLink } from "react-router"; -import {useContext, useEffect, useRef, useState} from "react"; +import { useContext, useEffect, useRef, useState } from "react"; import styles from "./Header.module.css" import getUserNotifications from "../../utils/notifications/getUserNotifications.js"; import deleteNotificationUser from "../../utils/notifications/deleteNotificationUser.js"; @@ -9,32 +9,39 @@ import { userCreatedListener } from "../../utils/echo/listeners/userCreatedListe import { userNotificationsListener } from "../../utils/echo/listeners/userNotificationsListener.js"; import NotificationCard from "../NotificationCard/NotificationCard.jsx"; import { EventContext } from "../../contexts/Events/EventContext.js"; -import {AuthContext} from "../../contexts/Auth/AuthContext.js"; +import { AuthContext } from "../../contexts/Auth/AuthContext.js"; import { PendingMembersContext } from "../../contexts/PendingMembers/PendingMembersContext"; +interface Notification { + id: number; + content: string; + created_at: string | number; + pivot: { unread: number }; +} + function Header() { - const { update, user } = useContext(AuthContext); - const { updateEvent } = useContext(EventContext); - const [notificationMenu, setnotificationMenu] = useState(false); - const [unreadNotification, setunreadNotification] = useState(false); - const [mobileMenu, setMobileMenu] = useState(false); - const [notifications, setNotifications] = useState([]); - const notificationRef = useRef(null); - const { updatePendingMembers } = useContext(PendingMembersContext); + const { update, user } = useContext(AuthContext)!; + const { updateEvent } = useContext(EventContext)!; + const { updatePendingMembers } = useContext(PendingMembersContext) as unknown as { updatePendingMembers: () => void }; + const [notificationMenu, setnotificationMenu] = useState(false); + const [unreadNotification, setunreadNotification] = useState(false); + const [mobileMenu, setMobileMenu] = useState(false); + const [notifications, setNotifications] = useState([]); + const notificationRef = useRef(null); useEffect(() => { updateEvent(); - let echoInstance = null; - let channelsToLeave = []; + let echoInstance: ReturnType | null = null; + let channelsToLeave: string[] = []; async function initializeHeader() { try { const notifData = await getUserNotifications(); - const data = notifData || []; + const data: Notification[] = notifData || []; setNotifications(data); const hasUnread = data.some(n => n.pivot && n.pivot.unread === 1); setunreadNotification(hasUnread); @@ -42,11 +49,11 @@ function Header() { const echo = initEcho(); echoInstance = echo; - const activeChannels = [ + const activeChannels: (string | null)[] = [ userCreatedListener(echo, user, setNotifications, setunreadNotification, updatePendingMembers), userNotificationsListener(echo, user, setNotifications, setunreadNotification), ]; - channelsToLeave = activeChannels.filter(name => name !== null); + channelsToLeave = activeChannels.filter((name): name is string => name !== null); } catch (err) { console.error("Erreur initialisation Header:", err); @@ -55,11 +62,11 @@ function Header() { initializeHeader(); - const handleClickOutside = (event) => { + const handleClickOutside = (event: MouseEvent) => { if ( notificationRef.current && - !notificationRef.current.contains(event.target) && - !event.target.closest(`.${styles.bellBtn}`) + !notificationRef.current.contains(event.target as Node) && + !(event.target as Element).closest(`.${styles.bellBtn}`) ) { setnotificationMenu(false); } @@ -70,7 +77,7 @@ function Header() { return () => { document.removeEventListener("mousedown", handleClickOutside); if (echoInstance) { - channelsToLeave.forEach(chan => echoInstance.leave(chan)); + channelsToLeave.forEach(chan => echoInstance!.leave(chan)); } }; }, []); @@ -93,7 +100,7 @@ function Header() { } - async function deleteNotification(notificationId) { + async function deleteNotification(notificationId: number) { try { const result = await deleteNotificationUser(notificationId); if (result) { @@ -194,4 +201,4 @@ function Header() { ); } -export default Header; \ No newline at end of file +export default Header; diff --git a/src/contexts/Events/EventContext.ts b/src/contexts/Events/EventContext.ts index 166a883..7b87226 100644 --- a/src/contexts/Events/EventContext.ts +++ b/src/contexts/Events/EventContext.ts @@ -16,6 +16,7 @@ export type EventGroup = { export type EventContextType = { events: EventGroup[]; + updateEvent: () => void; }; export const EventContext = createContext(null); \ No newline at end of file