Merge pull request #59 from dakshesh14/fix/issue_view

fix: sidebar collapsed hydration, changing list view type causing weird behavior

apps/app/contexts/theme.context.tsx

@@ -44,12 +44,13 @@ type ContextType = {
   groupByProperty: NestedKeyOf<IIssue> | null;
   filterIssue: "activeIssue" | "backlogIssue" | null;
   toggleCollapsed: () => void;
-  setIssueView: (display: "list" | "kanban") => void;
   setGroupByProperty: (property: NestedKeyOf<IIssue> | null) => void;
   setOrderBy: (property: NestedKeyOf<IIssue> | null) => void;
   setFilterIssue: (property: "activeIssue" | "backlogIssue" | null) => void;
   resetFilterToDefault: () => void;
   setNewFilterDefaultView: () => void;
+  setIssueViewToKanban: () => void;
+  setIssueViewToList: () => void;
 };
 
 type StateType = Theme;
@@ -72,9 +73,12 @@ export const reducer: ReducerFunctionType = (state, action) => {
         ...state,
         collapsed: !state.collapsed,
       };
+      localStorage.setItem("collapsed", JSON.stringify(newState.collapsed));
       return newState;
     case REHYDRATE_THEME: {
-      return { ...initialState, ...payload };
+      let collapsed: any = localStorage.getItem("collapsed");
+      collapsed = collapsed ? JSON.parse(collapsed) : false;
+      return { ...initialState, ...payload, collapsed };
     }
     case SET_ISSUE_VIEW: {
       const newState = {
@@ -159,23 +163,47 @@ export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({
     });
   }, []);
 
