From 248d0947628c572fdbe271f104c72269d49733db Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 29 Mar 2023 16:27:55 +0530
Subject: [PATCH] feat: cycle list page (#577)

* style: cycle list page

* fix:typo fix
---
 apps/app/components/cycles/cycles-list.tsx        | 15 +++++++++++++--
 .../projects/[projectId]/cycles/index.tsx         |  6 ++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/apps/app/components/cycles/cycles-list.tsx b/apps/app/components/cycles/cycles-list.tsx
index 54bf415c5..28cd171d0 100644
--- a/apps/app/components/cycles/cycles-list.tsx
+++ b/apps/app/components/cycles/cycles-list.tsx
@@ -1,11 +1,12 @@
 import { useState } from "react";
 
 // components
-import { DeleteCycleModal,  SingleCycleCard } from "components/cycles";
+import { DeleteCycleModal, SingleCycleCard } from "components/cycles";
 import { EmptyState, Loader } from "components/ui";
 // image
 import emptyCycle from "public/empty-state/empty-cycle.svg";
-
+// icon
+import { XMarkIcon } from "@heroicons/react/24/outline";
 // types
 import { ICycle, SelectCycleType } from "types";
 
@@ -24,6 +25,7 @@ export const CyclesList: React.FC<TCycleStatsViewProps> = ({
 }) => {
   const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
   const [selectedCycleForDelete, setSelectedCycleForDelete] = useState<SelectCycleType>();
+  const [showNoCurrentCycleMessage, setShowNoCurrentCycleMessage] = useState(true);
 
   const handleDeleteCycle = (cycle: ICycle) => {
     setSelectedCycleForDelete({ ...cycle, actionType: "delete" });
@@ -58,6 +60,15 @@ export const CyclesList: React.FC<TCycleStatsViewProps> = ({
               />
             ))}
           </div>
+        ) : type === "current" ? (
+          showNoCurrentCycleMessage && (
+            <div className="flex items-center justify-between bg-white w-full px-6 py-4 rounded-[10px]">
+              <h3 className="text-base font-medium text-black "> No current cycle is present.</h3>
+              <button onClick={() => setShowNoCurrentCycleMessage(false)}>
+                <XMarkIcon className="h-4 w-4" />
+              </button>
+            </div>
+          )
         ) : (
           <EmptyState
             type="cycle"
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index a6f3498f8..3f34bad1d 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -113,7 +113,9 @@ const ProjectCycles: NextPage<UserAuth> = (props) => {
       />
       <div className="space-y-8">
         <div className="flex flex-col gap-5">
-          <h3 className="text-3xl font-semibold text-black">Current Cycle</h3>
+          {currentAndUpcomingCycles && currentAndUpcomingCycles.current_cycle.length > 0 && (
+            <h3 className="text-3xl font-semibold text-black">Current Cycle</h3>
+          )}
           <div className="space-y-5">
             <CyclesList
               cycles={currentAndUpcomingCycles?.current_cycle}
@@ -124,7 +126,7 @@ const ProjectCycles: NextPage<UserAuth> = (props) => {
           </div>
         </div>
         <div className="flex flex-col gap-5">
-          <h3 className="text-3xl font-semibold text-black">Others</h3>
+          <h3 className="text-3xl font-semibold text-black">Other Cycles</h3>
           <div>
             <Tab.Group>
               <Tab.List