diff --git a/components/Application/Application.tsx b/components/Application/Application.tsx index 78fcd6f..ff1a3a0 100644 --- a/components/Application/Application.tsx +++ b/components/Application/Application.tsx @@ -1,7 +1,7 @@ import { useState, useEffect } from 'react' import Image from 'next/image' import { PlusIcon, MenuIcon, UsersIcon, XIcon } from '@heroicons/react/solid' -import classNames from 'classnames' +import classNames from 'clsx' import { useMediaQuery } from 'react-responsive' import { useSwipeable } from 'react-swipeable' diff --git a/components/Application/ChannelSettings/ChannelSettings.tsx b/components/Application/ChannelSettings/ChannelSettings.tsx index 1dbcfc3..1837c6f 100644 --- a/components/Application/ChannelSettings/ChannelSettings.tsx +++ b/components/Application/ChannelSettings/ChannelSettings.tsx @@ -1,11 +1,11 @@ import { useRouter } from 'next/router' import { useState } from 'react' -import { Form } from 'react-component-form' +import { Form, useForm } from 'react-component-form' import useTranslation from 'next-translate/useTranslation' -import classNames from 'classnames' +import classNames from 'clsx' import axios from 'axios' +import type { HandleUseFormCallback } from 'react-component-form' -import { HandleSubmitCallback, useForm } from '../../../hooks/useForm' import { FormState } from '../../design/FormState' import { useGuildMember } from '../../../contexts/GuildMember' import { Input } from '../../design/Input' @@ -17,6 +17,11 @@ import { ChannelWithDefaultChannelId } from '../../../models/Channel' import { ConfirmPopup } from '../ConfirmPopup' +import { useFormTranslation } from '../../../hooks/useFormTranslation' + +const schema = { + name: channelSchema.name +} export interface ChannelSettingsProps { channel: Channel @@ -41,25 +46,19 @@ export const ChannelSettings: React.FC = (props) => { } const { + handleUseForm, fetchState, message, errors, - getErrorTranslation, - handleSubmit, setFetchState, - setMessageTranslationKey - } = useForm({ - validateSchema: { - name: channelSchema.name - }, - replaceEmptyStringToNull: true, - resetOnSuccess: false - }) + setMessage + } = useForm(schema) + const { getFirstErrorTranslation } = useFormTranslation() - const onSubmit: HandleSubmitCallback = async (formData) => { + const onSubmit: HandleUseFormCallback = async (formData) => { try { await authentication.api.put(`/channels/${channel.id}`, formData) - setInputValues(formData as any) + setInputValues(formData) await router.push(`/application/${guild.id}/${channel.id}`) return null } catch (error) { @@ -91,9 +90,9 @@ export const ChannelSettings: React.FC = (props) => { } catch (error) { setFetchState('error') if (axios.isAxiosError(error) && error.response?.status === 400) { - setMessageTranslationKey('application:delete-channel-only-one') + setMessage('application:delete-channel-only-one') } else { - setMessageTranslationKey('errors:server-error') + setMessage('errors:server-error') } } } @@ -101,7 +100,7 @@ export const ChannelSettings: React.FC = (props) => { return ( <>
@@ -114,7 +113,7 @@ export const ChannelSettings: React.FC = (props) => { className='!mt-0' onChange={onChange} value={inputValues.name} - error={getErrorTranslation(errors.name)} + error={getFirstErrorTranslation(errors.name)} data-cy='channel-name-input' />
diff --git a/components/Application/Channels/Channel.tsx b/components/Application/Channels/Channel.tsx index 8688042..ab78a13 100644 --- a/components/Application/Channels/Channel.tsx +++ b/components/Application/Channels/Channel.tsx @@ -1,4 +1,4 @@ -import classNames from 'classnames' +import classNames from 'clsx' import Link from 'next/link' import { useRouter } from 'next/router' import { CogIcon } from '@heroicons/react/solid' diff --git a/components/Application/ConfirmPopup/ConfirmPopup.tsx b/components/Application/ConfirmPopup/ConfirmPopup.tsx index 8f88768..28d858d 100644 --- a/components/Application/ConfirmPopup/ConfirmPopup.tsx +++ b/components/Application/ConfirmPopup/ConfirmPopup.tsx @@ -1,7 +1,7 @@ import Image from 'next/image' import { useState } from 'react' import useTranslation from 'next-translate/useTranslation' -import classNames from 'classnames' +import classNames from 'clsx' import { Loader } from '../../design/Loader' diff --git a/components/Application/CreateChannel/CreateChannel.tsx b/components/Application/CreateChannel/CreateChannel.tsx index 358bdd1..5110ecb 100644 --- a/components/Application/CreateChannel/CreateChannel.tsx +++ b/components/Application/CreateChannel/CreateChannel.tsx @@ -1,32 +1,32 @@ import { useRouter } from 'next/router' import useTranslation from 'next-translate/useTranslation' -import { Form } from 'react-component-form' +import { Form, useForm } from 'react-component-form' +import type { HandleUseFormCallback } from 'react-component-form' import { useAuthentication } from '../../../tools/authentication' -import { HandleSubmitCallback, useForm } from '../../../hooks/useForm' import { Input } from '../../design/Input' import { Main } from '../../design/Main' import { Button } from '../../design/Button' import { FormState } from '../../design/FormState' import { Channel, channelSchema } from '../../../models/Channel' import { useGuildMember } from '../../../contexts/GuildMember' +import { useFormTranslation } from '../../../hooks/useFormTranslation' + +const schema = { + name: channelSchema.name +} export const CreateChannel: React.FC = () => { const { t } = useTranslation() const router = useRouter() const { guild } = useGuildMember() - const { fetchState, message, errors, getErrorTranslation, handleSubmit } = - useForm({ - validateSchema: { - name: channelSchema.name - }, - resetOnSuccess: true - }) + const { handleUseForm, fetchState, message, errors } = useForm(schema) + const { getFirstErrorTranslation } = useFormTranslation() const { authentication } = useAuthentication() - const onSubmit: HandleSubmitCallback = async (formData) => { + const onSubmit: HandleUseFormCallback = async (formData) => { try { const { data: channel } = await authentication.api.post( `/guilds/${guild.id}/channels`, @@ -44,13 +44,13 @@ export const CreateChannel: React.FC = () => { return (
- +