Merged in feature-ticket-badge (pull request #36)

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

Approved-by: Tiago Ribeiro

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}
 				/>
 				<div
 					className={clsx(

src/components/Sidebar.tsx

@@ -21,9 +21,10 @@ import { useRouter } from "next/router";
 import axios from "axios";
 import FocusLayer from "@/components/FocusLayer";
 import {preventNavigation} from "@/utils/navigation.disabled";
-import { useState } from "react";
+import {useEffect, useState} from "react";
 import usePreferencesStore from "@/stores/preferencesStore";
 import {Type} from "@/interfaces/user";
+import useTicketsListener from "@/hooks/useTicketsListener";
 interface Props {
 	path: string;
 	navDisabled?: boolean;
@@ -31,6 +32,7 @@ interface Props {
 	onFocusLayerMouseEnter?: () => void;
 	className?: string;
 	userType?: Type;
+	userId?: string;
 }
 
 interface NavProps {
@@ -40,47 +42,44 @@ interface NavProps {
 	keyPath: string;
 	disabled?: boolean;
 	isMinimized?: boolean;
+	badge?: number;
 }
 
-const Nav = ({
-  Icon,
-  label,
-  path,
-  keyPath,
-  disabled = false,
-  isMinimized = false,
-}: NavProps) => (
+const Nav = ({Icon, label, path, keyPath, disabled = false, isMinimized = false, badge}: NavProps) => {
+	return (
 		<Link
 			href={!disabled ? keyPath : ""}
 			className={clsx(
 				"flex items-center gap-4 rounded-full p-4 text-gray-500 hover:text-white",
-      "transition-all duration-300 ease-in-out",
-      disabled
-        ? "hover:bg-mti-gray-dim cursor-not-allowed"
-        : "hover:bg-mti-purple-light cursor-pointer",
+				"transition-all duration-300 ease-in-out relative",
+				disabled ? "hover:bg-mti-gray-dim cursor-not-allowed" : "hover:bg-mti-purple-light cursor-pointer",
 				path === keyPath && "bg-mti-purple-light text-white",
 				isMinimized ? "w-fit" : "w-full min-w-[200px] px-8 2xl:min-w-[220px]",
-    )}
-  >
+			)}>
 			<Icon size={24} />
 			{!isMinimized && <span className="text-lg font-semibold">{label}</span>}
+			{!!badge && badge > 0 && (
+				<div
+					className={clsx(
+						"bg-mti-purple-light h-5 w-5 text-xs rounded-full flex items-center justify-center text-white",
+						"transition ease-in-out duration-300",
+						isMinimized && "absolute right-0 top-0",
+					)}>
+					{badge}
+				</div>
+			)}
 		</Link>
 	);
+};
 
-export default function Sidebar({
-  path,
-  navDisabled = false,
-  focusMode = false,
-  userType,
-  onFocusLayerMouseEnter,
-  className,
-}: Props) {
+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 {totalAssignedTickets} = useTicketsListener(userId);
+
+	useEffect(() => console.log(totalAssignedTickets), [totalAssignedTickets]);
 
 	const logout = async () => {
 		axios.post("/api/logout").finally(() => {
@@ -96,20 +95,10 @@ export default function Sidebar({
 				"relative flex h-full flex-col justify-between bg-transparent px-4 py-4 pb-8",
 				isMinimized ? "w-fit" : "-xl:w-fit w-1/6",
 				className,
-      )}
-    >
+			)}>
 			<div className="-xl:hidden flex-col gap-3 xl:flex">
-        <Nav
-          disabled={disableNavigation}
-          Icon={MdSpaceDashboard}
-          label="Dashboard"
-          path={path}
-          keyPath="/"
-          isMinimized={isMinimized}
-        />
-        {(userType === "student" ||
-          userType === "teacher" ||
-          userType === "developer") && (
+				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={isMinimized} />
+				{(userType === "student" || userType === "teacher" || userType === "developer") && (
 					<>
 						<Nav
 							disabled={disableNavigation}
@@ -129,25 +118,9 @@ export default function Sidebar({
 						/>
 					</>
 				)}
-        <Nav
-          disabled={disableNavigation}
-          Icon={BsGraphUp}
-          label="Stats"
-          path={path}
-          keyPath="/stats"
-          isMinimized={isMinimized}
-        />
-        <Nav
-          disabled={disableNavigation}
-          Icon={BsClockHistory}
-          label="Record"
-          path={path}
-          keyPath="/record"
-          isMinimized={isMinimized}
-        />
-        {["admin", "developer", "agent", "corporate"].includes(
-          userType || "",
-        ) && (
+				<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
+				<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={isMinimized} />
+				{["admin", "developer", "agent", "corporate"].includes(userType || "") && (
 					<Nav
 						disabled={disableNavigation}
 						Icon={BsCurrencyDollar}
@@ -157,9 +130,7 @@ export default function Sidebar({
 						isMinimized={isMinimized}
 					/>
 				)}
-        {["admin", "developer", "corporate", "teacher"].includes(
-          userType || "",
-        ) && (
+				{["admin", "developer", "corporate", "teacher"].includes(userType || "") && (
 					<Nav
 						disabled={disableNavigation}
 						Icon={BsShieldFill}
@@ -177,6 +148,7 @@ export default function Sidebar({
 						path={path}
 						keyPath="/tickets"
 						isMinimized={isMinimized}
+						badge={totalAssignedTickets}
 					/>
 				)}
 				{userType === "developer" && (
@@ -191,65 +163,16 @@ export default function Sidebar({
 				)}
 			</div>
 			<div className="-xl:flex flex-col gap-3 xl:hidden">
-        <Nav
-          disabled={disableNavigation}
-          Icon={MdSpaceDashboard}
-          label="Dashboard"
-          path={path}
-          keyPath="/"
-          isMinimized={true}
-        />
-        <Nav
-          disabled={disableNavigation}
-          Icon={BsFileEarmarkText}
-          label="Exams"
-          path={path}
-          keyPath="/exam"
-          isMinimized={true}
-        />
-        <Nav
-          disabled={disableNavigation}
-          Icon={BsPencil}
-          label="Exercises"
-          path={path}
-          keyPath="/exercises"
-          isMinimized={true}
-        />
-        <Nav
-          disabled={disableNavigation}
-          Icon={BsGraphUp}
-          label="Stats"
-          path={path}
-          keyPath="/stats"
-          isMinimized={true}
-        />
-        <Nav
-          disabled={disableNavigation}
-          Icon={BsClockHistory}
-          label="Record"
-          path={path}
-          keyPath="/record"
-          isMinimized={true}
-        />
+				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={true} />
+				<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized={true} />
+				<Nav disabled={disableNavigation} Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" isMinimized={true} />
+				<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={true} />
+				<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={true} />
 				{userType !== "student" && (
-          <Nav
-            disabled={disableNavigation}
-            Icon={BsShieldFill}
-            label="Settings"
-            path={path}
-            keyPath="/settings"
-            isMinimized={true}
-          />
+					<Nav disabled={disableNavigation} Icon={BsShieldFill} label="Settings" path={path} keyPath="/settings" isMinimized={true} />
 				)}
 				{userType === "developer" && (
-          <Nav
-            disabled={disableNavigation}
-            Icon={BsCloudFill}
-            label="Generation"
-            path={path}
-            keyPath="/generation"
-            isMinimized={true}
-          />
+					<Nav disabled={disableNavigation} Icon={BsCloudFill} label="Generation" path={path} keyPath="/generation" isMinimized={true} />
 				)}
 			</div>
 
@@ -261,16 +184,9 @@ export default function Sidebar({
 					className={clsx(
 						"hover:text-mti-rose -xl:hidden 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 ? (
-            <BsChevronBarRight size={24} />
-          ) : (
-            <BsChevronBarLeft size={24} />
-          )}
-          {!isMinimized && (
-            <span className="text-lg font-medium">Minimize</span>
-          )}
+					)}>
+					{isMinimized ? <BsChevronBarRight size={24} /> : <BsChevronBarLeft size={24} />}
+					{!isMinimized && <span className="text-lg font-medium">Minimize</span>}
 				</div>
 				<div
 					role="button"
@@ -279,17 +195,12 @@ export default function Sidebar({
 					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",
-          )}
-        >
+					)}>
 					<RiLogoutBoxFill size={24} />
-          {!isMinimized && (
-            <span className="-xl:hidden text-lg font-medium">Log Out</span>
-          )}
+					{!isMinimized && <span className="-xl:hidden text-lg font-medium">Log Out</span>}
 				</div>
 			</div>
-      {focusMode && (
-        <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
-      )}
+			{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
 		</section>
 	);
 }

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;