fix: bugs on the user profile page (#2018)

apps/app/components/profile/sidebar.tsx

@@ -3,8 +3,6 @@ import Link from "next/link";
 
 import useSWR from "swr";
 
-// next-themes
-import { useTheme } from "next-themes";
 // headless ui
 import { Disclosure, Transition } from "@headlessui/react";
 // services
@@ -25,8 +23,6 @@ export const ProfileSidebar = () => {
   const router = useRouter();
   const { workspaceSlug, userId } = router.query;
 
-  const { theme } = useTheme();
-
   const { user } = useUser();
 
   const { data: userProjectsData } = useSWR(
@@ -56,15 +52,7 @@ export const ProfileSidebar = () => {
   ];
 
   return (
-    <div
-      className="flex-shrink-0 md:h-full w-full md:w-80 overflow-y-auto"
-      style={{
-        boxShadow:
-          theme === "light"
-            ? "0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 1px 12px 0px rgba(0, 0, 0, 0.12)"
-            : "0px 0px 4px 0px rgba(0, 0, 0, 0.20), 0px 2px 6px 0px rgba(0, 0, 0, 0.50)",
-      }}
-    >
+    <div className="flex-shrink-0 md:h-full w-full md:w-80 overflow-y-auto shadow-custom-shadow-sm">
       {userProjectsData ? (
         <>
           <div className="relative h-32">
@@ -127,12 +115,11 @@ export const ProfileSidebar = () => {
                   project.assigned_issues +
                   project.pending_issues +
                   project.completed_issues;
-                const totalAssignedIssues = totalIssues - project.created_issues;
 
                 const completedIssuePercentage =
-                  totalAssignedIssues === 0
+                  project.assigned_issues === 0
                     ? 0
-                    : Math.round((project.completed_issues / totalAssignedIssues) * 100);
+                    : Math.round((project.completed_issues / project.assigned_issues) * 100);
 
                 return (
                   <Disclosure

apps/app/contexts/profile-issues-context.tsx

@@ -197,23 +197,26 @@ export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode
 }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
-  const setIssueView = useCallback((property: TIssueViewOptions) => {
-    dispatch({
-      type: "SET_ISSUE_VIEW",
-      payload: {
-        issueView: property,
-      },
-    });
-
-    if (property === "kanban") {
+  const setIssueView = useCallback(
+    (property: TIssueViewOptions) => {
       dispatch({
-        type: "SET_GROUP_BY_PROPERTY",
+        type: "SET_ISSUE_VIEW",
         payload: {
-          groupByProperty: "state_detail.group",
+          issueView: property,
         },
       });
-    }
-  }, []);
+
+      if (property === "kanban" && state.groupByProperty === null) {
+        dispatch({
+          type: "SET_GROUP_BY_PROPERTY",
+          payload: {
+            groupByProperty: "state_detail.group",
+          },
+        });
+      }
+    },
+    [state]
+  );
 
   const setGroupByProperty = useCallback((property: TIssueGroupByOptions) => {
     dispatch({

apps/app/hooks/use-profile-issues.tsx

@@ -71,8 +71,23 @@ const useProfileIssues = (workspaceSlug: string | undefined, userId: string | un
         allIssues: userProfileIssues,
       };
 
+    if (groupByProperty === "state_detail.group") {
+      return userProfileIssues
+        ? Object.assign(
+            {
+              backlog: [],
+              unstarted: [],
+              started: [],
+              completed: [],
+              cancelled: [],
+            },
+            userProfileIssues
+          )
+        : undefined;
+    }
+
     return userProfileIssues;
-  }, [userProfileIssues]);
+  }, [groupByProperty, userProfileIssues]);
 
   useEffect(() => {
     if (!userId || !filters) return;