feat: sidebar project ordering functionality added (#1725)

apps/app/components/project/sidebar-list.tsx

@@ -1,7 +1,10 @@
 import React, { useState, FC } from "react";
 
 import { useRouter } from "next/router";
+import { mutate } from "swr";
 
+// react-beautiful-dnd
+import { DragDropContext, Draggable, DropResult, Droppable } from "react-beautiful-dnd";
 // hooks
 import useToast from "hooks/use-toast";
 import useTheme from "hooks/use-theme";
@@ -9,12 +12,17 @@ import useUserAuth from "hooks/use-user-auth";
 import useProjects from "hooks/use-projects";
 // components
 import { DeleteProjectModal, SingleSidebarProject } from "components/project";
+// services
+import projectService from "services/project.service";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
+import { orderArrayBy } from "helpers/array.helper";
 // types
 import { IProject } from "types";
+// fetch-keys
+import { PROJECTS_LIST } from "constants/fetch-keys";
 
 export const ProjectSidebarList: FC = () => {
   const [deleteProjectModal, setDeleteProjectModal] = useState(false);
@@ -32,6 +40,14 @@ export const ProjectSidebarList: FC = () => {
   const { projects: allProjects } = useProjects();
   const favoriteProjects = allProjects?.filter((p) => p.is_favorite);
 
+  const orderedAllProjects = allProjects
+    ? orderArrayBy(allProjects, "sort_order", "ascending")
+    : [];
+
+  const orderedFavProjects = favoriteProjects
+    ? orderArrayBy(favoriteProjects, "sort_order", "ascending")
+    : [];
+
   const handleDeleteProject = (project: IProject) => {
     setProjectToDelete(project);
     setDeleteProjectModal(true);
@@ -49,6 +65,54 @@ export const ProjectSidebarList: FC = () => {
     });
   };
 
+  const onDragEnd = async (result: DropResult) => {
+    const { source, destination, draggableId } = result;
+
+    if (!destination || !workspaceSlug) return;
+    if (source.index === destination.index) return;
+
+    const projectList =
+      destination.droppableId === "all-projects" ? orderedAllProjects : orderedFavProjects;
+
+    let updatedSortOrder = projectList[source.index].sort_order;
+    if (destination.index === 0) {
+      updatedSortOrder = projectList[0].sort_order - 1000;
+    } else if (destination.index === projectList.length - 1) {
+      updatedSortOrder = projectList[projectList.length - 1].sort_order + 1000;
+    } else {
+      const destinationSortingOrder = projectList[destination.index].sort_order;
+      const relativeDestinationSortingOrder =
+        source.index < destination.index
+          ? projectList[destination.index + 1].sort_order
+          : projectList[destination.index - 1].sort_order;
+
+      updatedSortOrder = Math.round(
+        (destinationSortingOrder + relativeDestinationSortingOrder) / 2
+      );
+    }
+
+    mutate<IProject[]>(
+      PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
+      (prevData) => {
+        if (!prevData) return prevData;
+        return prevData.map((p) =>
+          p.id === draggableId ? { ...p, sort_order: updatedSortOrder } : p
+        );
+      },
+      false
+    );
+
+    await projectService
+      .setProjectView(workspaceSlug as string, draggableId, { sort_order: updatedSortOrder })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Something went wrong. Please try again.",
+        });
+      });
+  };
+
   return (
     <>
       <DeleteProjectModal
@@ -58,39 +122,75 @@ export const ProjectSidebarList: FC = () => {
         user={user}
       />
       <div className="h-full overflow-y-auto px-4">
-        {favoriteProjects && favoriteProjects.length > 0 && (
+        <DragDropContext onDragEnd={onDragEnd}>
-          <div className="flex flex-col space-y-2 mt-5">
+          <Droppable droppableId="favorite-projects">
-            {!sidebarCollapse && (
+            {(provided) => (
-              <h5 className="text-sm font-medium text-custom-sidebar-text-200">Favorites</h5>
+              <div ref={provided.innerRef} {...provided.droppableProps}>
+                {orderedFavProjects && orderedFavProjects.length > 0 && (
+                  <div className="flex flex-col space-y-2 mt-5">
+                    {!sidebarCollapse && (
+                      <h5 className="text-sm font-medium text-custom-sidebar-text-200">
+                        Favorites
+                      </h5>
+                    )}
+                    {orderedFavProjects.map((project, index) => (
+                      <Draggable key={project.id} draggableId={project.id} index={index}>
+                        {(provided, snapshot) => (
+                          <div ref={provided.innerRef} {...provided.draggableProps}>
+                            <SingleSidebarProject
+                              key={project.id}
+                              project={project}
+                              sidebarCollapse={sidebarCollapse}
+                              provided={provided}
+                              snapshot={snapshot}
+                              handleDeleteProject={() => handleDeleteProject(project)}
+                              handleCopyText={() => handleCopyText(project.id)}
+                              shortContextMenu
+                            />
+                          </div>
+                        )}
+                      </Draggable>
+                    ))}
+                    {provided.placeholder}
+                  </div>
+                )}
+              </div>
             )}
-            {favoriteProjects.map((project) => (
+          </Droppable>
-              <SingleSidebarProject
+        </DragDropContext>
-                key={project.id}
+        <DragDropContext onDragEnd={onDragEnd}>
-                project={project}
+          <Droppable droppableId="all-projects">
-                sidebarCollapse={sidebarCollapse}
+            {(provided) => (
-                handleDeleteProject={() => handleDeleteProject(project)}
+              <div ref={provided.innerRef} {...provided.droppableProps}>
-                handleCopyText={() => handleCopyText(project.id)}
+                {orderedAllProjects && orderedAllProjects.length > 0 && (
-                shortContextMenu
+                  <div className="flex flex-col space-y-2 mt-5">
-              />
+                    {!sidebarCollapse && (
-            ))}
+                      <h5 className="text-sm font-medium text-custom-sidebar-text-200">Projects</h5>
-          </div>
+                    )}
-        )}
+                    {orderedAllProjects.map((project, index) => (
-        {allProjects && allProjects.length > 0 && (
+                      <Draggable key={project.id} draggableId={project.id} index={index}>
-          <div className="flex flex-col space-y-2 mt-5">
+                        {(provided, snapshot) => (
-            {!sidebarCollapse && (
+                          <div ref={provided.innerRef} {...provided.draggableProps}>
-              <h5 className="text-sm font-medium text-custom-sidebar-text-200">Projects</h5>
+                            <SingleSidebarProject
+                              key={project.id}
+                              project={project}
+                              sidebarCollapse={sidebarCollapse}
+                              provided={provided}
+                              snapshot={snapshot}
+                              handleDeleteProject={() => handleDeleteProject(project)}
+                              handleCopyText={() => handleCopyText(project.id)}
+                            />
+                          </div>
+                        )}
+                      </Draggable>
+                    ))}
+                    {provided.placeholder}
+                  </div>
+                )}
+              </div>
             )}
-            {allProjects.map((project) => (
+          </Droppable>
-              <SingleSidebarProject
+        </DragDropContext>
-                key={project.id}
-                project={project}
-                sidebarCollapse={sidebarCollapse}
-                handleDeleteProject={() => handleDeleteProject(project)}
-                handleCopyText={() => handleCopyText(project.id)}
-              />
-            ))}
-          </div>
-        )}
         {allProjects && allProjects.length === 0 && (
           <button
             type="button"

apps/app/components/project/single-sidebar-project.tsx

@@ -3,6 +3,8 @@ import { useRouter } from "next/router";
 
 import { mutate } from "swr";
 
+// react-beautiful-dnd
+import { DraggableProvided, DraggableStateSnapshot } from "react-beautiful-dnd";
 // headless ui
 import { Disclosure, Transition } from "@headlessui/react";
 // services
@@ -12,7 +14,7 @@ import useToast from "hooks/use-toast";
 // ui
 import { CustomMenu, Tooltip } from "components/ui";
 // icons
-import { LinkIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { EllipsisVerticalIcon, LinkIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
 import {
   ArchiveOutlined,
   ArticleOutlined,
@@ -34,6 +36,8 @@ import { PROJECTS_LIST } from "constants/fetch-keys";
 type Props = {
   project: IProject;
   sidebarCollapse: boolean;
+  provided: DraggableProvided;
+  snapshot: DraggableStateSnapshot;
   handleDeleteProject: () => void;
   handleCopyText: () => void;
   shortContextMenu?: boolean;
@@ -75,6 +79,8 @@ const navigation = (workspaceSlug: string, projectId: string) => [
 export const SingleSidebarProject: React.FC<Props> = ({
   project,
   sidebarCollapse,
+  provided,
+  snapshot,
   handleDeleteProject,
   handleCopyText,
   shortContextMenu = false,
@@ -130,7 +136,19 @@ export const SingleSidebarProject: React.FC<Props> = ({
     <Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
       {({ open }) => (
         <>
-          <div className="flex items-center gap-x-1 text-custom-sidebar-text-100">
+          <div
+            className={`group relative flex items-center gap-x-1 text-custom-sidebar-text-100 ${
+              snapshot.isDragging ? "opacity-60" : ""
+            }`}
+          >
+            <button
+              type="button"
+              className="absolute top-2 left-0 hidden rounded p-0.5 group-hover:!flex"
+              {...provided.dragHandleProps}
+            >
+              <EllipsisVerticalIcon className="h-4" />
+              <EllipsisVerticalIcon className="-ml-5 h-4" />
+            </button>
             <Tooltip
               tooltipContent={`${project?.name}`}
               position="right"
@@ -139,7 +157,7 @@ export const SingleSidebarProject: React.FC<Props> = ({
             >
               <Disclosure.Button
                 as="div"
-                className={`flex w-full cursor-pointer select-none items-center rounded-sm py-1 text-left text-sm font-medium ${
+                className={`flex w-full ml-4 cursor-pointer select-none items-center rounded-sm py-1 text-left text-sm font-medium ${
                   sidebarCollapse ? "justify-center" : "justify-between"
                 }`}
               >

apps/app/services/project.service.ts

@@ -254,6 +254,7 @@ class ProjectServices extends APIService {
       view_props?: ProjectViewTheme;
       default_props?: ProjectViewTheme;
       preferences?: ProjectPreferences;
+      sort_order?: number;
     }
   ): Promise<any> {
     await this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/project-views/`, data)

apps/app/types/projects.d.ts

@@ -45,6 +45,7 @@ export interface IProject {
   network: number;
   page_view: boolean;
   project_lead: IUserLite | string | null;
+  sort_order: number;
   slug: string;
   total_cycles: number;
   total_members: number;