refactor: usage of useForm hook from react-component-form

This commit is contained in:
Divlo
2022-08-28 18:26:56 +02:00
parent 7c01246028
commit 351834633f
44 changed files with 818 additions and 1241 deletions

View File

@ -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'

View File

@ -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<ChannelSettingsProps> = (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<typeof schema> = 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<ChannelSettingsProps> = (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<ChannelSettingsProps> = (props) => {
return (
<>
<Form
onSubmit={handleSubmit(onSubmit)}
onSubmit={handleUseForm(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'>
@ -114,7 +113,7 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
className='!mt-0'
onChange={onChange}
value={inputValues.name}
error={getErrorTranslation(errors.name)}
error={getFirstErrorTranslation(errors.name)}
data-cy='channel-name-input'
/>
</div>

View File

@ -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'

View File

@ -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'

View File

@ -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<typeof schema> = async (formData) => {
try {
const { data: channel } = await authentication.api.post<Channel>(
`/guilds/${guild.id}/channels`,
@ -44,13 +44,13 @@ export const CreateChannel: React.FC = () => {
return (
<Main>
<Form className='w-4/6 max-w-xs' onSubmit={handleSubmit(onSubmit)}>
<Form className='w-4/6 max-w-xs' onSubmit={handleUseForm(onSubmit)}>
<Input
type='text'
placeholder={t('common:name')}
name='name'
label={t('common:name')}
error={getErrorTranslation(errors.name)}
error={getFirstErrorTranslation(errors.name)}
data-cy='channel-name-input'
/>
<Button

View File

@ -1,33 +1,33 @@
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 { AxiosResponse } from 'axios'
import type { HandleUseFormCallback } from 'react-component-form'
import { useAuthentication } from '../../../tools/authentication'
import { HandleSubmitCallback, useForm } from '../../../hooks/useForm'
import { GuildComplete, guildSchema } from '../../../models/Guild'
import { Input } from '../../design/Input'
import { Main } from '../../design/Main'
import { Button } from '../../design/Button'
import { FormState } from '../../design/FormState'
import { Textarea } from '../../design/Textarea'
import { useFormTranslation } from '../../../hooks/useFormTranslation'
const schema = {
name: guildSchema.name,
description: guildSchema.description
}
export const CreateGuild: React.FC = () => {
const { t } = useTranslation()
const router = useRouter()
const { fetchState, message, errors, getErrorTranslation, handleSubmit } =
useForm({
validateSchema: {
name: guildSchema.name,
description: guildSchema.description
},
resetOnSuccess: true
})
const { handleUseForm, fetchState, message, errors } = useForm(schema as any)
const { getFirstErrorTranslation } = useFormTranslation()
const { authentication } = useAuthentication()
const onSubmit: HandleSubmitCallback = async (formData) => {
const onSubmit: HandleUseFormCallback<any> = async (formData) => {
try {
const { data } = await authentication.api.post<
any,
@ -47,13 +47,13 @@ export const CreateGuild: React.FC = () => {
return (
<Main>
<Form className='w-4/6 max-w-xs' onSubmit={handleSubmit(onSubmit)}>
<Form className='w-4/6 max-w-xs' onSubmit={handleUseForm(onSubmit)}>
<Input
type='text'
placeholder={t('common:name')}
name='name'
label={t('common:name')}
error={getErrorTranslation(errors.name)}
error={getFirstErrorTranslation(errors.name)}
/>
<Textarea
label='Description'
@ -64,7 +64,11 @@ export const CreateGuild: React.FC = () => {
{t('application:create')}
</Button>
</Form>
<FormState id='message' state={fetchState} message={message} />
<FormState
id='message'
state={fetchState}
message={message != null ? t(message) : undefined}
/>
</Main>
)
}

View File

@ -3,11 +3,11 @@ import { useRouter } from 'next/router'
import { useState } from 'react'
import { Type } from '@sinclair/typebox'
import { PhotographIcon } from '@heroicons/react/solid'
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 type { HandleUseFormCallback } from 'react-component-form'
import { HandleSubmitCallback, useForm } from '../../../hooks/useForm'
import { guildSchema } from '../../../models/Guild'
import { FormState } from '../../design/FormState'
import { useGuildMember } from '../../../contexts/GuildMember'
@ -16,6 +16,12 @@ import { Input } from '../../design/Input'
import { Button } from '../../design/Button'
import { useAuthentication } from '../../../tools/authentication'
import { ConfirmPopup } from '../ConfirmPopup'
import { useFormTranslation } from '../../../hooks/useFormTranslation'
const schema = {
name: guildSchema.name,
description: Type.Optional(guildSchema.description)
}
export const GuildSettings: React.FC = () => {
const { t } = useTranslation()
@ -35,26 +41,19 @@ export const GuildSettings: React.FC = () => {
}
const {
handleUseForm,
fetchState,
message,
errors,
getErrorTranslation,
handleSubmit,
setFetchState,
setMessageTranslationKey
} = useForm({
validateSchema: {
name: guildSchema.name,
description: Type.Optional(guildSchema.description)
},
replaceEmptyStringToNull: true,
resetOnSuccess: false
})
setMessage
} = useForm(schema as any)
const { getFirstErrorTranslation } = useFormTranslation()
const onSubmit: HandleSubmitCallback = async (formData) => {
const onSubmit: HandleUseFormCallback<any> = async (formData) => {
try {
await authentication.api.put(`/guilds/${guild.id}`, formData)
setInputValues(formData as any)
setInputValues(formData as unknown as any)
return {
type: 'success',
value: 'application:saved-information'
@ -92,7 +91,7 @@ export const GuildSettings: React.FC = () => {
setFetchState('idle')
} catch (error) {
setFetchState('error')
setMessageTranslationKey('errors:server-error')
setMessage('errors:server-error')
}
}
}
@ -102,7 +101,7 @@ export const GuildSettings: React.FC = () => {
await authentication.api.delete(`/guilds/${guild.id}`)
} catch (error) {
setFetchState('error')
setMessageTranslationKey('errors:server-error')
setMessage('errors:server-error')
}
}
@ -112,14 +111,14 @@ export const GuildSettings: React.FC = () => {
await router.push('/application')
} catch (error) {
setFetchState('error')
setMessageTranslationKey('errors:server-error')
setMessage('errors:server-error')
}
}
return (
<>
<Form
onSubmit={handleSubmit(onSubmit)}
onSubmit={handleUseForm(onSubmit)}
className='my-auto flex flex-col items-center justify-center py-12'
>
{member.isOwner && (
@ -160,7 +159,7 @@ export const GuildSettings: React.FC = () => {
className='!mt-0'
onChange={onChange}
value={inputValues.name}
error={getErrorTranslation(errors.name)}
error={getFirstErrorTranslation(errors.name)}
data-cy='guild-name-input'
/>
<Textarea
@ -204,7 +203,11 @@ export const GuildSettings: React.FC = () => {
</div>
<FormState
state={fetchState}
message={getErrorTranslation(errors.description) ?? message}
message={
message != null
? t(message)
: getFirstErrorTranslation(errors.email)
}
/>
</div>
</Form>

View File

@ -2,7 +2,7 @@ import Image from 'next/image'
import { useRouter } from 'next/router'
import { useState } from 'react'
import useTranslation from 'next-translate/useTranslation'
import classNames from 'classnames'
import classNames from 'clsx'
import axios from 'axios'
import { Emoji } from '../../Emoji'

View File

@ -1,6 +1,6 @@
import useTranslation from 'next-translate/useTranslation'
import { PlusSmIcon, ArrowDownIcon } from '@heroicons/react/solid'
import classNames from 'classnames'
import classNames from 'clsx'
import Image from 'next/image'
import { PopupGuildCard } from './PopupGuildCard'

View File

@ -1,7 +1,7 @@
import { useState, useRef } from 'react'
import useTranslation from 'next-translate/useTranslation'
import TextareaAutosize from 'react-textarea-autosize'
import classNames from 'classnames'
import classNames from 'clsx'
import { GuildsChannelsPath } from '..'
import { useAuthentication } from '../../../tools/authentication'

View File

@ -1,4 +1,4 @@
import classNames from 'classnames'
import classNames from 'clsx'
import { ApplicationProps } from '..'

View File

@ -1,11 +1,12 @@
import Image from 'next/image'
import useTranslation from 'next-translate/useTranslation'
import { useState, useMemo } from 'react'
import { Form } from 'react-component-form'
import { Form, useForm } from 'react-component-form'
import { EyeIcon, PhotographIcon } from '@heroicons/react/solid'
import { Type } from '@sinclair/typebox'
import axios from 'axios'
import Link from 'next/link'
import type { HandleUseFormCallback } from 'react-component-form'
import { Input } from '../../design/Input'
import { Checkbox } from '../../design/Checkbox'
@ -16,10 +17,20 @@ import { Language } from '../../Header/Language'
import { useAuthentication } from '../../../tools/authentication'
import { Button } from '../../design/Button'
import { FormState } from '../../design/FormState'
import { useForm, HandleSubmitCallback } from '../../../hooks/useForm'
import { userSchema } from '../../../models/User'
import { userSettingsSchema } from '../../../models/UserSettings'
import { ProviderOAuth, providers } from '../../../models/OAuth'
import { useFormTranslation } from '../../../hooks/useFormTranslation'
const schema = {
name: userSchema.name,
status: Type.Optional(userSchema.status),
email: Type.Optional(Type.Union([userSchema.email, Type.Null()])),
website: Type.Optional(userSchema.website),
biography: Type.Optional(userSchema.biography),
isPublicGuilds: userSettingsSchema.isPublicGuilds,
isPublicEmail: userSettingsSchema.isPublicEmail
}
export const UserSettings: React.FC = () => {
const { user, setUser, authentication } = useAuthentication()
@ -35,32 +46,20 @@ export const UserSettings: React.FC = () => {
})
const {
handleUseForm,
fetchState,
setFetchState,
message,
setMessageTranslationKey,
errors,
getErrorTranslation,
handleSubmit
} = useForm({
validateSchema: {
name: userSchema.name,
status: Type.Optional(userSchema.status),
email: Type.Optional(Type.Union([userSchema.email, Type.Null()])),
website: Type.Optional(userSchema.website),
biography: Type.Optional(userSchema.biography),
isPublicGuilds: userSettingsSchema.isPublicGuilds,
isPublicEmail: userSettingsSchema.isPublicEmail
},
replaceEmptyStringToNull: true,
resetOnSuccess: false
})
setMessage,
errors
} = useForm(schema)
const { getFirstErrorTranslation } = useFormTranslation()
const hasAllProviders = useMemo(() => {
return providers.every((provider) => user.strategies.includes(provider))
}, [user.strategies])
const onSubmit: HandleSubmitCallback = async (formData) => {
const onSubmit: HandleUseFormCallback<typeof schema> = async (formData) => {
try {
const { isPublicGuilds, isPublicEmail, ...userData } = formData
const userSettings = { isPublicEmail, isPublicGuilds }
@ -68,7 +67,7 @@ export const UserSettings: React.FC = () => {
`/users/current?redirectURI=${window.location.origin}/authentication/signin`,
userData
)
setInputValues(formData as any)
setInputValues(formData as unknown as any)
const hasEmailChanged = user.email !== userCurrentData.user.email
if (hasEmailChanged) {
return {
@ -165,7 +164,7 @@ export const UserSettings: React.FC = () => {
setFetchState('idle')
} catch (error) {
setFetchState('error')
setMessageTranslationKey('errors:server-error')
setMessage('errors:server-error')
}
}
}
@ -176,7 +175,7 @@ export const UserSettings: React.FC = () => {
await authentication.signoutServerSide()
} catch (error) {
setFetchState('error')
setMessageTranslationKey('errors:server-error')
setMessage('errors:server-error')
}
}
@ -195,10 +194,10 @@ export const UserSettings: React.FC = () => {
)
}
})
setMessageTranslationKey('application:success-deleted-provider')
setMessage('application:success-deleted-provider')
} catch (error) {
setFetchState('error')
setMessageTranslationKey('errors:server-error')
setMessage('errors:server-error')
}
}
}
@ -217,7 +216,7 @@ export const UserSettings: React.FC = () => {
return (
<Form
onSubmit={handleSubmit(onSubmit)}
onSubmit={handleUseForm(onSubmit)}
className='my-auto flex flex-col items-center justify-center py-12 lg:min-w-[875px]'
>
<div className='flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row'>
@ -257,7 +256,7 @@ export const UserSettings: React.FC = () => {
className='!mt-0'
onChange={onChange}
value={inputValues.name ?? ''}
error={getErrorTranslation(errors.name)}
error={getFirstErrorTranslation(errors.name)}
/>
<Input
name='status'
@ -266,7 +265,7 @@ export const UserSettings: React.FC = () => {
className='!mt-4'
onChange={onChange}
value={inputValues.status ?? ''}
error={getErrorTranslation(errors.status)}
error={getFirstErrorTranslation(errors.status)}
/>
</div>
</div>
@ -279,7 +278,7 @@ export const UserSettings: React.FC = () => {
placeholder='Email'
onChange={onChange}
value={inputValues.email ?? ''}
error={getErrorTranslation(errors.email)}
error={getFirstErrorTranslation(errors.email)}
/>
<Checkbox
name='isPublicEmail'
@ -294,7 +293,7 @@ export const UserSettings: React.FC = () => {
placeholder={t('application:website')}
onChange={onChange}
value={inputValues.website ?? ''}
error={getErrorTranslation(errors.website)}
error={getFirstErrorTranslation(errors.website)}
/>
<Textarea
name='biography'
@ -376,7 +375,10 @@ export const UserSettings: React.FC = () => {
{t('application:signout')}
</Button>
</div>
<FormState state={fetchState} message={message} />
<FormState
state={fetchState}
message={message != null ? t(message) : undefined}
/>
</div>
</Form>
)