refactor: priority icon component (#2132)

makeplane · Sep 11, 2023 · 7bb73b7 · 7bb73b7 · vercel · Sep 11, 2023
1 parent 9912580
commit 7bb73b7
Show file tree

Hide file tree

Showing 27 changed files with 117 additions and 95 deletions.
diff --git a/web/components/analytics/custom-analytics/table.tsx b/web/components/analytics/custom-analytics/table.tsx
@@ -1,13 +1,13 @@
 // nivo
 import { BarDatum } from "@nivo/bar";
 // icons
-import { getPriorityIcon } from "components/icons";
+import { PriorityIcon } from "components/icons";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // helpers
 import { generateBarColor, renderMonthAndYear } from "helpers/analytics.helper";
 // types
-import { IAnalyticsParams, IAnalyticsResponse } from "types";
+import { IAnalyticsParams, IAnalyticsResponse, TIssuePriorities } from "types";
 // constants
 import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES, DATE_KEYS } from "constants/analytics";
 
@@ -53,7 +53,7 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
                     >
                       <div className="flex items-center gap-2">
                         {params.segment === "priority" ? (
-                          getPriorityIcon(key)
+                          <PriorityIcon priority={key as TIssuePriorities} />
                         ) : (
                           <span
                             className="h-3 w-3 flex-shrink-0 rounded"
@@ -91,7 +91,7 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
                     }`}
                   >
                     {params.x_axis === "priority" ? (
-                      getPriorityIcon(`${item.name}`)
+                      <PriorityIcon priority={item.name as TIssuePriorities} />
                     ) : (
                       <span
                         className="h-3 w-3 rounded"

diff --git a/web/components/command-palette/issue/change-issue-priority.tsx b/web/components/command-palette/issue/change-issue-priority.tsx
@@ -1,18 +1,20 @@
-import { useRouter } from "next/router";
 import React, { Dispatch, SetStateAction, useCallback } from "react";
+
+import { useRouter } from "next/router";
+
 import { mutate } from "swr";
 
 // cmdk
 import { Command } from "cmdk";
 // services
 import issuesService from "services/issues.service";
 // types
-import { ICurrentUserResponse, IIssue } from "types";
+import { ICurrentUserResponse, IIssue, TIssuePriorities } from "types";
 // constants
 import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 import { PRIORITIES } from "constants/project";
 // icons
-import { CheckIcon, getPriorityIcon } from "components/icons";
+import { CheckIcon, PriorityIcon } from "components/icons";
 
 type Props = {
   setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
@@ -54,7 +56,7 @@ export const ChangeIssuePriority: React.FC<Props> = ({ setIsPaletteOpen, issue,
     [workspaceSlug, issueId, projectId, user]
   );
 
-  const handleIssueState = (priority: string | null) => {
+  const handleIssueState = (priority: TIssuePriorities) => {
     submitChanges({ priority });
     setIsPaletteOpen(false);
   };
@@ -68,7 +70,7 @@ export const ChangeIssuePriority: React.FC<Props> = ({ setIsPaletteOpen, issue,
           className="focus:outline-none"
         >
           <div className="flex items-center space-x-3">
-            {getPriorityIcon(priority)}
+            <PriorityIcon priority={priority} />
             <span className="capitalize">{priority ?? "None"}</span>
           </div>
           <div>{priority === issue.priority && <CheckIcon className="h-3 w-3" />}</div>

diff --git a/web/components/core/filters/filters-list.tsx b/web/components/core/filters/filters-list.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 // icons
 import { XMarkIcon } from "@heroicons/react/24/outline";
-import { getPriorityIcon, StateGroupIcon } from "components/icons";
+import { PriorityIcon, StateGroupIcon } from "components/icons";
 // ui
 import { Avatar } from "components/ui";
 // helpers
@@ -136,7 +136,9 @@ export const FiltersList: React.FC<Props> = ({
                               : "bg-custom-background-90 text-custom-text-200"
                           }`}
                         >
-                          <span>{getPriorityIcon(priority)}</span>
+                          <span>
+                            <PriorityIcon priority={priority} />
+                          </span>
                           <span>{priority === "null" ? "None" : priority}</span>
                           <span
                             className="cursor-pointer"

