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

* fix: wrap the onboarding route with the UserWrapper

* chore: implement mobx in the onboarding screens

web/components/onboarding/user-details.tsx

@@ -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>
   );
-};
+});

web/components/onboarding/workspace.tsx

@@ -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: "",

web/components/page-views/signin.tsx

@@ -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) => {

web/components/workspace/create-workspace-form.tsx

@@ -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(() =>