github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki 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 { useEffect } from "react";
import { mutate } from "swr";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
// hooks import { observer } from "mobx-react-lite";
import useToast from "hooks/use-toast"; // mobx store
// services import { useMobxStore } from "lib/mobx/store-provider";
import { UserService } from "services/user.service";
// ui // ui
import { Button, CustomSelect, CustomSearchSelect, Input } from "@plane/ui"; import { Button, CustomSelect, CustomSearchSelect, Input } from "@plane/ui";
// types // types
import { IUser } from "types"; import { IUser } from "types";
// fetch-keys
import { CURRENT_USER } from "constants/fetch-keys";
// helpers // helpers
import { getUserTimeZoneFromWindow } from "helpers/date-time.helper"; import { getUserTimeZoneFromWindow } from "helpers/date-time.helper";
// constants // constants
@ -33,10 +29,10 @@ const timeZoneOptions = TIME_ZONES.map((timeZone) => ({
content: timeZone.label, 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 { user: userStore } = useMobxStore();
const { setToastAlert } = useToast();
const { const {
handleSubmit, handleSubmit,
@ -58,31 +54,7 @@ export const UserDetails: React.FC<Props> = ({ user }) => {
}, },
}; };
await userService await userStore.updateCurrentUser(payload);
.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);
});
}; };
useEffect(() => { useEffect(() => {
@ -217,4 +189,4 @@ export const UserDetails: React.FC<Props> = ({ user }) => {
</Button> </Button>
</form> </form>
); );
}; });

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

