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

fix:auth layer revamp

Browse Source
This commit is contained in:
sriramveeraghanta 2023-10-10 12:31:40 +05:30
parent 0ef2200465
commit f444309cae
20 changed files with 396 additions and 375 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/ui/dist/index.d.ts vendored
View File

@ -38,4 +38,6 @@ interface IRadialProgressBar {
}
declare const RadialProgressBar: FC<IRadialProgressBar>;
export { Button, Input, InputProps, RadialProgressBar, TextArea, TextAreaProps };
declare const Spinner: React.FC;
export { Button, Input, InputProps, RadialProgressBar, Spinner, TextArea, TextAreaProps };

22
packages/ui/dist/index.js vendored
View File

@ -29,6 +29,7 @@ __export(src_exports, {
Button: () => Button,
Input: () => Input,
RadialProgressBar: () => RadialProgressBar,
Spinner: () => Spinner,
TextArea: () => TextArea
});
module.exports = __toCommonJS(src_exports);
@ -148,10 +149,31 @@ var RadialProgressBar = (props) => {
transform: "rotate(-90 50 50)"
})));
};
// src/spinners/circular-spinner.tsx
var React5 = __toESM(require("react"));
var Spinner = () => /* @__PURE__ */ React5.createElement("div", {
role: "status"
}, /* @__PURE__ */ React5.createElement("svg", {
"aria-hidden": "true",
className: "mr-2 h-8 w-8 animate-spin fill-blue-600 text-custom-text-200",
viewBox: "0 0 100 101",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ React5.createElement("path", {
d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",
fill: "currentColor"
}), /* @__PURE__ */ React5.createElement("path", {
d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",
fill: "currentFill"
})), /* @__PURE__ */ React5.createElement("span", {
className: "sr-only"
}, "Loading..."));
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Button,
Input,
RadialProgressBar,
Spinner,
TextArea
});

21
packages/ui/dist/index.mjs vendored
View File

