chore: minor fixes

web/components/project/index.ts

@@ -5,7 +5,7 @@ export * from "./settings-sidebar";
 export * from "./single-integration-card";
 export * from "./single-project-card";
 export * from "./sidebar-list-item";
-export * from "./confirm-project-leave-modal";
+export * from "./leave-project-modal";
 export * from "./member-select";
 export * from "./members-select";
 export * from "./label-select";

web/components/project/leave-project-modal.tsx

@@ -1,18 +1,14 @@
-import React from "react";
+import { FC } from "react";
-// next imports
 import { useRouter } from "next/router";
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
-// icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { observer } from "mobx-react-lite";
 // ui
 import { DangerButton, Input, SecondaryButton } from "components/ui";
 // fetch-keys
 import { PROJECTS_LIST } from "constants/fetch-keys";
 // mobx react lite
-import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
@@ -33,16 +29,17 @@ const defaultValues: FormData = {
   confirmLeave: "",
 };
 
-export const ConfirmProjectLeaveModal: React.FC = observer(() => {
+export const LeaveProjectModal: FC<> = observer(() => {
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-
+  // store
-  const store: RootStore = useMobxStore();
+  const { project: projectStore } = useMobxStore();
-  const { project } = store;
+  // user
-
   const { user } = useUser();
+  // project
   const { mutateProjects } = useProjects();
-
+  // toast
   const { setToastAlert } = useToast();
 
   const {
@@ -50,23 +47,21 @@ export const ConfirmProjectLeaveModal: React.FC = observer(() => {
     formState: { isSubmitting },
     handleSubmit,
     reset,
-    watch,
   } = useForm({ defaultValues });
 
   const handleClose = () => {
-    project.handleProjectLeaveModal(null);
+    projectStore.handleProjectLeaveModal(null);
-
     reset({ ...defaultValues });
   };
 
   const onSubmit = async (data: any) => {
     if (data) {
-      if (data.projectName === project?.projectLeaveDetails?.name) {
+      if (data.projectName === projectStore?.projectLeaveDetails?.name) {
         if (data.confirmLeave === "Leave Project") {
-          return project
+          return projectStore
             .leaveProject(
-              project.projectLeaveDetails.workspaceSlug.toString(),
+              projectStore.projectLeaveDetails.workspaceSlug.toString(),
-              project.projectLeaveDetails.id.toString(),
+              projectStore.projectLeaveDetails.id.toString(),
               user
             )
             .then((res) => {
@@ -105,7 +100,7 @@ export const ConfirmProjectLeaveModal: React.FC = observer(() => {
   };
 
   return (
-    <Transition.Root show={project.projectLeaveModal} as={React.Fragment}>
+    <Transition.Root show={projectStore.projectLeaveModal} as={React.Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
           as={React.Fragment}
@@ -134,10 +129,7 @@ export const ConfirmProjectLeaveModal: React.FC = observer(() => {
                 <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <ExclamationTriangleIcon
+                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Leave Project</h3>
@@ -155,10 +147,8 @@ export const ConfirmProjectLeaveModal: React.FC = observer(() => {
                   <div className="text-custom-text-200">
                     <p className="break-words text-sm ">
                       Enter the project name{" "}
-                      <span className="font-medium text-custom-text-100">
+                      <span className="font-medium text-custom-text-100">{project?.projectLeaveDetails?.name}</span> to
-                        {project?.projectLeaveDetails?.name}
+                      continue:
-                      </span>{" "}
-                      to continue:
                     </p>
                     <Controller
                       control={control}
@@ -177,8 +167,7 @@ export const ConfirmProjectLeaveModal: React.FC = observer(() => {
 
                   <div className="text-custom-text-200">
                     <p className="text-sm">
-                      To confirm, type{" "}
+                      To confirm, type <span className="font-medium text-custom-text-100">Leave Project</span> below:
-                      <span className="font-medium text-custom-text-100">Leave Project</span> below:
                     </p>
                     <Controller
                       control={control}

web/components/project/sidebar-list-item.tsx

@@ -1,12 +1,10 @@
+import { useState } from "react";
 import Link from "next/link";
 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";
+import { observer } from "mobx-react-lite";
 // services
 import projectService from "services/project.service";
 // hooks
@@ -32,11 +30,10 @@ import { renderEmoji } from "helpers/emoji.helper";
 import { IProject } from "types";
 // fetch-keys
 import { PROJECTS_LIST } from "constants/fetch-keys";
-// mobx react lite
-import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
+import { LeaveProjectModal } from "./leave-project-modal";
 
 type Props = {
   project: IProject;
@@ -98,6 +95,8 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId } = router.query;
   // toast
   const { setToastAlert } = useToast();
+  // states
+  const [leaveProjectModalOpen, setLeaveProjectModal] = useState(false);
 
   const isAdmin = project.member_role === 20;
   const isViewerOrGuest = project.member_role === 10 || project.member_role === 5;
@@ -126,7 +125,13 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
     });
   };
 
+  const handleLeaveProject = () => {
+    setLeaveProjectModal(true);
+  };
+
   return (
+    <>
+      <LeaveProjectModal project={project} isOpen={leaveProjectModalOpen} onClose={} />
       <Disclosure key={project.id} defaultOpen={projectId === project.id}>
         {({ open }) => (
           <>
@@ -260,7 +265,9 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                       <span>Draft Issues</span>
                     </div>
                   </CustomMenu.MenuItem>
-                <CustomMenu.MenuItem onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/settings`)}>
+                  <CustomMenu.MenuItem
+                    onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/settings`)}
+                  >
                     <div className="flex items-center justify-start gap-2">
                       <Icon iconName="settings" className="!text-base !leading-4" />
                       <span>Settings</span>
@@ -269,15 +276,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
 
                   {/* leave project */}
                   {isViewerOrGuest && (
-                  <CustomMenu.MenuItem
+                    <CustomMenu.MenuItem onClick={handleLeaveProject}>
-                    onClick={() =>
-                      projectStore.handleProjectLeaveModal({
-                        id: project?.id,
-                        name: project?.name,
-                        workspaceSlug: workspaceSlug as string,
-                      })
-                    }
-                  >
                       <div className="flex items-center justify-start gap-2">
                         <Icon iconName="logout" className="!text-base !leading-4" />
                         <span>Leave Project</span>
@@ -339,5 +338,6 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
           </>
         )}
       </Disclosure>
+    </>
   );
 });

web/components/project/sidebar-list.tsx

@@ -9,7 +9,8 @@ import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 import useProjects from "hooks/use-projects";
 // components
-import { CreateProjectModal, DeleteProjectModal, ProjectSidebarListItem } from "components/project";
+import { CreateProjectModal, DeleteProjectModal, ProjectSidebarListItem, LeaveProjectModal } from "components/project";
+import { PublishProjectModal } from "components/project/publish-project/modal";
 // services
 import projectService from "services/project.service";
 // icons
@@ -26,7 +27,7 @@ import { PROJECTS_LIST } from "constants/fetch-keys";
 import { useMobxStore } from "lib/mobx/store-provider";
 
 export const ProjectSidebarList: FC = observer(() => {
-  const { theme: themeStore, workspace: workspaceStore } = useMobxStore();
+  const { theme: themeStore, workspace: workspaceStore, project: projectStore } = useMobxStore();
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -39,11 +40,8 @@ export const ProjectSidebarList: FC = observer(() => {
   const [isFavoriteProjectCreate, setIsFavoriteProjectCreate] = useState(false);
   const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
   const [deleteProjectModal, setDeleteProjectModal] = useState(false);
-  const [projectToDelete, setProjectToDelete] = useState<IProject | null>(null);
-  const [projectToLeaveId, setProjectToLeaveId] = useState<string | null>(null);
 
-  // router
+  const [isScrolled, setIsScrolled] = useState(false); // scroll animation state
-  const [isScrolled, setIsScrolled] = useState(false);
 
   const containerRef = useRef<HTMLDivElement | null>(null);
 
@@ -53,9 +51,6 @@ export const ProjectSidebarList: FC = observer(() => {
   const joinedProjects = workspaceSlug && workspaceStore.workspaceJoinedProjects;
   const favoriteProjects = workspaceSlug && workspaceStore.workspaceFavoriteProjects;
 
-  console.log("workspaceJoinedProjects", workspaceStore.workspaceJoinedProjects);
-  console.log("workspaceFavoriteProjects", workspaceStore.workspaceFavoriteProjects);
-
   const orderedJoinedProjects: IProject[] | undefined = joinedProjects
     ? orderArrayBy(joinedProjects, "sort_order", "ascending")
     : undefined;
@@ -64,11 +59,6 @@ export const ProjectSidebarList: FC = observer(() => {
     ? orderArrayBy(favoriteProjects, "sort_order", "ascending")
     : undefined;
 
-  const handleDeleteProject = (project: IProject) => {
-    setProjectToDelete(project);
-    setDeleteProjectModal(true);
-  };
-
   const handleCopyText = (projectId: string) => {
     const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
     copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues`).then(() => {
@@ -87,36 +77,11 @@ export const ProjectSidebarList: FC = observer(() => {
 
     if (source.index === destination.index) return;
 
-    const projectsList =
+    const updatedSortOrder = projectStore.orderProjectsWithSortOrder(source.index, destination.index, draggableId);
-      (destination.droppableId === "joined-projects" ? orderedJoinedProjects : orderedFavProjects) ?? [];
 
-    let updatedSortOrder = projectsList[source.index].sort_order;
+    projectStore
-
+      .updateProjectView(workspaceSlug.toString(), draggableId, { sort_order: updatedSortOrder })
-    if (destination.index === 0) updatedSortOrder = (projectsList[0].sort_order as number) - 1000;
+      .catch((error) => {
-    else if (destination.index === projectsList.length - 1)
-      updatedSortOrder = (projectsList[projectsList.length - 1].sort_order as number) + 1000;
-    else {
-      const destinationSortingOrder = projectsList[destination.index].sort_order as number;
-      const relativeDestinationSortingOrder =
-        source.index < destination.index
-          ? (projectsList[destination.index + 1].sort_order as number)
-          : (projectsList[destination.index - 1].sort_order as number);
-
-      updatedSortOrder = (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!",
@@ -125,20 +90,20 @@ export const ProjectSidebarList: FC = observer(() => {
       });
   };
 
+  /**
+   * Implementing scroll animation styles based on the scroll length of the container
+   */
+  useEffect(() => {
     const handleScroll = () => {
       if (containerRef.current) {
         const scrollTop = containerRef.current.scrollTop;
         setIsScrolled(scrollTop > 0);
       }
     };
-
-  useEffect(() => {
     const currentContainerRef = containerRef.current;
-
     if (currentContainerRef) {
       currentContainerRef.addEventListener("scroll", handleScroll);
     }
-
     return () => {
       if (currentContainerRef) {
         currentContainerRef.removeEventListener("scroll", handleScroll);
@@ -160,6 +125,10 @@ export const ProjectSidebarList: FC = observer(() => {
         data={projectToDelete}
         user={user}
       />
+      {/* project leave modal */}
+      <LeaveProjectModal />
+      {/* publish project modal */}
+      <PublishProjectModal />
       <div
         ref={containerRef}
         className={`h-full overflow-y-auto px-4 space-y-3 pt-3 ${

web/layouts/app-layout/app-sidebar.tsx

@@ -1,5 +1,4 @@
-// hooks
+import { observer } from "mobx-react-lite";
-import useTheme from "hooks/use-theme";
 // components
 import {
   WorkspaceHelpSection,
@@ -8,10 +7,6 @@ import {
   WorkspaceSidebarQuickAction,
 } from "components/workspace";
 import { ProjectSidebarList } from "components/project";
-import { PublishProjectModal } from "components/project/publish-project/modal";
-import { ConfirmProjectLeaveModal } from "components/project/confirm-project-leave-modal";
-// mobx react lite
-import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 
@@ -21,15 +16,13 @@ export interface SidebarProps {
 }
 
 const Sidebar: React.FC<SidebarProps> = observer(({ toggleSidebar, setToggleSidebar }) => {
-  const store: any = useMobxStore();
+  const { theme: themStore } = useMobxStore();
-  // theme
-  const { collapsed: sidebarCollapse } = useTheme();
 
   return (
     <div
       id="app-sidebar"
       className={`fixed md:relative inset-y-0 flex flex-col bg-custom-sidebar-background-100 h-full flex-shrink-0 flex-grow-0 border-r border-custom-sidebar-border-200 z-20 duration-300 ${
-        store?.theme?.sidebarCollapsed ? "" : "md:w-[280px]"
+        themStore?.sidebarCollapsed ? "" : "md:w-[280px]"
       } ${toggleSidebar ? "left-0" : "-left-full md:left-0"}`}
     >
       <div className="flex h-full w-full flex-1 flex-col">
@@ -39,10 +32,6 @@ const Sidebar: React.FC<SidebarProps> = observer(({ toggleSidebar, setToggleSide
         <ProjectSidebarList />
         <WorkspaceHelpSection setSidebarActive={setToggleSidebar} />
       </div>
-      {/* publish project modal */}
-      <PublishProjectModal />
-      {/* project leave modal */}
-      <ConfirmProjectLeaveModal />
     </div>
   );
 });

web/store/project.ts

@@ -15,9 +15,6 @@ export interface IProjectStore {
   loader: boolean;
   error: any | null;
 
-  projectLeaveModal: boolean;
-  projectLeaveDetails: IProject | any;
-
   projectId: string | null;
 
   projects: {
@@ -65,6 +62,9 @@ export interface IProjectStore {
   addProjectToFavorites: (workspaceSlug: string, projectSlug: string) => Promise<any>;
   removeProjectFromFavorites: (workspaceSlug: string, projectSlug: string) => Promise<any>;
 
+  orderProjectsWithSortOrder: (sourceIndex: number, destinationIndex: number, projectId: string) => number;
+  updateProjectView: (workspaceSlug: string, projectId: string, viewProps: any) => Promise<any>;
+
   handleProjectLeaveModal: (project: any | null) => void;
 
   leaveProject: (workspaceSlug: string, projectSlug: string, user: any) => Promise<void>;
@@ -150,6 +150,9 @@ class ProjectStore implements IProjectStore {
       addProjectToFavorites: action,
       removeProjectFromFavorites: action,
 
+      orderProjectsWithSortOrder: action,
+      updateProjectView: action,
+
       handleProjectLeaveModal: action,
       leaveProject: action,
     });
@@ -421,6 +424,56 @@ class ProjectStore implements IProjectStore {
     }
   };
 
+  orderProjectsWithSortOrder = (sortIndex: number, destinationIndex: number, projectId: string) => {
+    try {
+      const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+      if (!workspaceSlug) return 0;
+
+      const projectsList = this.rootStore.workspace.projects[workspaceSlug] || [];
+      let updatedSortOrder = projectsList[sortIndex].sort_order;
+
+      if (destinationIndex === 0) updatedSortOrder = (projectsList[0].sort_order as number) - 1000;
+      else if (destinationIndex === projectsList.length - 1)
+        updatedSortOrder = (projectsList[projectsList.length - 1].sort_order as number) + 1000;
+      else {
+        const destinationSortingOrder = projectsList[destinationIndex].sort_order as number;
+        const relativeDestinationSortingOrder =
+          sortIndex < destinationIndex
+            ? (projectsList[destinationIndex + 1].sort_order as number)
+            : (projectsList[destinationIndex - 1].sort_order as number);
+
+        updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
+      }
+
+      const updatedProjectsList = projectsList.map((p) =>
+        p.id === projectId ? { ...p, sort_order: updatedSortOrder } : p
+      );
+
+      runInAction(() => {
+        this.rootStore.workspace.projects = {
+          ...this.rootStore.workspace.projects,
+          [workspaceSlug]: updatedProjectsList,
+        };
+      });
+
+      return updatedSortOrder;
+    } catch (error) {
+      console.log("failed to update sort order of the projects");
+      return 0;
+    }
+  };
+
+  updateProjectView = async (workspaceSlug: string, projectId: string, viewProps: any) => {
+    try {
+      const response = await this.projectService.setProjectView(workspaceSlug, projectId, viewProps);
+      await this.rootStore.workspace.getWorkspaceProjects(workspaceSlug);
+      return response;
+    } catch (error) {
+      console.log("Failed to update sort order of the projects");
+      throw error;
+    }
+  };
+
   handleProjectLeaveModal = (project: IProject | null = null) => {
     if (project && project?.id) {
       this.projectLeaveModal = !this.projectLeaveModal;