-  const setIssueView = useCallback(
-    (display: "list" | "kanban") => {
-      dispatch({
-        type: SET_ISSUE_VIEW,
-        payload: {
-          issueView: display,
-        },
-      });
+  const setIssueViewToKanban = useCallback(() => {
+    dispatch({
+      type: SET_ISSUE_VIEW,
+      payload: {
+        issueView: "kanban",
+      },
+    });
+    dispatch({
+      type: SET_GROUP_BY_PROPERTY,
+      payload: {
+        groupByProperty: "state_detail.name",
+      },
+    });
+    if (!activeWorkspace || !activeProject) return;
+    saveDataToServer(activeWorkspace.slug, activeProject.id, {
+      ...state,
+      issueView: "kanban",
+      groupByProperty: "state_detail.name",
+    });
+  }, [activeWorkspace, activeProject, state]);
 
-      if (!activeWorkspace || !activeProject) return;
-      saveDataToServer(activeWorkspace.slug, activeProject.id, {
-        ...state,
-        issueView: display,
-      });
-    },
-    [activeProject, activeWorkspace, state]
-  );
+  const setIssueViewToList = useCallback(() => {
+    dispatch({
+      type: SET_ISSUE_VIEW,
+      payload: {
+        issueView: "list",
+      },
+    });
+    dispatch({
+      type: SET_GROUP_BY_PROPERTY,
+      payload: {
+        groupByProperty: null,
+      },
+    });
+    if (!activeWorkspace || !activeProject) return;
+    saveDataToServer(activeWorkspace.slug, activeProject.id, {
+      ...state,
+      issueView: "list",
+      groupByProperty: null,
+    });
+  }, [activeWorkspace, activeProject, state]);
 
   const setGroupByProperty = useCallback(
     (property: NestedKeyOf<IIssue> | null) => {
@@ -259,7 +287,6 @@ export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({
         collapsed: state.collapsed,
         toggleCollapsed,
         issueView: state.issueView,
-        setIssueView,
         groupByProperty: state.groupByProperty,
         setGroupByProperty,
         orderBy: state.orderBy,
@@ -268,6 +295,8 @@ export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({
         setFilterIssue,
         resetFilterToDefault: resetToDefault,
         setNewFilterDefaultView: setNewDefaultView,
+        setIssueViewToKanban,
+        setIssueViewToList,
       }}
     >
       <ToastAlert />

apps/app/lib/hooks/useIssuesFilter.tsx

@@ -10,7 +10,6 @@ import type { IIssue } from "types";
 const useIssuesFilter = (projectIssues: IIssue[]) => {
   const {
     issueView,
-    setIssueView,
     groupByProperty,
     setGroupByProperty,
     orderBy,
@@ -19,6 +18,8 @@ const useIssuesFilter = (projectIssues: IIssue[]) => {
     setFilterIssue,
     resetFilterToDefault,
     setNewFilterDefaultView,
+    setIssueViewToKanban,
+    setIssueViewToList,
   } = useTheme();
 
   const { states } = useUser();
@@ -90,7 +91,6 @@ const useIssuesFilter = (projectIssues: IIssue[]) => {
   return {
     groupedByIssues,
     issueView,
-    setIssueView,
     groupByProperty,
     setGroupByProperty,
     orderBy,
@@ -99,6 +99,8 @@ const useIssuesFilter = (projectIssues: IIssue[]) => {
     setFilterIssue,
     resetFilterToDefault,
     setNewFilterDefaultView,
+    setIssueViewToKanban,
+    setIssueViewToList,
   } as const;
 };
 

apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx

@@ -126,7 +126,6 @@ const SingleCycle: React.FC = () => {
 
   const {
     issueView,
-    setIssueView,
     groupByProperty,
     setGroupByProperty,
     groupedByIssues,
@@ -134,6 +133,8 @@ const SingleCycle: React.FC = () => {
     setFilterIssue,
     orderBy,
     filterIssue,
+    setIssueViewToKanban,
+    setIssueViewToList,
   } = useIssuesFilter(cycleIssuesArray ?? []);
 
   const openCreateIssueModal = (
@@ -269,10 +270,7 @@ const SingleCycle: React.FC = () => {
                 className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
                   issueView === "list" ? "bg-gray-200" : ""
                 }`}
-                onClick={() => {
-                  setIssueView("list");
-                  setGroupByProperty(null);
-                }}
+                onClick={() => setIssueViewToList()}
               >
                 <ListBulletIcon className="h-4 w-4" />
               </button>
@@ -281,10 +279,7 @@ const SingleCycle: React.FC = () => {
                 className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
                   issueView === "kanban" ? "bg-gray-200" : ""
                 }`}
-                onClick={() => {
-                  setIssueView("kanban");
-                  setGroupByProperty("state_detail.name");
-                }}
+                onClick={() => setIssueViewToKanban()}
               >
                 <Squares2X2Icon className="h-4 w-4" />
               </button>

apps/app/pages/projects/[projectId]/issues/index.tsx

@@ -134,7 +134,6 @@ const ProjectIssues: NextPage = () => {
 
   const {
     issueView,
-    setIssueView,
     groupByProperty,
     setGroupByProperty,
     groupedByIssues,
@@ -144,6 +143,8 @@ const ProjectIssues: NextPage = () => {
     filterIssue,
     resetFilterToDefault,
     setNewFilterDefaultView,
+    setIssueViewToKanban,
+    setIssueViewToList,
   } = useIssuesFilter(projectIssues?.results.filter((p) => p.parent === null) ?? []);
 
   useEffect(() => {
@@ -171,10 +172,7 @@ const ProjectIssues: NextPage = () => {
               className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
                 issueView === "list" ? "bg-gray-200" : ""
               }`}
-              onClick={() => {
-                setIssueView("list");
-                setGroupByProperty(null);
-              }}
+              onClick={() => setIssueViewToList()}
             >
               <ListBulletIcon className="h-4 w-4" />
             </button>
@@ -183,10 +181,7 @@ const ProjectIssues: NextPage = () => {
               className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
                 issueView === "kanban" ? "bg-gray-200" : ""
               }`}
-              onClick={() => {
-                setIssueView("kanban");
-                setGroupByProperty("state_detail.name");
-              }}
+              onClick={() => setIssueViewToKanban()}
             >
               <Squares2X2Icon className="h-4 w-4" />
             </button>