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.

Author: oscarlund121

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: () => {},
 })

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>
   );

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,55 +44,55 @@ 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,
   selected,
   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>
-      }
+      )}
     </>
-  )
-}
+  );
+};