fix: create workspace page improvement (#2495)

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

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction, useEffect, useState, FC } from "react";
 import { mutate } from "swr";
+import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
 // services
 import { WorkspaceService } from "services/workspace.service";
@@ -63,6 +64,7 @@ export const CreateWorkspaceForm: FC<Props> = ({
   const [invalidSlug, setInvalidSlug] = useState(false);
 
   const { setToastAlert } = useToast();
+  const router = useRouter();
 
   const {
     handleSubmit,
@@ -171,7 +173,7 @@ export const CreateWorkspaceForm: FC<Props> = ({
                   ref={ref}
                   hasError={Boolean(errors.slug)}
                   placeholder="Enter workspace name..."
-                  className="block rounded-md bg-transparent py-2 !px-0 text-sm w-full"
+                  className="block rounded-md bg-transparent py-2 !px-0 text-sm w-full border-none"
                 />
               )}
             />
@@ -220,6 +222,9 @@ export const CreateWorkspaceForm: FC<Props> = ({
         <Button variant="primary" type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
           {isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
         </Button>
+        <Button variant="neutral-primary" type="button" size="md" onClick={() => router.back()}>
+          Go back
+        </Button>
       </div>
     </form>
   );

web/pages/create-workspace/index.tsx

@@ -1,28 +1,21 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
 import Image from "next/image";
-import { mutate } from "swr";
 import { useTheme } from "next-themes";
-// services
-import { UserService } from "services/user.service";
 // hooks
+import { useMobxStore } from "lib/mobx/store-provider";
 import useUser from "hooks/use-user";
 // layouts
 import DefaultLayout from "layouts/default-layout";
-import { UserAuthorizationLayout } from "layouts/auth-layout-legacy/user-authorization-wrapper";
+import { UserAuthWrapper } from "layouts/auth-layout";
 // components
 import { CreateWorkspaceForm } from "components/workspace";
 // images
 import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
 import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg";
 // types
-import { IUser, IWorkspace } from "types";
+import { IWorkspace } from "types";
 import type { NextPage } from "next";
-// fetch-keys
-import { CURRENT_USER } from "constants/fetch-keys";
-
-// services
-const userService = new UserService();
 
 const CreateWorkspace: NextPage = () => {
   const [defaultValues, setDefaultValues] = useState({
@@ -33,41 +26,28 @@ const CreateWorkspace: NextPage = () => {
 
   const router = useRouter();
 
+  const { user: userStore } = useMobxStore();
+
   const { theme } = useTheme();
 
   const { user } = useUser();
 
   const onSubmit = async (workspace: IWorkspace) => {
-    mutate<IUser>(
+    await userStore
-      CURRENT_USER,
+      .updateCurrentUser({ last_workspace_id: workspace.id })
-      (prevData) => {
+      .then(() => router.push(`/${workspace.slug}`));
-        if (!prevData) return prevData;
-
-        return {
-          ...prevData,
-          last_workspace_id: workspace.id,
-          // workspace: {
-          //   ...prevData.workspace,
-          //   fallback_workspace_id: workspace.id,
-          //   fallback_workspace_slug: workspace.slug,
-          //   last_workspace_id: workspace.id,
-          //   last_workspace_slug: workspace.slug,
-          // },
-        };
-      },
-      false
-    );
-
-    await userService.updateUser({ last_workspace_id: workspace.id }).then(() => router.push(`/${workspace.slug}`));
   };
 
   return (
-    <UserAuthorizationLayout>
+    <UserAuthWrapper>
       <DefaultLayout>
         <div className="flex h-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" />
-            <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">
+            <button
+              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"
+              onClick={() => router.push("/")}
+            >
               <div className="h-[30px] w-[133px]">
                 {theme === "light" ? (
                   <Image src={BlackHorizontalLogo} alt="Plane black logo" />
@@ -75,7 +55,7 @@ const CreateWorkspace: NextPage = () => {
                   <Image src={WhiteHorizontalLogo} alt="Plane white logo" />
                 )}
               </div>
-            </div>
+            </button>
             <div className="absolute sm:fixed text-custom-text-100 text-sm 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>
@@ -95,7 +75,7 @@ const CreateWorkspace: NextPage = () => {
           </div>
         </div>
       </DefaultLayout>
-    </UserAuthorizationLayout>
+    </UserAuthWrapper>
   );
 };