refactor: remove unused hooks (#2474)

* chore: remove useProjects hook

* chore: remove useWorkspaces hook

* chore: remove useWorkspaceDetails hook

* chore: remove useTheme hook
This commit is contained in:
Aaryan Khandelwal 2023-10-18 16:59:53 +05:30 committed by GitHub
parent 98367f540c
commit 0ec0ca133a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 113 additions and 202 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -1,9 +1,9 @@
import { FC } from "react"; 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"; 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 // components
import { SelectRepository, TFormValues, TIntegrationSteps } from "components/integration"; import { SelectRepository, TFormValues, TIntegrationSteps } from "components/integration";
// ui // ui
@ -21,8 +21,15 @@ type Props = {
watch: UseFormWatch<TFormValues>; 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 const options = projects
? projects.map((project) => ({ ? projects.map((project) => ({
@ -121,4 +128,4 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
</div> </div>
</div> </div>
); );
}; });

View File

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

View File

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

View File

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

View File

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

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

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

View File

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