@ -113,9 +113,30 @@ var RadialProgressBar = (props) => {
transform: "rotate(-90 50 50)"
})));
};
// src/spinners/circular-spinner.tsx
import * as React5 from "react";
var Spinner = () => /* @__PURE__ */ React5.createElement("div", {
role: "status"
}, /* @__PURE__ */ React5.createElement("svg", {
"aria-hidden": "true",
className: "mr-2 h-8 w-8 animate-spin fill-blue-600 text-custom-text-200",
viewBox: "0 0 100 101",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ React5.createElement("path", {
d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",
fill: "currentColor"
}), /* @__PURE__ */ React5.createElement("path", {
d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",
fill: "currentFill"
})), /* @__PURE__ */ React5.createElement("span", {
className: "sr-only"
}, "Loading..."));
export {
Button,
Input,
RadialProgressBar,
Spinner,
TextArea
};

1
packages/ui/src/index.tsx
View File

@ -1,3 +1,4 @@
export * from "./buttons";
export * from "./form-fields";
export * from "./progress";
export * from "./spinners";

23
packages/ui/src/spinners/circular-spinner.tsx Normal file
View File

@ -0,0 +1,23 @@
import * as React from "react";
export const Spinner: React.FC = () => (
<div role="status">
<svg
aria-hidden="true"
className="mr-2 h-8 w-8 animate-spin fill-blue-600 text-custom-text-200"
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill="currentColor"
/>
<path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentFill"
/>
</svg>
<span className="sr-only">Loading...</span>
</div>
);

1
packages/ui/src/spinners/index.ts Normal file
View File

@ -0,0 +1 @@
export * from "./circular-spinner";

24
web/components/account/email-password-form.tsx
View File

@ -3,19 +3,18 @@ import { useForm } from "react-hook-form";
// ui
import { Input, PrimaryButton } from "components/ui";
// types
type EmailPasswordFormValues = {
export interface EmailPasswordFormValues {
email: string;
password?: string;
medium?: string;
};
}
type Props = {
export interface IEmailPasswordForm {
onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
setIsResettingPassword: (value: boolean) => void;
};
}
export const EmailPasswordForm: React.FC<Props> = (props) => {
const { onSubmit, setIsResettingPassword } = props;
export const EmailPasswordForm: React.FC<IEmailPasswordForm> = (props) => {
const { onSubmit } = props;
// form info
const {
register,
@ -33,10 +32,7 @@ export const EmailPasswordForm: React.FC<Props> = (props) => {
return (
<>
<form
className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
onSubmit={handleSubmit(onSubmit)}
>
<form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-1">
<Input
id="email"
@ -70,11 +66,7 @@ export const EmailPasswordForm: React.FC<Props> = (props) => {
/>
</div>
<div className="text-right text-xs">
<button
type="button"
onClick={() => setIsResettingPassword(true)}
className="text-custom-text-200 hover:text-custom-primary-100"
>
<button type="button" onClick={() => {}} className="text-custom-text-200 hover:text-custom-primary-100">
Forgot your password?
</button>
</div>

23
web/components/account/email-reset-password-form.tsx
View File

@ -1,6 +1,5 @@
import React from "react";
// react hook form
import { useRouter } from "next/router";
import { useForm } from "react-hook-form";
// services
import userService from "services/user.service";
@ -10,12 +9,16 @@ import useToast from "hooks/use-toast";
import { Input, PrimaryButton, SecondaryButton } from "components/ui";
// types
type Props = {
setIsResettingPassword: React.Dispatch<React.SetStateAction<boolean>>;
onSubmit: (formValues: any) => void;
};
export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword }) => {
export const EmailResetPasswordForm: React.FC<Props> = (props) => {
const { onSubmit } = props;
// toast
const { setToastAlert } = useToast();
// router
const router = useRouter();
// form data
const {
register,
handleSubmit,
@ -59,10 +62,7 @@ export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword
};
return (
<form
className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
onSubmit={handleSubmit(forgotPassword)}
>
<form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(forgotPassword)}>
<div className="space-y-1">
<Input
id="email"
@ -82,10 +82,7 @@ export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword
/>
</div>
<div className="mt-5 flex flex-col-reverse sm:flex-row items-center gap-2">
<SecondaryButton
className="w-full text-center h-[46px]"
onClick={() => setIsResettingPassword(false)}
>
<SecondaryButton className="w-full text-center h-[46px]" onClick={() => router.push("/")}>
Go Back
</SecondaryButton>
<PrimaryButton type="submit" className="w-full text-center h-[46px]" loading={isSubmitting}>

1
web/components/views/index.ts
View File

@ -4,3 +4,4 @@ export * from "./gantt-chart";
export * from "./modal";
export * from "./select-filters";
export * from "./single-view-item";
export * from "./signin";

182
web/components/views/signin.tsx Normal file
View File

@ -0,0 +1,182 @@
import useSWR from "swr";
import { observer } from "mobx-react-lite";
import Image from "next/image";
// hooks
import useToast from "hooks/use-toast";
import { useMobxStore } from "lib/mobx/store-provider";
// services
import { AuthService } from "services/authentication.service";
import { AppConfigService } from "services/app-config.service";
// components
import {
GoogleLoginButton,
GithubLoginButton,
EmailCodeForm,
EmailPasswordForm,
EmailResetPasswordForm,
EmailPasswordFormValues,
} from "components/account";
// ui
import { Spinner } from "@plane/ui";
// images
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
const appConfigService = new AppConfigService();
const authService = new AuthService();
export const SignInView = observer(() => {
const { user: userStore } = useMobxStore();
// toast
const { setToastAlert } = useToast();
// fetch app config
const { data } = useSWR("APP_CONFIG", () => appConfigService.envConfig());
// fetch user info
const { data: user, error } = useSWR("USER_INFO", () => userStore.fetchCurrentUser());
const handleGoogleSignIn = async ({ clientId, credential }: any) => {
try {
if (clientId && credential) {
const socialAuthPayload = {
medium: "google",
credential,
clientId,
};
const response = await authService.socialAuth(socialAuthPayload);
if (response && response?.user) {
mutateUser();
handleTheme(response?.user);
}
} else {
throw Error("Cant find credentials");
}
} catch (err: any) {
setToastAlert({
title: "Error signing in!",
type: "error",
message: err?.error || "Something went wrong. Please try again later or contact the support team.",
});
}
};
const handleGitHubSignIn = async (credential: string) => {
try {
if (data && data.github && credential) {
const socialAuthPayload = {
medium: "github",
credential,
clientId: data.github,
};
const response = await authService.socialAuth(socialAuthPayload);
if (response && response?.user) {
mutateUser();
handleTheme(response?.user);
}
} else {
throw Error("Cant find credentials");
}
} catch (err: any) {
setToastAlert({
title: "Error signing in!",
type: "error",
message: err?.error || "Something went wrong. Please try again later or contact the support team.",
});
}
};
const handlePasswordSignIn = async (formData: EmailPasswordFormValues) => {
await authService
.emailLogin(formData)
.then((response) => {
try {
if (response) {
mutateUser();
handleTheme(response?.user);
}
} catch (err: any) {
setToastAlert({
type: "error",
title: "Error!",
message: err?.error || "Something went wrong. Please try again later or contact the support team.",
});
}
})
.catch((err) =>
setToastAlert({
type: "error",
title: "Error!",
message: err?.error || "Something went wrong. Please try again later or contact the support team.",
})
);
};
const handleEmailCodeSignIn = async (response: any) => {
try {
if (response) {
mutateUser();
handleTheme(response?.user);
}
} catch (err: any) {
setToastAlert({
type: "error",
title: "Error!",
message: err?.error || "Something went wrong. Please try again later or contact the support team.",
});
}
};
return (
<>
{!user && !error ? (
<div className="grid place-items-center h-screen">
<Spinner />
</div>
) : (
<>
<>
<div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
<div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
<div className="grid place-items-center bg-custom-background-100">
<div className="h-[30px] w-[30px]">
<Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
</div>
</div>
</div>
</>
<div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
<div>
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
Sign in to Plane
</h1>
<EmailResetPasswordForm />
<>
{data?.email_password_login && <EmailPasswordForm onSubmit={handlePasswordSignIn} />}
{data?.magic_login && (
<div className="flex flex-col divide-y divide-custom-border-200">
<div className="pb-7">
<EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
</div>
</div>
)}
<div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
{data?.google && <GoogleLoginButton clientId={data?.google} handleSignIn={handleGoogleSignIn} />}
{data?.github && <GithubLoginButton clientId={data?.github} handleSignIn={handleGitHubSignIn} />}
</div>
</>
<p className="pt-16 text-custom-text-200 text-sm text-center">
By signing up, you agree to the{" "}
<a
href="https://plane.so/terms-and-conditions"
target="_blank"
rel="noopener noreferrer"
className="font-medium underline"
>
Terms & Conditions
</a>
</p>
</div>
</div>
</>
)}
</>
);
});

11
web/lib/mobx/store-init.tsx
View File

@ -13,8 +13,9 @@ const MobxStoreInit = () => {
project: projectStore,
module: moduleStore,
} = useMobxStore();
// theme
const { setTheme } = useTheme();
// router
const router = useRouter();
const { workspaceSlug, projectId, moduleId } = router.query;
@ -42,14 +43,6 @@ const MobxStoreInit = () => {
}
}, [themeStore, userStore, setTheme]);
useEffect(() => {
// current user
if (userStore?.currentUser === null) userStore.setCurrentUser();
// current user settings
if (userStore?.currentUserSettings === null) userStore.setCurrentUserSettings();
}, [userStore]);
useEffect(() => {
if (workspaceSlug) workspaceStore.setWorkspaceSlug(workspaceSlug.toString());
if (projectId) projectStore.setProjectId(projectId.toString());

0
web/pages/accounts/forget-password.tsx Normal file
View File

0
web/pages/magic-sign-in.tsx → web/pages/accounts/magic-sign-in.tsx
View File

0
web/pages/reset-password.tsx → web/pages/accounts/reset-password.tsx
View File

0
web/pages/sign-up.tsx → web/pages/accounts/sign-up.tsx
View File

0
web/pages/calendar.tsx → web/pages/calender/index.tsx
View File

16
web/pages/error.tsx
View File

@ -1,16 +0,0 @@
import React from "react";
// layouts
import DefaultLayout from "layouts/default-layout";
// types
import type { NextPage } from "next";
const ErrorPage: NextPage = () => (
<DefaultLayout>
<div className="h-full w-full">
<h2 className="text-3xl">Error!</h2>
</div>
</DefaultLayout>
);
export default ErrorPage;

233
web/pages/index.tsx
View File

@ -1,234 +1,13 @@
import React, { useEffect, useState } from "react";
import Image from "next/image";
import type { NextPage } from "next";
import { useTheme } from "next-themes";
import useSWR from "swr";
import { observer } from "mobx-react-lite";
// layouts
import DefaultLayout from "layouts/default-layout";
// services
import authenticationService from "services/authentication.service";
import { AppConfigService } from "services/app-config.service";
// hooks
import useUserAuth from "hooks/use-user-auth";
import useToast from "hooks/use-toast";
// components
import {
GoogleLoginButton,
GithubLoginButton,
EmailCodeForm,
EmailPasswordForm,
EmailResetPasswordForm,
} from "components/account";
// ui
import { Spinner } from "components/ui";
// images
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// types
import { IUser } from "types";
import { SignInView } from "components/views";
const appConfig = new AppConfigService();
// types
type EmailPasswordFormValues = {
email: string;
password?: string;
medium?: string;
};
const HomePage: NextPage = observer(() => {
const store: any = useMobxStore();
// theme
const { setTheme } = useTheme();
// user
const { isLoading, mutateUser } = useUserAuth("sign-in");
// states
const [isResettingPassword, setIsResettingPassword] = useState(false);
// toast
const { setToastAlert } = useToast();
// fetch app config
const { data } = useSWR("APP_CONFIG", () => appConfig.envConfig());
const handleTheme = (user: IUser) => {
const currentTheme = user.theme.theme ?? "system";
setTheme(currentTheme);
store?.user?.setCurrentUserSettings();
};
const handleGoogleSignIn = async ({ clientId, credential }: any) => {
try {
if (clientId && credential) {
const socialAuthPayload = {
medium: "google",
credential,
clientId,
};
const response = await authenticationService.socialAuth(socialAuthPayload);
if (response && response?.user) {
mutateUser();
handleTheme(response?.user);
}
} else {
throw Error("Cant find credentials");
}
} catch (err: any) {
setToastAlert({
title: "Error signing in!",
type: "error",
message:
err?.error || "Something went wrong. Please try again later or contact the support team.",
});
}
};
const handleGitHubSignIn = async (credential: string) => {
try {
if (data && data.github && credential) {
const socialAuthPayload = {
medium: "github",
credential,
clientId: data.github,
};
const response = await authenticationService.socialAuth(socialAuthPayload);
if (response && response?.user) {
mutateUser();
handleTheme(response?.user);
}
} else {
throw Error("Cant find credentials");
}
} catch (err: any) {
setToastAlert({
title: "Error signing in!",
type: "error",
message:
err?.error || "Something went wrong. Please try again later or contact the support team.",
});
}
};
const handlePasswordSignIn = async (formData: EmailPasswordFormValues) => {
await authenticationService
.emailLogin(formData)
.then((response) => {
try {
if (response) {
mutateUser();
handleTheme(response?.user);
}
} catch (err: any) {
setToastAlert({
type: "error",
title: "Error!",
message:
err?.error ||
"Something went wrong. Please try again later or contact the support team.",
});
}
})
.catch((err) =>
setToastAlert({
type: "error",
title: "Error!",
message:
err?.error ||
"Something went wrong. Please try again later or contact the support team.",
})
);
};
const handleEmailCodeSignIn = async (response: any) => {
try {
if (response) {
mutateUser();
handleTheme(response?.user);
}
} catch (err: any) {
setToastAlert({
type: "error",
title: "Error!",
message:
err?.error || "Something went wrong. Please try again later or contact the support team.",
});
}
};
return (
<DefaultLayout>
{isLoading ? (
<div className="grid place-items-center h-screen">
<Spinner />
</div>
) : (
<>
<>
<div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
<div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
<div className="grid place-items-center bg-custom-background-100">
<div className="h-[30px] w-[30px]">
<Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
</div>
</div>
</div>
</>
<div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
<div>
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
{isResettingPassword ? "Reset your password" : "Sign in to Plane"}
</h1>
{isResettingPassword ? (
<EmailResetPasswordForm setIsResettingPassword={setIsResettingPassword} />
) : (
<>
{data?.email_password_login && (
<EmailPasswordForm
onSubmit={handlePasswordSignIn}
setIsResettingPassword={setIsResettingPassword}
/>
)}
{data?.magic_login && (
<div className="flex flex-col divide-y divide-custom-border-200">
<div className="pb-7">
<EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
</div>
</div>
)}
<div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
{data?.google && (
<GoogleLoginButton
clientId={data?.google}
handleSignIn={handleGoogleSignIn}
/>
)}
{data?.github && (
<GithubLoginButton
clientId={data?.github}
handleSignIn={handleGitHubSignIn}
/>
)}
</div>
</>
)}
<p className="pt-16 text-custom-text-200 text-sm text-center">
By signing up, you agree to the{" "}
<a
href="https://plane.so/terms-and-conditions"
target="_blank"
rel="noopener noreferrer"
className="font-medium underline"
>
Terms & Conditions
</a>
</p>
</div>
</div>
</>
)}
</DefaultLayout>
);
});
const HomePage: NextPage = () => (
<DefaultLayout>
<SignInView />
</DefaultLayout>
);
export default HomePage;

0
web/pages/invitations.tsx → web/pages/invitations/index.tsx
View File

209
web/store/user.ts
View File

@ -1,130 +1,153 @@
// mobx
import { action, observable, computed, runInAction, makeObservable } from "mobx";
// services
import UserService from "services/user.service";
import { UserService } from "services/user.service";
// interfaces
import { ICurrentUser, ICurrentUserSettings } from "types/users";
class UserStore {
interface IUserStore {
loader: boolean;
currentUser: ICurrentUser | null;
currentUserSettings: ICurrentUserSettings | null;
fetchCurrentUser: () => Promise<ICurrentUser>;
}
class UserStore implements IUserStore {
loader: boolean = false;
currentUser: ICurrentUser | null = null;
currentUserSettings: ICurrentUserSettings | null = null;
// root store
rootStore;
// services
userService;
constructor(_rootStore: any) {
makeObservable(this, {
// observable
loader: observable.ref,
currentUser: observable.ref,
currentUserSettings: observable.ref,
// action
setCurrentUser: action,
setCurrentUserSettings: action,
updateCurrentUser: action,
updateCurrentUserSettings: action,
fetchCurrentUser: action,
// computed
});
this.rootStore = _rootStore;
this.initialLoad();
this.userService = new UserService();
}
setCurrentUser = async () => {
fetchCurrentUser = async () => {
try {
let userResponse: ICurrentUser | null = await UserService.currentUser();
userResponse = userResponse || null;
if (userResponse) {
const userPayload: ICurrentUser = {
id: userResponse?.id,
avatar: userResponse?.avatar,
first_name: userResponse?.first_name,
last_name: userResponse?.last_name,
username: userResponse?.username,
email: userResponse?.email,
mobile_number: userResponse?.mobile_number,
is_email_verified: userResponse?.is_email_verified,
is_tour_completed: userResponse?.is_tour_completed,
onboarding_step: userResponse?.onboarding_step,
is_onboarded: userResponse?.is_onboarded,
role: userResponse?.role,
};
const response = await this.userService.currentUser();
console.log("response", response);
if (response) {
runInAction(() => {
this.currentUser = userPayload;
this.currentUser = response;
});
}
return response;
} catch (error) {
console.error("Fetching current user error", error);
throw error;
}
};
setCurrentUserSettings = async () => {
try {
let userSettingsResponse: ICurrentUserSettings | null = await UserService.currentUser();
userSettingsResponse = userSettingsResponse || null;
// setCurrentUser = async () => {
// try {
// let userResponse: ICurrentUser | null = await UserService.currentUser();
// userResponse = userResponse || null;
if (userSettingsResponse) {
const themePayload = {
theme: { ...userSettingsResponse?.theme },
};
runInAction(() => {
this.currentUserSettings = themePayload;
this.rootStore.theme.setTheme(themePayload);
});
}
} catch (error) {
console.error("Fetching current user error", error);
}
};
// if (userResponse) {
// const userPayload: ICurrentUser = {
// id: userResponse?.id,
// avatar: userResponse?.avatar,
// first_name: userResponse?.first_name,
// last_name: userResponse?.last_name,
// username: userResponse?.username,
// email: userResponse?.email,
// mobile_number: userResponse?.mobile_number,
// is_email_verified: userResponse?.is_email_verified,
// is_tour_completed: userResponse?.is_tour_completed,
// onboarding_step: userResponse?.onboarding_step,
// is_onboarded: userResponse?.is_onboarded,
// role: userResponse?.role,
// };
// runInAction(() => {
// this.currentUser = userPayload;
// });
// }
// } catch (error) {
// console.error("Fetching current user error", error);
// }
// };
updateCurrentUser = async (user: ICurrentUser) => {
try {
let userResponse: ICurrentUser = await UserService.updateUser(user);
userResponse = userResponse || null;
// setCurrentUserSettings = async () => {
// try {
// let userSettingsResponse: ICurrentUserSettings | null = await UserService.currentUser();
// userSettingsResponse = userSettingsResponse || null;
if (userResponse) {
const userPayload: ICurrentUser = {
id: userResponse?.id,
avatar: userResponse?.avatar,
first_name: userResponse?.first_name,
last_name: userResponse?.last_name,
username: userResponse?.username,
email: userResponse?.email,
mobile_number: userResponse?.mobile_number,
is_email_verified: userResponse?.is_email_verified,
is_tour_completed: userResponse?.is_tour_completed,
onboarding_step: userResponse?.onboarding_step,
is_onboarded: userResponse?.is_onboarded,
role: userResponse?.role,
};
runInAction(() => {
this.currentUser = userPayload;
});
return userPayload;
}
} catch (error) {
console.error("Updating user error", error);
return error;
}
};
// if (userSettingsResponse) {
// const themePayload = {
// theme: { ...userSettingsResponse?.theme },
// };
// runInAction(() => {
// this.currentUserSettings = themePayload;
// this.rootStore.theme.setTheme(themePayload);
// });
// }
// } catch (error) {
// console.error("Fetching current user error", error);
// }
// };
updateCurrentUserSettings = async (userTheme: ICurrentUserSettings) => {
try {
let userSettingsResponse: ICurrentUserSettings = await UserService.updateUser(userTheme);
userSettingsResponse = userSettingsResponse || null;
if (userSettingsResponse) {
const themePayload = {
theme: { ...userSettingsResponse?.theme },
};
runInAction(() => {
this.currentUserSettings = themePayload;
this.rootStore.theme.setTheme(themePayload);
});
return themePayload;
}
} catch (error) {
console.error("Updating user settings error", error);
return error;
}
};
// updateCurrentUser = async (user: ICurrentUser) => {
// try {
// let userResponse: ICurrentUser = await UserService.updateUser(user);
// userResponse = userResponse || null;
// if (userResponse) {
// const userPayload: ICurrentUser = {
// id: userResponse?.id,
// avatar: userResponse?.avatar,
// first_name: userResponse?.first_name,
// last_name: userResponse?.last_name,
// username: userResponse?.username,
// email: userResponse?.email,
// mobile_number: userResponse?.mobile_number,
// is_email_verified: userResponse?.is_email_verified,
// is_tour_completed: userResponse?.is_tour_completed,
// onboarding_step: userResponse?.onboarding_step,
// is_onboarded: userResponse?.is_onboarded,
// role: userResponse?.role,
// };
// runInAction(() => {
// this.currentUser = userPayload;
// });
// return userPayload;
// }
// } catch (error) {
// console.error("Updating user error", error);
// return error;
// }
// };
// updateCurrentUserSettings = async (userTheme: ICurrentUserSettings) => {
// try {
// let userSettingsResponse: ICurrentUserSettings = await UserService.updateUser(userTheme);
// userSettingsResponse = userSettingsResponse || null;
// if (userSettingsResponse) {
// const themePayload = {
// theme: { ...userSettingsResponse?.theme },
// };
// runInAction(() => {
// this.currentUserSettings = themePayload;
// this.rootStore.theme.setTheme(themePayload);
// });
// return themePayload;
// }
// } catch (error) {
// console.error("Updating user settings error", error);
// return error;
// }
// };
// init load
initialLoad() {}