From 07892382823bd4f29079cbbc86ee04af029c04f1 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 15 Mar 2024 17:31:28 +0530
Subject: [PATCH] fix: cycle layout not getting initialized (#3961)

---
 web/components/cycles/board/root.tsx             | 14 ++++++++------
 web/components/cycles/cycles-view-header.tsx     | 10 ++++------
 .../projects/[projectId]/cycles/index.tsx        | 16 +++++++---------
 3 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/web/components/cycles/board/root.tsx b/web/components/cycles/board/root.tsx
index 26154becf..e9fde3428 100644
--- a/web/components/cycles/board/root.tsx
+++ b/web/components/cycles/board/root.tsx
@@ -22,12 +22,14 @@ export const CyclesBoard: FC<ICyclesBoard> = observer((props) => {
     <div className="h-full w-full">
       <div className="flex h-full w-full justify-between">
         <div className="h-full w-full flex flex-col p-8 space-y-8 vertical-scrollbar scrollbar-lg">
-          <CyclesBoardMap
-            cycleIds={cycleIds}
-            peekCycle={peekCycle}
-            projectId={projectId}
-            workspaceSlug={workspaceSlug}
-          />
+          {cycleIds.length > 0 && (
+            <CyclesBoardMap
+              cycleIds={cycleIds}
+              peekCycle={peekCycle}
+              projectId={projectId}
+              workspaceSlug={workspaceSlug}
+            />
+          )}
           {completedCycleIds.length !== 0 && (
             <Disclosure as="div" className="space-y-4">
               <Disclosure.Button className="bg-custom-background-80 font-semibold text-sm py-1 px-2 rounded flex items-center gap-1">
diff --git a/web/components/cycles/cycles-view-header.tsx b/web/components/cycles/cycles-view-header.tsx
index f7ff3567c..737d36f3f 100644
--- a/web/components/cycles/cycles-view-header.tsx
+++ b/web/components/cycles/cycles-view-header.tsx
@@ -42,6 +42,8 @@ export const CyclesViewHeader: React.FC<Props> = observer((props) => {
   useOutsideClickDetector(inputRef, () => {
     if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
   });
+  // derived values
+  const activeLayout = currentProjectDisplayFilters?.layout ?? "list";
 
   const handleFilters = useCallback(
     (key: keyof TCycleFilters, value: string | string[]) => {
@@ -140,9 +142,7 @@ export const CyclesViewHeader: React.FC<Props> = observer((props) => {
                 <button
                   type="button"
                   className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
-                    currentProjectDisplayFilters?.layout == layout.key
-                      ? "bg-custom-background-100 shadow-custom-shadow-2xs"
-                      : ""
+                    activeLayout == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
                   }`}
                   onClick={() =>
                     updateDisplayFilters(projectId, {
@@ -153,9 +153,7 @@ export const CyclesViewHeader: React.FC<Props> = observer((props) => {
                   <layout.icon
                     strokeWidth={2}
                     className={`h-3.5 w-3.5 ${
-                      currentProjectDisplayFilters?.layout == layout.key
-                        ? "text-custom-text-100"
-                        : "text-custom-text-200"
+                      activeLayout == layout.key ? "text-custom-text-100" : "text-custom-text-200"
                     }`}
                   />
                 </button>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index fa9008d2f..651d03898 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -47,7 +47,7 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
   const pageTitle = project?.name ? `${project?.name} - Cycles` : undefined;
   // selected display filters
   const cycleTab = currentProjectDisplayFilters?.active_tab;
-  const cycleLayout = currentProjectDisplayFilters?.layout;
+  const cycleLayout = currentProjectDisplayFilters?.layout ?? "list";
 
   const handleRemoveFilter = (key: keyof TCycleFilters, value: string | null) => {
     if (!projectId) return;
@@ -120,14 +120,12 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
                 <ActiveCycleRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
               </Tab.Panel>
               <Tab.Panel as="div" className="h-full overflow-y-auto">
-                {cycleTab && cycleLayout && (
-                  <CyclesView
-                    layout={cycleLayout}
-                    workspaceSlug={workspaceSlug.toString()}
-                    projectId={projectId.toString()}
-                    peekCycle={peekCycle?.toString()}
-                  />
-                )}
+                <CyclesView
+                  layout={cycleLayout}
+                  workspaceSlug={workspaceSlug.toString()}
+                  projectId={projectId.toString()}
+                  peekCycle={peekCycle?.toString()}
+                />
               </Tab.Panel>
             </Tab.Panels>
           </Tab.Group>