Thream/website
Archived
2
2
Fork 0
Code Issues Pull Requests Releases Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Application/Application.tsx
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'

37
components/Application/ChannelSettings/ChannelSettings.tsx
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>

2
components/Application/Channels/Channel.tsx
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'

2
components/Application/ConfirmPopup/ConfirmPopup.tsx
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'

24
components/Application/CreateChannel/CreateChannel.tsx
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

32
components/Application/CreateGuild/CreateGuild.tsx
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>
)
}

47
components/Application/GuildSettings/GuildSettings.tsx
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>

2
components/Application/JoinGuildsPublic/GuildPublic.tsx
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'

2
components/Application/PopupGuild/PopupGuild.tsx
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'

2
components/Application/SendMessage/SendMessage.tsx
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'

2
components/Application/Sidebar/Sidebar.tsx
View File

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

64
components/Application/UserSettings/UserSettings.tsx
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>
)

44
components/Authentication/Authentication.tsx
View File

@ -1,8 +1,11 @@
import { useMemo } from 'react'
import { useRouter } from 'next/router'
import Link from 'next/link'
import useTranslation from 'next-translate/useTranslation'
import { useTheme } from 'next-themes'
import axios from 'axios'
import { useForm } from 'react-component-form'
import type { HandleUseFormCallback } from 'react-component-form'
import { Main } from '../design/Main'
import { Input } from '../design/Input'
@ -15,8 +18,8 @@ import {
Tokens,
Authentication as AuthenticationClass
} from '../../tools/authentication'
import { useForm, HandleSubmitCallback } from '../../hooks/useForm'
import { AuthenticationSocialMedia } from './AuthenticationSocialMedia'
import { useFormTranslation } from '../../hooks/useFormTranslation'
export interface AuthenticationProps {
mode: 'signup' | 'signin'
@ -29,23 +32,28 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
const { lang, t } = useTranslation()
const { theme } = useTheme()
const { errors, fetchState, message, getErrorTranslation, handleSubmit } =
useForm({
validateSchema: {
...(mode === 'signup' && { name: userSchema.name }),
email: userSchema.email,
password: userSchema.password
},
resetOnSuccess: true
})
const schema = useMemo(() => {
return {
...(mode === 'signup' && { name: userSchema.name }),
email: userSchema.email,
password: userSchema.password
}
}, [mode])
const onSubmit: HandleSubmitCallback = async (formData) => {
const { handleUseForm, errors, fetchState, message } = useForm(schema)
const { getFirstErrorTranslation } = useFormTranslation()
const onSubmit: HandleUseFormCallback<typeof schema> = async (
formData,
formElement
) => {
if (mode === 'signup') {
try {
await api.post(
`/users/signup?redirectURI=${window.location.origin}/authentication/signin`,
{ ...formData, language: lang, theme }
)
formElement.reset()
return {
type: 'success',
value: 'authentication:success-signup'
@ -97,14 +105,14 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
<div className='pt-8 text-center font-paragraph text-lg'>
{t('authentication:or')}
</div>
<AuthenticationForm onSubmit={handleSubmit(onSubmit)}>
<AuthenticationForm onSubmit={handleUseForm(onSubmit)}>
{mode === 'signup' && (
<Input
type='text'
placeholder={t('common:name')}
name='name'
label={t('common:name')}
error={getErrorTranslation(errors.name)}
error={getFirstErrorTranslation(errors.name)}
/>
)}
<Input
@ -112,7 +120,7 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
placeholder='Email'
name='email'
label='Email'
error={getErrorTranslation(errors.email)}
error={getFirstErrorTranslation(errors.email)}
/>
<Input
type='password'
@ -120,7 +128,7 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
name='password'
label={t('authentication:password')}
showForgotPassword={mode === 'signin'}
error={getErrorTranslation(errors.password)}
error={getFirstErrorTranslation(errors.password)}
/>
<Button data-cy='submit' className='mt-6 w-full' type='submit'>
{t('authentication:submit')}
@ -141,7 +149,11 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
</Link>
</p>
</AuthenticationForm>
<FormState id='message' state={fetchState} message={message} />
<FormState
id='message'
state={fetchState}
message={message != null ? t(message) : undefined}
/>
</Main>
)
}

2
components/Authentication/AuthenticationForm.tsx
View File

@ -1,4 +1,4 @@
import classNames from 'classnames'
import classNames from 'clsx'
import { Form, FormProps } from 'react-component-form'
export const AuthenticationForm: React.FC<FormProps> = (props) => {

31
components/Header/Language/Language.tsx
View File

@ -1,11 +1,12 @@
import { useCallback, useEffect, useState, useRef } from 'react'
import { useCallback, useState, useRef } from 'react'
import useTranslation from 'next-translate/useTranslation'
import setLanguage from 'next-translate/setLanguage'
import classNames from 'classnames'
import classNames from 'clsx'
import i18n from '../../../i18n.json'
import { Arrow } from './Arrow'
import { LanguageFlag } from './LanguageFlag'
import i18n from '../../../i18n.json'
import { useClickOutsideAlerter } from '../../../hooks/useClickOutsideAlerter'
export interface LanguageProps {
className?: string
@ -21,31 +22,19 @@ export const Language: React.FC<LanguageProps> = (props) => {
setHiddenMenu((oldHiddenMenu) => !oldHiddenMenu)
}, [])
useEffect(() => {
const handleClickEvent = (event: MouseEvent): void => {
if (languageClickRef.current == null || event.target == null) {
return
}
if (!languageClickRef.current.contains(event.target as Node)) {
setHiddenMenu(true)
}
}
window.document.addEventListener('click', handleClickEvent)
return () => {
return window.removeEventListener('click', handleClickEvent)
}
}, [])
useClickOutsideAlerter(languageClickRef, () => setHiddenMenu(true))
const handleLanguage = async (language: string): Promise<void> => {
await setLanguage(language)
handleHiddenMenu()
}
return (
<div className='relative flex cursor-pointer flex-col items-center justify-center'>
<div
className='relative flex cursor-pointer flex-col items-center justify-center'
ref={languageClickRef}
>
<div
ref={languageClickRef}
data-cy='language-click'
className='mr-5 flex items-center'
onClick={handleHiddenMenu}

2
components/design/Button/Button.tsx
View File

@ -1,5 +1,5 @@
import { forwardRef } from 'react'
import classNames from 'classnames'
import classNames from 'clsx'
const className =
'py-2 px-6 font-paragraph rounded-lg bg-transparent border hover:text-white dark:hover:text-black fill-current stroke-current transform transition-colors duration-300 ease-in-out focus:outline-none focus:text-white dark:focus:text-black'

2
components/design/Checkbox/Checkbox.tsx
View File

@ -1,4 +1,4 @@
import classNames from 'classnames'
import classNames from 'clsx'
export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {
className?: string

4
components/design/FormState/FormState.tsx
View File

@ -1,7 +1,7 @@
import classNames from 'classnames'
import classNames from 'clsx'
import useTranslation from 'next-translate/useTranslation'
import type { FetchState as FormStateType } from 'react-component-form'
import { FetchState as FormStateType } from '../../../hooks/useFetchState'
import { Loader } from '../Loader'
export interface FormStateProps extends React.ComponentPropsWithoutRef<'div'> {

2
components/design/IconButton/IconButton.tsx
View File

@ -1,4 +1,4 @@
import classNames from 'classnames'
import classNames from 'clsx'
export interface IconButtonProps
extends React.ComponentPropsWithoutRef<'button'> {}

2
components/design/IconLink/IconLink.tsx
View File

@ -1,5 +1,5 @@
import Link from 'next/link'
import classNames from 'classnames'
import classNames from 'clsx'
export interface IconLinkProps {
selected?: boolean

2
components/design/Input/Input.tsx
View File

@ -1,7 +1,7 @@
import { useState } from 'react'
import Link from 'next/link'
import useTranslation from 'next-translate/useTranslation'
import classNames from 'classnames'
import classNames from 'clsx'
import { FormState } from '../FormState'

2
components/design/Main/Main.tsx
View File

@ -1,4 +1,4 @@
import classNames from 'classnames'
import classNames from 'clsx'
export interface MainProps {
className?: string

2
components/design/SocialMediaButton/SocialMediaButton.tsx
View File

@ -1,6 +1,6 @@
import { useMemo } from 'react'
import Image from 'next/image'
import classNames from 'classnames'
import classNames from 'clsx'
import { ProviderOAuth } from '../../../models/OAuth'