Convert NotificationCard to Typescript

src/components/Header/Header.tsx

@@ -7,17 +7,11 @@ import initEcho from "../../utils/echo/initEcho.js"
 import readNotifications from "../../utils/notifications/readNotifications.js";
 import { userCreatedListener } from "../../utils/echo/listeners/userCreatedListener";
 import { userNotificationsListener } from "../../utils/echo/listeners/userNotificationsListener.js";
-import NotificationCard from "../NotificationCard/NotificationCard.jsx";
+import NotificationCard from "../NotificationCard/NotificationCard";
 import { EventContext } from "../../contexts/Events/EventContext.js";
 import { AuthContext } from "../../contexts/Auth/AuthContext.js";
 import { PendingMembersContext } from "../../contexts/PendingMembers/PendingMembersContext";
-
+import Notification from "../../interfaces/notification.interface";
-interface Notification {
-    id: number;
-    content: string;
-    created_at: string | number;
-    pivot: { unread: number };
-}
 
 function Header() {
 

src/components/NotificationCard/NotificationCard.tsx

@@ -1,16 +1,20 @@
 import formatDate from "../../utils/date/formatDate.js";
 import formatTime from "../../utils/date/formatTime.js";
-
 import styles from "./NotificationCard.module.css"
+import Notification from "../../interfaces/notification.interface";
 
+interface NotificationCardProps {
+    notifications: Notification[];
+    deleteNotification: (id: number) => void;
+}
 
-function NotificationCard({notifications, deleteNotification}) {
+function NotificationCard({ notifications, deleteNotification }: NotificationCardProps) {
     return (
         notifications.map((notification, index) => (
             <div className={styles.notificationCard} key={index}>
                 <div className={styles.cardHeader}>
                     <span className={styles.timeTag}>
-                        Le {formatDate(notification.created_at)} à {formatTime(notification.created_at)}
+                        Le {formatDate(String(notification.created_at))} à {formatTime(String(notification.created_at))}
                     </span>
                     <button
                         className={styles.closeIconButton}
@@ -31,4 +35,4 @@ function NotificationCard({notifications, deleteNotification}) {
     );
 }
 
-export default NotificationCard;
+export default NotificationCard;

src/interfaces/notification.interface.ts

@@ -0,0 +1,6 @@
+export default interface Notification {
+    id: number;
+    content: string;
+    created_at: string | number;
+    pivot: { unread: number };
+}