From aafb080eab29049c01f05bb48dfbfa533379ff3d Mon Sep 17 00:00:00 2001
From: Oscar <albertlund121@gmail.com>
Date: Wed, 1 Oct 2025 10:38:12 +0200
Subject: [PATCH 1/4] Adds project refresh functionality to context and UI

Introduces a `refreshProjects` method to the ProjectsContext, enabling manual and programmatic refresh of project data. Updates the ProjectsContextProvider to include this method and refactors the initial refresh logic.

Integrates the refresh functionality into the ProjectListItem component to trigger a refresh when a project is selected. Also includes minor code style improvements for consistency.
---
 src/common/context/ProjectsContext.ts         |   2 +
 .../projects/view/ProjectsContextProvider.tsx |  45 +++----
 .../sidebar/projects/ProjectListItem.tsx      | 121 +++++++++---------
 3 files changed, 84 insertions(+), 84 deletions(-)

diff --git a/src/common/context/ProjectsContext.ts b/src/common/context/ProjectsContext.ts
index f4d30699..4666e695 100644
--- a/src/common/context/ProjectsContext.ts
+++ b/src/common/context/ProjectsContext.ts
@@ -8,9 +8,11 @@ export const SidebarTogglableContext = createContext<boolean>(true)
 type ProjectsContextValue = {
   refreshing: boolean,
   projects: Project[],
+  refreshProjects: () => void,
 }
 
 export const ProjectsContext = createContext<ProjectsContextValue>({
   refreshing: false,
   projects: [],
+  refreshProjects: () => {},
 })
diff --git a/src/features/projects/view/ProjectsContextProvider.tsx b/src/features/projects/view/ProjectsContextProvider.tsx
index 639363e1..f4200e85 100644
--- a/src/features/projects/view/ProjectsContextProvider.tsx
+++ b/src/features/projects/view/ProjectsContextProvider.tsx
@@ -19,43 +19,34 @@ const ProjectsContextProvider = ({
     setProjects(value);
   };
 
+  const refreshProjects = () => {
+    if (isLoadingRef.current) return;
+    isLoadingRef.current = true;
+    setRefreshing(true);
+    fetch("/api/refresh-projects", { method: "POST" })
+      .then((res) => res.json())
+      .then(({ projects }) => {
+        if (projects) setProjectsAndRefreshed(projects);
+      })
+      .catch((error) => console.error("Failed to refresh projects", error))
+      .finally(() => {
+        isLoadingRef.current = false;
+        setRefreshing(false);
+      });
+  };
+
   // Trigger background refresh after initial mount
   useEffect(() => {
-    const refreshProjects = () => {
-      if (isLoadingRef.current) {
-        return; 
-      }
-      isLoadingRef.current = true;
-      setRefreshing(true);
-      fetch("/api/refresh-projects", { method: "POST" })
-        .then((res) => res.json())
-        .then(({ projects }) => {
-          if (projects) setProjectsAndRefreshed(projects);
-        })
-        .catch((error) => console.error("Failed to refresh projects", error))
-        .finally(() => {
-          isLoadingRef.current = false;
-          setRefreshing(false);
-        });
-    };
-    // Initial refresh
     refreshProjects();
     const handleVisibilityChange = () => {
       if (!document.hidden) refreshProjects();
     };
-
     document.addEventListener("visibilitychange", handleVisibilityChange);
-    return () =>
-      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
   }, []);
 
   return (
-    <ProjectsContext.Provider
-      value={{
-        projects,
-        refreshing,
-      }}
-    >
+    <ProjectsContext.Provider value={{ projects, refreshing,refreshProjects }}>
       {children}
     </ProjectsContext.Provider>
   );
diff --git a/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx b/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx
index ec9b852d..cfa9294b 100644
--- a/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx
+++ b/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import {
   Box,
@@ -7,26 +7,33 @@ import {
   ListItemButton,
   Skeleton as MuiSkeleton,
   Stack,
-  Typography
-} from "@mui/material"
-import MenuItemHover from "@/common/ui/MenuItemHover"
-import { Project } from "@/features/projects/domain"
-import { useProjectSelection } from "@/features/projects/data"
-import ProjectAvatar, { Squircle as ProjectAvatarSquircle } from "./ProjectAvatar"
-import { useCloseSidebarOnSelection } from "@/features/sidebar/data"
+  Typography,
+} from "@mui/material";
+import MenuItemHover from "@/common/ui/MenuItemHover";
+import { Project } from "@/features/projects/domain";
+import { useProjectSelection } from "@/features/projects/data";
+import { useContext } from "react";
+import { ProjectsContext } from "@/common";
+import ProjectAvatar, {
+  Squircle as ProjectAvatarSquircle,
+} from "./ProjectAvatar";
+import { useCloseSidebarOnSelection } from "@/features/sidebar/data";
 
-const AVATAR_SIZE = { width: 40, height: 40 }
+const AVATAR_SIZE = { width: 40, height: 40 };
 
 const ProjectListItem = ({ project }: { project: Project }) => {
-  const { project: selectedProject, selectProject } = useProjectSelection()
-  const selected = project.id === selectedProject?.id
-  const { closeSidebarIfNeeded } = useCloseSidebarOnSelection()
+  const { project: selectedProject, selectProject } = useProjectSelection();
+  const { refreshProjects } = useContext(ProjectsContext);
+  const selected = project.id === selectedProject?.id;
+  const { closeSidebarIfNeeded } = useCloseSidebarOnSelection();
+
   return (
     <Template
       selected={selected}
       onSelect={() => {
-        closeSidebarIfNeeded()
-        selectProject(project)
+        closeSidebarIfNeeded();
+        selectProject(project);
+        refreshProjects();
       }}
       avatar={
         <ProjectAvatar
@@ -37,26 +44,32 @@ const ProjectListItem = ({ project }: { project: Project }) => {
       }
       title={project.displayName}
     />
-  )
-}
+  );
+};
 
