Added a badge with the amount of pending tickets assigned to the user

src/hooks/useTickets.tsx

@@ -1,22 +1,22 @@
 import { Ticket } from "@/interfaces/ticket";
 import { Code, Group, User } from "@/interfaces/user";
 import axios from "axios";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 
 export default function useTickets() {
   const [tickets, setTickets] = useState<Ticket[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
 
-  const getData = () => {
+  const getData = useCallback(() => {
     setIsLoading(true);
     axios
       .get<Ticket[]>(`/api/tickets`)
       .then((response) => setTickets(response.data))
       .finally(() => setIsLoading(false));
-  };
+  }, []);
 
-  useEffect(getData, []);
+  useEffect(getData, [getData]);
 
   return { tickets, isLoading, isError, reload: getData };
 }

src/hooks/useTicketsListener.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import useTickets from "./useTickets";
+
+const useTicketsListener = (userId?: string) => {
+  const { tickets, reload } = useTickets();
+
+  React.useEffect(() => {
+    const intervalId = setInterval(() => {
+      reload();
+    }, 60 * 1000);
+
+    return () => clearInterval(intervalId);
+  }, [reload]);
+
+  if (userId) {
+    const assignedTickets = tickets.filter(
+      (ticket) => ticket.assignedTo === userId && ticket.status === "submitted"
+    );
+
+    return {
+      assignedTickets,
+      totalAssignedTickets: assignedTickets.length,
+    };
+  }
+
+  return {};
+};
+
+export default useTicketsListener;