refactor: remove unused hooks

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 }) => {
-  const ref = useRef<HTMLDivElement>(null);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
+export const ImagePickerPopover: React.FC<Props> = observer((props) => {
+  const { label, value, control, onChange, disabled = false } = props;
 
   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";
-
-// react-dropzone
+import { observer } from "mobx-react-lite";
 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> = ({
-  value,
-  onSuccess,
-  isOpen,
-  onClose,
-  isRemoving,
-  handleDelete,
-  userImage,
-}) => {
+export const ImageUploadModal: React.FC<Props> = observer((props) => {
+  const { value, onSuccess, isOpen, onClose, isRemoving, handleDelete, userImage } = props;
+
   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";
-
-// react-hook-form
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
 import { Control, Controller, UseFormWatch } from "react-hook-form";
-// hooks
-import useProjects from "hooks/use-projects";
+// mobx store
+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 }) => {
-  const { projects } = useProjects();
+export const GithubImportData: FC<Props> = observer((props) => {
+  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,15 +1,17 @@
 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";
 // hooks
 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,15 +60,17 @@ const moduleService = new ModuleService();
 const issueService = new IssueService();
 const issueDraftService = new IssueDraftService();
 
-export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
-  data,
-  handleClose,
-  isOpen,
-  isUpdatingSingleIssue = false,
-  prePopulateData: prePopulateDataProps,
-  fieldsToShow = ["all"],
-  onSubmit,
-}) => {
+export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((props) => {
+  const {
+    data,
+    handleClose,
+    isOpen,
+    isUpdatingSingleIssue = false,
+    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>
     </>
   );
-};
+});