diff --git a/src/components/High/Layout.tsx b/src/components/High/Layout.tsx index 9feadad1..79eb2d2a 100644 --- a/src/components/High/Layout.tsx +++ b/src/components/High/Layout.tsx @@ -34,6 +34,7 @@ export default function Layout({user, children, className, navDisabled = false, onFocusLayerMouseEnter={onFocusLayerMouseEnter} className="-md:hidden" userType={user.type} + userId={user.id} />
void; - className?: string; - userType?: Type; + path: string; + navDisabled?: boolean; + focusMode?: boolean; + onFocusLayerMouseEnter?: () => void; + className?: string; + userType?: Type; + userId?: string; } interface NavProps { - Icon: IconType; - label: string; - path: string; - keyPath: string; - disabled?: boolean; - isMinimized?: boolean; + Icon: IconType; + label: string; + path: string; + keyPath: string; + disabled?: boolean; + isMinimized?: boolean; + badge?: number; } -const Nav = ({ - Icon, - label, - path, - keyPath, - disabled = false, - isMinimized = false, -}: NavProps) => ( - - - {!isMinimized && {label}} - -); +const Nav = ({Icon, label, path, keyPath, disabled = false, isMinimized = false, badge}: NavProps) => { + return ( + + + {!isMinimized && {label}} + {!!badge && badge > 0 && ( +
+ {badge} +
+ )} + + ); +}; -export default function Sidebar({ - path, - navDisabled = false, - focusMode = false, - userType, - onFocusLayerMouseEnter, - className, -}: Props) { - const router = useRouter(); +export default function Sidebar({path, navDisabled = false, focusMode = false, userType, onFocusLayerMouseEnter, className, userId}: Props) { + const router = useRouter(); - const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [ - state.isSidebarMinimized, - state.toggleSidebarMinimized, - ]); + const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [state.isSidebarMinimized, state.toggleSidebarMinimized]); - const logout = async () => { - axios.post("/api/logout").finally(() => { - setTimeout(() => router.reload(), 500); - }); - }; + const {totalAssignedTickets} = useTicketsListener(userId); - const disableNavigation = preventNavigation(navDisabled, focusMode); + useEffect(() => console.log(totalAssignedTickets), [totalAssignedTickets]); - return ( -
-
-
-
-
+ const logout = async () => { + axios.post("/api/logout").finally(() => { + setTimeout(() => router.reload(), 500); + }); + }; -
-
- {isMinimized ? ( - - ) : ( - - )} - {!isMinimized && ( - Minimize - )} -
-
{} : logout} - className={clsx( - "hover:text-mti-rose flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out", - isMinimized ? "w-fit" : "w-full min-w-[250px] px-8", - )} - > - - {!isMinimized && ( - Log Out - )} -
-
- {focusMode && ( - - )} -
- ); + const disableNavigation = preventNavigation(navDisabled, focusMode); + + return ( +
+
+
+
+
+ +
+
+ {isMinimized ? : } + {!isMinimized && Minimize} +
+
{} : logout} + className={clsx( + "hover:text-mti-rose flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out", + isMinimized ? "w-fit" : "w-full min-w-[250px] px-8", + )}> + + {!isMinimized && Log Out} +
+
+ {focusMode && } +
+ ); } diff --git a/src/hooks/useTickets.tsx b/src/hooks/useTickets.tsx index c90fd639..9a5ba240 100644 --- a/src/hooks/useTickets.tsx +++ b/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([]); const [isLoading, setIsLoading] = useState(false); const [isError, setIsError] = useState(false); - const getData = () => { + const getData = useCallback(() => { setIsLoading(true); axios .get(`/api/tickets`) .then((response) => setTickets(response.data)) .finally(() => setIsLoading(false)); - }; + }, []); - useEffect(getData, []); + useEffect(getData, [getData]); return { tickets, isLoading, isError, reload: getData }; } diff --git a/src/hooks/useTicketsListener.tsx b/src/hooks/useTicketsListener.tsx new file mode 100644 index 00000000..520ee947 --- /dev/null +++ b/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;