80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
import { useRouter } from "next/router"
|
|
import useTranslation from "next-translate/useTranslation"
|
|
import { Form, useForm } from "react-component-form"
|
|
import type { AxiosResponse } from "axios"
|
|
import type { HandleUseFormCallback } from "react-component-form"
|
|
|
|
import { useAuthentication } from "../../../tools/authentication"
|
|
import type { GuildComplete } from "../../../models/Guild"
|
|
import { guildSchema } from "../../../models/Guild"
|
|
import { Input } from "../../design/Input"
|
|
import { Main } from "../../design/Main"
|
|
import { Button } from "../../design/Button"
|
|
import { FormState } from "../../design/FormState"
|
|
import { Textarea } from "../../design/Textarea"
|
|
import { useFormTranslation } from "../../../hooks/useFormTranslation"
|
|
|
|
const schema = {
|
|
name: guildSchema.name,
|
|
description: guildSchema.description,
|
|
}
|
|
|
|
export const CreateGuild: React.FC = () => {
|
|
const { t } = useTranslation()
|
|
const router = useRouter()
|
|
|
|
const { handleUseForm, fetchState, message, errors } = useForm(schema)
|
|
const { getFirstErrorTranslation } = useFormTranslation()
|
|
|
|
const { authentication } = useAuthentication()
|
|
|
|
const onSubmit: HandleUseFormCallback<typeof schema> = async (formData) => {
|
|
try {
|
|
const { data } = await authentication.api.post<
|
|
any,
|
|
AxiosResponse<{ guild: GuildComplete }>
|
|
>("/guilds", { name: formData.name, description: formData.description })
|
|
const guildId = data.guild.id
|
|
const channel = data.guild.channels[0]
|
|
if (channel == null) {
|
|
throw new Error("No channel found")
|
|
}
|
|
const channelId = channel.id
|
|
await router.push(`/application/${guildId}/${channelId}`)
|
|
return null
|
|
} catch (error) {
|
|
return {
|
|
type: "error",
|
|
message: "errors:server-error",
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Main>
|
|
<Form className="w-4/6 max-w-xs" onSubmit={handleUseForm(onSubmit)}>
|
|
<Input
|
|
type="text"
|
|
placeholder={t("common:name")}
|
|
name="name"
|
|
label={t("common:name")}
|
|
error={getFirstErrorTranslation(errors.name)}
|
|
/>
|
|
<Textarea
|
|
label="Description"
|
|
placeholder="Description"
|
|
id="description"
|
|
/>
|
|
<Button className="mt-6 w-full" type="submit" data-cy="submit">
|
|
{t("application:create")}
|
|
</Button>
|
|
</Form>
|
|
<FormState
|
|
id="message"
|
|
state={fetchState}
|
|
message={message != null ? t(message) : undefined}
|
|
/>
|
|
</Main>
|
|
)
|
|
}
|