ENCOA-316 ENCOA-317:

Refactor components to remove Layout wrapper and pass it in the App component , implemented a skeleton feedback while loading page and improved API calls related to Dashboard/User Profile

src/hooks/useEntities.tsx

@@ -1,23 +1,22 @@
 import { EntityWithRoles } from "@/interfaces/entity";
-import { Discount } from "@/interfaces/paypal";
-import { Code, Group, User } from "@/interfaces/user";
 import axios from "axios";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
-export default function useEntities() {
+export default function useEntities(shouldNot?: boolean) {
   const [entities, setEntities] = useState<EntityWithRoles[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
 
-  const getData = () => {
+  const getData = useCallback(() => {
+    if (shouldNot) return;
     setIsLoading(true);
     axios
       .get<EntityWithRoles[]>("/api/entities?showRoles=true")
       .then((response) => setEntities(response.data))
       .finally(() => setIsLoading(false));
-  };
+  }, [shouldNot]);
 
-  useEffect(getData, []);
+  useEffect(getData, [getData])
 
   return { entities, isLoading, isError, reload: getData };
 }

src/hooks/useStats.tsx

@@ -0,0 +1,42 @@
+import axios from "axios";
+import { useCallback, useEffect, useState } from "react";
+
+export default function useStats<T extends any>(
+  id?: string,
+  shouldNotQuery: boolean = !id,
+  queryType: string = "stats"
+) {
+  type ElementType = T extends (infer U)[] ? U : never;
+
+  const [data, setData] = useState<T>({} as unknown as T);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  const getData = useCallback(() => {
+    if (shouldNotQuery) return;
+
+    setIsLoading(true);
+    setIsError(false);
+    let endpoint = `/api/stats/user/${id}`;
+    if (queryType) endpoint += `?query=${queryType}`;
+    axios
+      .get<T>(endpoint)
+      .then((response) => {
+        console.log(response.data);
+        setData(response.data);
+      })
+      .catch(() => setIsError(true))
+      .finally(() => setIsLoading(false));
+  }, [id, shouldNotQuery, queryType]);
+
+  useEffect(() => {
+    getData();
+  }, [getData]);
+
+  return {
+    data,
+    reload: getData,
+    isLoading,
+    isError,
+  };
+}

src/hooks/useTicketsListener.tsx

@@ -1,26 +1,28 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import axios from "axios";
 
-const useTicketsListener = (userId?: string) => {
+const useTicketsListener = (userId?: string, canFetch?: boolean) => {
   const [assignedTickets, setAssignedTickets] = useState([]);
 
-  const getData = () => {
+  const getData = useCallback(() => {
     axios
       .get("/api/tickets/assignedToUser")
       .then((response) => setAssignedTickets(response.data));
-  };
-
-  useEffect(() => {
-    getData();
   }, []);
 
   useEffect(() => {
+    if (!canFetch) return;
+    getData();
+  }, [canFetch, getData]);
+
+  useEffect(() => {
+    if (!canFetch) return;
     const intervalId = setInterval(() => {
       getData();
     }, 60 * 1000);
 
     return () => clearInterval(intervalId);
-  }, [assignedTickets]);
+  }, [assignedTickets, canFetch, getData]);
 
   if (userId) {
     return {