thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: implemented MobX in the onboarding screens (#2617)

Browse Source 
* fix: wrap the onboarding route with the UserWrapper

* chore: implement mobx in the onboarding screens
This commit is contained in:
Aaryan Khandelwal 2023-11-02 19:27:25 +05:30 committed by GitHub
parent b0397dfd74
commit a9b72fa1d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 164 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
web/components/onboarding/user-details.tsx
View File

@ -1,16 +1,12 @@
import { useEffect } from "react";
import { mutate } from "swr";
import { Controller, useForm } from "react-hook-form";
// hooks
import useToast from "hooks/use-toast";
// services
import { UserService } from "services/user.service";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// ui
import { Button, CustomSelect, CustomSearchSelect, Input } from "@plane/ui";
// types
import { IUser } from "types";
// fetch-keys
import { CURRENT_USER } from "constants/fetch-keys";
// helpers
import { getUserTimeZoneFromWindow } from "helpers/date-time.helper";
// constants
@ -33,10 +29,10 @@ const timeZoneOptions = TIME_ZONES.map((timeZone) => ({
content: timeZone.label,
}));
const userService = new UserService();
export const UserDetails: React.FC<Props> = observer((props) => {
const { user } = props;
export const UserDetails: React.FC<Props> = ({ user }) => {
const { setToastAlert } = useToast();
const { user: userStore } = useMobxStore();
const {
handleSubmit,
@ -58,31 +54,7 @@ export const UserDetails: React.FC<Props> = ({ user }) => {
},
};
await userService
.updateUser(payload)
.then(() => {
mutate<IUser>(
CURRENT_USER,
(prevData) => {
if (!prevData) return prevData;
return {
...prevData,
...payload,
};
},
false
);
setToastAlert({
type: "success",
title: "Success!",
message: "Details updated successfully.",
});
})
.catch(() => {
mutate(CURRENT_USER);
});
await userStore.updateCurrentUser(payload);
};
useEffect(() => {
@ -217,4 +189,4 @@ export const UserDetails: React.FC<Props> = ({ user }) => {
</Button>
</form>
);
};
});

5
web/components/onboarding/workspace.tsx
View File

@ -1,5 +1,4 @@
import { useState } from "react";
// ui
import { Button } from "@plane/ui";
// types
@ -15,7 +14,9 @@ type Props = {
workspaces: IWorkspace[] | undefined;
};
export const Workspace: React.FC<Props> = ({ finishOnboarding, stepChange, updateLastWorkspace, user, workspaces }) => {
export const Workspace: React.FC<Props> = (props) => {
const { finishOnboarding, stepChange, updateLastWorkspace, user, workspaces } = props;
const [defaultValues, setDefaultValues] = useState({
name: "",
slug: "",

10
web/components/page-views/signin.tsx
View File

@ -29,7 +29,6 @@ const authService = new AuthService();
export const SignInView = observer(() => {
const { user: userStore } = useMobxStore();
const { fetchCurrentUserSettings } = userStore;
// router
const router = useRouter();
const { next: next_url } = router.query as { next: string };
@ -46,7 +45,7 @@ export const SignInView = observer(() => {
(data?.email_password_login || !(data?.email_password_login || data?.magic_login || data?.google || data?.github));
useEffect(() => {
fetchCurrentUserSettings().then((settings) => {
userStore.fetchCurrentUserSettings().then((settings) => {
setLoading(true);
if (next_url) router.push(next_url);
else
@ -58,12 +57,13 @@ export const SignInView = observer(() => {
}`
);
});
}, [fetchCurrentUserSettings, router, next_url]);
}, [userStore, router, next_url]);
const handleLoginRedirection = () => {
userStore.fetchCurrentUser().then((user) => {
const isOnboard = user.onboarding_step.profile_complete;
if (isOnboard) {
const isOnboarded = user.is_onboarded;
if (isOnboarded) {
userStore
.fetchCurrentUserSettings()
.then((userSettings: IUserSettings) => {

4
web/components/workspace/create-workspace-form.tsx
View File

@ -2,7 +2,6 @@ import { Dispatch, SetStateAction, useEffect, useState, FC } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { Controller, useForm } from "react-hook-form";
import { mutate } from "swr";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// services
@ -13,8 +12,6 @@ import useToast from "hooks/use-toast";
import { Button, CustomSelect, Input } from "@plane/ui";
// types
import { IWorkspace } from "types";
// fetch-keys
import { USER_WORKSPACES } from "constants/fetch-keys";
// constants
import { ORGANIZATION_SIZE } from "constants/workspace";
@ -96,7 +93,6 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
message: "Workspace created successfully.",
});
mutate<IWorkspace[]>(USER_WORKSPACES, (prevData) => [res, ...(prevData ?? [])], false);
if (onSubmit) await onSubmit(res);
})
.catch(() =>

4
web/layouts/auth-layout/user-wrapper.tsx
View File

@ -13,13 +13,15 @@ export interface IUserAuthWrapper {
export const UserAuthWrapper: FC<IUserAuthWrapper> = (props) => {
const { children } = props;
// store
const { user: userStore } = useMobxStore();
const { user: userStore, workspace: workspaceStore } = useMobxStore();
// router
const router = useRouter();
// fetching user information
const { data: currentUser, error } = useSWR("CURRENT_USER_DETAILS", () => userStore.fetchCurrentUser());
// fetching user settings
useSWR("CURRENT_USER_SETTINGS", () => userStore.fetchCurrentUserSettings());
// fetching all workspaces
useSWR(`USER_WORKSPACES_LIST`, () => workspaceStore.fetchWorkspaces());
if (!currentUser && !error) {
return (

2
web/layouts/auth-layout/workspace-wrapper.tsx
View File

@ -20,8 +20,6 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
// router
const router = useRouter();
const { workspaceSlug } = router.query;
// fetching all workspaces
useSWR(`USER_WORKSPACES_LIST`, () => workspaceStore.fetchWorkspaces());
// fetching user workspace information
useSWR(
workspaceSlug ? `WORKSPACE_MEMBERS_ME_${workspaceSlug}` : null,

221
web/pages/onboarding/index.tsx
View File

@ -1,17 +1,17 @@
import { useEffect, useState } from "react";
import Image from "next/image";
import { observer } from "mobx-react-lite";
import useSWR, { mutate } from "swr";
import useSWR from "swr";
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";
// layouts
import DefaultLayout from "layouts/default-layout";
import { UserAuthWrapper } from "layouts/auth-layout";
// components
import { InviteMembers, JoinWorkspaces, UserDetails, Workspace } from "components/onboarding";
// ui
@ -23,52 +23,34 @@ import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-l
// types
import { IUser, TOnboardingSteps } from "types";
import type { NextPage } from "next";
// fetch-keys
import { CURRENT_USER, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
// services
const userService = new UserService();
const workspaceService = new WorkspaceService();
const Onboarding: NextPage = observer(() => {
const [step, setStep] = useState<number | null>(null);
const { workspace: workspaceStore } = useMobxStore();
const { user: userStore, workspace: workspaceStore } = useMobxStore();
const user = userStore.currentUser ?? undefined;
const workspaces = workspaceStore.workspaces;
const userWorkspaces = workspaceStore.workspacesCreateByCurrentUser;
const { theme, setTheme } = useTheme();
const { user, isLoading: userLoading } = useUserAuth("onboarding");
const {} = useUserAuth("onboarding");
const { workspaces } = workspaceStore;
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_LIST", () =>
workspaceService.userWorkspaceInvitations()
);
// update last active workspace details
const updateLastWorkspace = async () => {
if (!workspaces) return;
await mutate<IUser>(
CURRENT_USER,
(prevData) => {
if (!prevData) return prevData;
return {
...prevData,
last_workspace_id: workspaces[0]?.id,
// workspace: {
// ...prevData.workspace,
// fallback_workspace_id: workspaces[0]?.id,
// fallback_workspace_slug: workspaces[0]?.slug,
// last_workspace_id: workspaces[0]?.id,
// last_workspace_slug: workspaces[0]?.slug,
// },
};
},
false
);
await userService.updateUser({ last_workspace_id: workspaces?.[0]?.id });
await userStore.updateCurrentUser({
last_workspace_id: workspaces[0]?.id,
});
};
// handle step change
@ -82,40 +64,14 @@ const Onboarding: NextPage = observer(() => {
},
};
mutate<IUser>(
CURRENT_USER,
(prevData) => {
if (!prevData) return prevData;
return {
...prevData,
...payload,
};
},
false
);
await userService.updateUser(payload);
await userStore.updateCurrentUser(payload);
};
// complete onboarding
const finishOnboarding = async () => {
if (!user) return;
mutate<IUser>(
CURRENT_USER,
(prevData) => {
if (!prevData) return prevData;
return {
...prevData,
is_onboarded: true,
};
},
false
);
await userService.updateUserOnBoard({ userRole: user.role }, user);
await userStore.updateUserOnBoard();
};
useEffect(() => {
@ -148,84 +104,85 @@ const Onboarding: NextPage = observer(() => {
handleStepChange();
}, [user, invitations, step]);
if (userLoading || step === null)
return (
<div className="grid h-screen place-items-center">
<Spinner />
</div>
);
return (
<DefaultLayout>
<div className="flex h-full w-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden">
<div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
<div className="absolute border-b-[0.5px] sm:border-r-[0.5px] border-custom-border-200 h-[0.5px] w-full top-1/2 left-0 -translate-y-1/2 sm:h-screen sm:w-[0.5px] sm:top-0 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 sm:translate-y-0 z-10" />
{step === 1 ? (
<div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 py-5 left-2 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12 z-10">
<div className="h-[30px] w-[30px]">
<Image src={BluePlaneLogoWithoutText} alt="Plane logo" />
<UserAuthWrapper>
{user && step !== null ? (
<DefaultLayout>
<div className="flex h-full w-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden">
<div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
<div className="absolute border-b-[0.5px] sm:border-r-[0.5px] border-custom-border-200 h-[0.5px] w-full top-1/2 left-0 -translate-y-1/2 sm:h-screen sm:w-[0.5px] sm:top-0 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 sm:translate-y-0 z-10" />
{step === 1 ? (
<div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 py-5 left-2 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12 z-10">
<div className="h-[30px] w-[30px]">
<Image src={BluePlaneLogoWithoutText} alt="Plane logo" />
</div>
</div>
) : (
<div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 sm:py-5 left-5 sm:left-1/2 md:left-1/3 sm:-translate-x-[15px] top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12 z-10">
<div className="h-[30px] w-[133px]">
{theme === "light" ? (
<Image src={BlackHorizontalLogo} alt="Plane black logo" />
) : (
<Image src={WhiteHorizontalLogo} alt="Plane white logo" />
)}
</div>
</div>
)}
<div className="absolute sm:fixed text-custom-text-100 text-sm font-medium right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
{user?.email}
</div>
</div>
) : (
<div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 sm:py-5 left-5 sm:left-1/2 md:left-1/3 sm:-translate-x-[15px] top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12 z-10">
<div className="h-[30px] w-[133px]">
{theme === "light" ? (
<Image src={BlackHorizontalLogo} alt="Plane black logo" />
) : (
<Image src={WhiteHorizontalLogo} alt="Plane white logo" />
)}
</div>
</div>
)}
<div className="absolute sm:fixed text-custom-text-100 text-sm font-medium right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
{user?.email}
</div>
</div>
<div className="relative flex justify-center sm:items-center h-full px-8 pb-0 sm:px-0 sm:py-12 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5 overflow-hidden">
{step === 1 ? (
<UserDetails user={user} />
) : step === 2 ? (
<Workspace
finishOnboarding={finishOnboarding}
stepChange={stepChange}
updateLastWorkspace={updateLastWorkspace}
user={user}
workspaces={workspaces}
/>
) : step === 3 ? (
<InviteMembers
finishOnboarding={finishOnboarding}
stepChange={stepChange}
user={user}
workspace={userWorkspaces?.[0]}
/>
) : (
step === 4 && (
<JoinWorkspaces
finishOnboarding={finishOnboarding}
stepChange={stepChange}
updateLastWorkspace={updateLastWorkspace}
/>
)
)}
</div>
{step !== 4 && (
<div className="sticky sm:fixed bottom-0 md:bottom-14 md:right-16 py-6 md:py-0 flex justify-center md:justify-end bg-custom-background-100 md:bg-transparent pointer-events-none w-full z-[1]">
<div className="w-3/4 md:w-1/5 space-y-1">
<p className="text-xs text-custom-text-200">{step} of 3 steps</p>
<div className="relative h-1 w-full rounded bg-custom-background-80">
<div
className="absolute top-0 left-0 h-1 rounded bg-custom-primary-100 duration-300"
style={{
width: `${((step / 3) * 100).toFixed(0)}%`,
}}
<div className="relative flex justify-center sm:items-center h-full px-8 pb-0 sm:px-0 sm:py-12 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5 overflow-hidden">
{step === 1 ? (
<UserDetails user={user} />
) : step === 2 ? (
<Workspace
finishOnboarding={finishOnboarding}
stepChange={stepChange}
updateLastWorkspace={updateLastWorkspace}
user={user}
workspaces={workspaces}
/>
</div>
) : step === 3 ? (
<InviteMembers
finishOnboarding={finishOnboarding}
stepChange={stepChange}
user={user}
workspace={userWorkspaces?.[0]}
/>
) : (
step === 4 && (
<JoinWorkspaces
finishOnboarding={finishOnboarding}
stepChange={stepChange}
updateLastWorkspace={updateLastWorkspace}
/>
)
)}
</div>
{step !== 4 && (
<div className="sticky sm:fixed bottom-0 md:bottom-14 md:right-16 py-6 md:py-0 flex justify-center md:justify-end bg-custom-background-100 md:bg-transparent pointer-events-none w-full z-[1]">
<div className="w-3/4 md:w-1/5 space-y-1">
<p className="text-xs text-custom-text-200">{step} of 3 steps</p>
<div className="relative h-1 w-full rounded bg-custom-background-80">
<div
className="absolute top-0 left-0 h-1 rounded bg-custom-primary-100 duration-300"
style={{
width: `${((step / 3) * 100).toFixed(0)}%`,
}}
/>
</div>
</div>
</div>
)}
</div>
)}
</div>
</DefaultLayout>
</DefaultLayout>
) : (
<div className="h-screen w-full grid place-items-center">
<Spinner />
</div>
)}
</UserAuthWrapper>
);
});

27
web/store/user.store.ts
View File

@ -47,6 +47,7 @@ export interface IUserStore {
fetchUserProjectInfo: (workspaceSlug: string, projectId: string) => Promise<IProjectMember>;
fetchUserDashboardInfo: (workspaceSlug: string, month: number) => Promise<any>;
updateUserOnBoard: () => Promise<void>;
updateTourCompleted: () => Promise<void>;
updateCurrentUser: (data: Partial<IUser>) => Promise<IUser>;
updateCurrentUserTheme: (theme: string) => Promise<IUser>;
@ -98,6 +99,7 @@ class UserStore implements IUserStore {
fetchUserDashboardInfo: action,
fetchUserWorkspaceInfo: action,
fetchUserProjectInfo: action,
updateUserOnBoard: action,
updateTourCompleted: action,
updateCurrentUser: action,
updateCurrentUserTheme: action,
@ -242,6 +244,27 @@ class UserStore implements IUserStore {
}
};
updateUserOnBoard = async () => {
try {
runInAction(() => {
this.currentUser = {
...this.currentUser,
is_onboarded: true,
} as IUser;
});
const user = this.currentUser ?? undefined;
if (!user) return;
await this.userService.updateUserOnBoard({ userRole: user.role }, user);
} catch (error) {
this.fetchCurrentUser();
throw error;
}
};
updateTourCompleted = async () => {
try {
if (this.currentUser) {
@ -251,7 +274,9 @@ class UserStore implements IUserStore {
is_tour_completed: true,
} as IUser;
});
const response = await this.userService.updateUserTourCompleted(this.currentUser);
return response;
}
} catch (error) {
@ -275,6 +300,8 @@ class UserStore implements IUserStore {
});
return response;
} catch (error) {
this.fetchCurrentUser();
throw error;
}
};

37
web/store/workspace/workspace.store.ts
View File

@ -14,7 +14,7 @@ export interface IWorkspaceStore {
// observables
workspaceSlug: string | null;
workspaces: IWorkspace[];
workspaces: IWorkspace[] | undefined;
labels: { [workspaceSlug: string]: IIssueLabels[] }; // workspaceSlug: labels[]
members: { [workspaceSlug: string]: IWorkspaceMember[] }; // workspaceSlug: members[]
@ -22,7 +22,7 @@ export interface IWorkspaceStore {
setWorkspaceSlug: (workspaceSlug: string) => void;
getWorkspaceBySlug: (workspaceSlug: string) => IWorkspace | null;
getWorkspaceLabelById: (workspaceSlug: string, labelId: string) => IIssueLabels | null;
fetchWorkspaces: () => Promise<void>;
fetchWorkspaces: () => Promise<IWorkspace[]>;
fetchWorkspaceLabels: (workspaceSlug: string) => Promise<void>;
fetchWorkspaceMembers: (workspaceSlug: string) => Promise<void>;
@ -37,6 +37,7 @@ export interface IWorkspaceStore {
// computed
currentWorkspace: IWorkspace | null;
workspacesCreateByCurrentUser: IWorkspace[] | null;
workspaceLabels: IIssueLabels[] | null;
workspaceMembers: IWorkspaceMember[] | null;
}
@ -48,7 +49,7 @@ export class WorkspaceStore implements IWorkspaceStore {
// observables
workspaceSlug: string | null = null;
workspaces: IWorkspace[] = [];
workspaces: IWorkspace[] | undefined = [];
projects: { [workspaceSlug: string]: IProject[] } = {}; // workspaceSlug: project[]
labels: { [workspaceSlug: string]: IIssueLabels[] } = {};
members: { [workspaceSlug: string]: IWorkspaceMember[] } = {};
@ -112,6 +113,19 @@ export class WorkspaceStore implements IWorkspaceStore {
return this.workspaces?.find((workspace) => workspace.slug === this.workspaceSlug) || null;
}
/**
* computed value of all the workspaces created by the current logged in user
*/
get workspacesCreateByCurrentUser() {
if (!this.workspaces) return null;
const user = this.rootStore.user.currentUser;
if (!user) return null;
return this.workspaces.filter((w) => w.created_by === user?.id);
}
/**
* computed value of workspace labels using the workspace slug from the store
*/
@ -141,7 +155,7 @@ export class WorkspaceStore implements IWorkspaceStore {
* fetch workspace info from the array of workspaces in the store.
* @param workspaceSlug
*/
getWorkspaceBySlug = (workspaceSlug: string) => this.workspaces.find((w) => w.slug == workspaceSlug) || null;
getWorkspaceBySlug = (workspaceSlug: string) => this.workspaces?.find((w) => w.slug == workspaceSlug) || null;
/**
* get workspace label information from the workspace labels
@ -166,11 +180,18 @@ export class WorkspaceStore implements IWorkspaceStore {
this.loader = false;
this.error = null;
});
return workspaceResponse;
} catch (error) {
console.log("Failed to fetch user workspaces in workspace store", error);
this.loader = false;
this.error = error;
this.workspaces = [];
runInAction(() => {
this.loader = false;
this.error = error;
this.workspaces = [];
});
throw error;
}
};
@ -250,7 +271,7 @@ export class WorkspaceStore implements IWorkspaceStore {
runInAction(() => {
this.loader = false;
this.error = null;
this.workspaces = [...this.workspaces, response];
this.workspaces = [...(this.workspaces ?? []), response];
});
return response;