-export default ProjectListItem
+export default ProjectListItem;
 
 export const Skeleton = () => {
   return (
-    <Template disabled avatar={
-      <ProjectAvatarSquircle width={AVATAR_SIZE.width} height={AVATAR_SIZE.height}>
-        <MuiSkeleton
-          variant="rectangular"
-          animation="wave"
-          sx={{ width: "100%", height: "100%" }}
-        />
-      </ProjectAvatarSquircle>
-    }>
+    <Template
+      disabled
+      avatar={
+        <ProjectAvatarSquircle
+          width={AVATAR_SIZE.width}
+          height={AVATAR_SIZE.height}
+        >
+          <MuiSkeleton
+            variant="rectangular"
+            animation="wave"
+            sx={{ width: "100%", height: "100%" }}
+          />
+        </ProjectAvatarSquircle>
+      }
+    >
       <MuiSkeleton variant="text" animation="wave" width={100} />
     </Template>
-  )
-}
+  );
+};
 
 export const Template = ({
   disabled,
@@ -64,28 +77,22 @@ export const Template = ({
   onSelect,
   avatar,
   title,
-  children
+  children,
 }: {
-  disabled?: boolean
-  selected?: boolean
-  onSelect?: () => void
-  avatar: React.ReactNode
-  title?: string
-  children?: React.ReactNode
+  disabled?: boolean;
+  selected?: boolean;
+  onSelect?: () => void;
+  avatar: React.ReactNode;
+  title?: string;
+  children?: React.ReactNode;
 }) => {
   return (
     <ListItem disablePadding>
-      <Button
-        disabled={disabled}
-        selected={selected}
-        onSelect={onSelect}
-      >
+      <Button disabled={disabled} selected={selected} onSelect={onSelect}>
         <MenuItemHover disabled={disabled}>
           <Stack direction="row" alignItems="center" spacing={1.5}>
-            <Box sx={{ width: 40, height: 40 }}>
-              {avatar}
-            </Box>
-            {title &&
+            <Box sx={{ width: 40, height: 40 }}>{avatar}</Box>
+            {title && (
               <ListItemText
                 primary={
                   <Typography
@@ -95,37 +102,37 @@ export const Template = ({
                       letterSpacing: 0.1,
                       whiteSpace: "nowrap",
                       overflow: "hidden",
-                      textOverflow: "ellipsis"
+                      textOverflow: "ellipsis",
                     }}
                   >
                     {title}
                   </Typography>
                 }
               />
-            }
+            )}
             {children}
           </Stack>
         </MenuItemHover>
       </Button>
     </ListItem>
-  )
-}
+  );
+};
 
 const Button = ({
   disabled,
   selected,
   onSelect,
-  children
+  children,
 }: {
-  disabled?: boolean
-  selected?: boolean
-  onSelect?: () => void
-  children?: React.ReactNode
+  disabled?: boolean;
+  selected?: boolean;
+  onSelect?: () => void;
+  children?: React.ReactNode;
 }) => {
   return (
     <>
       {disabled && children}
-      {!disabled &&
+      {!disabled && (
         <ListItemButton
           disabled={disabled}
           onClick={onSelect}
@@ -135,7 +142,7 @@ const Button = ({
         >
           {children}
         </ListItemButton>
-      }
+      )}
     </>
-  )
-}
+  );
+};

From c8698838c824080cd7d83c85131f8ed1a5bc6670 Mon Sep 17 00:00:00 2001
From: Oscar <albertlund121@gmail.com>
Date: Wed, 1 Oct 2025 11:01:56 +0200
Subject: [PATCH 2/4] useCallback from react added to avoid loading loop

---
 .../projects/view/ProjectsContextProvider.tsx | 55 ++++++++++---------
 1 file changed, 30 insertions(+), 25 deletions(-)

diff --git a/src/features/projects/view/ProjectsContextProvider.tsx b/src/features/projects/view/ProjectsContextProvider.tsx
index f4200e85..c61c728c 100644
--- a/src/features/projects/view/ProjectsContextProvider.tsx
+++ b/src/features/projects/view/ProjectsContextProvider.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import { ProjectsContext } from "@/common";
 import { Project } from "@/features/projects/domain";
 
