refactor: global select component for issue view

2023-02-06 15:18:57 +05:30
parent 0e07c1e19f
commit adbe16f8ae
24 changed files with 1090 additions and 1152 deletions
--- a/apps/app/components/issues/delete-issue-modal.tsx
+++ b/apps/app/components/issues/delete-issue-modal.tsx
@@ -17,7 +17,7 @@ import { Button } from "components/ui";
 // types
 import type { CycleIssueResponse, IIssue, IssueResponse, ModuleIssueResponse } from "types";
 // fetch-keys
-import { CYCLE_ISSUES, PROJECT_ISSUES_LIST, MODULE_ISSUES } from "constants/fetch-keys";
+import { CYCLE_ISSUES, PROJECT_ISSUES_LIST, MODULE_ISSUES, USER_ISSUE } from "constants/fetch-keys";

 type Props = {
  isOpen: boolean;
@@ -30,7 +30,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
  const [isDeleteLoading, setIsDeleteLoading] = useState(false);

  const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId: queryProjectId } = router.query;

  const { setToastAlert } = useToast();

@@ -46,10 +46,37 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
  const handleDeletion = async () => {
    setIsDeleteLoading(true);
    if (!data || !workspaceSlug) return;
+
    const projectId = data.project;
    await issueServices
      .deleteIssue(workspaceSlug as string, projectId, data.id)
      .then(() => {
+        const cycleId = data?.cycle;
+        const moduleId = data?.module;
+
+        if (cycleId) {
+          mutate<CycleIssueResponse[]>(
+            CYCLE_ISSUES(cycleId),
+            (prevData) => prevData?.filter((i) => i.issue !== data.id),
+            false
+          );
+        }
+
+        if (moduleId) {
+          mutate<ModuleIssueResponse[]>(
+            MODULE_ISSUES(moduleId),
+            (prevData) => prevData?.filter((i) => i.issue !== data.id),
+            false
+          );
+        }
+
+        if (!queryProjectId)
+          mutate<IIssue[]>(
+            USER_ISSUE(workspaceSlug as string),
+            (prevData) => prevData?.filter((i) => i.id !== data.id),
+            false
+          );
+
        mutate<IssueResponse>(
          PROJECT_ISSUES_LIST(workspaceSlug as string, projectId),
          (prevData) => ({
@@ -60,24 +87,6 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
          false
        );

-        const moduleId = data?.module;
-        const cycleId = data?.cycle;
-
-        if (moduleId) {
-          mutate<ModuleIssueResponse[]>(
-            MODULE_ISSUES(moduleId),
-            (prevData) => prevData?.filter((i) => i.issue !== data.id),
-            false
-          );
-        }
-        if (cycleId) {
-          mutate<CycleIssueResponse[]>(
-            CYCLE_ISSUES(cycleId),
-            (prevData) => prevData?.filter((i) => i.issue !== data.id),
-            false
-          );
-        }
-
        handleClose();
        setToastAlert({
          title: "Success",
--- a/apps/app/components/issues/my-issues-list-item.tsx
+++ b/apps/app/components/issues/my-issues-list-item.tsx
@@ -1,33 +1,75 @@
-import React from "react";
+import React, { useCallback } from "react";

 import Link from "next/link";
 import { useRouter } from "next/router";

+import useSWR, { mutate } from "swr";
+
+// services
+import stateService from "services/state.service";
+import issuesService from "services/issues.service";
 // components
+import { DueDateSelect, PrioritySelect, StateSelect } from "components/core/select";
+// ui
 import { AssigneesList } from "components/ui/avatar";
-// icons
-import { CalendarDaysIcon } from "@heroicons/react/24/outline";
-// helpers
-import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
-import { addSpaceIfCamelCase } from "helpers/string.helper";
+import { CustomMenu } from "components/ui";
 // types
 import { IIssue, Properties } from "types";
-// constants
-import { getPriorityIcon } from "constants/global";
+// fetch-keys
+import { STATE_LIST, USER_ISSUE } from "constants/fetch-keys";

 type Props = {
-  type?: string;
  issue: IIssue;
  properties: Properties;
-  editIssue?: () => void;
-  handleDeleteIssue?: () => void;
-  removeIssue?: () => void;
+  projectId: string;
+  handleDeleteIssue: () => void;
 };

-export const MyIssuesListItem: React.FC<Props> = ({ issue, properties }) => {
+export const MyIssuesListItem: React.FC<Props> = ({
+  issue,
+  properties,
+  projectId,
+  handleDeleteIssue,
+}) => {
  const router = useRouter();
  const { workspaceSlug } = router.query;

+  const { data: states } = useSWR(
+    workspaceSlug && projectId ? STATE_LIST(projectId) : null,
+    workspaceSlug && projectId
+      ? () => stateService.getStates(workspaceSlug as string, projectId)
+      : null
+  );
+
+  const partialUpdateIssue = useCallback(
+    (formData: Partial<IIssue>) => {
+      if (!workspaceSlug) return;
+
+      mutate<IIssue[]>(
+        USER_ISSUE(workspaceSlug as string),
+        (prevData) =>
+          prevData?.map((p) => {
+            if (p.id === issue.id) return { ...p, ...formData };
+
+            return p;
+          }),
+        false
+      );
+
+      issuesService
+        .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
+        .then((res) => {
+          mutate(USER_ISSUE(workspaceSlug as string));
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    [workspaceSlug, projectId, issue]
+  );
+
+  const isNotAllowed = false;
+
  return (
    <div key={issue.id} className="flex items-center justify-between gap-2 px-4 py-3 text-sm">
      <div className="flex items-center gap-2">
@@ -50,80 +92,26 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties }) => {
      </div>
      <div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-2 text-xs">
        {properties.priority && (
-          <div
-            className={`group relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded px-2 py-1 text-xs capitalize shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-              issue.priority === "urgent"
-                ? "bg-red-100 text-red-600"
-                : issue.priority === "high"
-                ? "bg-orange-100 text-orange-500"
-                : issue.priority === "medium"
-                ? "bg-yellow-100 text-yellow-500"
-                : issue.priority === "low"
-                ? "bg-green-100 text-green-500"
-                : "bg-gray-100"
-            }`}
-          >
-            {getPriorityIcon(issue.priority)}
-            <div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
-              <h5 className="mb-1 font-medium text-gray-900">Priority</h5>
-              <div
-                className={`capitalize ${
-                  issue.priority === "urgent"
-                    ? "text-red-600"
-                    : issue.priority === "high"
-                    ? "text-orange-500"
-                    : issue.priority === "medium"
-                    ? "text-yellow-500"
-                    : issue.priority === "low"
-                    ? "text-green-500"
-                    : ""
-                }`}
-              >
-                {issue.priority ?? "None"}
-              </div>
-            </div>
-          </div>
+          <PrioritySelect
+            issue={issue}
+            partialUpdateIssue={partialUpdateIssue}
+            isNotAllowed={isNotAllowed}
+          />
        )}
        {properties.state && (
-          <div className="group relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
-            <span
-              className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-              style={{
-                backgroundColor: issue?.state_detail?.color,
-              }}
-            />
-            {addSpaceIfCamelCase(issue?.state_detail.name)}
-            <div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
-              <h5 className="mb-1 font-medium">State</h5>
-              <div>{issue?.state_detail.name}</div>
-            </div>
-          </div>
+          <StateSelect
+            issue={issue}
+            states={states}
+            partialUpdateIssue={partialUpdateIssue}
+            isNotAllowed={isNotAllowed}
+          />
        )}
        {properties.due_date && (
-          <div
-            className={`group group relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-              issue.target_date === null
-                ? ""
-                : issue.target_date < new Date().toISOString()
-                ? "text-red-600"
-                : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
-            }`}
-          >
-            <CalendarDaysIcon className="h-4 w-4" />
-            {issue.target_date ? renderShortNumericDateFormat(issue.target_date) : "N/A"}
-            <div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
-              <h5 className="mb-1 font-medium text-gray-900">Due date</h5>
-              <div>{renderShortNumericDateFormat(issue.target_date ?? "")}</div>
-              <div>
-                {issue.target_date &&
-                  (issue.target_date < new Date().toISOString()
-                    ? `Due date has passed by ${findHowManyDaysLeft(issue.target_date)} days`
-                    : findHowManyDaysLeft(issue.target_date) <= 3
-                    ? `Due date is in ${findHowManyDaysLeft(issue.target_date)} days`
-                    : "Due date")}
-              </div>
-            </div>
-          </div>
+          <DueDateSelect
+            issue={issue}
+            partialUpdateIssue={partialUpdateIssue}
+            isNotAllowed={isNotAllowed}
+          />
        )}
        {properties.sub_issue_count && (
          <div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
@@ -135,6 +123,9 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties }) => {
            <AssigneesList userIds={issue.assignees ?? []} />
          </div>
        )}
+        <CustomMenu width="auto" ellipsis>
+          <CustomMenu.MenuItem onClick={handleDeleteIssue}>Delete permanently</CustomMenu.MenuItem>
+        </CustomMenu>
      </div>
    </div>
  );
--- a/apps/app/components/issues/sidebar-select/cycle.tsx
+++ b/apps/app/components/issues/sidebar-select/cycle.tsx
@@ -75,7 +75,7 @@ export const SidebarCycleSelect: React.FC<Props> = ({
          onChange={(value: any) => {
            value === null
              ? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
-              : handleCycleChange(cycles?.find((c) => c.id === value) as any);
+              : handleCycleChange(cycles?.find((c) => c.id === value) as ICycle);
          }}
          disabled={isNotAllowed}
        >
--- a/apps/app/components/issues/sidebar-select/module.tsx
+++ b/apps/app/components/issues/sidebar-select/module.tsx
@@ -2,28 +2,32 @@ import React from "react";

 import { useRouter } from "next/router";

-import useSWR from "swr";
+import useSWR, { mutate } from "swr";

-import { Control, Controller } from "react-hook-form";
-// constants
-import { RectangleGroupIcon } from "@heroicons/react/24/outline";
 // services
 import modulesService from "services/modules.service";
 // ui
 import { Spinner, CustomSelect } from "components/ui";
 // icons
+import { RectangleGroupIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue, IModule } from "types";
-import { MODULE_LIST } from "constants/fetch-keys";
+import { IIssue, IModule, UserAuth } from "types";
+// fetch-keys
+import { ISSUE_DETAILS, MODULE_ISSUES, MODULE_LIST } from "constants/fetch-keys";

 type Props = {
-  control: Control<IIssue, any>;
+  issueDetail: IIssue | undefined;
  handleModuleChange: (module: IModule) => void;
+  userAuth: UserAuth;
 };

-export const SidebarModuleSelect: React.FC<Props> = ({ control, handleModuleChange }) => {
+export const SidebarModuleSelect: React.FC<Props> = ({
+  issueDetail,
+  handleModuleChange,
+  userAuth,
+}) => {
  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug, projectId, issueId } = router.query;

  const { data: modules } = useSWR(
    workspaceSlug && projectId ? MODULE_LIST(projectId as string) : null,
@@ -32,46 +36,67 @@ export const SidebarModuleSelect: React.FC<Props> = ({ control, handleModuleChan
      : null
  );

+  const removeIssueFromModule = (bridgeId: string, moduleId: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    modulesService
+      .removeIssueFromModule(workspaceSlug as string, projectId as string, moduleId, bridgeId)
+      .then((res) => {
+        mutate(ISSUE_DETAILS(issueId as string));
+
+        mutate(MODULE_ISSUES(moduleId));
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  };
+
+  const issueModule = issueDetail?.issue_module;
+
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
  return (
    <div className="flex flex-wrap items-center py-2">
      <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
        <RectangleGroupIcon className="h-4 w-4 flex-shrink-0" />
        <p>Module</p>
      </div>
-      <div className="sm:basis-1/2">
-        <Controller
-          control={control}
-          name="issue_module"
-          render={({ field: { value } }) => (
-            <CustomSelect
-              label={
-                <span
-                  className={`hidden truncate text-left sm:block ${value ? "" : "text-gray-900"}`}
-                >
-                  {value ? modules?.find((m) => m.id === value?.module_detail.id)?.name : "None"}
-                </span>
-              }
-              value={value}
-              onChange={(value: any) => {
-                handleModuleChange(modules?.find((m) => m.id === value) as any);
-              }}
+      <div className="space-y-1 sm:basis-1/2">
+        <CustomSelect
+          label={
+            <span
+              className={`hidden truncate text-left sm:block ${issueModule ? "" : "text-gray-900"}`}
            >
-              {modules ? (
-                modules.length > 0 ? (
-                  modules.map((option) => (
-                    <CustomSelect.Option key={option.id} value={option.id}>
-                      {option.name}
-                    </CustomSelect.Option>
-                  ))
-                ) : (
-                  <div className="text-center">No cycles found</div>
-                )
-              ) : (
-                <Spinner />
-              )}
-            </CustomSelect>
+              {modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
+            </span>
+          }
+          value={issueModule?.module_detail?.id}
+          onChange={(value: any) => {
+            value === null
+              ? removeIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "")
+              : handleModuleChange(modules?.find((m) => m.id === value) as IModule);
+          }}
+          disabled={isNotAllowed}
+        >
+          {modules ? (
+            modules.length > 0 ? (
+              <>
+                <CustomSelect.Option value={null} className="capitalize">
+                  None
+                </CustomSelect.Option>
+                {modules.map((option) => (
+                  <CustomSelect.Option key={option.id} value={option.id}>
+                    {option.name}
+                  </CustomSelect.Option>
+                ))}
+              </>
+            ) : (
+              <div className="text-center">No modules found</div>
+            )
+          ) : (
+            <Spinner />
          )}
-        />
+        </CustomSelect>
      </div>
    </div>
  );
--- a/apps/app/components/issues/sidebar.tsx
+++ b/apps/app/components/issues/sidebar.tsx
@@ -14,6 +14,7 @@ import { Popover, Listbox, Transition } from "@headlessui/react";
 import useToast from "hooks/use-toast";
 // services
 import issuesServices from "services/issues.service";
+import modulesService from "services/modules.service";
 // components
 import {
  DeleteIssueModal,
@@ -21,6 +22,7 @@ import {
  SidebarBlockedSelect,
  SidebarBlockerSelect,
  SidebarCycleSelect,
+  SidebarModuleSelect,
  SidebarParentSelect,
  SidebarPrioritySelect,
  SidebarStateSelect,
@@ -40,7 +42,7 @@ import {
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
-import type { ICycle, IIssue, IIssueLabels, UserAuth } from "types";
+import type { ICycle, IIssue, IIssueLabels, IModule, UserAuth } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS, PROJECT_ISSUES_LIST, ISSUE_DETAILS } from "constants/fetch-keys";

@@ -123,6 +125,18 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
      });
  };

+  const handleModuleChange = (moduleDetail: IModule) => {
+    if (!workspaceSlug || !projectId || !issueDetail) return;
+
+    modulesService
+      .addIssuesToModule(workspaceSlug as string, projectId as string, moduleDetail.id, {
+        issues: [issueDetail.id],
+      })
+      .then((res) => {
+        mutate(ISSUE_DETAILS(issueId as string));
+      });
+  };
+
  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;

  return (
@@ -263,6 +277,11 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
              handleCycleChange={handleCycleChange}
              userAuth={userAuth}
            />
+            <SidebarModuleSelect
+              issueDetail={issueDetail}
+              handleModuleChange={handleModuleChange}
+              userAuth={userAuth}
+            />
          </div>
        </div>
        <div className="space-y-3 pt-3">