feat : sidebar progress improvement (#272)

* feat: progress chart render validation

* fix: sidebar stats tab

* feat: sidebar active tab context

apps/app/components/core/sidebar/sidebar-progress-stats.tsx

@@ -20,6 +20,7 @@ import User from "public/user.png";
 import { IIssue, IIssueLabels } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
+import useLocalStorage from "hooks/use-local-storage";
 // types
 type Props = {
   groupedIssues: any;
@@ -38,6 +39,7 @@ const stateGroupColours: {
 
 export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues }) => {
   const router = useRouter();
+  const [tab, setTab] = useLocalStorage("tab", "Assignees");
   const { workspaceSlug, projectId } = router.query;
   const { data: issueLabels } = useSWR<IIssueLabels[]>(
     workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
@@ -52,8 +54,34 @@ export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues })
       ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
       : null
   );
+
+  const currentValue = (tab: string) => {
+    switch (tab) {
+      case "Assignees":
+        return 0;
+      case "Labels":
+        return 1;
+      case "States":
+        return 2;
+    }
+  };
   return (
-    <Tab.Group>
+    <Tab.Group
+      defaultIndex={currentValue(tab)}
+      onChange={(i) => {
+        switch (i) {
+          case 0:
+            return setTab("Assignees");
+          case 1:
+            return setTab("Labels");
+          case 2:
+            return setTab("States");
+
+          default:
+            return setTab("Assignees");
+        }
+      }}
+    >
       <Tab.List
         as="div"
         className="flex items-center justify-between w-full rounded bg-gray-100 text-xs"

apps/app/components/modules/sidebar.tsx

@@ -118,6 +118,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
       });
   }, [module, reset]);
 
+  const isStartValid = new Date(`${module?.start_date}`) <= new Date();
+  const isEndValid = new Date(`${module?.target_date}`) >= new Date(`${module?.start_date}`);
   return (
     <>
       <ModuleLinkModal
@@ -297,13 +299,20 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
               </div>
             </div>
             <div className="flex flex-col items-center justify-center w-full gap-2 ">
-              <ProgressChart
+              {isStartValid && isEndValid ? (
-                issues={issues}
+                <ProgressChart
-                start={module?.start_date ?? ""}
+                  issues={issues}
-                end={module?.target_date ?? ""}
+                  start={module?.start_date ?? ""}
-              />
+                  end={module?.target_date ?? ""}
-
+                />
-              <SidebarProgressStats issues={issues} groupedIssues={groupedIssues} />
+              ) : (
+                ""
+              )}
+              {issues.length > 0 ? (
+                <SidebarProgressStats issues={issues} groupedIssues={groupedIssues} />
+              ) : (
+                ""
+              )}
             </div>
           </>
         ) : (

apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx

@@ -101,6 +101,8 @@ const CycleDetailSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cycleIssue
       });
   }, [cycle, reset]);
 
+  const isStartValid = new Date(`${cycle?.start_date}`) <= new Date();
+  const isEndValid = new Date(`${cycle?.end_date}`) >= new Date(`${cycle?.start_date}`);
   return (
     <div
       className={`fixed top-0 ${
@@ -275,14 +277,22 @@ const CycleDetailSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cycleIssue
             <div className="py-1" />
           </div>
           <div className="flex flex-col items-center justify-center w-full gap-2 ">
-            <div className="relative h-[200px] w-full ">
+            {isStartValid && isEndValid ? (
-              <ProgressChart
+              <div className="relative h-[200px] w-full ">
-                issues={issues}
+                <ProgressChart
-                start={cycle?.start_date ?? ""}
+                  issues={issues}
-                end={cycle?.end_date ?? ""}
+                  start={cycle?.start_date ?? ""}
-              />
+                  end={cycle?.end_date ?? ""}
-            </div>
+                />
-            <SidebarProgressStats issues={issues} groupedIssues={groupedIssues} />
+              </div>
+            ) : (
+              ""
+            )}
+            {issues.length > 0 ? (
+              <SidebarProgressStats issues={issues} groupedIssues={groupedIssues} />
+            ) : (
+              ""
+            )}
           </div>
         </>
       ) : (

apps/app/hooks/use-local-storage.tsx

@@ -0,0 +1,22 @@
+import React, { useEffect, useState } from "react";
+
+const getSavedValue = (key: any, value: any) => {
+  const savedValue = localStorage.getItem(key);
+  if (savedValue) {
+    return savedValue;
+  }
+  return value;
+};
+
+const useLocalStorage = (key: any, value: any) => {
+  const [updatedvalue, seUpdatedvalue] = useState(() => getSavedValue(key, value));
+
+  useEffect(() => {
+    localStorage.setItem(key, updatedvalue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [updatedvalue]);
+
+  return [updatedvalue, seUpdatedvalue];
+};
+
+export default useLocalStorage;