@@ -15,38 +15,43 @@ const ProjectsContextProvider = ({
   const [refreshing, setRefreshing] = useState(false);
   const isLoadingRef = useRef(false);
 
+
   const setProjectsAndRefreshed = (value: Project[]) => {
     setProjects(value);
   };
 
-  const refreshProjects = () => {
-    if (isLoadingRef.current) return;
-    isLoadingRef.current = true;
-    setRefreshing(true);
-    fetch("/api/refresh-projects", { method: "POST" })
-      .then((res) => res.json())
-      .then(({ projects }) => {
-        if (projects) setProjectsAndRefreshed(projects);
-      })
-      .catch((error) => console.error("Failed to refresh projects", error))
-      .finally(() => {
-        isLoadingRef.current = false;
-        setRefreshing(false);
-      });
-  };
+const refreshProjects = useCallback(() => {
+  if (isLoadingRef.current) return;
+  isLoadingRef.current = true;
+  setRefreshing(true);
+  fetch("/api/refresh-projects", { method: "POST" })
+    .then((res) => res.json())
+    .then(({ projects }) => {
+      if (projects) setProjectsAndRefreshed(projects);
+    })
+    .catch((error) => console.error("Failed to refresh projects", error))
+    .finally(() => {
+      isLoadingRef.current = false;
+      setRefreshing(false);
+    });
+}, []); 
 
   // Trigger background refresh after initial mount
-  useEffect(() => {
-    refreshProjects();
-    const handleVisibilityChange = () => {
-      if (!document.hidden) refreshProjects();
-    };
-    document.addEventListener("visibilitychange", handleVisibilityChange);
-    return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
-  }, []);
+
+useEffect(() => {
+  // Initial refresh
+  refreshProjects();
+  const handleVisibilityChange = () => {
+    if (!document.hidden) refreshProjects();
+  };
+  document.addEventListener("visibilitychange", handleVisibilityChange);
+  return () => {
+    document.removeEventListener("visibilitychange", handleVisibilityChange);
+  };
+}, [refreshProjects]); 
 
   return (
-    <ProjectsContext.Provider value={{ projects, refreshing,refreshProjects }}>
+    <ProjectsContext.Provider value={{ projects, refreshing, refreshProjects }}>
       {children}
     </ProjectsContext.Provider>
   );

From 5733e605b8a0d9e3f75d079e2827c8e84a1a031c Mon Sep 17 00:00:00 2001
From: Oscar <albertlund121@gmail.com>
Date: Wed, 1 Oct 2025 14:38:26 +0200
Subject: [PATCH 3/4] Removes unnecessary dependency from useEffect hook

Simplifies the useEffect dependency array by removing the
unneeded dependency on the refreshProjects function.

This prevents unnecessary re-renders and ensures the effect
runs only once, improving performance and maintaining expected
behavior. No functional changes introduced.
---
 src/features/projects/view/ProjectsContextProvider.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/features/projects/view/ProjectsContextProvider.tsx b/src/features/projects/view/ProjectsContextProvider.tsx
index c61c728c..f81ee7c2 100644
--- a/src/features/projects/view/ProjectsContextProvider.tsx
+++ b/src/features/projects/view/ProjectsContextProvider.tsx
@@ -37,7 +37,6 @@ const refreshProjects = useCallback(() => {
 }, []); 
 
   // Trigger background refresh after initial mount
-
 useEffect(() => {
   // Initial refresh
   refreshProjects();
@@ -48,7 +47,7 @@ useEffect(() => {
   return () => {
     document.removeEventListener("visibilitychange", handleVisibilityChange);
   };
-}, [refreshProjects]); 
+}, []); 
 
   return (
     <ProjectsContext.Provider value={{ projects, refreshing, refreshProjects }}>

From c6a4e3ff7aa3341942d993d5281b741811b65835 Mon Sep 17 00:00:00 2001
From: Oscar <albertlund121@gmail.com>
Date: Wed, 1 Oct 2025 14:50:32 +0200
Subject: [PATCH 4/4] Revert "Removes unnecessary dependency from useEffect
 hook"

This reverts commit 5733e605b8a0d9e3f75d079e2827c8e84a1a031c.
---
 src/features/projects/view/ProjectsContextProvider.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/features/projects/view/ProjectsContextProvider.tsx b/src/features/projects/view/ProjectsContextProvider.tsx
index f81ee7c2..c61c728c 100644
--- a/src/features/projects/view/ProjectsContextProvider.tsx
+++ b/src/features/projects/view/ProjectsContextProvider.tsx
@@ -37,6 +37,7 @@ const refreshProjects = useCallback(() => {
 }, []); 
 
   // Trigger background refresh after initial mount
+
 useEffect(() => {
   // Initial refresh
   refreshProjects();
@@ -47,7 +48,7 @@ useEffect(() => {
   return () => {
     document.removeEventListener("visibilitychange", handleVisibilityChange);
   };
-}, []); 
+}, [refreshProjects]); 
 
   return (
     <ProjectsContext.Provider value={{ projects, refreshing, refreshProjects }}>