dev: home page redirection logic, context refractor

apps/app/components/command-palette/index.tsx

@@ -8,11 +8,10 @@ import useSWR from "swr";
 // hooks
 import useTheme from "lib/hooks/useTheme";
 import useToast from "lib/hooks/useToast";
-// constants
-import { PROJECT_DETAILS, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 // services
 import issuesServices from "lib/services/issues.service";
-import projectService from "lib/services/project.service";
+import projectServices from "lib/services/project.service";
+import userService from "lib/services/user.service";
 // components
 import ShortcutsModal from "components/command-palette/shortcuts";
 import { CreateProjectModal } from "components/project";
@@ -22,6 +21,8 @@ import CreateUpdateModuleModal from "components/project/modules/create-update-mo
 import BulkDeleteIssuesModal from "components/common/bulk-delete-issues-modal";
 // headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
+// constants
+import { PROJECTS_LIST, PROJECT_ISSUES_LIST, USER_ISSUE } from "constants/fetch-keys";
 // ui
 import { Button } from "ui";
 // icons
@@ -48,8 +49,12 @@ const CommandPalette: React.FC = () => {
   const [isBulkDeleteIssuesModalOpen, setIsBulkDeleteIssuesModalOpen] = useState(false);
 
   const router = useRouter();
+
   const { workspaceSlug, projectId } = router.query;
 
+  const { setToastAlert } = useToast();
+  const { toggleCollapsed } = useTheme();
+
   const { data: issues } = useSWR(
     workspaceSlug && projectId
       ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
@@ -59,20 +64,23 @@ const CommandPalette: React.FC = () => {
       : null
   );
 
-  const { data: projectDetails } = useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
+  const { data: myIssues } = useSWR<IIssue[]>(
+    workspaceSlug ? USER_ISSUE(workspaceSlug as string) : null,
+    workspaceSlug ? () => userService.userIssues(workspaceSlug as string) : null
   );
 
-  const { toggleCollapsed } = useTheme();
+  const { data: projects } = useSWR(
+    workspaceSlug ? PROJECTS_LIST(workspaceSlug as string) : null,
+    workspaceSlug ? () => projectServices.getProjects(workspaceSlug as string) : null
+  );
 
-  const { setToastAlert } = useToast();
+  const activeProject = !projectId
+    ? projects?.[0]
+    : projects?.find((project) => project.id === projectId);
 
   const filteredIssues: IIssue[] =
     query === ""
-      ? issues?.results ?? []
+      ? issues?.results ?? myIssues ?? []
       : issues?.results.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ??
         [];
 
@@ -159,25 +167,25 @@ const CommandPalette: React.FC = () => {
     <>
       <ShortcutsModal isOpen={isShortcutsModalOpen} setIsOpen={setIsShortcutsModalOpen} />
       <CreateProjectModal isOpen={isProjectModalOpen} setIsOpen={setIsProjectModalOpen} />
-      {projectId && (
+      {activeProject && (
         <>
           <CreateUpdateCycleModal
             isOpen={isCreateCycleModalOpen}
             setIsOpen={setIsCreateCycleModalOpen}
-            projectId={projectId as string}
+            projectId={activeProject.id}
           />
           <CreateUpdateModuleModal
             isOpen={isCreateModuleModalOpen}
             setIsOpen={setIsCreateModuleModalOpen}
-            projectId={projectId as string}
+            projectId={activeProject.id}
+          />
+          <CreateUpdateIssuesModal
+            isOpen={isIssueModalOpen}
+            setIsOpen={setIsIssueModalOpen}
+            projectId={activeProject.id}
           />
         </>
       )}
-      <CreateUpdateIssuesModal
-        isOpen={isIssueModalOpen}
-        setIsOpen={setIsIssueModalOpen}
-        projectId={projectId as string}
-      />
       <BulkDeleteIssuesModal
         isOpen={isBulkDeleteIssuesModalOpen}
         setIsOpen={setIsBulkDeleteIssuesModalOpen}
@@ -270,7 +278,7 @@ const CommandPalette: React.FC = () => {
                                         }}
                                       />
                                       <span className="flex-shrink-0 text-xs text-gray-500">
-                                        {projectDetails?.identifier}-{issue.sequence_id}
+                                        {activeProject?.identifier}-{issue.sequence_id}
                                       </span>
                                       <span>{issue.name}</span>
                                     </div>

apps/app/components/common/bulk-delete-issues-modal.tsx

@@ -8,8 +8,8 @@ import useSWR, { mutate } from "swr";
 import { SubmitHandler, useForm } from "react-hook-form";
 // services
 import issuesServices from "lib/services/issues.service";
+import projectService from "lib/services/project.service";
 // hooks
-import useUser from "lib/hooks/useUser";
 import useToast from "lib/hooks/useToast";
 // headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
@@ -20,7 +20,7 @@ import { FolderIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 // types
 import { IIssue, IssueResponse } from "types";
 // fetch keys
-import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
+import { PROJECT_ISSUES_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
 // common
 import { classNames } from "constants/common";
 
@@ -40,30 +40,35 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
   const router = useRouter();
 
   const {
-    query: { workspaceSlug },
+    query: { workspaceSlug, projectId },
   } = router;
 
-  const { activeWorkspace, activeProject } = useUser();
-
   const { data: issues } = useSWR(
-    activeWorkspace && activeProject
-      ? PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id)
+    workspaceSlug && projectId
+      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
       : null,
-    activeWorkspace && activeProject
-      ? () => issuesServices.getIssues(activeWorkspace.slug, activeProject.id)
+    workspaceSlug && projectId
+      ? () => issuesServices.getIssues(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: projectDetails } = useSWR(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
       : null
   );
 
   const { setToastAlert } = useToast();
 
+  const { register, handleSubmit, reset } = useForm<FormInput>();
+
   const filteredIssues: IIssue[] =
     query === ""
       ? issues?.results ?? []
       : issues?.results.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ??
         [];
 
-  const { register, handleSubmit, reset } = useForm<FormInput>();
-
   const handleClose = () => {
     setIsOpen(false);
     setQuery("");
@@ -80,17 +85,17 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
       return;
     }
 
-    if (activeWorkspace && activeProject) {
+    if (workspaceSlug && projectId) {
       issuesServices
-        .bulkDeleteIssues(activeWorkspace.slug, activeProject.id, data)
+        .bulkDeleteIssues(workspaceSlug as string, projectId as string, data)
         .then((res) => {
           setToastAlert({
             title: "Success",
             type: "success",
             message: res.message,
           });
           mutate<IssueResponse>(
-            PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id),
+            PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
             (prevData) => {
               return {
                 ...(prevData as IssueResponse),
@@ -197,7 +202,7 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                                           }}
                                         />
                                         <span className="flex-shrink-0 text-xs text-gray-500">
-                                          {activeProject?.identifier}-{issue.sequence_id}
+                                          {projectDetails?.identifier}-{issue.sequence_id}
                                         </span>
                                         <span>{issue.name}</span>
                                       </div>

apps/app/components/common/list-view/single-issue.tsx

@@ -79,10 +79,6 @@ const SingleListIssue: React.FC<Props> = ({
               </span>
             )}
             <span>{issue.name}</span>
-            {/* <div className="absolute bottom-full left-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md max-w-sm whitespace-nowrap">
-    <h5 className="font-medium mb-1">Name</h5>
-    <div>{issue.name}</div>
-  </div> */}
           </a>
         </Link>
       </div>

apps/app/components/project/confirm-project-deletion.tsx

@@ -1,4 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
+// next
+import { useRouter } from "next/router";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
@@ -21,15 +23,17 @@ type Props = {
 
 const ConfirmProjectDeletion: React.FC<Props> = ({ isOpen, data, onClose }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
-  const [selectedProject, setSelectedProject] = useState<IProject | null>(null);
-
   const [confirmProjectName, setConfirmProjectName] = useState("");
   const [confirmDeleteMyProject, setConfirmDeleteMyProject] = useState(false);
+  const [selectedProject, setSelectedProject] = useState<IProject | null>(null);
 
   const canDelete = confirmProjectName === data?.name && confirmDeleteMyProject;
 
-  const { activeWorkspace, mutateProjects } = useUser();
+  const router = useRouter();
+
+  const {
+    query: { workspaceSlug },
+  } = router;
 
   const { setToastAlert } = useToast();
 
@@ -47,12 +51,12 @@ const ConfirmProjectDeletion: React.FC<Props> = ({ isOpen, data, onClose }) => {
 
   const handleDeletion = async () => {
     setIsDeleteLoading(true);
-    if (!data || !activeWorkspace || !canDelete) return;
+    if (!data || !workspaceSlug || !canDelete) return;
     await projectService
-      .deleteProject(activeWorkspace.slug, data.id)
+      .deleteProject(workspaceSlug as string, data.id)
       .then(() => {
         handleClose();
-        mutateProjects((prevData) => (prevData ?? []).filter((item) => item.id !== data.id), false);
+        // TODO: add project mutation here
         setToastAlert({
           title: "Success",
           type: "success",
@@ -127,7 +131,7 @@ const ConfirmProjectDeletion: React.FC<Props> = ({ isOpen, data, onClose }) => {
                           removed. This action cannot be undone.
                         </p>
                       </div>
-                      <div className="h-0.5 bg-gray-200 my-3" />
+                      <div className="my-3 h-0.5 bg-gray-200" />
                       <div className="mt-3">
                         <p className="text-sm">
                           Enter the project name{" "}

apps/app/components/project/create-project-modal.tsx

@@ -15,14 +15,8 @@ import { createSimilarString, getRandomEmoji } from "constants/common";
 // constants
 import { NETWORK_CHOICES } from "constants/";
 // fetch keys
-import {
-  PROJECTS_LIST,
-  WORKSPACE_DETAILS,
-  WORKSPACE_MEMBERS,
-  WORKSPACE_MEMBERS_ME,
-} from "constants/fetch-keys";
+import { PROJECTS_LIST, WORKSPACE_DETAILS, WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
 // hooks
-import useUser from "lib/hooks/useUser";
 import useToast from "lib/hooks/useToast";
 // ui
 import { Button, Input, TextArea, Select, EmojiIconPicker } from "ui";
@@ -169,20 +163,10 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
   };
 
   // FIXME: remove this and authorize using getServerSideProps
-
-  if (myWorkspaceMembership) {
+  if (myWorkspaceMembership && isOpen) {
     if (myWorkspaceMembership.role <= 10) return <IsGuestCondition setIsOpen={setIsOpen} />;
   }
 
-  // if (workspaceMembers) {
-  //   const isMember = workspaceMembers.find((member) => member.member.id === user?.id);
-  //   const isGuest = workspaceMembers.find(
-  //     (member) => member.member.id === user?.id && member.role === 5
-  //   );
-
-  //   if ((!isMember || isGuest) && isOpen) return <IsGuestCondition setIsOpen={setIsOpen} />;
-  // }
-
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-10" onClose={handleClose}>

apps/app/components/project/cycles/confirm-cycle-deletion.tsx

@@ -1,4 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
+// next
+import { useRouter } from "next/router";
 // swr
 import { mutate } from "swr";
 // headless ui
@@ -23,11 +25,14 @@ type Props = {
 };
 
 const ConfirmCycleDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
+  const cancelButtonRef = useRef(null);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  const { activeWorkspace } = useUser();
+  const router = useRouter();
 
-  const cancelButtonRef = useRef(null);
+  const {
+    query: { workspaceSlug },
+  } = router;
 
   const handleClose = () => {
     setIsOpen(false);
@@ -36,9 +41,9 @@ const ConfirmCycleDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
 
   const handleDeletion = async () => {
     setIsDeleteLoading(true);
-    if (!data || !activeWorkspace) return;
+    if (!data || !workspaceSlug) return;
     await cycleService
-      .deleteCycle(activeWorkspace.slug, data.project, data.id)
+      .deleteCycle(workspaceSlug as string, data.project, data.id)
       .then(() => {
         mutate<ICycle[]>(
           CYCLE_LIST(data.project),

apps/app/components/project/cycles/create-update-cycle-modal.tsx

@@ -1,4 +1,6 @@
 import React, { useEffect } from "react";
+// next
+import { useRouter } from "next/router";
 // swr
 import { mutate } from "swr";
 // react hook form
@@ -39,7 +41,11 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
     }, 500);
   };
 
-  const { activeWorkspace } = useUser();
+  const router = useRouter();
+
+  const {
+    query: { workspaceSlug },
+  } = router;
 
   const {
     register,
@@ -52,15 +58,15 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
   });
 
   const onSubmit = async (formData: ICycle) => {
-    if (!activeWorkspace) return;
+    if (!workspaceSlug) return;
     const payload = {
       ...formData,
       start_date: formData.start_date ? renderDateFormat(formData.start_date) : null,
       end_date: formData.end_date ? renderDateFormat(formData.end_date) : null,
     };
     if (!data) {
       await cycleService
-        .createCycle(activeWorkspace.slug, projectId, payload)
+        .createCycle(workspaceSlug as string, projectId, payload)
         .then((res) => {
           mutate<ICycle[]>(CYCLE_LIST(projectId), (prevData) => [res, ...(prevData ?? [])], false);
           handleClose();
@@ -74,7 +80,7 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
         });
     } else {
       await cycleService
-        .updateCycle(activeWorkspace.slug, projectId, data.id, payload)
+        .updateCycle(workspaceSlug as string, projectId, data.id, payload)
         .then((res) => {
           mutate<ICycle[]>(
             CYCLE_LIST(projectId),