import { useRouter } from 'next/router' import { useState } from 'react' import { Form, useForm } from 'react-component-form' import useTranslation from 'next-translate/useTranslation' import classNames from 'clsx' import axios from 'axios' import type { HandleUseFormCallback } from 'react-component-form' 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 type { Channel, ChannelWithDefaultChannelId } from '../../../models/Channel' import { channelSchema } from '../../../models/Channel' import { ConfirmPopup } from '../ConfirmPopup' import { useFormTranslation } from '../../../hooks/useFormTranslation' const schema = { name: channelSchema.name } 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 [confirmation, setConfirmation] = useState(false) const handleConfirmation = (): void => { return setConfirmation(!confirmation) } const { handleUseForm, fetchState, message, errors, setFetchState, setMessage } = useForm(schema) const { getFirstErrorTranslation } = useFormTranslation() const onSubmit: HandleUseFormCallback = async (formData) => { try { await authentication.api.put(`/channels/${channel.id}`, formData) setInputValues(formData) 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') if (axios.isAxiosError(error) && error.response?.status === 400) { setMessage('application:delete-channel-only-one') } else { setMessage('errors:server-error') } } } return ( <>
) }