Convert Header to Typescript

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 { update, user } = useContext(AuthContext)!;
-    const { updateEvent } = useContext(EventContext);
+    const { updateEvent } = useContext(EventContext)!;
-    const [notificationMenu, setnotificationMenu] = useState(false);
+    const { updatePendingMembers } = useContext(PendingMembersContext) as unknown as { updatePendingMembers: () => void };
-    const [unreadNotification, setunreadNotification] = useState(false);
+    const [notificationMenu, setnotificationMenu] = useState<boolean>(false);
-    const [mobileMenu, setMobileMenu] = useState(false);
+    const [unreadNotification, setunreadNotification] = useState<boolean>(false);
-    const [notifications, setNotifications] = useState([]);
+    const [mobileMenu, setMobileMenu] = useState<boolean>(false);
-    const notificationRef = useRef(null);
+    const [notifications, setNotifications] = useState<Notification[]>([]);
-    const { updatePendingMembers } = useContext(PendingMembersContext);
+    const notificationRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
 
         updateEvent();
 
-        let echoInstance = null;
+        let echoInstance: ReturnType<typeof initEcho> | null = null;
-        let channelsToLeave = [];
+        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) &&
+                !notificationRef.current.contains(event.target as Node) &&
-                !event.target.closest(`.${styles.bellBtn}`)
+                !(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) {

src/contexts/Events/EventContext.ts

@@ -16,6 +16,7 @@ export type EventGroup = {
 
 export type EventContextType = {
   events: EventGroup[];
+  updateEvent: () => void;
 };
 
 export const EventContext = createContext<EventContextType | null>(null);