refactor: remove unused hooks (#2474)

* chore: remove useProjects hook

* chore: remove useWorkspaces hook

* chore: remove useWorkspaceDetails hook

* chore: remove useTheme hook

web/components/core/image-picker-popover.tsx

@@ -1,14 +1,16 @@
 import React, { useEffect, useState, useRef, useCallback } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 import { useDropzone } from "react-dropzone";
 import { Tab, Transition, Popover } from "@headlessui/react";
 import { Control, Controller } from "react-hook-form";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // services
 import { FileService } from "services/file.service";
 // hooks
-import useWorkspaceDetails from "hooks/use-workspace-details";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
 import { Button, Input, Loader } from "@plane/ui";
@@ -39,11 +41,8 @@ type Props = {
 // services
 const fileService = new FileService();
 
-export const ImagePickerPopover: React.FC<Props> = ({ label, value, control, onChange, disabled = false }) => {
+export const ImagePickerPopover: React.FC<Props> = observer((props) => {
-  const ref = useRef<HTMLDivElement>(null);
+  const { label, value, control, onChange, disabled = false } = props;
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
 
   const [image, setImage] = useState<File | null>(null);
   const [isImageUploading, setIsImageUploading] = useState(false);
@@ -54,6 +53,14 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, control, onC
     search: "",
   });
 
+  const ref = useRef<HTMLDivElement>(null);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { workspace: workspaceStore } = useMobxStore();
+  const { currentWorkspace: workspaceDetails } = workspaceStore;
+
   const { data: unsplashImages, error: unsplashError } = useSWR(
     `UNSPLASH_IMAGES_${searchParams}`,
     () => fileService.getUnsplashImages(searchParams),
@@ -70,8 +77,6 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, control, onC
 
   const imagePickerRef = useRef<HTMLDivElement>(null);
 
-  const { workspaceDetails } = useWorkspaceDetails();
-
   const onDrop = useCallback((acceptedFiles: File[]) => {
     setImage(acceptedFiles[0]);
   }, []);
@@ -344,4 +349,4 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, control, onC
       </Transition>
     </Popover>
   );
-};
+});

web/components/core/modals/image-upload-modal.tsx

@@ -1,15 +1,12 @@
 import React, { useCallback, useState } from "react";
-
 import { useRouter } from "next/router";
-
+import { observer } from "mobx-react-lite";
-// react-dropzone
 import { useDropzone } from "react-dropzone";
-// headless ui
 import { Transition, Dialog } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // services
 import { FileService } from "services/file.service";
-// hooks
-import useWorkspaceDetails from "hooks/use-workspace-details";
 // ui
 import { Button } from "@plane/ui";
 // icons
