129 lines
3.6 KiB
TypeScript
129 lines
3.6 KiB
TypeScript
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<ChannelSettingsProps> = (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<void> => {
|
|
try {
|
|
const { data } =
|
|
await authentication.api.delete<ChannelWithDefaultChannelId>(
|
|
`/channels/${channel.id}`
|
|
)
|
|
await router.push(`/application/${guild.id}/${data.defaultChannelId}`)
|
|
} catch (error) {
|
|
setFetchState('error')
|
|
setMessageTranslationKey('errors:server-error')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Form
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
className='my-auto flex flex-col items-center justify-center py-12'
|
|
>
|
|
<div className='flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row'>
|
|
<div className=' flex w-full flex-wrap items-center justify-center px-6 sm:w-max'>
|
|
<div className='mx-12 flex flex-col'>
|
|
<Input
|
|
name='name'
|
|
label={t('common:name')}
|
|
placeholder={t('common:name')}
|
|
className='!mt-0'
|
|
onChange={onChange}
|
|
value={inputValues.name}
|
|
error={getErrorTranslation(errors.name)}
|
|
data-cy='channel-name-input'
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='mt-12 flex flex-col items-center justify-center sm:w-fit'>
|
|
<div className='space-x-6'>
|
|
<Button type='submit' data-cy='button-save-channel-settings'>
|
|
{t('application:save')}
|
|
</Button>
|
|
<Button
|
|
type='button'
|
|
color='red'
|
|
onClick={handleDelete}
|
|
data-cy='button-delete-channel-settings'
|
|
>
|
|
{t('application:delete')}
|
|
</Button>
|
|
</div>
|
|
<FormState state={fetchState} message={message} />
|
|
</div>
|
|
</Form>
|
|
)
|
|
}
|