feat: favorite cycle and style: style improvements (#376)

* style: consistent btn

* style: caret direction for disclosure

* fix: progress tooltip value rounded

* chore: favorite cycle serivces

* chore: favorite cycle type and constant

* feat: favorite cycle feat added

* refactor: favorite services and type

* fix: build fix

apps/app/components/cycles/single-cycle-card.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/router";
 
-import useSWR from "swr";
+import useSWR, { mutate } from "swr";
 
 // services
 import cyclesService from "services/cycles.service";
@@ -23,7 +23,7 @@ import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helpe
 // types
 import { CycleIssueResponse, ICycle } from "types";
 // fetch-keys
-import { CYCLE_ISSUES } from "constants/fetch-keys";
+import { CYCLE_ISSUES, CYCLE_LIST } from "constants/fetch-keys";
 
 type TSingleStatProps = {
   cycle: ICycle;
@@ -67,6 +67,70 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
     ...groupBy(cycleIssues ?? [], "issue_detail.state_detail.group"),
   };
 
+  const handleAddToFavorites = () => {
+    if (!workspaceSlug && !projectId && !cycle) return;
+
+    cyclesService
+      .addCycleToFavorites(workspaceSlug as string, projectId as string, {
+        cycle: cycle.id,
+      })
+      .then(() => {
+        mutate<ICycle[]>(
+          CYCLE_LIST(projectId as string),
+          (prevData) =>
+            (prevData ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? true : c.is_favorite,
+            })),
+          false
+        );
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Successfully added the cycle to favorites.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't add the cycle to favorites. Please try again.",
+        });
+      });
+  };
+
+  const handleRemoveFromFavorites = () => {
+    if (!workspaceSlug || !cycle) return;
+
+    cyclesService
+      .removeCycleFromFavorites(workspaceSlug as string, projectId as string, cycle.id)
+      .then(() => {
+        mutate<ICycle[]>(
+          CYCLE_LIST(projectId as string),
+          (prevData) =>
+            (prevData ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? false : c.is_favorite,
+            })),
+          false
+        );
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Successfully removed the cycle from favorites.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't remove the cycle from favorites. Please try again.",
+        });
+      });
+  };
+
   const handleCopyText = () => {
     const originURL =
       typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
@@ -95,31 +159,41 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
   return (
     <div className="h-full w-full">
       <div className="flex flex-col rounded-[10px] bg-white text-xs shadow">
-        <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
+        <div className="flex h-full flex-col gap-4 rounded-b-[10px] px-5  py-5">
-          <a>
+          <div className="flex items-center justify-between gap-1">
-            <div className="flex h-full flex-col gap-4 rounded-b-[10px] px-5  py-5">
+            <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
-              <div className="flex items-center justify-between gap-1">
+              <a className="w-full">
-                <h3 className="text-xl font-semibold leading-5">{cycle.name}</h3>
+                <h3 className="text-xl font-semibold leading-5 ">{cycle.name}</h3>
-                {/* <span className="p-1">
+              </a>
+            </Link>
+            {cycle.is_favorite ? (
+              <button onClick={handleRemoveFromFavorites} className="p-1 ">
+                <span>
+                  <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                </span>
+              </button>
+            ) : (
+              <button onClick={handleAddToFavorites} className="p-1">
+                <span>
                   <StarIcon className="h-4 w-4 " color="#858E96" />
-                </span> */}
+                </span>
-              </div>
+              </button>
+            )}
+          </div>
 
-              <div className="flex items-center justify-start gap-5">
+          <div className="flex items-center justify-start gap-5">
-                <div className="flex items-start gap-1 ">
+            <div className="flex items-start gap-1 ">
-                  <CalendarDaysIcon className="h-4 w-4 text-gray-900" />
+              <CalendarDaysIcon className="h-4 w-4 text-gray-900" />
-                  <span className="text-gray-400">Start :</span>
+              <span className="text-gray-400">Start :</span>
-                  <span>{renderShortDateWithYearFormat(startDate)}</span>
+              <span>{renderShortDateWithYearFormat(startDate)}</span>
-                </div>
-                <div className="flex items-start gap-1 ">
-                  <CalendarDaysIcon className="h-4 w-4 text-gray-900" />
-                  <span className="text-gray-400">End :</span>
-                  <span>{renderShortDateWithYearFormat(endDate)}</span>
-                </div>
-              </div>
             </div>