@@ -28,22 +25,17 @@ type Props = {
 // services
 const fileService = new FileService();
 
-export const ImageUploadModal: React.FC<Props> = ({
+export const ImageUploadModal: React.FC<Props> = observer((props) => {
-  value,
+  const { value, onSuccess, isOpen, onClose, isRemoving, handleDelete, userImage } = props;
-  onSuccess,
+
-  isOpen,
-  onClose,
-  isRemoving,
-  handleDelete,
-  userImage,
-}) => {
   const [image, setImage] = useState<File | null>(null);
   const [isImageUploading, setIsImageUploading] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const { workspaceDetails } = useWorkspaceDetails();
+  const { workspace: workspaceStore } = useMobxStore();
+  const { currentWorkspace: workspaceDetails } = workspaceStore;
 
   const onDrop = useCallback((acceptedFiles: File[]) => {
     setImage(acceptedFiles[0]);
@@ -203,4 +195,4 @@ export const ImageUploadModal: React.FC<Props> = ({
       </Dialog>
     </Transition.Root>
   );
-};
+});

web/components/exporter/export-modal.tsx

@@ -1,7 +1,9 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
-// headless ui
+import { observer } from "mobx-react-lite";
 import { Dialog, Transition } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // services
 import { ProjectExportService } from "services/project";
 // hooks
@@ -11,8 +13,6 @@ import { Button } from "@plane/ui";
 import { CustomSearchSelect } from "components/ui";
 // types
 import { IUser, IImporterService } from "types";
-// fetch-keys
-import useProjects from "hooks/use-projects";
 
 type Props = {
   isOpen: boolean;
@@ -25,11 +25,18 @@ type Props = {
 
 const projectExportService = new ProjectExportService();
 
-export const Exporter: React.FC<Props> = ({ isOpen, handleClose, user, provider, mutateServices }) => {
+export const Exporter: React.FC<Props> = observer((props) => {
+  const { isOpen, handleClose, user, provider, mutateServices } = props;
+
   const [exportLoading, setExportLoading] = useState(false);
+
   const router = useRouter();
   const { workspaceSlug } = router.query;
-  const { projects } = useProjects();
+
+  const { project: projectStore } = useMobxStore();
+
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
+
   const { setToastAlert } = useToast();
 
   const options = projects?.map((project) => ({
@@ -164,4 +171,4 @@ export const Exporter: React.FC<Props> = ({ isOpen, handleClose, user, provider,
       </Dialog>
     </Transition.Root>
   );
-};
+});

web/components/exporter/guide.tsx

@@ -68,7 +68,9 @@ const IntegrationGuide = () => {
                   <div className="flex-shrink-0">
                     <Link href={`/${workspaceSlug}/settings/exports?provider=${service.provider}`}>
                       <a>
-                        <Button variant="primary">{service.type}</Button>
+                        <Button variant="primary" className="capitalize">
+                          {service.type}
+                        </Button>
                       </a>
                     </Link>
                   </div>

web/components/integration/github/import-data.tsx

@@ -1,9 +1,9 @@
 import { FC } from "react";
-
+import { useRouter } from "next/router";
-// react-hook-form
+import { observer } from "mobx-react-lite";
 import { Control, Controller, UseFormWatch } from "react-hook-form";
-// hooks
+// mobx store
-import useProjects from "hooks/use-projects";
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { SelectRepository, TFormValues, TIntegrationSteps } from "components/integration";
 // ui
@@ -21,8 +21,15 @@ type Props = {
   watch: UseFormWatch<TFormValues>;
 };
 
-export const GithubImportData: FC<Props> = ({ handleStepChange, integration, control, watch }) => {
+export const GithubImportData: FC<Props> = observer((props) => {
-  const { projects } = useProjects();
+  const { handleStepChange, integration, control, watch } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { project: projectStore } = useMobxStore();
+
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
 
   const options = projects
     ? projects.map((project) => ({
@@ -121,4 +128,4 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
       </div>
     </div>
   );
-};
+});

web/components/integration/jira/give-details.tsx

@@ -1,23 +1,30 @@
 import React from "react";
+import { useRouter } from "next/router";
 import Link from "next/link";
+import { observer } from "mobx-react-lite";
 import { useFormContext, Controller } from "react-hook-form";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // icons
 import { Plus } from "lucide-react";
-// hooks
-import useProjects from "hooks/use-projects";
 // components
 import { CustomSelect } from "components/ui";
 import { Input } from "@plane/ui";
 // types
 import { IJiraImporterForm } from "types";
 
-export const JiraGetImportDetail: React.FC = () => {
+export const JiraGetImportDetail: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
   const {
     control,
     formState: { errors },
   } = useFormContext<IJiraImporterForm>();
 
-  const { projects } = useProjects();
+  const { project: projectStore } = useMobxStore();
+
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
 
   return (
     <div className="h-full w-full space-y-8 overflow-y-auto">
@@ -201,4 +208,4 @@ export const JiraGetImportDetail: React.FC = () => {
       </div>
     </div>
   );
-};
+});

web/components/issues/draft-issue-modal.tsx

@@ -1,11 +1,10 @@
 import React, { useEffect, useState } from "react";
-
 import { useRouter } from "next/router";
-
+import { observer } from "mobx-react-lite";
 import { mutate } from "swr";
-
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // services
 import { IssueService, IssueDraftService } from "services/issue";
 import { ModuleService } from "services/module.service";
@@ -14,7 +13,6 @@ import useUser from "hooks/use-user";
 import useIssuesView from "hooks/use-issues-view";
 import useToast from "hooks/use-toast";
 import useLocalStorage from "hooks/use-local-storage";
-import useProjects from "hooks/use-projects";
 import useMyIssues from "hooks/my-issues/use-my-issues";
 // components
 import { DraftIssueForm } from "components/issues";
@@ -62,7 +60,7 @@ const issueService = new IssueService();
 const issueDraftService = new IssueDraftService();
 const moduleService = new ModuleService();
 
-export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) => {
+export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = observer((props) => {
   const {
     data,
     handleClose,
@@ -81,11 +79,14 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
 
+  const { project: projectStore } = useMobxStore();
+
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
+
   const { displayFilters, params } = useIssuesView();
   const { ...viewGanttParams } = params;
 
   const { user } = useUser();
-  const { projects } = useProjects();
 
   const { clearValue: clearDraftIssueLocalStorage } = useLocalStorage("draftedIssue", {});
 
@@ -414,4 +415,4 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
       </Transition.Root>
     </>
   );
-};
+});

web/components/issues/modal.tsx

@@ -1,7 +1,10 @@
 import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
 import { mutate } from "swr";
 import { Dialog, Transition } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // services
 import { ModuleService } from "services/module.service";
 import { IssueService, IssueDraftService } from "services/issue";
@@ -9,7 +12,6 @@ import { IssueService, IssueDraftService } from "services/issue";
 import useUser from "hooks/use-user";
 import useIssuesView from "hooks/use-issues-view";
 import useToast from "hooks/use-toast";
-import useProjects from "hooks/use-projects";
 import useMyIssues from "hooks/my-issues/use-my-issues";
 import useLocalStorage from "hooks/use-local-storage";
 // components
@@ -58,7 +60,8 @@ const moduleService = new ModuleService();
 const issueService = new IssueService();
 const issueDraftService = new IssueDraftService();
 
-export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
+export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((props) => {
+  const {
     data,
     handleClose,
     isOpen,
@@ -66,7 +69,8 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
     prePopulateData: prePopulateDataProps,
     fieldsToShow = ["all"],
     onSubmit,
-}) => {
+  } = props;
+
   // states
   const [createMore, setCreateMore] = useState(false);
   const [formDirtyState, setFormDirtyState] = useState<any>(null);
@@ -77,11 +81,14 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId, viewId, globalViewId } = router.query;
 
+  const { project: projectStore } = useMobxStore();
+
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
+
   const { displayFilters, params } = useIssuesView();
   const { ...viewGanttParams } = params;
 
   const { user } = useUser();
-  const { projects } = useProjects();
 
   const { groupedIssues, mutateMyIssues } = useMyIssues(workspaceSlug?.toString());
 
@@ -461,4 +468,4 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
       </Transition.Root>
     </>
   );
-};
+});

web/components/workspace/sidebar-dropdown.tsx

@@ -1,13 +1,13 @@
 import { Fragment } from "react";
 import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
 import Link from "next/link";
-// headless ui
 import { Menu, Transition } from "@headlessui/react";
-// next-themes
 import { useTheme } from "next-themes";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useUser from "hooks/use-user";
-import useWorkspaces from "hooks/use-workspaces";
 import useToast from "hooks/use-toast";
 // services
 import { UserService } from "services/user.service";
@@ -21,8 +21,6 @@ import { Check, LogOut, Plus, Settings, UserCircle2 } from "lucide-react";
 import { truncateText } from "helpers/string.helper";
 // types
 import { IWorkspace } from "types";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
 
 // Static Data
 const userLinks = (workspaceSlug: string, userId: string) => [
@@ -56,20 +54,20 @@ const profileLinks = (workspaceSlug: string, userId: string) => [
 const userService = new UserService();
 const authService = new AuthService();
 
-export const WorkspaceSidebarDropdown = () => {
+export const WorkspaceSidebarDropdown = observer(() => {
-  const store: any = useMobxStore();
-
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const { theme: themeStore, workspace: workspaceStore } = useMobxStore();
+
+  const { workspaces, currentWorkspace: activeWorkspace } = workspaceStore;
+
   const { user, mutateUser } = useUser();
 
   const { setTheme } = useTheme();
 
   const { setToastAlert } = useToast();
 
-  const { activeWorkspace, workspaces } = useWorkspaces();
-
   const handleWorkspaceNavigation = (workspace: IWorkspace) => {
     userService
       .updateUser({
@@ -111,7 +109,7 @@ export const WorkspaceSidebarDropdown = () => {
         <Menu.Button className="text-custom-sidebar-text-200 flex w-full items-center rounded-sm text-sm font-medium focus:outline-none">
           <div
             className={`flex w-full items-center gap-x-2 rounded-sm bg-custom-sidebar-background-80 p-1 ${
-              store?.theme?.sidebarCollapsed ? "justify-center" : ""
+              themeStore.sidebarCollapsed ? "justify-center" : ""
             }`}
           >
             <div className="relative grid h-6 w-6 place-items-center rounded bg-gray-700 uppercase text-white">
@@ -126,7 +124,7 @@ export const WorkspaceSidebarDropdown = () => {
               )}
             </div>
 
-            {!store?.theme?.sidebarCollapsed && (
+            {!themeStore.sidebarCollapsed && (
               <h4 className="text-custom-text-100">
                 {activeWorkspace?.name ? truncateText(activeWorkspace.name, 14) : "Loading..."}
               </h4>
@@ -241,7 +239,7 @@ export const WorkspaceSidebarDropdown = () => {
         </Transition>
       </Menu>
 
-      {!store?.theme?.sidebarCollapsed && (
+      {!themeStore.sidebarCollapsed && (
         <Menu as="div" className="relative flex-shrink-0">
           <Menu.Button className="grid place-items-center outline-none">
             <Avatar user={user} height="28px" width="28px" fontSize="14px" />
@@ -290,4 +288,4 @@ export const WorkspaceSidebarDropdown = () => {
       )}
     </div>
   );
-};
+});

web/hooks/use-projects.tsx

@@ -1,36 +0,0 @@
-import { useRouter } from "next/router";
-import useSWR from "swr";
-// services
-import { ProjectService } from "services/project";
-// helpers
-import { orderArrayBy } from "helpers/array.helper";
-// types
-import { IProject } from "types";
-// fetch-keys
-import { PROJECTS_LIST } from "constants/fetch-keys";
-
-const projectService = new ProjectService();
-
-const useProjects = (type?: "all" | boolean, fetchCondition?: boolean) => {
-  fetchCondition = fetchCondition ?? true;
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { data: projects, mutate: mutateProjects } = useSWR(
-    workspaceSlug && fetchCondition ? PROJECTS_LIST(workspaceSlug as string, { is_favorite: type ?? "all" }) : null,
-    workspaceSlug && fetchCondition ? () => projectService.getProjects(workspaceSlug as string) : null
-  );
-
-  const recentProjects = [...(projects ?? [])]
-    ?.sort((a, b) => Date.parse(`${a.updated_at}`) - Date.parse(`${b.updated_at}`))
-    ?.slice(0, 3);
-
-  return {
-    projects: projects ? (orderArrayBy(projects, "is_favorite", "descending") as IProject[]) : undefined,
-    recentProjects: recentProjects || [],
-    mutateProjects,
-  };
-};
-
-export default useProjects;

web/hooks/use-theme.tsx

@@ -1,9 +0,0 @@
-import { useContext } from "react";
-import { themeContext } from "contexts/theme.context";
-
-const useTheme = () => {
-  const themeContextData = useContext(themeContext);
-  return themeContextData;
-};
-
-export default useTheme;

web/hooks/use-workspace-details.tsx

@@ -1,39 +0,0 @@
-import { useEffect } from "react";
-import { useRouter } from "next/router";
-import useSWR from "swr";
-// services
-import { WorkspaceService } from "services/workspace.service";
-// fetch-keys
-import { WORKSPACE_DETAILS } from "constants/fetch-keys";
-
-const workspaceService = new WorkspaceService();
-
-const useWorkspaceDetails = () => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-  // Fetching Workspace Details
-  const {
-    data: workspaceDetails,
-    error: workspaceDetailsError,
-    mutate: mutateWorkspaceDetails,
-  } = useSWR(
-    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
-    workspaceSlug ? () => workspaceService.getWorkspace(workspaceSlug as string) : null
-  );
-
-  useEffect(() => {
-    if (workspaceDetailsError?.status === 404) {
-      router.push("/404");
-    } else if (workspaceDetailsError) {
-      router.push("/error");
-    }
-  }, [workspaceDetailsError, router]);
-
-  return {
-    workspaceDetails,
-    workspaceDetailsError,
-    mutateWorkspaceDetails,
-  };
-};
-
-export default useWorkspaceDetails;

web/hooks/use-workspaces.tsx

@@ -1,29 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import { WorkspaceService } from "services/workspace.service";
-// fetch-keys
-import { USER_WORKSPACES } from "constants/fetch-keys";
-
-const workspaceService = new WorkspaceService();
-
-const useWorkspaces = () => {
-  // router
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-  // API to fetch user information
-  const { data, error, mutate } = useSWR(USER_WORKSPACES, () => workspaceService.userWorkspaces());
-  // active workspace
-  const activeWorkspace = data?.find((w) => w.slug === workspaceSlug);
-
-  return {
-    workspaces: data,
-    error,
-    activeWorkspace,
-    mutateWorkspaces: mutate,
-  };
-};
-
-export default useWorkspaces;

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

@@ -1,6 +1,4 @@
 import dynamic from "next/dynamic";
-// hooks
-import useTheme from "hooks/use-theme";
 // components
 import { WorkspaceHelpSection, WorkspaceSidebarDropdown, WorkspaceSidebarMenu } from "components/workspace";
 

web/pages/onboarding/index.tsx

@@ -1,17 +1,15 @@
 import { useEffect, useState } from "react";
-
 import Image from "next/image";
-
+import { observer } from "mobx-react-lite";
 import useSWR, { mutate } from "swr";
-
-// next-themes
 import { useTheme } from "next-themes";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // services
 import { UserService } from "services/user.service";
 import { WorkspaceService } from "services/workspace.service";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
-import useWorkspaces from "hooks/use-workspaces";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // components
@@ -32,14 +30,16 @@ import { CURRENT_USER, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
 const userService = new UserService();
 const workspaceService = new WorkspaceService();
 
-const Onboarding: NextPage = () => {
+const Onboarding: NextPage = observer(() => {
   const [step, setStep] = useState<number | null>(null);
 
+  const { workspace: workspaceStore } = useMobxStore();
+
   const { theme, setTheme } = useTheme();
 
   const { user, isLoading: userLoading } = useUserAuth("onboarding");
 
-  const { workspaces } = useWorkspaces();
+  const { workspaces } = workspaceStore;
   const userWorkspaces = workspaces?.filter((w) => w.created_by === user?.id);
 
   const { data: invitations } = useSWR(USER_WORKSPACE_INVITATIONS, () => workspaceService.userWorkspaceInvitations());
@@ -227,6 +227,6 @@ const Onboarding: NextPage = () => {
       </div>
     </DefaultLayout>
   );
-};
+});
 
 export default Onboarding;