refactor: global workspace form (#421)

apps/app/components/onboarding/workspace.tsx

@@ -1,85 +1,33 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import Image from "next/image";
 
 import useSWR from "swr";
 
-import { Controller, useForm } from "react-hook-form";
+// headless ui
-
 import { Tab } from "@headlessui/react";
-
-// hooks
-import useToast from "hooks/use-toast";
 // services
 import workspaceService from "services/workspace.service";
-// ui
-import { CustomSelect, Input } from "components/ui";
 // types
-import { IWorkspace, IWorkspaceMemberInvitation } from "types";
+import { IWorkspaceMemberInvitation } from "types";
 // fetch-keys
 import { USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
 // constants
-import { COMPANY_SIZE } from "constants/workspace";
+import { CreateWorkspaceForm } from "components/workspace";
 
 type Props = {
   setStep: React.Dispatch<React.SetStateAction<number>>;
   setWorkspace: React.Dispatch<React.SetStateAction<any>>;
 };
 
-const defaultValues: Partial<IWorkspace> = {
-  name: "",
-  slug: "",
-  company_size: null,
-};
-
 const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
-  const [slugError, setSlugError] = useState(false);
   const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
   const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
 
-  const { setToastAlert } = useToast();
-
   const { data: invitations, mutate } = useSWR(USER_WORKSPACE_INVITATIONS, () =>
     workspaceService.userWorkspaceInvitations()
   );
 
-  const {
-    register,
-    handleSubmit,
-    control,
-    setValue,
-    reset,
-    formState: { errors, isSubmitting },
-  } = useForm<IWorkspace>({ defaultValues });
-
-  const handleCreateWorkspace = async (formData: IWorkspace) => {
-    await workspaceService
-      .workspaceSlugCheck(formData.slug)
-      .then(async (res) => {
-        if (res.status === true) {
-          setSlugError(false);
-          await workspaceService
-            .createWorkspace(formData)
-            .then((res) => {
-              console.log(res);
-              setToastAlert({
-                type: "success",
-                title: "Success!",
-                message: "Workspace created successfully.",
-              });
-              setWorkspace(res);
-              setStep(3);
-            })
-            .catch((err) => {
-              console.error(err);
-            });
-        } else setSlugError(true);
-      })
-      .catch((err) => {
-        console.error(err);
-      });
-  };
-
   const handleInvitation = (
     workspace_invitation: IWorkspaceMemberInvitation,
     action: "accepted" | "withdraw"
@@ -109,10 +57,6 @@ const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
       });
   };
 
