From 0ec0ca133aa4c2c40bda37735aa7d066113f1154 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Wed, 18 Oct 2023 16:59:53 +0530 Subject: [PATCH] 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 | 23 ++++++----- .../core/modals/image-upload-modal.tsx | 26 +++++-------- web/components/exporter/export-modal.tsx | 19 ++++++--- web/components/exporter/guide.tsx | 4 +- .../integration/github/import-data.tsx | 21 ++++++---- .../integration/jira/give-details.tsx | 17 +++++--- web/components/issues/draft-issue-modal.tsx | 17 ++++---- web/components/issues/modal.tsx | 31 +++++++++------ web/components/workspace/sidebar-dropdown.tsx | 26 ++++++------- web/hooks/use-projects.tsx | 36 ----------------- web/hooks/use-theme.tsx | 9 ----- web/hooks/use-workspace-details.tsx | 39 ------------------- web/hooks/use-workspaces.tsx | 29 -------------- web/layouts/app-layout-legacy/app-sidebar.tsx | 2 - web/pages/onboarding/index.tsx | 16 ++++---- 15 files changed, 113 insertions(+), 202 deletions(-) delete mode 100644 web/hooks/use-projects.tsx delete mode 100644 web/hooks/use-theme.tsx delete mode 100644 web/hooks/use-workspace-details.tsx delete mode 100644 web/hooks/use-workspaces.tsx diff --git a/web/components/core/image-picker-popover.tsx b/web/components/core/image-picker-popover.tsx index 9b6addbb5e0..123eee6d2d1 100644 --- a/web/components/core/image-picker-popover.tsx +++ b/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 = ({ label, value, control, onChange, disabled = false }) => { - const ref = useRef(null); - - const router = useRouter(); - const { workspaceSlug } = router.query; +export const ImagePickerPopover: React.FC = observer((props) => { + const { label, value, control, onChange, disabled = false } = props; const [image, setImage] = useState(null); const [isImageUploading, setIsImageUploading] = useState(false); @@ -54,6 +53,14 @@ export const ImagePickerPopover: React.FC = ({ label, value, control, onC search: "", }); + const ref = useRef(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 = ({ label, value, control, onC const imagePickerRef = useRef(null); - const { workspaceDetails } = useWorkspaceDetails(); - const onDrop = useCallback((acceptedFiles: File[]) => { setImage(acceptedFiles[0]); }, []); @@ -344,4 +349,4 @@ export const ImagePickerPopover: React.FC = ({ label, value, control, onC ); -}; +}); diff --git a/web/components/core/modals/image-upload-modal.tsx b/web/components/core/modals/image-upload-modal.tsx index 5fa66ef7a5f..e4cdb16d660 100644 --- a/web/components/core/modals/image-upload-modal.tsx +++ b/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 = ({ - value, - onSuccess, - isOpen, - onClose, - isRemoving, - handleDelete, - userImage, -}) => { +export const ImageUploadModal: React.FC = observer((props) => { + const { value, onSuccess, isOpen, onClose, isRemoving, handleDelete, userImage } = props; + const [image, setImage] = useState(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 = ({ ); -}; +}); diff --git a/web/components/exporter/export-modal.tsx b/web/components/exporter/export-modal.tsx index c06692fed64..53906d58557 100644 --- a/web/components/exporter/export-modal.tsx +++ b/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 = ({ isOpen, handleClose, user, provider, mutateServices }) => { +export const Exporter: React.FC = 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 = ({ isOpen, handleClose, user, provider, ); -}; +}); diff --git a/web/components/exporter/guide.tsx b/web/components/exporter/guide.tsx index 73e88874b70..dee7d854ff8 100644 --- a/web/components/exporter/guide.tsx +++ b/web/components/exporter/guide.tsx @@ -68,7 +68,9 @@ const IntegrationGuide = () => { diff --git a/web/components/integration/github/import-data.tsx b/web/components/integration/github/import-data.tsx index 32f76527765..40c5c18445e 100644 --- a/web/components/integration/github/import-data.tsx +++ b/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; }; -export const GithubImportData: FC = ({ handleStepChange, integration, control, watch }) => { - const { projects } = useProjects(); +export const GithubImportData: FC = 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 = ({ handleStepChange, integration, con ); -}; +}); diff --git a/web/components/integration/jira/give-details.tsx b/web/components/integration/jira/give-details.tsx index ada403f43f7..1416a76efa3 100644 --- a/web/components/integration/jira/give-details.tsx +++ b/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(); - const { projects } = useProjects(); + const { project: projectStore } = useMobxStore(); + + const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined; return (
@@ -201,4 +208,4 @@ export const JiraGetImportDetail: React.FC = () => {
); -}; +}); diff --git a/web/components/issues/draft-issue-modal.tsx b/web/components/issues/draft-issue-modal.tsx index c59d69fcd48..842ddb1a005 100644 --- a/web/components/issues/draft-issue-modal.tsx +++ b/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 = (props) => { +export const CreateUpdateDraftIssueModal: React.FC = observer((props) => { const { data, handleClose, @@ -81,11 +79,14 @@ export const CreateUpdateDraftIssueModal: React.FC = (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 = (props) = ); -}; +}); diff --git a/web/components/issues/modal.tsx b/web/components/issues/modal.tsx index 94fca9cb94b..c8ba2ef4640 100644 --- a/web/components/issues/modal.tsx +++ b/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,15 +60,17 @@ const moduleService = new ModuleService(); const issueService = new IssueService(); const issueDraftService = new IssueDraftService(); -export const CreateUpdateIssueModal: React.FC = ({ - data, - handleClose, - isOpen, - isUpdatingSingleIssue = false, - prePopulateData: prePopulateDataProps, - fieldsToShow = ["all"], - onSubmit, -}) => { +export const CreateUpdateIssueModal: React.FC = observer((props) => { + const { + data, + handleClose, + isOpen, + isUpdatingSingleIssue = false, + prePopulateData: prePopulateDataProps, + fieldsToShow = ["all"], + onSubmit, + } = props; + // states const [createMore, setCreateMore] = useState(false); const [formDirtyState, setFormDirtyState] = useState(null); @@ -77,11 +81,14 @@ export const CreateUpdateIssueModal: React.FC = ({ 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 = ({ ); -}; +}); diff --git a/web/components/workspace/sidebar-dropdown.tsx b/web/components/workspace/sidebar-dropdown.tsx index 7d985a21ced..6e50fc507cc 100644 --- a/web/components/workspace/sidebar-dropdown.tsx +++ b/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 = () => { - const store: any = useMobxStore(); - +export const WorkspaceSidebarDropdown = observer(() => { 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 = () => {
@@ -126,7 +124,7 @@ export const WorkspaceSidebarDropdown = () => { )}
- {!store?.theme?.sidebarCollapsed && ( + {!themeStore.sidebarCollapsed && (

{activeWorkspace?.name ? truncateText(activeWorkspace.name, 14) : "Loading..."}

@@ -241,7 +239,7 @@ export const WorkspaceSidebarDropdown = () => { - {!store?.theme?.sidebarCollapsed && ( + {!themeStore.sidebarCollapsed && ( @@ -290,4 +288,4 @@ export const WorkspaceSidebarDropdown = () => { )}
); -}; +}); diff --git a/web/hooks/use-projects.tsx b/web/hooks/use-projects.tsx deleted file mode 100644 index 3983a2e40e5..00000000000 --- a/web/hooks/use-projects.tsx +++ /dev/null @@ -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; diff --git a/web/hooks/use-theme.tsx b/web/hooks/use-theme.tsx deleted file mode 100644 index 81e9249daf7..00000000000 --- a/web/hooks/use-theme.tsx +++ /dev/null @@ -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; diff --git a/web/hooks/use-workspace-details.tsx b/web/hooks/use-workspace-details.tsx deleted file mode 100644 index e0eaa3fe5bb..00000000000 --- a/web/hooks/use-workspace-details.tsx +++ /dev/null @@ -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; diff --git a/web/hooks/use-workspaces.tsx b/web/hooks/use-workspaces.tsx deleted file mode 100644 index 7637ccffe2b..00000000000 --- a/web/hooks/use-workspaces.tsx +++ /dev/null @@ -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; diff --git a/web/layouts/app-layout-legacy/app-sidebar.tsx b/web/layouts/app-layout-legacy/app-sidebar.tsx index 479a047f638..1db9dc98372 100644 --- a/web/layouts/app-layout-legacy/app-sidebar.tsx +++ b/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"; diff --git a/web/pages/onboarding/index.tsx b/web/pages/onboarding/index.tsx index d91211f50f4..ffd46470b12 100644 --- a/web/pages/onboarding/index.tsx +++ b/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(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 = () => { ); -}; +}); export default Onboarding;