import { useRouter } from 'next/router' import { useState } from 'react' import { Form } from 'react-component-form' import useTranslation from 'next-translate/useTranslation' import { HandleSubmitCallback, useForm } from '../../../hooks/useForm' import { FormState } from '../../design/FormState' import { useGuildMember } from '../../../contexts/GuildMember' import { Input } from '../../design/Input' import { Button } from '../../design/Button' import { useAuthentication } from '../../../tools/authentication' import { Channel, channelSchema, ChannelWithDefaultChannelId } from '../../../models/Channel' export interface ChannelSettingsProps { channel: Channel } export const ChannelSettings: React.FC = (props) => { const { t } = useTranslation() const router = useRouter() const { authentication } = useAuthentication() const { guild } = useGuildMember() const { channel } = props const [inputValues, setInputValues] = useState({ name: channel.name }) const { fetchState, message, errors, getErrorTranslation, handleSubmit, setFetchState, setMessageTranslationKey } = useForm({ validateSchema: { name: channelSchema.name }, replaceEmptyStringToNull: true, resetOnSuccess: false }) const onSubmit: HandleSubmitCallback = async (formData) => { try { await authentication.api.put(`/channels/${channel.id}`, formData) setInputValues(formData as any) await router.push(`/application/${guild.id}/${channel.id}`) return null } catch (error) { return { type: 'error', value: 'errors:server-error' } } } const onChange: React.ChangeEventHandler< HTMLInputElement | HTMLTextAreaElement > = (event) => { setInputValues((oldInputValues) => { return { ...oldInputValues, [event.target.name]: event.target.value } }) } const handleDelete = async (): Promise => { try { const { data } = await authentication.api.delete( `/channels/${channel.id}` ) await router.push(`/application/${guild.id}/${data.defaultChannelId}`) } catch (error) { setFetchState('error') setMessageTranslationKey('errors:server-error') } } return (
) }