From 351834633ff02daa4c686e63a5bcbec7292e9fc3 Mon Sep 17 00:00:00 2001 From: Divlo Date: Sun, 28 Aug 2022 18:26:56 +0200 Subject: [PATCH] refactor: usage of `useForm` hook from `react-component-form` --- components/Application/Application.tsx | 2 +- .../ChannelSettings/ChannelSettings.tsx | 37 +- components/Application/Channels/Channel.tsx | 2 +- .../Application/ConfirmPopup/ConfirmPopup.tsx | 2 +- .../CreateChannel/CreateChannel.tsx | 24 +- .../Application/CreateGuild/CreateGuild.tsx | 32 +- .../GuildSettings/GuildSettings.tsx | 47 +- .../JoinGuildsPublic/GuildPublic.tsx | 2 +- .../Application/PopupGuild/PopupGuild.tsx | 2 +- .../Application/SendMessage/SendMessage.tsx | 2 +- components/Application/Sidebar/Sidebar.tsx | 2 +- .../Application/UserSettings/UserSettings.tsx | 64 +- components/Authentication/Authentication.tsx | 44 +- .../Authentication/AuthenticationForm.tsx | 2 +- components/Header/Language/Language.tsx | 31 +- components/design/Button/Button.tsx | 2 +- components/design/Checkbox/Checkbox.tsx | 2 +- components/design/FormState/FormState.tsx | 4 +- components/design/IconButton/IconButton.tsx | 2 +- components/design/IconLink/IconLink.tsx | 2 +- components/design/Input/Input.tsx | 2 +- components/design/Main/Main.tsx | 2 +- .../SocialMediaButton/SocialMediaButton.tsx | 2 +- .../useForm/getErrorTranslationKey.cy.ts | 71 - .../hooks/useForm/handleCheckboxBoolean.cy.ts | 22 - .../replaceEmptyStringInObjectToNull.cy.ts | 20 - generators/component/Component.tsx.hbs | 2 +- hooks/useClickOutsideAlerter.ts | 22 + hooks/useFetchState.ts | 15 - hooks/useForm/getErrorTranslationKey.ts | 19 - hooks/useForm/handleCheckboxBoolean.ts | 25 - hooks/useForm/index.ts | 1 - .../replaceEmptyStringInObjectToNull.ts | 19 - hooks/useForm/useForm.ts | 134 -- hooks/useFormTranslation.ts | 60 + hooks/usePagination.ts | 2 +- locales/en/errors.json | 2 +- locales/fr/errors.json | 2 +- models/Guild.ts | 2 +- package-lock.json | 1222 +++++++---------- package.json | 28 +- pages/authentication/forgot-password.tsx | 29 +- pages/authentication/reset-password.tsx | 23 +- tools/ajv.ts | 26 - 44 files changed, 818 insertions(+), 1241 deletions(-) delete mode 100644 cypress/component/hooks/useForm/getErrorTranslationKey.cy.ts delete mode 100644 cypress/component/hooks/useForm/handleCheckboxBoolean.cy.ts delete mode 100644 cypress/component/hooks/useForm/replaceEmptyStringInObjectToNull.cy.ts create mode 100644 hooks/useClickOutsideAlerter.ts delete mode 100644 hooks/useFetchState.ts delete mode 100644 hooks/useForm/getErrorTranslationKey.ts delete mode 100644 hooks/useForm/handleCheckboxBoolean.ts delete mode 100644 hooks/useForm/index.ts delete mode 100644 hooks/useForm/replaceEmptyStringInObjectToNull.ts delete mode 100644 hooks/useForm/useForm.ts create mode 100644 hooks/useFormTranslation.ts delete mode 100644 tools/ajv.ts 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 (
- +