diff --git a/web/components/core/views/board-view/board-header.tsx b/web/components/core/views/board-view/board-header.tsx
@@ -13,12 +13,12 @@ import useProjects from "hooks/use-projects";
 import { Avatar, Icon } from "components/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
-import { StateGroupIcon, getPriorityIcon } from "components/icons";
+import { PriorityIcon, StateGroupIcon } from "components/icons";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 import { renderEmoji } from "helpers/emoji.helper";
 // types
-import { IIssueViewProps, IState, TStateGroups } from "types";
+import { IIssueViewProps, IState, TIssuePriorities, TStateGroups } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
 // constants
@@ -119,7 +119,7 @@ export const BoardHeader: React.FC<Props> = ({
         );
         break;
       case "priority":
-        icon = getPriorityIcon(groupTitle, "text-lg");
+        icon = <PriorityIcon priority={groupTitle as TIssuePriorities} className="text-lg" />;
         break;
       case "project":
         const project = projects?.find((p) => p.id === groupTitle);

diff --git a/web/components/core/views/issues-view.tsx b/web/components/core/views/issues-view.tsx
@@ -29,7 +29,7 @@ import { PlusIcon } from "@heroicons/react/24/outline";
 import { getStatesList } from "helpers/state.helper";
 import { orderArrayBy } from "helpers/array.helper";
 // types
-import { IIssue, IIssueFilterOptions, IState } from "types";
+import { IIssue, IIssueFilterOptions, IState, TIssuePriorities } from "types";
 // fetch-keys
 import {
   CYCLE_DETAILS,
@@ -184,7 +184,8 @@ export const IssuesView: React.FC<Props> = ({
           // if the issue is moved to a different group, then we will change the group of the
           // dragged item(or issue)
 
-          if (selectedGroup === "priority") draggedItem.priority = destinationGroup;
+          if (selectedGroup === "priority")
+            draggedItem.priority = destinationGroup as TIssuePriorities;
           else if (selectedGroup === "state") {
             draggedItem.state = destinationGroup;
             draggedItem.state_detail = states?.find((s) => s.id === destinationGroup) as IState;

diff --git a/web/components/core/views/list-view/single-list.tsx b/web/components/core/views/list-view/single-list.tsx
@@ -15,7 +15,7 @@ import { SingleListIssue } from "components/core";
 import { Avatar, CustomMenu } from "components/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
-import { StateGroupIcon, getPriorityIcon } from "components/icons";
+import { PriorityIcon, StateGroupIcon } from "components/icons";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 import { renderEmoji } from "helpers/emoji.helper";
@@ -26,6 +26,7 @@ import {
   IIssueLabels,
   IIssueViewProps,
   IState,
+  TIssuePriorities,
   TStateGroups,
   UserAuth,
 } from "types";
@@ -134,7 +135,7 @@ export const SingleList: React.FC<Props> = ({
         );
         break;
       case "priority":
-        icon = getPriorityIcon(groupTitle, "text-lg");
+        icon = <PriorityIcon priority={groupTitle as TIssuePriorities} className="text-lg" />;
         break;
       case "project":
         const project = projects?.find((p) => p.id === groupTitle);

diff --git a/web/components/cycles/active-cycle-details.tsx b/web/components/cycles/active-cycle-details.tsx
@@ -19,7 +19,7 @@ import { ActiveCycleProgressStats } from "components/cycles";
 
 // icons
 import { CalendarDaysIcon } from "@heroicons/react/20/solid";
-import { getPriorityIcon } from "components/icons/priority-icon";
+import { PriorityIcon } from "components/icons/priority-icon";
 import {
   TargetIcon,
   ContrastIcon,
@@ -477,7 +477,7 @@ export const ActiveCycleDetails: React.FC = () => {
                               : "border-orange-500/20 bg-orange-500/20 text-orange-500"
                           }`}
                         >
-                          {getPriorityIcon(issue.priority, "text-sm")}
+                          <PriorityIcon priority={issue.priority} className="text-sm" />
                         </div>
                         <ViewIssueLabel labelDetails={issue.label_details} maxRender={2} />
                         <div className={`flex items-center gap-2 text-custom-text-200`}>

diff --git a/web/components/icons/priority-icon.tsx b/web/components/icons/priority-icon.tsx
@@ -1,22 +1,25 @@
-export const getPriorityIcon = (priority: string | null, className?: string) => {
-  if (!className || className === "") className = "text-xs flex items-center";
+// types
+import { TIssuePriorities } from "types";
+
+type Props = {
+  priority: TIssuePriorities | null;
+  className?: string;
+};
 
-  priority = priority?.toLowerCase() ?? null;
+export const PriorityIcon: React.FC<Props> = ({ priority, className = "" }) => {
+  if (!className || className === "") className = "text-xs flex items-center";
 
-  switch (priority) {
-    case "urgent":
-      return <span className={`material-symbols-rounded ${className}`}>error</span>;
-    case "high":
-      return <span className={`material-symbols-rounded ${className}`}>signal_cellular_alt</span>;
-    case "medium":
-      return (
-        <span className={`material-symbols-rounded ${className}`}>signal_cellular_alt_2_bar</span>
-      );
-    case "low":
-      return (
-        <span className={`material-symbols-rounded ${className}`}>signal_cellular_alt_1_bar</span>
-      );
-    default:
-      return <span className={`material-symbols-rounded ${className}`}>block</span>;
-  }
+  return (
+    <span className={`material-symbols-rounded ${className}`}>
+      {priority === "urgent"
+        ? "error"
+        : priority === "high"
+        ? "signal_cellular_alt"
+        : priority === "medium"
+        ? "signal_cellular_alt_2_bar"
+        : priority === "low"
+        ? "signal_cellular_alt_1_bar"
+        : "block"}
+    </span>
+  );
 };
diff --git a/web/components/inbox/filters-dropdown.tsx b/web/components/inbox/filters-dropdown.tsx
@@ -3,7 +3,7 @@ import useInboxView from "hooks/use-inbox-view";
 // ui
 import { MultiLevelDropdown } from "components/ui";
 // icons
-import { getPriorityIcon } from "components/icons";
+import { PriorityIcon } from "components/icons";
 // constants
 import { PRIORITIES } from "constants/project";
 import { INBOX_STATUS } from "constants/inbox";
@@ -42,7 +42,7 @@ export const FiltersDropdown: React.FC = () => {
               id: priority === null ? "null" : priority,
               label: (
                 <div className="flex items-center gap-2 capitalize">
-                  {getPriorityIcon(priority)} {priority ?? "None"}
+                  <PriorityIcon priority={priority} /> {priority ?? "None"}
                 </div>
               ),
               value: {

diff --git a/web/components/inbox/filters-list.tsx b/web/components/inbox/filters-list.tsx
@@ -2,9 +2,11 @@
 import useInboxView from "hooks/use-inbox-view";
 // icons
 import { XMarkIcon } from "@heroicons/react/24/outline";
-import { getPriorityIcon } from "components/icons";
+import { PriorityIcon } from "components/icons";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
+// types
+import { TIssuePriorities } from "types";
 // constants
 import { INBOX_STATUS } from "constants/inbox";
 
@@ -48,7 +50,9 @@ export const InboxFiltersList = () => {
                               : "bg-custom-background-90 text-custom-text-200"
                           }`}
                         >
-                          <span>{getPriorityIcon(priority)}</span>
+                          <span>
+                            <PriorityIcon priority={priority as TIssuePriorities} />
+                          </span>
                           <button
                             type="button"
                             className="cursor-pointer"

diff --git a/web/components/inbox/inbox-issue-card.tsx b/web/components/inbox/inbox-issue-card.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 // ui
 import { Tooltip } from "components/ui";
 // icons
-import { getPriorityIcon } from "components/icons";
+import { PriorityIcon } from "components/icons";
 import {
   CalendarDaysIcon,
   CheckCircleIcon,
@@ -65,10 +65,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
                     : "border-custom-border-200"
                 }`}
               >
-                {getPriorityIcon(
-                  issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
-                  "text-sm"
-                )}
+                <PriorityIcon priority={issue.priority ?? null} className="text-sm" />
               </div>
             </Tooltip>
             <Tooltip

diff --git a/web/components/inbox/inbox-main-content.tsx b/web/components/inbox/inbox-main-content.tsx
@@ -35,7 +35,7 @@ import type { IInboxIssue, IIssue } from "types";
 // fetch-keys
 import { INBOX_ISSUES, INBOX_ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 
-const defaultValues = {
+const defaultValues: Partial<IInboxIssue> = {
   name: "",
   description_html: "",
   estimate_point: null,

diff --git a/web/components/issues/my-issues/my-issues-select-filters.tsx b/web/components/issues/my-issues/my-issues-select-filters.tsx
@@ -11,7 +11,7 @@ import { DateFilterModal } from "components/core";
 // ui
 import { MultiLevelDropdown } from "components/ui";
 // icons
-import { StateGroupIcon, getPriorityIcon } from "components/icons";
+import { PriorityIcon, StateGroupIcon } from "components/icons";
 // helpers
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 // types
@@ -83,7 +83,7 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
                 id: priority === null ? "null" : priority,
                 label: (
                   <div className="flex items-center gap-2 capitalize">
-                    {getPriorityIcon(priority)} {priority ?? "None"}
+                    <PriorityIcon priority={priority} /> {priority ?? "None"}
                   </div>
                 ),
                 value: {

diff --git a/web/components/issues/my-issues/my-issues-view.tsx b/web/components/issues/my-issues/my-issues-view.tsx
@@ -18,7 +18,7 @@ import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // helpers
 import { orderArrayBy } from "helpers/array.helper";
 // types
-import { IIssue, IIssueFilterOptions } from "types";
+import { IIssue, IIssueFilterOptions, TIssuePriorities } from "types";
 // fetch-keys
 import { USER_ISSUES, WORKSPACE_LABELS } from "constants/fetch-keys";
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -96,7 +96,7 @@ export const MyIssuesView: React.FC<Props> = ({
         const sourceGroup = source.droppableId;
         const destinationGroup = destination.droppableId;
 
-        draggedItem[groupBy] = destinationGroup;
+        draggedItem[groupBy] = destinationGroup as TIssuePriorities;
 
         mutate<{
           [key: string]: IIssue[];

diff --git a/web/components/issues/peek-overview/issue-properties.tsx b/web/components/issues/peek-overview/issue-properties.tsx
@@ -19,7 +19,7 @@ import { CustomDatePicker, Icon } from "components/ui";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
-import { IIssue } from "types";
+import { IIssue, TIssuePriorities } from "types";
 
 type Props = {
   handleDeleteIssue: () => void;
@@ -117,7 +117,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
           <div className="w-3/4">
             <SidebarPrioritySelect
               value={issue.priority}
-              onChange={(val: string) => handleUpdateIssue({ priority: val })}
+              onChange={(val) => handleUpdateIssue({ priority: val })}
               disabled={readOnly}
             />
           </div>

diff --git a/web/components/issues/select/priority.tsx b/web/components/issues/select/priority.tsx
@@ -3,12 +3,14 @@ import React from "react";
 // ui
 import { CustomSelect } from "components/ui";
 // icons
-import { getPriorityIcon } from "components/icons/priority-icon";
+import { PriorityIcon } from "components/icons/priority-icon";
+// types
+import { TIssuePriorities } from "types";
 // constants
 import { PRIORITIES } from "constants/project";
 
 type Props = {
-  value: string | null;
+  value: TIssuePriorities;
   onChange: (value: string) => void;
 };
 
@@ -18,7 +20,10 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
     label={
       <div className="flex items-center justify-center gap-2 text-xs">
         <span className="flex items-center">
-          {getPriorityIcon(value, `text-xs ${value ? "" : "text-custom-text-200"}`)}
+          <PriorityIcon
+            priority={value}
+            className={`text-xs ${value ? "" : "text-custom-text-200"}`}
+          />
         </span>
         <span className={`${value ? "" : "text-custom-text-200"} capitalize`}>
           {value ?? "Priority"}
@@ -32,7 +37,9 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
       <CustomSelect.Option key={priority} value={priority}>
         <div className="flex w-full justify-between gap-2 rounded">
           <div className="flex items-center justify-start gap-2">
-            <span>{getPriorityIcon(priority)}</span>
+            <span>
+              <PriorityIcon priority={priority} />
+            </span>
             <span className="capitalize">{priority ?? "None"}</span>
           </div>
         </div>