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

225 lines
6.9 KiB
TypeScript
Raw Normal View History

import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
2023-03-11 11:53:23 +00:00
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";
2023-03-11 11:53:23 +00:00
// types
import { ICurrentUserResponse, IWorkspace } from "types";
2023-03-11 11:53:23 +00:00
// fetch-keys
import { USER_WORKSPACES } from "constants/fetch-keys";
// constants
import { ORGANIZATION_SIZE } from "constants/workspace";
2023-03-11 11:53:23 +00:00
type Props = {
onSubmit?: (res: IWorkspace) => Promise<void>;
defaultValues: {
name: string;
slug: string;
organization_size: string;
};
setDefaultValues: Dispatch<SetStateAction<any>>;
user: ICurrentUserResponse | undefined;
secondaryButton?: React.ReactNode;
primaryButtonText?: {
loading: string;
default: string;
};
2023-03-11 11:53:23 +00:00
};
const restrictedUrls = [
"api",
2023-06-16 13:30:04 +00:00
"installations",
"404",
"create-workspace",
"error",
"invitations",
"magic-sign-in",
"onboarding",
"profile",
"reset-password",
2023-06-16 13:30:04 +00:00
"sign-up",
"workspace-member-invitation",
];
export const CreateWorkspaceForm: React.FC<Props> = ({
onSubmit,
defaultValues,
setDefaultValues,
user,
secondaryButton,
primaryButtonText = {
loading: "Creating...",
default: "Create Workspace",
},
}) => {
2023-03-11 11:53:23 +00:00
const [slugError, setSlugError] = useState(false);
const [invalidSlug, setInvalidSlug] = useState(false);
2023-03-11 11:53:23 +00:00
const { setToastAlert } = useToast();
const {
register,
handleSubmit,
control,
setValue,
getValues,
formState: { errors, isSubmitting, isValid },
} = useForm<IWorkspace>({ defaultValues, mode: "onChange" });
2023-03-11 11:53:23 +00:00
const handleCreateWorkspace = async (formData: IWorkspace) => {
await workspaceService
.workspaceSlugCheck(formData.slug)
.then(async (res) => {
if (res.status === true && !restrictedUrls.includes(formData.slug)) {
2023-03-11 11:53:23 +00:00
setSlugError(false);
2023-03-11 11:53:23 +00:00
await workspaceService
.createWorkspace(formData, user)
.then(async (res) => {
2023-03-11 11:53:23 +00:00
setToastAlert({
type: "success",
title: "Success!",
message: "Workspace created successfully.",
});
mutate<IWorkspace[]>(
USER_WORKSPACES,
(prevData) => [res, ...(prevData ?? [])],
false
);
if (onSubmit) await onSubmit(res);
2023-03-11 11:53:23 +00:00
})
.catch(() =>
setToastAlert({
type: "error",
title: "Error!",
message: "Workspace could not be created. Please try again.",
})
);
2023-03-11 11:53:23 +00:00
} 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]
);
2023-03-11 11:53:23 +00:00
return (
<form className="space-y-6 sm:space-y-9" onSubmit={handleSubmit(handleCreateWorkspace)}>
<div className="space-y-6 sm:space-y-7">
<div className="space-y-1 text-sm">
<label htmlFor="workspaceName">Workspace Name</label>
<Input
id="workspaceName"
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.`,
maxLength: {
value: 80,
message: "Workspace name should not exceed 80 characters",
},
}}
placeholder="Enter workspace name..."
error={errors.name}
/>
</div>
<div className="space-y-1 text-sm">
<label htmlFor="workspaceUrl">Workspace URL</label>
<div className="flex w-full items-center rounded-md border border-custom-border-200 px-3">
<span className="whitespace-nowrap text-sm text-custom-text-200">
{window && window.location.host}/
</span>
<Input
id="workspaceUrl"
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 className="space-y-1 text-sm">
<span>What size is your organization?</span>
<div className="w-full">
<Controller
name="organization_size"
control={control}
rules={{ required: "This field is required" }}
render={({ field: { value, onChange } }) => (
<CustomSelect
value={value}
onChange={onChange}
label={
ORGANIZATION_SIZE.find((c) => c === value) ?? (
<span className="text-custom-text-200">Select organization size</span>
)
}
input
width="w-full"
>
{ORGANIZATION_SIZE.map((item) => (
<CustomSelect.Option key={item} value={item}>
{item}
</CustomSelect.Option>
))}
</CustomSelect>
)}
/>
{errors.organization_size && (
<span className="text-sm text-red-500">{errors.organization_size.message}</span>
)}
2023-03-11 11:53:23 +00:00
</div>
</div>
</div>
<div className="flex items-center gap-4">
{secondaryButton}
<PrimaryButton type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
{isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
</PrimaryButton>
</div>
2023-03-11 11:53:23 +00:00
</form>
);
};