plane/apps/app/components/workspace/create-workspace-form.tsx
2023-04-28 20:46:07 +05:30

209 lines
6.8 KiB
TypeScript

import { Dispatch, SetStateAction, 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, PrimaryButton } 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;
defaultValues: {
name: string;
slug: string;
company_size: number | null;
};
setDefaultValues: Dispatch<SetStateAction<any>>;
};
const restrictedUrls = [
"api",
"create-workspace",
"error",
"installations",
"invitations",
"magic-sign-in",
"onboarding",
"signin",
"workspace-member-invitation",
"404",
];
export const CreateWorkspaceForm: React.FC<Props> = ({
onSubmit,
defaultValues,
setDefaultValues,
}) => {
const [slugError, setSlugError] = useState(false);
const [invalidSlug, setInvalidSlug] = useState(false);
const { setToastAlert } = useToast();
const {
register,
handleSubmit,
control,
setValue,
getValues,
formState: { errors, isSubmitting },
} = useForm<IWorkspace>({ defaultValues });
const handleCreateWorkspace = async (formData: IWorkspace) => {
await workspaceService
.workspaceSlugCheck(formData.slug)
.then(async (res) => {
if (res.status === true && !restrictedUrls.includes(formData.slug)) {
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(
() => () => {
// when the component unmounts set the default values to whatever user typed in
setDefaultValues(getValues());
},
[getValues, setDefaultValues]
);
return (
<form
className="flex w-full items-center justify-center"
onSubmit={handleSubmit(handleCreateWorkspace)}
>
<div className="flex w-full max-w-xl flex-col">
<div className="flex flex-col rounded-[10px] bg-brand-base">
<div className="flex flex-col justify-between gap-3 px-4 py-7">
<div className="flex flex-col items-start justify-center gap-2.5">
<span className="text-sm">Workspace name</span>
<Input
name="name"
register={register}
autoComplete="off"
onChange={(e) =>
setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"))
}
validations={{
required: "Workspace name is required",
validate: (value) =>
/^[\w\s-]*$/.test(value) ||
`Name can only contain (" "), ( - ), ( _ ) & Alphanumeric characters.`,
}}
placeholder="e.g. My Workspace"
error={errors.name}
/>
</div>
<div className="flex flex-col items-start justify-center gap-2.5">
<span className="text-sm">Workspace URL</span>
<div className="flex w-full items-center rounded-md border border-brand-base px-3">
<span className="whitespace-nowrap text-sm text-brand-secondary">
{typeof window !== "undefined" && window.location.origin}/
</span>
<Input
mode="trueTransparent"
autoComplete="off"
name="slug"
register={register}
className="block w-full rounded-md bg-transparent py-2 px-0 text-sm"
validations={{
required: "Workspace URL is required",
}}
onChange={(e) =>
/^[a-zA-Z0-9_-]+$/.test(e.target.value)
? setInvalidSlug(false)
: setInvalidSlug(true)
}
/>
</div>
{slugError && (
<span className="-mt-3 text-sm text-red-500">Workspace URL is already taken!</span>
)}
{invalidSlug && (
<span className="text-sm text-red-500">{`URL can only contain ( - ), ( _ ) & Alphanumeric characters.`}</span>
)}
</div>
</div>
<div className="flex flex-col items-start justify-center gap-2.5 border-t border-brand-base px-4 py-7">
<span className="text-sm">How large is your company?</span>
<div className="w-full">
<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()
) : (
<span className="text-brand-secondary">Select company size</span>
)
}
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 className="flex w-full items-center justify-center rounded-b-[10px] py-7">
<PrimaryButton
type="submit"
className="flex w-1/2 items-center justify-center text-center"
size="md"
disabled={isSubmitting}
>
{isSubmitting ? "Creating..." : "Create Workspace"}
</PrimaryButton>
</div>
</div>
</div>
</form>
);
};