mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
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:
parent
98367f540c
commit
0ec0ca133a
@ -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>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
@ -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 = () => {
|
||||
<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>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
@ -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;
|
@ -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;
|
@ -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;
|
@ -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;
|
@ -1,6 +1,4 @@
|
||||
import dynamic from "next/dynamic";
|
||||
// hooks
|
||||
import useTheme from "hooks/use-theme";
|
||||
// components
|
||||
import { WorkspaceHelpSection, WorkspaceSidebarDropdown, WorkspaceSidebarMenu } from "components/workspace";
|
||||
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user