@ -1,5 +1,4 @@
import { useState } from "react"; import { useState } from "react";
// ui // ui
import { Button } from "@plane/ui"; import { Button } from "@plane/ui";
// types // types
@ -15,7 +14,9 @@ type Props = {
workspaces: IWorkspace[] | undefined; 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({ const [defaultValues, setDefaultValues] = useState({
name: "", name: "",
slug: "", slug: "",

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

@ -29,7 +29,6 @@ const authService = new AuthService();
export const SignInView = observer(() => { export const SignInView = observer(() => {
const { user: userStore } = useMobxStore(); const { user: userStore } = useMobxStore();
const { fetchCurrentUserSettings } = userStore;
// router // router
const router = useRouter(); const router = useRouter();
const { next: next_url } = router.query as { next: string }; 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)); (data?.email_password_login || !(data?.email_password_login || data?.magic_login || data?.google || data?.github));
useEffect(() => { useEffect(() => {
fetchCurrentUserSettings().then((settings) => { userStore.fetchCurrentUserSettings().then((settings) => {
setLoading(true); setLoading(true);
if (next_url) router.push(next_url); if (next_url) router.push(next_url);
else else
@ -58,12 +57,13 @@ export const SignInView = observer(() => {
}` }`
); );
}); });
}, [fetchCurrentUserSettings, router, next_url]); }, [userStore, router, next_url]);
const handleLoginRedirection = () => { const handleLoginRedirection = () => {
userStore.fetchCurrentUser().then((user) => { userStore.fetchCurrentUser().then((user) => {
const isOnboard = user.onboarding_step.profile_complete; const isOnboarded = user.is_onboarded;
if (isOnboard) {
if (isOnboarded) {
userStore userStore
.fetchCurrentUserSettings() .fetchCurrentUserSettings()
.then((userSettings: IUserSettings) => { .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 { useRouter } from "next/router";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import { mutate } from "swr";
// mobx store // mobx store
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
// services // services
@ -13,8 +12,6 @@ import useToast from "hooks/use-toast";
import { Button, CustomSelect, Input } from "@plane/ui"; import { Button, CustomSelect, Input } from "@plane/ui";
// types // types
import { IWorkspace } from "types"; import { IWorkspace } from "types";
// fetch-keys
import { USER_WORKSPACES } from "constants/fetch-keys";
// constants // constants
import { ORGANIZATION_SIZE } from "constants/workspace"; import { ORGANIZATION_SIZE } from "constants/workspace";
@ -96,7 +93,6 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
message: "Workspace created successfully.", message: "Workspace created successfully.",
}); });
mutate<IWorkspace[]>(USER_WORKSPACES, (prevData) => [res, ...(prevData ?? [])], false);
if (onSubmit) await onSubmit(res); if (onSubmit) await onSubmit(res);
}) })
.catch(() => .catch(() =>

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

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

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

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

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

@ -1,17 +1,17 @@
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 { observer } from "mobx-react-lite";
import useSWR, { mutate } from "swr"; import useSWR from "swr";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";
// mobx store // mobx store
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
// services // services
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";
// layouts // layouts
import DefaultLayout from "layouts/default-layout"; import DefaultLayout from "layouts/default-layout";
import { UserAuthWrapper } from "layouts/auth-layout";
// components // components
import { InviteMembers, JoinWorkspaces, UserDetails, Workspace } from "components/onboarding"; import { InviteMembers, JoinWorkspaces, UserDetails, Workspace } from "components/onboarding";
// ui // ui
@ -23,52 +23,34 @@ import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-l
// types // types
import { IUser, TOnboardingSteps } from "types"; import { IUser, TOnboardingSteps } from "types";
import type { NextPage } from "next"; import type { NextPage } from "next";
// fetch-keys
import { CURRENT_USER, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
// services // services
const userService = new UserService();
const workspaceService = new WorkspaceService(); const workspaceService = new WorkspaceService();
const Onboarding: NextPage = observer(() => { const Onboarding: NextPage = observer(() => {
const [step, setStep] = useState<number | null>(null); 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 { theme, setTheme } = useTheme();
const { user, isLoading: userLoading } = useUserAuth("onboarding"); const {} = useUserAuth("onboarding");
const { workspaces } = workspaceStore; const { data: invitations } = useSWR("USER_WORKSPACE_INVITATIONS_LIST", () =>
const userWorkspaces = workspaces?.filter((w) => w.created_by === user?.id); workspaceService.userWorkspaceInvitations()
);
const { data: invitations } = useSWR(USER_WORKSPACE_INVITATIONS, () => workspaceService.userWorkspaceInvitations());
// update last active workspace details // update last active workspace details
const updateLastWorkspace = async () => { const updateLastWorkspace = async () => {
if (!workspaces) return; if (!workspaces) return;
await mutate<IUser>( await userStore.updateCurrentUser({
CURRENT_USER, last_workspace_id: workspaces[0]?.id,
(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 });
}; };
// handle step change // handle step change
@ -82,40 +64,14 @@ const Onboarding: NextPage = observer(() => {
}, },
}; };
mutate<IUser>( await userStore.updateCurrentUser(payload);
CURRENT_USER,
(prevData) => {
if (!prevData) return prevData;
return {
...prevData,
...payload,
};
},
false
);
await userService.updateUser(payload);
}; };
// complete onboarding // complete onboarding
const finishOnboarding = async () => { const finishOnboarding = async () => {
if (!user) return; if (!user) return;
mutate<IUser>( await userStore.updateUserOnBoard();
CURRENT_USER,
(prevData) => {
if (!prevData) return prevData;
return {
...prevData,
is_onboarded: true,
};
},
false
);
await userService.updateUserOnBoard({ userRole: user.role }, user);
}; };
useEffect(() => { useEffect(() => {
@ -148,84 +104,85 @@ const Onboarding: NextPage = observer(() => {
handleStepChange(); handleStepChange();
}, [user, invitations, step]); }, [user, invitations, step]);
if (userLoading || step === null)
return (
<div className="grid h-screen place-items-center">
<Spinner />
</div>
);
return ( return (
<DefaultLayout> <UserAuthWrapper>
<div className="flex h-full w-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden"> {user && step !== null ? (
<div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5"> <DefaultLayout>
<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" /> <div className="flex h-full w-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden">
{step === 1 ? ( <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
<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="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" />
<div className="h-[30px] w-[30px]"> {step === 1 ? (
<Image src={BluePlaneLogoWithoutText} alt="Plane logo" /> <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> </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">
<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"> {step === 1 ? (
<div className="h-[30px] w-[133px]"> <UserDetails user={user} />
{theme === "light" ? ( ) : step === 2 ? (
<Image src={BlackHorizontalLogo} alt="Plane black logo" /> <Workspace
) : ( finishOnboarding={finishOnboarding}
<Image src={WhiteHorizontalLogo} alt="Plane white logo" /> stepChange={stepChange}
)} updateLastWorkspace={updateLastWorkspace}
</div> user={user}
</div> workspaces={workspaces}
)}
<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> ) : step === 3 ? (
<InviteMembers
finishOnboarding={finishOnboarding}
stepChange={stepChange}
user={user}
workspace={userWorkspaces?.[0]}
/>
) : (
step === 4 && (
<JoinWorkspaces
finishOnboarding={finishOnboarding}
stepChange={stepChange}
updateLastWorkspace={updateLastWorkspace}
/>
)
)}
</div> </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>
</div> ) : (
</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>; fetchUserProjectInfo: (workspaceSlug: string, projectId: string) => Promise<IProjectMember>;
fetchUserDashboardInfo: (workspaceSlug: string, month: number) => Promise<any>; fetchUserDashboardInfo: (workspaceSlug: string, month: number) => Promise<any>;
updateUserOnBoard: () => Promise<void>;
updateTourCompleted: () => Promise<void>; updateTourCompleted: () => Promise<void>;
updateCurrentUser: (data: Partial<IUser>) => Promise<IUser>; updateCurrentUser: (data: Partial<IUser>) => Promise<IUser>;
updateCurrentUserTheme: (theme: string) => Promise<IUser>; updateCurrentUserTheme: (theme: string) => Promise<IUser>;
@ -98,6 +99,7 @@ class UserStore implements IUserStore {
fetchUserDashboardInfo: action, fetchUserDashboardInfo: action,
fetchUserWorkspaceInfo: action, fetchUserWorkspaceInfo: action,
fetchUserProjectInfo: action, fetchUserProjectInfo: action,
updateUserOnBoard: action,
updateTourCompleted: action, updateTourCompleted: action,
updateCurrentUser: action, updateCurrentUser: action,
updateCurrentUserTheme: 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 () => { updateTourCompleted = async () => {
try { try {
if (this.currentUser) { if (this.currentUser) {
@ -251,7 +274,9 @@ class UserStore implements IUserStore {
is_tour_completed: true, is_tour_completed: true,
} as IUser; } as IUser;
}); });
const response = await this.userService.updateUserTourCompleted(this.currentUser); const response = await this.userService.updateUserTourCompleted(this.currentUser);
return response; return response;
} }
} catch (error) { } catch (error) {
@ -275,6 +300,8 @@ class UserStore implements IUserStore {
}); });
return response; return response;
} catch (error) { } catch (error) {
this.fetchCurrentUser();
throw error; throw error;
} }
}; };

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

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