feat: global component for links list (#307)

apps/app/components/core/issues-view-filter.tsx

@@ -131,7 +131,6 @@ export const IssuesFilterView: React.FC<Props> = ({ issues }) => {
                                   <CustomMenu.MenuItem
                                     key={option.key}
                                     onClick={() => {
-                                      console.log(option.key);
                                       setOrderBy(option.key);
                                     }}
                                   >

apps/app/components/core/issues-view.tsx

@@ -114,27 +114,31 @@ export const IssuesView: React.FC<Props> = ({
         if (orderBy === "sort_order") {
           const destinationGroupArray = groupedByIssues[destination.droppableId];
 
-          if (destination.index === 0) newSortOrder = destinationGroupArray[0].sort_order - 10000;
+          if (destinationGroupArray.length !== 0) {
-          else if (destination.index === destinationGroupArray.length)
+            if (destination.index === 0) newSortOrder = destinationGroupArray[0].sort_order - 10000;
-            newSortOrder =
+            else if (
-              destinationGroupArray[destinationGroupArray.length - 1].sort_order + 10000;
+              (source.droppableId !== destination.droppableId &&
-          else
+                destination.index === destinationGroupArray.length) ||
-            newSortOrder =
+              (source.droppableId === destination.droppableId &&
-              (destinationGroupArray[destination.index - 1].sort_order +
+                destination.index === destinationGroupArray.length - 1)
-                destinationGroupArray[destination.index].sort_order) /
+            )
-              2;
+              newSortOrder =
+                destinationGroupArray[destinationGroupArray.length - 1].sort_order + 10000;
+            else
+              newSortOrder =
+                (destinationGroupArray[destination.index - 1].sort_order +
+                  destinationGroupArray[destination.index].sort_order) /
+                2;
+          }
         }
 
-        if (source.droppableId !== destination.droppableId) {
+        if (orderBy === "sort_order" || source.droppableId !== destination.droppableId) {
           const sourceGroup = source.droppableId; // source group id
           const destinationGroup = destination.droppableId; // destination group id
 
           if (!sourceGroup || !destinationGroup) return;
 
           if (selectedGroup === "priority") {
-            // update the removed item for mutation
-            draggedItem.priority = destinationGroup;
-
             if (cycleId)
               mutate<CycleIssueResponse[]>(
                 CYCLE_ISSUES(cycleId as string),
@@ -220,8 +224,6 @@ export const IssuesView: React.FC<Props> = ({
 
             // update the removed item for mutation
             if (!destinationStateId || !destinationState) return;
-            draggedItem.state = destinationStateId;
-            draggedItem.state_detail = destinationState;
 
             if (cycleId)
               mutate<CycleIssueResponse[]>(

apps/app/components/core/sidebar/index.ts

@@ -1,2 +1,3 @@
+export * from "./links-list";
 export * from "./sidebar-progress-stats";
 export * from "./single-progress-stats";

apps/app/components/core/sidebar/links-list.tsx

@@ -0,0 +1,58 @@
+import Link from "next/link";
+
+// icons
+import { LinkIcon, TrashIcon } from "@heroicons/react/24/outline";
+// helpers
+import { timeAgo } from "helpers/date-time.helper";
+// types
+import { IUserLite, UserAuth } from "types";
+
+type Props = {
+  links: {
+    id: string;
+    created_at: Date;
+    created_by: string;
+    created_by_detail: IUserLite;
+    title: string;
+    url: string;
+  }[];
+  handleDeleteLink: (linkId: string) => void;
+  userAuth: UserAuth;
+};
+
+export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }) => {
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
+  return (
+    <>
+      {links.map((link) => (
+        <div key={link.id} className="group relative">
+          {!isNotAllowed && (
+            <div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover:opacity-100">
+              <button
+                type="button"
+                className="grid h-7 w-7 place-items-center rounded bg-gray-100 p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
+                onClick={() => handleDeleteLink(link.id)}
+              >
+                <TrashIcon className="h-4 w-4" />
+              </button>
+            </div>
+          )}
+          <Link href={link.url} target="_blank">
+            <a className="group relative flex gap-2 rounded-md border bg-gray-100 p-2">
+              <div className="mt-0.5">
+                <LinkIcon className="h-3.5 w-3.5" />
+              </div>
+              <div>
+                <h5>{link.title}</h5>
+                {/* <p className="mt-0.5 text-gray-500">
+                Added {timeAgo(link.created_at)} ago by {link.created_by_detail.email}
+              </p> */}
+              </div>
+            </a>
+          </Link>
+        </div>
+      ))}
+    </>
+  );
+};

apps/app/components/issues/index.ts

@@ -4,7 +4,6 @@ export * from "./activity";
 export * from "./delete-issue-modal";
 export * from "./description-form";
 export * from "./form";
-export * from "./links-list";
 export * from "./modal";
 export * from "./my-issues-list-item";
 export * from "./parent-issues-list-modal";

apps/app/components/issues/links-list.tsx

@@ -1,179 +0,0 @@
-import { FC, useState } from "react";
-
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
-import { Disclosure, Transition } from "@headlessui/react";
-// services
-import issuesService from "services/issues.service";
-// hooks
-import useToast from "hooks/use-toast";
-// components
-import { LinkModal } from "components/core";
-// ui
-import { CustomMenu } from "components/ui";
-// icons
-import { ChevronRightIcon, LinkIcon, PlusIcon } from "@heroicons/react/24/outline";
-// helpers
-import { copyTextToClipboard } from "helpers/string.helper";
-import { timeAgo } from "helpers/date-time.helper";
-// types
-import { IIssue, IIssueLink, UserAuth } from "types";
-// fetch-keys
-import { ISSUE_DETAILS } from "constants/fetch-keys";
-
-type Props = {
-  parentIssue: IIssue;
-  userAuth: UserAuth;
-};
-
-export const LinksList: FC<Props> = ({ parentIssue, userAuth }) => {
-  const [linkModal, setLinkModal] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const handleCreateLink = async (formData: IIssueLink) => {
-    if (!workspaceSlug || !projectId || !parentIssue) return;
-
-    const previousLinks = parentIssue?.issue_link.map((l) => ({ title: l.title, url: l.url }));
-
-    const payload: Partial<IIssue> = {
-      links_list: [...(previousLinks ?? []), formData],
-    };
-
-    await issuesService
-      .patchIssue(workspaceSlug as string, projectId as string, parentIssue.id, payload)
-      .then((res) => {
-        mutate(ISSUE_DETAILS(parentIssue.id as string));
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  };
-
-  const handleDeleteLink = async (linkId: string) => {
-    if (!workspaceSlug || !projectId || !parentIssue) return;
-
-    const updatedLinks = parentIssue.issue_link.filter((l) => l.id !== linkId);
-
-    mutate<IIssue>(
-      ISSUE_DETAILS(parentIssue.id as string),
-      (prevData) => ({ ...(prevData as IIssue), issue_link: updatedLinks }),
-      false
-    );
-
-    await issuesService
-      .patchIssue(workspaceSlug as string, projectId as string, parentIssue.id, {
-        links_list: updatedLinks,
-      })
-      .then((res) => {
-        mutate(ISSUE_DETAILS(parentIssue.id as string));
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  };
-
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
-
-  return (
-    <>
-      <LinkModal
-        isOpen={linkModal}
-        handleClose={() => setLinkModal(false)}
-        onFormSubmit={handleCreateLink}
-      />
-      {parentIssue.issue_link && parentIssue.issue_link.length > 0 ? (
-        <Disclosure defaultOpen={true}>
-          {({ open }) => (
-            <>
-              <div className="flex items-center justify-between">
-                <Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100">
-                  <ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
-                  Links <span className="ml-1 text-gray-600">{parentIssue.issue_link.length}</span>
-                </Disclosure.Button>
-                {open && !isNotAllowed ? (
-                  <div className="flex items-center">
-                    <button
-                      type="button"
-                      className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100"
-                      onClick={() => setLinkModal(true)}
-                    >
-                      <PlusIcon className="h-3 w-3" />
-                      Create new
-                    </button>
-                  </div>
-                ) : null}
-              </div>
-              <Transition
-                enter="transition duration-100 ease-out"
-                enterFrom="transform scale-95 opacity-0"
-                enterTo="transform scale-100 opacity-100"
-                leave="transition duration-75 ease-out"
-                leaveFrom="transform scale-100 opacity-100"
-                leaveTo="transform scale-95 opacity-0"
-              >
-                <Disclosure.Panel className="mt-3 flex flex-col gap-y-1">
-                  {parentIssue.issue_link.map((link) => (
-                    <div
-                      key={link.id}
-                      className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-gray-100"
-                    >
-                      <Link href={link.url}>
-                        <a className="flex items-center gap-2 rounded text-xs">
-                          <LinkIcon className="h-3 w-3" />
-                          <span className="max-w-sm break-all font-medium">{link.title}</span>
-                          <span className="text-gray-400 text-[0.65rem]">
-                            {timeAgo(link.created_at)}
-                          </span>
-                        </a>
-                      </Link>
-                      {!isNotAllowed && (
-                        <div className="opacity-0 group-hover:opacity-100">
-                          <CustomMenu ellipsis>
-                            <CustomMenu.MenuItem
-                              onClick={() =>
-                                copyTextToClipboard(link.url).then(() => {
-                                  setToastAlert({
-                                    type: "success",
-                                    title: "Link copied to clipboard",
-                                  });
-                                })
-                              }
-                            >
-                              Copy link
-                            </CustomMenu.MenuItem>
-                            <CustomMenu.MenuItem onClick={() => handleDeleteLink(link.id)}>
-                              Remove link
-                            </CustomMenu.MenuItem>
-                          </CustomMenu>
-                        </div>
-                      )}
-                    </div>
-                  ))}
-                </Disclosure.Panel>
-              </Transition>
-            </>
-          )}
-        </Disclosure>
-      ) : (
-        !isNotAllowed && (
-          <button
-            type="button"
-            className="flex cursor-pointer items-center justify-between gap-1 px-2 py-1 text-xs rounded duration-300 hover:bg-gray-100"
-            onClick={() => setLinkModal(true)}
-          >
-            <PlusIcon className="h-3 w-3" />
-            Add new link
-          </button>
-        )
-      )}
-    </>
-  );
-};

apps/app/components/issues/sidebar.tsx

@@ -13,9 +13,10 @@ import { Popover, Listbox, Transition } from "@headlessui/react";
 // hooks
 import useToast from "hooks/use-toast";
 // services
-import issuesServices from "services/issues.service";
+import issuesService from "services/issues.service";
 import modulesService from "services/modules.service";
 // components
+import { LinkModal, LinksList } from "components/core";
 import {
   DeleteIssueModal,
   SidebarAssigneeSelect,
@@ -43,7 +44,7 @@ import {
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
-import type { ICycle, IIssue, IIssueLabels, IModule, UserAuth } from "types";
+import type { ICycle, IIssue, IIssueLabels, IIssueLink, IModule, UserAuth } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS, PROJECT_ISSUES_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
 
@@ -69,6 +70,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
 }) => {
   const [createLabelForm, setCreateLabelForm] = useState(false);
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [linkModal, setLinkModal] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
@@ -80,14 +82,14 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
       ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
       : null,
     workspaceSlug && projectId
-      ? () => issuesServices.getIssues(workspaceSlug as string, projectId as string)
+      ? () => issuesService.getIssues(workspaceSlug as string, projectId as string)
       : null
   );
 
   const { data: issueLabels, mutate: issueLabelMutate } = useSWR<IIssueLabels[]>(
     workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => issuesServices.getIssueLabels(workspaceSlug as string, projectId as string)
+      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
       : null
   );
 
@@ -104,7 +106,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
 
   const handleNewLabel = (formData: any) => {
     if (!workspaceSlug || !projectId || isSubmitting) return;
-    issuesServices
+    issuesService
       .createIssueLabel(workspaceSlug as string, projectId as string, formData)
       .then((res) => {
         reset(defaultValues);
@@ -118,7 +120,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
     (cycleDetail: ICycle) => {
       if (!workspaceSlug || !projectId || !issueDetail) return;
 
-      issuesServices
+      issuesService
         .addIssueToCycle(workspaceSlug as string, projectId as string, cycleDetail.id, {
           issues: [issueDetail.id],
         })
@@ -144,6 +146,48 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
     [workspaceSlug, projectId, issueId, issueDetail]
   );
 
+  const handleCreateLink = async (formData: IIssueLink) => {
+    if (!workspaceSlug || !projectId || !issueDetail) return;
+
+    const previousLinks = issueDetail?.issue_link.map((l) => ({ title: l.title, url: l.url }));
+
+    const payload: Partial<IIssue> = {
+      links_list: [...(previousLinks ?? []), formData],
+    };
+
+    await issuesService
+      .patchIssue(workspaceSlug as string, projectId as string, issueDetail.id, payload)
+      .then((res) => {
+        mutate(ISSUE_DETAILS(issueDetail.id as string));
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const handleDeleteLink = async (linkId: string) => {
+    if (!workspaceSlug || !projectId || !issueDetail) return;
+
+    const updatedLinks = issueDetail.issue_link.filter((l) => l.id !== linkId);
+
+    mutate<IIssue>(
+      ISSUE_DETAILS(issueDetail.id as string),
+      (prevData) => ({ ...(prevData as IIssue), issue_link: updatedLinks }),
+      false
+    );
+
+    await issuesService
+      .patchIssue(workspaceSlug as string, projectId as string, issueDetail.id, {
+        links_list: updatedLinks,
+      })
+      .then((res) => {
+        mutate(ISSUE_DETAILS(issueDetail.id as string));
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
   useEffect(() => {
     if (!createLabelForm) return;
 
@@ -154,6 +198,11 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
 
   return (
     <>
+      <LinkModal
+        isOpen={linkModal}
+        handleClose={() => setLinkModal(false)}
+        onFormSubmit={handleCreateLink}
+      />
       <DeleteIssueModal
         handleClose={() => setDeleteIssueModal(false)}
         isOpen={deleteIssueModal}
@@ -297,7 +346,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
             />
           </div>
         </div>
-        <div className="space-y-3 pt-3">
+        <div className="space-y-3 py-3">
           <div className="flex items-start justify-between">
             <div className="flex basis-1/2 items-center gap-x-2 text-sm">
               <TagIcon className="h-4 w-4" />
@@ -527,6 +576,29 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
             </form>
           )}
         </div>
+        <div className="py-1 text-xs">
+          <div className="flex items-center justify-between gap-2">
+            <h4>Links</h4>
+            {!isNotAllowed && (
+              <button
+                type="button"
+                className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-100"
+                onClick={() => setLinkModal(true)}
+              >
+                <PlusIcon className="h-4 w-4" />
+              </button>
+            )}
+          </div>
+          <div className="mt-2 space-y-2">
+            {issueDetail?.issue_link && issueDetail.issue_link.length > 0 ? (
+              <LinksList
+                links={issueDetail.issue_link}
+                handleDeleteLink={handleDeleteLink}
+                userAuth={userAuth}
+              />
+            ) : null}
+          </div>
+        </div>
       </div>
     </>
   );

apps/app/components/modules/sidebar.tsx

@@ -25,7 +25,7 @@ import modulesService from "services/modules.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
-import { LinkModal, SidebarProgressStats } from "components/core";
+import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
 import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules";
 import ProgressChart from "components/core/sidebar/progress-chart";
 
@@ -37,7 +37,7 @@ import { renderDateFormat, renderShortNumericDateFormat, timeAgo } from "helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 import { groupBy } from "helpers/array.helper";
 // types
-import { IIssue, IModule, ModuleIssueResponse, ModuleLink } from "types";
+import { IIssue, IModule, ModuleIssueResponse, ModuleLink, UserAuth } from "types";
 // fetch-keys
 import { MODULE_DETAILS } from "constants/fetch-keys";
 // constant
@@ -56,9 +56,16 @@ type Props = {
   module?: IModule;
   isOpen: boolean;
   moduleIssues: ModuleIssueResponse[] | undefined;
+  userAuth: UserAuth;
 };
 
-export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen, moduleIssues }) => {
+export const ModuleDetailsSidebar: React.FC<Props> = ({
+  issues,
+  module,
+  isOpen,
+  moduleIssues,
+  userAuth,
+}) => {
   const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
   const [moduleLinkModal, setModuleLinkModal] = useState(false);
   const [startDateRange, setStartDateRange] = useState<Date | null>(new Date());
@@ -128,6 +135,13 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
       });
   };
 
+  const handleDeleteLink = (linkId: string) => {
+    if (!module) return;
+
+    const updatedLinks = module.link_module.filter((l) => l.id !== linkId);
+    submitChanges({ links_list: updatedLinks });
+  };
+
   useEffect(() => {
     if (module)
       reset({
@@ -348,40 +362,13 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
                   </button>
                 </div>
                 <div className="mt-2 space-y-2">
-                  {module.link_module && module.link_module.length > 0
+                  {module.link_module && module.link_module.length > 0 ? (
-                    ? module.link_module.map((link) => (
+                    <LinksList
-                        <div key={link.id} className="group relative">
+                      links={module.link_module}
-                          <div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover:opacity-100">
+                      handleDeleteLink={handleDeleteLink}
-                            <button
+                      userAuth={userAuth}
-                              type="button"
+                    />
-                              className="grid h-7 w-7 place-items-center rounded bg-gray-100 p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
+                  ) : null}
-                              onClick={() => {
-                                const updatedLinks = module.link_module.filter(
-                                  (l) => l.id !== link.id
-                                );
-                                submitChanges({ links_list: updatedLinks });
-                              }}
-                            >
-                              <TrashIcon className="h-4 w-4" />
-                            </button>
-                          </div>
-                          <Link href={link.url} target="_blank">
-                            <a className="group relative flex gap-2 rounded-md border bg-gray-100 p-2">
-                              <div className="mt-0.5">
-                                <LinkIcon className="h-3.5 w-3.5" />
-                              </div>
-                              <div>
-                                <h5>{link.title}</h5>
-                                <p className="mt-0.5 text-gray-500">
-                                  Added {timeAgo(link.created_at)} ago by{" "}
-                                  {link.created_by_detail.email}
-                                </p>
-                              </div>
-                            </a>
-                          </Link>
-                        </div>
-                      ))
-                    : null}
                 </div>
               </div>
             </div>

apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx

@@ -20,7 +20,6 @@ import {
   IssueDetailsSidebar,
   IssueActivitySection,
   AddComment,
-  LinksList,
 } from "components/issues";
 // ui
 import { Loader, CustomMenu } from "components/ui";
@@ -196,7 +195,6 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
               />
               <div className="mt-2 space-y-2">
                 <SubIssuesList parentIssue={issueDetails} userAuth={props} />
-                <LinksList parentIssue={issueDetails} userAuth={props} />
               </div>
             </div>
             <div className="space-y-5 bg-secondary pt-3">

apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx

@@ -215,6 +215,7 @@ const SingleModule: React.FC<UserAuth> = (props) => {
           module={moduleDetails}
           isOpen={moduleSidebar}
           moduleIssues={moduleIssues}
+          userAuth={props}
         />
       </AppLayout>
     </IssueViewContextProvider>