-          </a>
+            <div className="flex items-start gap-1 ">
-        </Link>
+              <CalendarDaysIcon className="h-4 w-4 text-gray-900" />
+              <span className="text-gray-400">End :</span>
+              <span>{renderShortDateWithYearFormat(endDate)}</span>
+            </div>
+          </div>
+        </div>
 
         <div className="flex h-full  flex-col rounded-b-[10px]">
           <div className="flex items-center justify-between px-5 py-4">
@@ -170,7 +244,10 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
                   <span> Progress </span>
                   <LinearProgressIndicator data={progressIndicatorData} />
                   <Disclosure.Button>
-                    <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+                    <ChevronDownIcon
+                      className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
+                      aria-hidden="true"
+                    />
                   </Disclosure.Button>
                 </div>
                 <Transition show={open}>

apps/app/components/ui/linear-progress-indicator.tsx

@@ -18,7 +18,7 @@ export const LinearProgressIndicator: React.FC<Props> = ({ data }) => {
     progress += item.value;
 
     return (
-      <Tooltip tooltipContent={`${item.name} ${item.value}%`}>
+      <Tooltip tooltipContent={`${item.name} ${Math.round(item.value)}%`}>
         <div key={item.id} className="bar" style={style} />
       </Tooltip>
     );

apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx

@@ -132,10 +132,10 @@ const ProjectCycles: NextPage = () => {
               >
                 <Tab
                   className={({ selected }) =>
-                    ` rounded-3xl border px-6 py-3 ${
+                    `rounded-3xl border px-5 py-1.5 text-sm sm:px-7 sm:py-2 sm:text-base ${
                       selected
-                        ? "bg-theme text-white"
+                        ? "border-theme bg-theme text-white"
-                        : "border-gray-400 bg-white text-gray-900 hover:bg-gray-200"
+                        : "border-gray-300 bg-white hover:bg-hover-gray"
                     }`
                   }
                 >
@@ -143,10 +143,10 @@ const ProjectCycles: NextPage = () => {
                 </Tab>
                 <Tab
                   className={({ selected }) =>
-                    ` rounded-3xl border px-6 py-3 ${
+                    `rounded-3xl border px-5 py-1.5 text-sm sm:px-7 sm:py-2 sm:text-base ${
                       selected
-                        ? "bg-theme text-white"
+                        ? "border-theme bg-theme text-white"
-                        : "border-gray-400 bg-white text-gray-900 hover:bg-gray-200"
+                        : "border-gray-300 bg-white hover:bg-hover-gray"
                     }`
                   }
                 >
@@ -154,10 +154,10 @@ const ProjectCycles: NextPage = () => {
                 </Tab>
                 <Tab
                   className={({ selected }) =>
-                    ` rounded-3xl border px-6 py-3 ${
+                    `rounded-3xl border px-5 py-1.5 text-sm sm:px-7 sm:py-2 sm:text-base ${
                       selected
-                        ? "bg-theme text-white"
+                        ? "border-theme bg-theme text-white"
-                        : "border-gray-400 bg-white text-gray-900 hover:bg-gray-200"
+                        : "border-gray-300 bg-white hover:bg-hover-gray"
                     }`
                   }
                 >

apps/app/services/cycles.service.ts

@@ -128,6 +128,29 @@ class ProjectCycleServices extends APIService {
         throw error?.response?.data;
       });
   }
+
+  async addCycleToFavorites(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      cycle: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-cycles/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeCycleFromFavorites(workspaceSlug: string, projectId: string, cycleId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-cycles/${cycleId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
 }
 
 export default new ProjectCycleServices();

apps/app/types/cycles.d.ts

@@ -9,6 +9,7 @@ export interface ICycle {
   description: string;
   start_date: string | null;
   end_date: string | null;
+  is_favorite: boolean;
   created_by: string;
   updated_by: string;
   project: string;