fix: persist data on tab switch in workspace (#646)

* fix: persist data on tab switch in workspace

* fix: build fail

apps/app/components/onboarding/workspace.tsx

@@ -25,6 +25,11 @@ type Props = {
 export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
   const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
   const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
+  const [defaultValues, setDefaultValues] = useState({
+    name: "",
+    slug: "",
+    company_size: null,
+  });
 
   const { data: invitations, mutate } = useSWR(USER_WORKSPACE_INVITATIONS, () =>
     workspaceService.userWorkspaceInvitations()
@@ -99,11 +104,13 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
                 setWorkspace(res);
                 setStep(3);
               }}
+              defaultValues={defaultValues}
+              setDefaultValues={setDefaultValues}
             />
           </Tab.Panel>
           <Tab.Panel>
             <div className="mt-6">
-              <div className="divide-y pb-8 px-4">
+              <div className="divide-y px-4 pb-8">
                 {invitations && invitations.length > 0 ? (
                   invitations.map((invitation) => (
                     <div key={invitation.id}>

apps/app/components/workspace/create-workspace-form.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 
 import { mutate } from "swr";
 
@@ -19,15 +19,19 @@ import { COMPANY_SIZE } from "constants/workspace";
 
 type Props = {
   onSubmit: (res: IWorkspace) => void;
+  defaultValues: {
+    name: string;
+    slug: string;
+    company_size: number | null;
+  };
+  setDefaultValues: Dispatch<SetStateAction<any>>;
 };
 
-const defaultValues = {
-  name: "",
-  slug: "",
-  company_size: null,
-};
-
-export const CreateWorkspaceForm: React.FC<Props> = ({ onSubmit }) => {
+export const CreateWorkspaceForm: React.FC<Props> = ({
+  onSubmit,
+  defaultValues,
+  setDefaultValues,
+}) => {
   const [slugError, setSlugError] = useState(false);
 
   const { setToastAlert } = useToast();
@@ -37,7 +41,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({ onSubmit }) => {
     handleSubmit,
     control,
     setValue,
-    reset,
+    getValues,
     formState: { errors, isSubmitting },
   } = useForm<IWorkspace>({ defaultValues });
 
@@ -72,9 +76,13 @@ export const CreateWorkspaceForm: React.FC<Props> = ({ onSubmit }) => {
       });
   };
 
-  useEffect(() => {
-    reset(defaultValues);
-  }, [reset]);
+  useEffect(
+    () => () => {
+      // when the component unmounts set the default values to whatever user typed in
+      setDefaultValues(getValues());
+    },
+    [getValues, setDefaultValues]
+  );
 
   return (
     <form

apps/app/pages/create-workspace.tsx

@@ -16,6 +16,11 @@ import { CreateWorkspaceForm } from "components/workspace";
 
 const CreateWorkspace: NextPage = () => {
   const router = useRouter();
+  const defaultValues = {
+    name: "",
+    slug: "",
+    company_size: null,
+  };
 
   return (
     <DefaultLayout>
@@ -24,7 +29,11 @@ const CreateWorkspace: NextPage = () => {
           <div className="mb-8 text-center">
             <Image src={Logo} height="50" alt="Plane Logo" />
           </div>
-          <CreateWorkspaceForm onSubmit={(res) => router.push(`/${res.slug}`)} />
+          <CreateWorkspaceForm
+            defaultValues={defaultValues}
+            setDefaultValues={() => {}}
+            onSubmit={(res) => router.push(`/${res.slug}`)}
+          />
         </div>
       </div>
     </DefaultLayout>