From 6eed2c202bd28a73648dc8db439d3ab4561b8872 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Tue, 16 Apr 2024 13:23:50 +0530
Subject: [PATCH] chore: created a global mark as favorite component (#4203)

---
 web/components/core/favorite-star.tsx         | 28 +++++++++++++
 web/components/core/index.ts                  |  3 +-
 .../upcoming-cycles-list-item.tsx             | 35 ++++++++--------
 .../cycles/board/cycles-board-card.tsx        | 41 +++++++++---------
 .../cycles/list/cycles-list-item.tsx          | 23 +++++-----
 web/components/modules/module-card-item.tsx   | 27 ++++++------
 web/components/modules/module-list-item.tsx   | 24 +++++------
 web/components/pages/list/block.tsx           | 17 +++-----
 web/components/project/card.tsx               | 24 +++++------
 web/components/project/sidebar-list-item.tsx  |  2 +-
 web/components/views/view-list-item.tsx       | 42 +++++++------------
 11 files changed, 133 insertions(+), 133 deletions(-)
 create mode 100644 web/components/core/favorite-star.tsx

diff --git a/web/components/core/favorite-star.tsx b/web/components/core/favorite-star.tsx
new file mode 100644
index 000000000..40e8ddf08
--- /dev/null
+++ b/web/components/core/favorite-star.tsx
@@ -0,0 +1,28 @@
+import { Star } from "lucide-react";
+// helpers
+import { cn } from "@/helpers/common.helper";
+
+type Props = {
+  buttonClassName?: string;
+  iconClassName?: string;
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  selected: boolean;
+};
+
+export const FavoriteStar: React.FC<Props> = (props) => {
+  const { buttonClassName, iconClassName, onClick, selected } = props;
+
+  return (
+    <button type="button" className={cn("h-4 w-4 grid place-items-center", buttonClassName)} onClick={onClick}>
+      <Star
+        className={cn(
+          "h-4 w-4 text-custom-text-300 transition-all",
+          {
+            "fill-yellow-500 stroke-yellow-500": selected,
+          },
+          iconClassName
+        )}
+      />
+    </button>
+  );
+};
diff --git a/web/components/core/index.ts b/web/components/core/index.ts
index f68ff5f3c..3f753e025 100644
--- a/web/components/core/index.ts
+++ b/web/components/core/index.ts
@@ -1,7 +1,8 @@
 export * from "./filters";
 export * from "./modals";
 export * from "./sidebar";
-export * from "./theme";
 export * from "./activity";
+export * from "./favorite-star";
+export * from "./theme";
 export * from "./image-picker-popover";
 export * from "./page-title";
diff --git a/web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx b/web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx
index 303d91752..d928b5fbb 100644
--- a/web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx
+++ b/web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx
@@ -1,17 +1,18 @@
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { Star, User2 } from "lucide-react";
-// hooks
-import { Avatar, AvatarGroup, setPromiseToast } from "@plane/ui";
-import { CycleQuickActions } from "@/components/cycles";
-import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "@/constants/event-tracker";
-import { renderFormattedDate } from "@/helpers/date-time.helper";
-import { useCycle, useEventTracker, useMember } from "@/hooks/store";
-// components
+import { User2 } from "lucide-react";
 // ui
-// helpers
+import { Avatar, AvatarGroup, setPromiseToast } from "@plane/ui";
+// components
+import { FavoriteStar } from "@/components/core";
+import { CycleQuickActions } from "@/components/cycles";
 // constants
+import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "@/constants/event-tracker";
+// helpers
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+// hooks
+import { useCycle, useEventTracker, useMember } from "@/hooks/store";
 
 type Props = {
   cycleId: string;
@@ -112,15 +113,13 @@ export const UpcomingCycleListItem: React.FC<Props> = observer((props) => {
           </span>
         )}
 
-        {cycle.is_favorite ? (
-          <button type="button" onClick={handleRemoveFromFavorites}>
-            <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
-          </button>
-        ) : (
-          <button type="button" onClick={handleAddToFavorites}>
-            <Star className="h-3.5 w-3.5 text-custom-text-200" />
-          </button>
-        )}
+        <FavoriteStar
+          onClick={(e) => {
+            if (cycle.is_favorite) handleRemoveFromFavorites(e);
+            else handleAddToFavorites(e);
+          }}
+          selected={!!cycle.is_favorite}
+        />
 
         {workspaceSlug && projectId && (
           <CycleQuickActions
diff --git a/web/components/cycles/board/cycles-board-card.tsx b/web/components/cycles/board/cycles-board-card.tsx
index b528e780b..3b596360a 100644
--- a/web/components/cycles/board/cycles-board-card.tsx
+++ b/web/components/cycles/board/cycles-board-card.tsx
@@ -2,25 +2,23 @@ import { FC, MouseEvent } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-// components
-import { Info, Star } from "lucide-react";
+import { Info } from "lucide-react";
+// types
 import type { TCycleGroups } from "@plane/types";
-import { Avatar, AvatarGroup, Tooltip, LayersIcon, CycleGroupIcon, setPromiseToast } from "@plane/ui";
-import { CycleQuickActions } from "@/components/cycles";
-// hooks
 // ui
-// icons
-// helpers
-// import { copyTextToClipboard } from "@/helpers/string.helper";
+import { Avatar, AvatarGroup, Tooltip, LayersIcon, CycleGroupIcon, setPromiseToast } from "@plane/ui";
+// components
+import { FavoriteStar } from "@/components/core";
+import { CycleQuickActions } from "@/components/cycles";
 // constants
 import { CYCLE_STATUS } from "@/constants/cycle";
 import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "@/constants/event-tracker";
 import { EUserWorkspaceRoles } from "@/constants/workspace";
+// helpers
 import { findHowManyDaysLeft, getDate, renderFormattedDate } from "@/helpers/date-time.helper";
-// constants
+// hooks
 import { useEventTracker, useCycle, useUser, useMember } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-//.types
 
 export interface ICyclesBoardCard {
   workspaceSlug: string;
@@ -69,8 +67,8 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
     ? cycleTotalIssues === 0
       ? "0 Issue"
       : cycleTotalIssues === cycleDetails.completed_issues
-      ? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}`
-      : `${cycleDetails.completed_issues}/${cycleTotalIssues} Issues`
+        ? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}`
+        : `${cycleDetails.completed_issues}/${cycleTotalIssues} Issues`
     : "0 Issue";
 
   const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
@@ -234,16 +232,15 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
                 <span className="text-xs text-custom-text-400">No due date</span>
               )}
               <div className="z-[5] flex items-center gap-1.5">
-                {isEditingAllowed &&
-                  (cycleDetails.is_favorite ? (
-                    <button type="button" onClick={handleRemoveFromFavorites}>
-                      <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
-                    </button>
-                  ) : (
-                    <button type="button" onClick={handleAddToFavorites}>
-                      <Star className="h-3.5 w-3.5 text-custom-text-200" />
-                    </button>
-                  ))}
+                {isEditingAllowed && (
+                  <FavoriteStar
+                    onClick={(e) => {
+                      if (cycleDetails.is_favorite) handleRemoveFromFavorites(e);
+                      else handleAddToFavorites(e);
+                    }}
+                    selected={!!cycleDetails.is_favorite}
+                  />
+                )}
 
                 <CycleQuickActions cycleId={cycleId} projectId={projectId} workspaceSlug={workspaceSlug} />
               </div>
diff --git a/web/components/cycles/list/cycles-list-item.tsx b/web/components/cycles/list/cycles-list-item.tsx
index 827f91ad8..d6bc484b1 100644
--- a/web/components/cycles/list/cycles-list-item.tsx
+++ b/web/components/cycles/list/cycles-list-item.tsx
@@ -3,12 +3,13 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 // icons
-import { Check, Info, Star, User2 } from "lucide-react";
+import { Check, Info, User2 } from "lucide-react";
 // types
 import type { TCycleGroups } from "@plane/types";
 // ui
 import { Tooltip, CircularProgressIndicator, CycleGroupIcon, AvatarGroup, Avatar, setPromiseToast } from "@plane/ui";
 // components
+import { FavoriteStar } from "@/components/core";
 import { CycleQuickActions } from "@/components/cycles";
 // constants
 import { CYCLE_STATUS } from "@/constants/cycle";
@@ -231,17 +232,15 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
                 </div>
               </Tooltip>
 
-              {isEditingAllowed &&
-                !isArchived &&
-                (cycleDetails.is_favorite ? (
-                  <button type="button" onClick={handleRemoveFromFavorites}>
-                    <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
-                  </button>
-                ) : (
-                  <button type="button" onClick={handleAddToFavorites}>
-                    <Star className="h-3.5 w-3.5 text-custom-text-200" />
-                  </button>
-                ))}
+              {isEditingAllowed && !isArchived && (
+                <FavoriteStar
+                  onClick={(e) => {
+                    if (cycleDetails.is_favorite) handleRemoveFromFavorites(e);
+                    else handleAddToFavorites(e);
+                  }}
+                  selected={!!cycleDetails.is_favorite}
+                />
+              )}
               <CycleQuickActions
                 cycleId={cycleId}
                 projectId={projectId}
diff --git a/web/components/modules/module-card-item.tsx b/web/components/modules/module-card-item.tsx
index 5f040fdd6..2f2601ce5 100644
--- a/web/components/modules/module-card-item.tsx
+++ b/web/components/modules/module-card-item.tsx
@@ -2,11 +2,11 @@ import React from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-// icons
-import { Info, Star } from "lucide-react";
+import { Info } from "lucide-react";
 // ui
 import { Avatar, AvatarGroup, LayersIcon, Tooltip, setPromiseToast } from "@plane/ui";
 // components
+import { FavoriteStar } from "@/components/core";
 import { ModuleQuickActions } from "@/components/modules";
 // constants
 import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
@@ -139,8 +139,8 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
     ? !moduleTotalIssues || moduleTotalIssues === 0
       ? "0 Issue"
       : moduleTotalIssues === moduleDetails.completed_issues
-      ? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}`
-      : `${moduleDetails.completed_issues}/${moduleTotalIssues} Issues`
+        ? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}`
+        : `${moduleDetails.completed_issues}/${moduleTotalIssues} Issues`
     : "0 Issue";
 
   return (
@@ -224,16 +224,15 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
             )}
 
             <div className="z-[5] flex items-center gap-1.5">
