feat: global component for links list (makeplane#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;
-          else if (destination.index === destinationGroupArray.length)
-            newSortOrder =
-              destinationGroupArray[destinationGroupArray.length - 1].sort_order + 10000;
-          else
-            newSortOrder =
-              (destinationGroupArray[destination.index - 1].sort_order +
-                destinationGroupArray[destination.index].sort_order) /
-              2;
+          if (destinationGroupArray.length !== 0) {
+            if (destination.index === 0) newSortOrder = destinationGroupArray[0].sort_order - 10000;
+            else if (
+              (source.droppableId !== destination.droppableId &&
+                destination.index === destinationGroupArray.length) ||
+              (source.droppableId === destination.droppableId &&
+                destination.index === destinationGroupArray.length - 1)
+            )
+              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";