Handle project list loading issue

src/hooks/useProjects.js

@@ -2,26 +2,25 @@ import { useEffect, useState } from "react";
 import { cacheData, getCachedData } from "../slices/apiDataManager";
 import ProjectRepository from "../repositories/ProjectRepository";
 import { useProfile } from "./useProfile";
-import {useDispatch} from "react-redux";
+import { useDispatch } from "react-redux";
 import { setProjectId } from "../slices/localVariablesSlice";
 
-export const useProjects = () =>
-{
-  const {profile} = useProfile()
+export const useProjects = () => {
+  const { profile } = useProfile();
   const dispatch = useDispatch();
   const [projects, setProjects] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
 
+  const projects_cache = getCachedData("projectslist");
   const fetchData = async () => {
-    const projectIds = profile?.projects || []; 
-  
+    const projectIds = profile?.projects || [];
+
     const filterProjects = (projectsList) => {
       return projectsList
         .filter((proj) => projectIds.includes(String(proj.id)))
         .sort((a, b) => a.name.localeCompare(b.name));
     };
-  
 
     if (!projects_cache) {
       setLoading(true);
@@ -30,7 +29,7 @@ export const useProjects = () =>
         const allProjects = response.data;
         const filtered = filterProjects(allProjects);
         setProjects(filtered);
-        cacheData("projectslist", allProjects); 
+        cacheData("projectslist", allProjects);
       } catch (err) {
         setError("Failed to fetch data.");
       } finally {
@@ -40,20 +39,15 @@ export const useProjects = () =>
       if (!projects.length) {
         const filtered = filterProjects(projects_cache);
         setProjects(filtered);
-
       }
     }
   };
 
-  useEffect( () =>
-    {
-    if ( profile )
-    {
+  useEffect(() => {
+    if (profile) {
       fetchData();
     }
-  }, []);
-
-
+  }, [profile]);
 
   return { projects, loading, error, refetch: fetchData };
 };