-              {isEditingAllowed &&
-                (moduleDetails.is_favorite ? (
-                  <button type="button" onClick={handleRemoveFromFavorites}>
-                    <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
-                  </button>
-                ) : (
-                  <button type="button" onClick={handleAddToFavorites}>
-                    <Star className="h-3.5 w-3.5 text-custom-text-200" />
-                  </button>
-                ))}
+              {isEditingAllowed && (
+                <FavoriteStar
+                  onClick={(e) => {
+                    if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
+                    else handleAddToFavorites(e);
+                  }}
+                  selected={!!moduleDetails.is_favorite}
+                />
+              )}
               {workspaceSlug && projectId && (
                 <ModuleQuickActions
                   moduleId={moduleId}
diff --git a/web/components/modules/module-list-item.tsx b/web/components/modules/module-list-item.tsx
index 0f8903430..c6d59471b 100644
--- a/web/components/modules/module-list-item.tsx
+++ b/web/components/modules/module-list-item.tsx
@@ -2,11 +2,11 @@ import React from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-// icons
-import { Check, Info, Star, User2 } from "lucide-react";
+import { Check, Info, User2 } from "lucide-react";
 // ui
 import { Avatar, AvatarGroup, CircularProgressIndicator, Tooltip, setPromiseToast } from "@plane/ui";
 // components
+import { FavoriteStar } from "@/components/core";
 import { ModuleQuickActions } from "@/components/modules";
 // constants
 import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
@@ -212,17 +212,15 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
               </div>
             </Tooltip>
 
-            {isEditingAllowed &&
-              !isArchived &&
-              (moduleDetails.is_favorite ? (
-                <button type="button" onClick={handleRemoveFromFavorites} className="z-[1]">
-                  <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
-                </button>
-              ) : (
-                <button type="button" onClick={handleAddToFavorites} className="z-[1]">
-                  <Star className="h-3.5 w-3.5 text-custom-text-300" />
-                </button>
-              ))}
+            {isEditingAllowed && !isArchived && (
+              <FavoriteStar
+                onClick={(e) => {
+                  if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
+                  else handleAddToFavorites(e);
+                }}
+                selected={moduleDetails.is_favorite}
+              />
+            )}
             {workspaceSlug && projectId && (
               <ModuleQuickActions
                 moduleId={moduleId}
diff --git a/web/components/pages/list/block.tsx b/web/components/pages/list/block.tsx
index 6b20fb49d..73e286546 100644
--- a/web/components/pages/list/block.tsx
+++ b/web/components/pages/list/block.tsx
@@ -1,12 +1,12 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { Circle, Info, Lock, Minus, Star, UsersRound } from "lucide-react";
+import { Circle, Info, Lock, Minus, UsersRound } from "lucide-react";
 import { Avatar, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
 // components
+import { FavoriteStar } from "@/components/core";
 import { PageQuickActions } from "@/components/pages";
 // helpers
-import { cn } from "@/helpers/common.helper";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 // hooks
 import { useMember, usePage } from "@/hooks/store";
@@ -86,21 +86,14 @@ export const PageListBlock: FC<TPageListBlock> = observer((props) => {
         </Tooltip>
 
         {/* favorite/unfavorite */}
-        <button
-          type="button"
-          className="h-4 w-4 grid place-items-center"
+        <FavoriteStar
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
             handleFavorites();
           }}
-        >
-          <Star
-            className={cn("h-4 w-4 text-custom-text-300 transition-all", {
-              "fill-yellow-500 stroke-yellow-500": is_favorite,
-            })}
-          />
-        </button>
+          selected={is_favorite}
+        />
 
         {/* quick actions dropdown */}
         <PageQuickActions pageId={pageId} projectId={projectId} workspaceSlug={workspaceSlug} />
diff --git a/web/components/project/card.tsx b/web/components/project/card.tsx
index 0540273eb..046c0f716 100644
--- a/web/components/project/card.tsx
+++ b/web/components/project/card.tsx
@@ -2,23 +2,23 @@ import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { ArchiveRestoreIcon, Check, LinkIcon, Lock, Pencil, Star, Trash2 } from "lucide-react";
+import { ArchiveRestoreIcon, Check, LinkIcon, Lock, Pencil, Trash2 } from "lucide-react";
+// types
 import type { IProject } from "@plane/types";
 // ui
 import { Avatar, AvatarGroup, Button, Tooltip, TOAST_TYPE, setToast, setPromiseToast } from "@plane/ui";
 // components
+import { FavoriteStar } from "@/components/core";
 import { ArchiveRestoreProjectModal, DeleteProjectModal, JoinProjectModal, ProjectLogo } from "@/components/project";
-// helpers
+// constants
 import { EUserProjectRoles } from "@/constants/project";
+// helpers
 import { cn } from "@/helpers/common.helper";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useProject } from "@/hooks/store";
-// types
 import { usePlatformOS } from "@/hooks/use-platform-os";
-// hooks
-// constants
 
 type Props = {
   project: IProject;
@@ -166,19 +166,19 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
                 >
                   <LinkIcon className="h-3 w-3 text-white" />
                 </button>
-                <button
-                  className="flex h-6 w-6 items-center justify-center rounded bg-white/10"
+                <FavoriteStar
+                  buttonClassName="h-6 w-6 bg-white/10"
+                  iconClassName={cn("h-3 w-3", {
+                    "text-white": !project.is_favorite,
+                  })}
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     if (project.is_favorite) handleRemoveFromFavorites();
                     else handleAddToFavorites();
                   }}
-                >
-                  <Star
-                    className={`h-3 w-3 ${project.is_favorite ? "fill-amber-400 text-transparent" : "text-white"} `}
-                  />
-                </button>
+                  selected={project.is_favorite}
+                />
               </div>
             )}
           </div>
diff --git a/web/components/project/sidebar-list-item.tsx b/web/components/project/sidebar-list-item.tsx
index 5041e81c3..bc6166fbb 100644
--- a/web/components/project/sidebar-list-item.tsx
+++ b/web/components/project/sidebar-list-item.tsx
@@ -273,7 +273,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                   {project.is_favorite && (
                     <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
                       <span className="flex items-center justify-start gap-2">
-                        <Star className="h-3.5 w-3.5 fill-orange-400 stroke-[1.5] text-orange-400" />
+                        <Star className="h-3.5 w-3.5 fill-yellow-500 stroke-yellow-500" />
                         <span>Remove from favorites</span>
                       </span>
                     </CustomMenu.MenuItem>
diff --git a/web/components/views/view-list-item.tsx b/web/components/views/view-list-item.tsx
index 034a40ecb..c3731696e 100644
--- a/web/components/views/view-list-item.tsx
+++ b/web/components/views/view-list-item.tsx
@@ -2,11 +2,13 @@ import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { LinkIcon, PencilIcon, StarIcon, TrashIcon } from "lucide-react";
+import { LinkIcon, PencilIcon, TrashIcon } from "lucide-react";
+// types
 import { IProjectView } from "@plane/types";
 // ui
 import { CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
 // components
+import { FavoriteStar } from "@/components/core";
 import { CreateUpdateProjectViewModal, DeleteProjectViewModal } from "@/components/views";
 // constants
 import { EUserProjectRoles } from "@/constants/project";
@@ -15,7 +17,6 @@ import { calculateTotalFilters } from "@/helpers/filter.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useProjectView, useUser } from "@/hooks/store";
-// types
 
 type Props = {
   view: IProjectView;
@@ -91,32 +92,17 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
                   <p className="hidden rounded bg-custom-background-80 px-2 py-1 text-xs text-custom-text-200 group-hover:block">
                     {totalFilters} {totalFilters === 1 ? "filter" : "filters"}
                   </p>
-                  {isEditingAllowed &&
-                    (view.is_favorite ? (
-                      <button
-                        type="button"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          handleRemoveFromFavorites();
-                        }}
-                        className="grid place-items-center"
-                      >
-                        <StarIcon className="h-3.5 w-3.5 fill-orange-400 text-orange-400" strokeWidth={2} />
-                      </button>
-                    ) : (
-                      <button
-                        type="button"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          handleAddToFavorites();
-                        }}
-                        className="grid place-items-center"
-                      >
-                        <StarIcon size={14} strokeWidth={2} />
-                      </button>
-                    ))}
+                  {isEditingAllowed && (
+                    <FavoriteStar
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (view.is_favorite) handleRemoveFromFavorites();
+                        else handleAddToFavorites();
+                      }}
+                      selected={view.is_favorite}
+                    />
+                  )}
 
                   <CustomMenu ellipsis>
                     {isEditingAllowed && (