-  useEffect(() => {
-    reset(defaultValues);
-  }, [reset]);
-
   return (
     <div className="grid w-full place-items-center">
       <Tab.Group as="div" className="w-full rounded-lg bg-white p-8 md:w-2/5">
@@ -136,80 +80,13 @@ const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
           </Tab>
         </Tab.List>
         <Tab.Panels>
-          <Tab.Panel>
+          <Tab.Panel className="pt-4">
-            <form className="mt-4 space-y-8" onSubmit={handleSubmit(handleCreateWorkspace)}>
+            <CreateWorkspaceForm
-              <div className="w-full space-y-4">
+              onSubmit={(res) => {
-                <div className="grid grid-cols-1 gap-4">
+                setWorkspace(res);
-                  <div>
+                setStep(3);
-                    <Input
+              }}
-                      label="Workspace name"
+            />
-                      name="name"
-                      placeholder="Enter name"
-                      autoComplete="off"
-                      register={register}
-                      onChange={(e) =>
-                        setValue("slug", e.target.value.toLocaleLowerCase().replace(/ /g, "-"))
-                      }
-                      validations={{
-                        required: "Workspace name is required",
-                      }}
-                      error={errors.name}
-                    />
-                  </div>
-                  <div>
-                    <h6 className="text-gray-500">Workspace slug</h6>
-                    <div className="flex items-center rounded-md border border-gray-300 px-3">
-                      <span className="text-sm text-slate-600">{"https://app.plane.so/"}</span>
-                      <Input
-                        name="slug"
-                        mode="trueTransparent"
-                        autoComplete="off"
-                        register={register}
-                        className="block w-full rounded-md bg-transparent py-2 px-0 text-sm focus:outline-none focus:ring-0"
-                      />
-                    </div>
-                    {slugError && (
-                      <span className="-mt-3 text-sm text-red-500">
-                        Workspace URL is already taken!
-                      </span>
-                    )}
-                  </div>
-                  <div>
-                    <Controller
-                      name="company_size"
-                      control={control}
-                      rules={{ required: "This field is required" }}
-                      render={({ field: { value, onChange } }) => (
-                        <CustomSelect
-                          value={value}
-                          onChange={onChange}
-                          label={value ? value.toString() : "Select company size"}
-                          input
-                        >
-                          {COMPANY_SIZE?.map((item) => (
-                            <CustomSelect.Option key={item.value} value={item.value}>
-                              {item.label}
-                            </CustomSelect.Option>
-                          ))}
-                        </CustomSelect>
-                      )}
-                    />
-                    {errors.company_size && (
-                      <span className="text-sm text-red-500">{errors.company_size.message}</span>
-                    )}
-                  </div>
-                </div>
-              </div>
-              <div className="mx-auto h-1/4 lg:w-1/2">
-                <button
-                  type="submit"
-                  className="w-full rounded-md bg-gray-200 px-4 py-2 text-sm"
-                  disabled={isSubmitting}
-                >
-                  {isSubmitting ? "Creating..." : "Continue"}
-                </button>
-              </div>
-            </form>
           </Tab.Panel>
           <Tab.Panel>
             <div className="mt-4 space-y-8">

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

@@ -0,0 +1,154 @@
+import { useEffect, useState } from "react";
+
+import { mutate } from "swr";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// services
+import workspaceService from "services/workspace.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { CustomSelect, Input } from "components/ui";
+// types
+import { IWorkspace } from "types";
+// fetch-keys
+import { USER_WORKSPACES } from "constants/fetch-keys";
+// constants
+import { COMPANY_SIZE } from "constants/workspace";
+
+type Props = {
+  onSubmit: (res: IWorkspace) => void;
+};
+
+const defaultValues = {
+  name: "",
+  slug: "",
+  company_size: null,
+};
+
+export const CreateWorkspaceForm: React.FC<Props> = ({ onSubmit }) => {
+  const [slugError, setSlugError] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    setValue,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<IWorkspace>({ defaultValues });
+
+  const handleCreateWorkspace = async (formData: IWorkspace) => {
+    await workspaceService
+      .workspaceSlugCheck(formData.slug)
+      .then(async (res) => {
+        if (res.status === true) {
+          setSlugError(false);
+          await workspaceService
+            .createWorkspace(formData)
+            .then((res) => {
+              setToastAlert({
+                type: "success",
+                title: "Success!",
+                message: "Workspace created successfully.",
+              });
+              mutate<IWorkspace[]>(USER_WORKSPACES, (prevData) => [res, ...(prevData ?? [])]);
+              onSubmit(res);
+            })
+            .catch((err) => {
+              console.error(err);
+            });
+        } else setSlugError(true);
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Some error occurred while creating workspace. Please try again.",
+        });
+      });
+  };
+
+  useEffect(() => {
+    reset(defaultValues);
+  }, [reset]);
+
+  return (
+    <form className="space-y-8" onSubmit={handleSubmit(handleCreateWorkspace)}>
+      <div className="w-full space-y-4 bg-white">
+        <div className="grid grid-cols-1 gap-4">
+          <div>
+            <Input
+              name="name"
+              register={register}
+              label="Workspace name"
+              placeholder="Enter name"
+              autoComplete="off"
+              onChange={(e) =>
+                setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"))
+              }
+              validations={{
+                required: "Workspace name is required",
+              }}
+              error={errors.name}
+            />
+          </div>
+          <div>
+            <h6 className="text-gray-500">Workspace slug</h6>
+            <div className="flex items-center rounded-md border border-gray-300 px-3">
+              <span className="text-sm text-slate-600">{"https://app.plane.so/"}</span>
+              <Input
+                mode="trueTransparent"
+                autoComplete="off"
+                name="slug"
+                register={register}
+                className="block w-full rounded-md bg-transparent py-2 px-0 text-sm"
+              />
+            </div>
+            {slugError && (
+              <span className="-mt-3 text-sm text-red-500">Workspace URL is already taken!</span>
+            )}
+          </div>
+          <div>
+            <h6 className="text-gray-500">Company size</h6>
+            <Controller
+              name="company_size"
+              control={control}
+              rules={{ required: "This field is required" }}
+              render={({ field: { value, onChange } }) => (
+                <CustomSelect
+                  value={value}
+                  onChange={onChange}
+                  label={value ? value.toString() : "Select company size"}
+                  input
+                  width="w-full"
+                >
+                  {COMPANY_SIZE?.map((item) => (
+                    <CustomSelect.Option key={item.value} value={item.value}>
+                      {item.label}
+                    </CustomSelect.Option>
+                  ))}
+                </CustomSelect>
+              )}
+            />
+            {errors.company_size && (
+              <span className="text-sm text-red-500">{errors.company_size.message}</span>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="mx-auto h-1/4 lg:w-1/2">
+        <button
+          type="submit"
+          className="w-full rounded-md bg-gray-200 px-4 py-2 text-sm"
+          disabled={isSubmitting}
+        >
+          {isSubmitting ? "Creating..." : "Continue"}
+        </button>
+      </div>
+    </form>
+  );
+};

apps/app/components/workspace/delete-workspace-modal.tsx

@@ -25,7 +25,7 @@ type Props = {
   onClose: () => void;
 };
 
-const ConfirmWorkspaceDeletion: React.FC<Props> = ({ isOpen, data, onClose }) => {
+export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose }) => {
   const cancelButtonRef = useRef(null);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [confirmProjectName, setConfirmProjectName] = useState("");
@@ -194,5 +194,3 @@ const ConfirmWorkspaceDeletion: React.FC<Props> = ({ isOpen, data, onClose }) =>
     </Transition.Root>
   );
 };
-
-export default ConfirmWorkspaceDeletion;

apps/app/components/workspace/index.ts

@@ -1,3 +1,5 @@
+export * from "./create-workspace-form";
+export * from "./delete-workspace-modal";
 export * from "./sidebar-dropdown";
 export * from "./sidebar-menu";
 export * from "./help-section";

apps/app/pages/[workspaceSlug]/settings/index.tsx

@@ -20,7 +20,7 @@ import AppLayout from "layouts/app-layout";
 import useToast from "hooks/use-toast";
 // components
 import { ImageUploadModal } from "components/core";
-import ConfirmWorkspaceDeletion from "components/workspace/confirm-workspace-deletion";
+import { DeleteWorkspaceModal } from "components/workspace";
 // ui
 import { Spinner, Button, Input, CustomSelect, OutlineButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -120,7 +120,7 @@ const WorkspaceSettings: NextPage<UserAuth> = (props) => {
         }}
         value={watch("logo")}
       />
-      <ConfirmWorkspaceDeletion
+      <DeleteWorkspaceModal
         isOpen={isOpen}
         onClose={() => {
           setIsOpen(false);

apps/app/pages/create-workspace.tsx

@@ -1,92 +1,22 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 
 import { useRouter } from "next/router";
 import Image from "next/image";
 
-import { mutate } from "swr";
-
-// react-hook-form
-import { Controller, useForm } from "react-hook-form";
-// services
-import workspaceService from "services/workspace.service";
-// hooks
-import useToast from "hooks/use-toast";
 // constants
 import { requiredAuth } from "lib/auth";
 // layouts
 import DefaultLayout from "layouts/default-layout";
-// ui
-import { CustomSelect, Input } from "components/ui";
 // images
 import Logo from "public/onboarding/logo.svg";
 // types
-import type { IWorkspace } from "types";
 import type { NextPage, NextPageContext } from "next";
-// fetch-keys
-import { USER_WORKSPACES } from "constants/fetch-keys";
 // constants
-import { COMPANY_SIZE } from "constants/workspace";
+import { CreateWorkspaceForm } from "components/workspace";
-
-const defaultValues = {
-  name: "",
-  slug: "",
-  company_size: null,
-};
 
 const CreateWorkspace: NextPage = () => {
-  const [slugError, setSlugError] = useState(false);
-
   const router = useRouter();
 
-  const { setToastAlert } = useToast();
-
-  const {
-    register,
-    handleSubmit,
-    control,
-    setError,
-    setValue,
-    reset,
-    formState: { errors, isSubmitting },
-  } = useForm<IWorkspace>({ defaultValues });
-
-  const onSubmit = async (formData: IWorkspace) => {
-    await workspaceService
-      .workspaceSlugCheck(formData.slug)
-      .then(async (res) => {
-        if (res.status === true) {
-          setSlugError(false);
-          await workspaceService
-            .createWorkspace(formData)
-            .then((res) => {
-              setToastAlert({
-                type: "success",
-                title: "Success!",
-                message: "Workspace created successfully.",
-              });
-              mutate<IWorkspace[]>(USER_WORKSPACES, (prevData) => [res, ...(prevData ?? [])]);
-              router.push(`/${formData.slug}`);
-            })
-            .catch((err) => {
-              console.error(err);
-            });
-        } else setSlugError(true);
-      })
-      .catch((err) => {
-        Object.keys(err).map((key) => {
-          const errorMessage = err?.[key];
-          if (!errorMessage) return;
-          setError(key as keyof IWorkspace, {
-            message: Array.isArray(errorMessage) ? errorMessage.join(", ") : errorMessage,
-          });
-        });
-      });
-  };
-
-  useEffect(() => {
-    reset(defaultValues);
-  }, [reset]);
-
   return (
     <DefaultLayout>
       <div className="grid h-full place-items-center p-5">
@@ -96,82 +26,7 @@ const CreateWorkspace: NextPage = () => {
           </div>
           <div className="grid w-full place-items-center">
             <div className="w-full rounded-lg bg-white p-8 md:w-2/5">
-              <form className="space-y-8" onSubmit={handleSubmit(onSubmit)}>
+              <CreateWorkspaceForm onSubmit={(res) => router.push(`/${res.slug}`)} />
-                <div className="w-full space-y-4 bg-white">
-                  <div className="grid grid-cols-1 gap-4">
-                    <div>
-                      <Input
-                        name="name"
-                        register={register}
-                        label="Workspace name"
-                        placeholder="Enter name"
-                        autoComplete="off"
-                        onChange={(e) =>
-                          setValue(
-                            "slug",
-                            e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-")
-                          )
-                        }
-                        validations={{
-                          required: "Workspace name is required",
-                        }}
-                        error={errors.name}
-                      />
-                    </div>
-                    <div>
-                      <h6 className="text-gray-500">Workspace slug</h6>
-                      <div className="flex items-center rounded-md border border-gray-300 px-3">
-                        <span className="text-sm text-slate-600">{"https://app.plane.so/"}</span>
-                        <Input
-                          mode="trueTransparent"
-                          autoComplete="off"
-                          name="slug"
-                          register={register}
-                          className="block w-full rounded-md bg-transparent py-2 px-0 text-sm"
-                        />
-                      </div>
-                      {slugError && (
-                        <span className="-mt-3 text-sm text-red-500">
-                          Workspace URL is already taken!
-                        </span>
-                      )}
-                    </div>
-                    <div>
-                      <Controller
-                        name="company_size"
-                        control={control}
-                        rules={{ required: "This field is required" }}
-                        render={({ field: { value, onChange } }) => (
-                          <CustomSelect
-                            value={value}
-                            onChange={onChange}
-                            label={value ? value.toString() : "Select company size"}
-                            input
-                          >
-                            {COMPANY_SIZE?.map((item) => (
-                              <CustomSelect.Option key={item.value} value={item.value}>
-                                {item.label}
-                              </CustomSelect.Option>
-                            ))}
-                          </CustomSelect>
-                        )}
-                      />
-                      {errors.company_size && (
-                        <span className="text-sm text-red-500">{errors.company_size.message}</span>
-                      )}
-                    </div>
-                  </div>
-                </div>
-                <div className="mx-auto h-1/4 lg:w-1/2">
-                  <button
-                    type="submit"
-                    className="w-full rounded-md bg-gray-200 px-4 py-2 text-sm"
-                    disabled={isSubmitting}
-                  >
-                    {isSubmitting ? "Creating..." : "Continue"}
-                  </button>
-                </div>
-              </form>
             </div>
           </div>
         </div>