chore(release): 1.3.0 [skip ci]

Co-authored-by: Walidoux <ma.walidkorchi@icloud.com>

.gitignore

@@ -49,3 +49,4 @@ npm-debug.log*
 .DS_Store
 .lighthouseci
 .vercel
+*.hbs

.prettierignore

@@ -1,7 +0,0 @@
-.next
-.lighthouseci
-coverage
-node_modules
-**/workbox-*.js
-**/sw.js
-*.hbs

README.md

@@ -18,7 +18,7 @@
 
 Thream's website to stay close with your friends and communities.
 
-It uses [Thream/api](https://github.com/Thream/api) [v1.1.0](https://github.com/Thream/api/releases/tag/v1.1.0).
+It uses [Thream/api](https://github.com/Thream/api) [v1.2.0](https://github.com/Thream/api/releases/tag/v1.2.0).
 
 ## ⚙️ Getting Started
 

components/Application/Application.tsx

@@ -1,11 +1,12 @@
 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'
 
-import { Sidebar, DirectionSidebar } from './Sidebar'
+import type { DirectionSidebar } from './Sidebar'
+import { Sidebar } from './Sidebar'
 import { IconButton } from '../design/IconButton'
 import { IconLink } from '../design/IconLink'
 import { Guilds } from './Guilds/Guilds'
@@ -148,7 +149,9 @@ export const Application: React.FC<
       <header className='z-50 flex h-16 items-center justify-between bg-gray-200 px-2 py-3 shadow-lg dark:bg-gray-800'>
         <IconButton
           className='h-10 w-10 p-2'
-          onClick={() => handleToggleSidebars('left')}
+          onClick={() => {
+            return handleToggleSidebars('left')
+          }}
         >
           {!visibleSidebars.left ? <MenuIcon /> : <XIcon />}
         </IconButton>
@@ -163,7 +166,9 @@ export const Application: React.FC<
             <IconButton
               data-cy='icon-button-right-sidebar-members'
               className='h-10 w-10 p-2'
-              onClick={() => handleToggleSidebars('right')}
+              onClick={() => {
+                return handleToggleSidebars('right')
+              }}
             >
               {!visibleSidebars.right ? <UsersIcon /> : <XIcon />}
             </IconButton>

components/Application/ChannelSettings/ChannelSettings.tsx

@@ -1,22 +1,27 @@
 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'
 import { Button } from '../../design/Button'
 import { useAuthentication } from '../../../tools/authentication'
-import {
+import type {
   Channel,
-  channelSchema,
   ChannelWithDefaultChannelId
 } from '../../../models/Channel'
+import { channelSchema } 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>

components/Application/Channels/Channel.tsx

@@ -1,10 +1,11 @@
-import classNames from 'classnames'
+import { memo } from 'react'
+import classNames from 'clsx'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { CogIcon } from '@heroicons/react/solid'
 
-import { GuildsChannelsPath } from '../Application'
-import { Channel as ChannelType } from '../../../models/Channel'
+import type { GuildsChannelsPath } from '../Application'
+import type { Channel as ChannelType } from '../../../models/Channel'
 import { useGuildMember } from '../../../contexts/GuildMember'
 import { IconButton } from '../../design/IconButton'
 
@@ -14,7 +15,7 @@ export interface ChannelProps {
   selected?: boolean
 }
 
-export const Channel: React.FC<ChannelProps> = (props) => {
+const ChannelMemo: React.FC<ChannelProps> = (props) => {
   const { channel, path, selected = false } = props
   const router = useRouter()
 
@@ -53,3 +54,5 @@ export const Channel: React.FC<ChannelProps> = (props) => {
     </Link>
   )
 }
+
+export const Channel = memo(ChannelMemo)

components/Application/Channels/Channels.tsx

@@ -1,7 +1,7 @@
 import InfiniteScroll from 'react-infinite-scroll-component'
 
 import { useChannels } from '../../../contexts/Channels'
-import { GuildsChannelsPath } from '../Application'
+import type { GuildsChannelsPath } from '../Application'
 import { Loader } from '../../design/Loader'
 import { Channel } from './Channel'
 

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'
 
@@ -17,7 +17,9 @@ export const ConfirmPopup: React.FC<ConfirmPopupProps> = ({ ...props }) => {
   const [isLoading, setIsLoading] = useState(false)
 
   const handleYesLoading = async (): Promise<void> => {
-    setIsLoading((isLoading) => !isLoading)
+    setIsLoading((isLoading) => {
+      return !isLoading
+    })
     await props.handleYes()
   }
 

components/Application/CreateChannel/CreateChannel.tsx

@@ -1,32 +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 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 type { Channel } from '../../../models/Channel'
+import { 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 +45,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

components/Application/CreateGuild/CreateGuild.tsx

@@ -1,33 +1,34 @@
 import { useRouter } from 'next/router'
 import useTranslation from 'next-translate/useTranslation'
-import { Form } from 'react-component-form'
-import { AxiosResponse } from 'axios'
+import { Form, useForm } from 'react-component-form'
+import type { 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 type { GuildComplete } from '../../../models/Guild'
+import { 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 +48,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 +65,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>
   )
 }

components/Application/GuildLeftSidebar/GuildLeftSidebar.tsx

@@ -5,7 +5,7 @@ import { useGuildMember } from '../../../contexts/GuildMember'
 import { Divider } from '../../design/Divider'
 import { Channels } from '../Channels'
 import { IconButton } from '../../design/IconButton'
-import { GuildsChannelsPath } from '..'
+import type { GuildsChannelsPath } from '..'
 
 export interface GuildLeftSidebarProps {
   path: GuildsChannelsPath

components/Application/GuildSettings/GuildSettings.tsx

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

components/Application/Guilds/Guild.tsx

@@ -1,6 +1,7 @@
+import { memo } from 'react'
 import Image from 'next/image'
 
-import { GuildWithDefaultChannelId } from '../../../models/Guild'
+import type { GuildWithDefaultChannelId } from '../../../models/Guild'
 import { IconLink } from '../../design/IconLink'
 
 export interface GuildProps {
@@ -8,7 +9,7 @@ export interface GuildProps {
   selected?: boolean
 }
 
-export const Guild: React.FC<GuildProps> = (props) => {
+const GuildMemo: React.FC<GuildProps> = (props) => {
   const { guild, selected } = props
 
   return (
@@ -34,3 +35,5 @@ export const Guild: React.FC<GuildProps> = (props) => {
     </IconLink>
   )
 }
+
+export const Guild = memo(GuildMemo)

components/Application/Guilds/Guilds.tsx

@@ -2,7 +2,7 @@ import InfiniteScroll from 'react-infinite-scroll-component'
 
 import { Loader } from '../../design/Loader'
 import { useGuilds } from '../../../contexts/Guilds'
-import { GuildsPath } from '..'
+import type { GuildsPath } from '..'
 import { Guild } from './Guild'
 
 export interface GuildsProps {

components/Application/JoinGuildsPublic/GuildPublic.tsx

@@ -2,12 +2,12 @@ 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'
 import { ConfirmPopup } from '../ConfirmPopup'
-import {
+import type {
   GuildPublic as GuildPublicType,
   GuildWithDefaultChannelId
 } from '../../../models/Guild'
@@ -25,7 +25,9 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
   const { t } = useTranslation()
 
   const handleIsConfirmed = (): void => {
-    setIsConfirmed((isConfirmed) => !isConfirmed)
+    setIsConfirmed((isConfirmed) => {
+      return !isConfirmed
+    })
   }
 
   const handleYes = async (): Promise<void> => {

components/Application/JoinGuildsPublic/JoinGuildsPublic.tsx

@@ -3,11 +3,12 @@ import { useEffect, useState } from 'react'
 import InfiniteScroll from 'react-infinite-scroll-component'
 
 import { useAuthentication } from '../../../tools/authentication'
-import { GuildPublic as GuildPublicType } from '../../../models/Guild'
+import type { GuildPublic as GuildPublicType } from '../../../models/Guild'
 import { Loader } from '../../design/Loader'
 import { GuildPublic } from './GuildPublic'
 import { usePagination } from '../../../hooks/usePagination'
-import { SocketData, handleSocketData } from '../../../tools/handleSocketData'
+import type { SocketData } from '../../../tools/handleSocketData'
+import { handleSocketData } from '../../../tools/handleSocketData'
 
 export const JoinGuildsPublic: React.FC = () => {
   const [search, setSearch] = useState('')

components/Application/Members/Member.tsx

@@ -1,14 +1,15 @@
+import { memo } from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
 
-import { MemberWithPublicUser } from '../../../models/Member'
+import type { MemberWithPublicUser } from '../../../models/Member'
 import { Emoji } from '../../Emoji'
 
 export interface MemberProps {
   member: MemberWithPublicUser
 }
 
-export const Member: React.FC<MemberProps> = (props) => {
+const MemberMemo: React.FC<MemberProps> = (props) => {
   const { member } = props
 
   return (
@@ -45,3 +46,5 @@ export const Member: React.FC<MemberProps> = (props) => {
     </Link>
   )
 }
+
+export const Member = memo(MemberMemo)

components/Application/Messages/Message/EditMessage/EditMessage.tsx

@@ -0,0 +1,48 @@
+import useTranslation from 'next-translate/useTranslation'
+import TextareaAutosize from 'react-textarea-autosize'
+
+import type { MessageProps } from '../Message'
+
+export interface EditMessageProps extends MessageProps {
+  handleEdit: () => Promise<void>
+  handleKeyDown: React.KeyboardEventHandler<HTMLFormElement>
+  textareaRef: React.RefObject<HTMLTextAreaElement>
+}
+
+export const EditMessage: React.FC<
+  React.PropsWithChildren<EditMessageProps>
+> = ({ handleEdit, handleKeyDown, textareaRef, message }) => {
+  const { t } = useTranslation()
+
+  const handleEditSubmit: React.FormEventHandler<HTMLFormElement> = async (
+    event
+  ) => {
+    event.preventDefault()
+    await handleEdit()
+  }
+
+  return (
+    <form
+      className='flex h-full w-full items-center'
+      onSubmit={handleEditSubmit}
+      onKeyDown={handleKeyDown}
+    >
+      <TextareaAutosize
+        className='scrollbar-firefox-support w-full resize-none bg-transparent p-2 tracking-wide outline-none'
+        placeholder={t('application:write-a-message')}
+        wrap='soft'
+        maxRows={6}
+        name='message'
+        defaultValue={message.value}
+        ref={textareaRef}
+        autoFocus
+        onFocus={(event) => {
+          event.currentTarget.setSelectionRange(
+            event.currentTarget.value.length,
+            event.currentTarget.value.length
+          )
+        }}
+      />
+    </form>
+  )
+}

components/Application/Messages/Message/EditMessage/index.ts

@@ -0,0 +1 @@
+export * from './EditMessage'

components/Application/Messages/Message/Message.tsx

@@ -1,23 +1,76 @@
+import { useState, useRef } from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
 import date from 'date-and-time'
+import type { MotionProps } from 'framer-motion'
+import { motion } from 'framer-motion'
 
-import { MessageWithMember } from '../../../../models/Message'
+import type { MessageWithMember } from '../../../../models/Message'
 import { MessageText } from './MessageText'
 import { Loader } from '../../../design/Loader'
 import { MessageFile } from './MessageFile'
+import { useAuthentication } from '../../../../tools/authentication'
+import { MessageOptions } from './MessageOptions'
+import { EditMessage } from './EditMessage'
 
-export interface MessageProps {
+export interface MessageProps extends MotionProps {
   message: MessageWithMember
 }
 
 export const Message: React.FC<MessageProps> = (props) => {
   const { message } = props
 
+  const textareaReference = useRef<HTMLTextAreaElement>(null)
+  const [isEditing, setIsEditing] = useState(false)
+  const { authentication, user } = useAuthentication()
+
+  const handleTextareaKeyDown: React.KeyboardEventHandler<HTMLFormElement> = (
+    event
+  ) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault()
+      event.currentTarget.dispatchEvent(
+        new Event('submit', { cancelable: true, bubbles: true })
+      )
+    }
+  }
+
+  const handleEdit = async (): Promise<void> => {
+    const newMessage = textareaReference.current?.value ?? message.value
+    if (
+      typeof newMessage === 'string' &&
+      newMessage.length > 0 &&
+      newMessage !== message.value
+    ) {
+      try {
+        await authentication.api.put(`/messages/${message.id}`, {
+          value: newMessage
+        })
+      } catch {}
+    }
+    handleEditMode()
+  }
+
+  const handleEditMode = (): void => {
+    setIsEditing((oldIsEditing) => {
+      return !oldIsEditing
+    })
+  }
+
   return (
-    <div
-      className='flex p-4 transition hover:bg-gray-200 dark:hover:bg-gray-900'
+    <motion.div
+      layout
+      initial='initial'
+      animate='animate'
+      exit='exit'
       data-cy={`message-${message.id}`}
+      className='group flex w-full p-4 transition hover:bg-gray-200 dark:hover:bg-gray-900'
+      transition={{ type: 'spring', stiffness: 500, damping: 60 }}
+      variants={{
+        initial: { x: -100, opacity: 0 },
+        animate: { x: 0, opacity: 1 },
+        exit: { opacity: 0 }
+      }}
     >
       <Link href={`/application/users/${message.member.user.id}`}>
         <a>
@@ -40,7 +93,7 @@ export const Message: React.FC<MessageProps> = (props) => {
           </div>
         </a>
       </Link>
-      <div className='w-full'>
+      <div className='relative w-full whitespace-pre-wrap break-words break-all'>
         <div className='flex w-max items-center'>
           <Link href={`/application/users/${message.member.user.id}`}>
             <a>
@@ -59,14 +112,34 @@ export const Message: React.FC<MessageProps> = (props) => {
             {date.format(new Date(message.createdAt), 'DD/MM/YYYY - HH:mm:ss')}
           </span>
         </div>
+
+        {message.member.userId === user.id && (
+          <MessageOptions
+            message={message}
+            editMode={isEditing ? ':white_check_mark:' : ':pencil2:'}
+            handleEdit={isEditing ? handleEdit : handleEditMode}
+          />
+        )}
+
         {message.type === 'text' ? (
-          <MessageText message={message} />
+          <>
+            {isEditing ? (
+              <EditMessage
+                message={message}
+                textareaRef={textareaReference}
+                handleEdit={handleEdit}
+                handleKeyDown={handleTextareaKeyDown}
+              />
+            ) : (
+              <MessageText message={message} />
+            )}
+          </>
         ) : message.type === 'file' ? (
           <MessageFile message={message} />
         ) : (
           <Loader />
         )}
       </div>
-    </div>
+    </motion.div>
   )
 }

components/Application/Messages/Message/MessageFile/MessageFile.tsx

@@ -3,7 +3,7 @@ import axios from 'axios'
 import prettyBytes from 'pretty-bytes'
 import { DownloadIcon } from '@heroicons/react/solid'
 
-import { MessageWithMember } from '../../../../../models/Message'
+import type { MessageWithMember } from '../../../../../models/Message'
 import { Loader } from '../../../../design/Loader'
 import { FileIcon } from './FileIcon'
 import { api } from '../../../../../tools/api'

components/Application/Messages/Message/MessageOptions/MessageOptions.tsx

@@ -0,0 +1,44 @@
+import useTranslation from 'next-translate/useTranslation'
+
+import { useAuthentication } from '../../../../../tools/authentication'
+import { Emoji } from '../../../../Emoji'
+import type { MessageProps } from '../Message'
+
+interface MessageOptionsProps extends MessageProps {
+  handleEdit: () => void
+  editMode: ':white_check_mark:' | ':pencil2:'
+}
+
+export const MessageOptions: React.FC<
+  React.PropsWithChildren<MessageOptionsProps>
+> = ({ handleEdit, editMode, message }) => {
+  const { t } = useTranslation()
+  const { authentication } = useAuthentication()
+
+  const handleDeleteMessage = async (): Promise<void> => {
+    try {
+      await authentication.api.delete(`/messages/${message.id}`)
+    } catch {}
+  }
+
+  return (
+    <div className='absolute right-6 -top-8 flex opacity-0 transition-opacity group-hover:opacity-100'>
+      {message.type === 'text' && (
+        <div
+          className='message-options rounded-l-lg border-l-slate-600'
+          title={t('application:edit')}
+          onClick={handleEdit}
+        >
+          <Emoji value={editMode} size={18} />
+        </div>
+      )}
+      <div
+        className='message-options rounded-r-lg border-r-slate-600'
+        title={t('application:delete')}
+        onClick={handleDeleteMessage}
+      >
+        <Emoji value=':wastebasket:' size={18} />
+      </div>
+    </div>
+  )
+}

components/Application/Messages/Message/MessageOptions/index.ts

@@ -0,0 +1 @@
+export * from './MessageOptions'

components/Application/Messages/Message/MessageText/MessageText.tsx

@@ -10,7 +10,7 @@ import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism'
 import 'katex/dist/katex.min.css'
 
 import { Emoji, emojiPlugin, isStringWithOnlyOneEmoji } from '../../../../Emoji'
-import { MessageWithMember } from '../../../../../models/Message'
+import type { MessageWithMember } from '../../../../../models/Message'
 
 export interface MessageContentProps {
   message: MessageWithMember
@@ -27,7 +27,7 @@ export const MessageText: React.FC<MessageContentProps> = (props) => {
     return (
       <div>
         <p>
-          <Emoji value={message.value} size={40} />
+          <Emoji value={message.value} size={40} tooltip />
         </p>
       </div>
     )
@@ -50,7 +50,7 @@ export const MessageText: React.FC<MessageContentProps> = (props) => {
           )
         },
         emoji: (props) => {
-          return <Emoji value={props.value} size={20} />
+          return <Emoji value={props.value} size={20} tooltip />
         },
         code: (properties) => {
           const { inline, className, children, ...props } = properties

components/Application/Messages/Messages.tsx

@@ -1,5 +1,6 @@
 import useTranslation from 'next-translate/useTranslation'
 import InfiniteScroll from 'react-infinite-scroll-component'
+import { AnimatePresence } from 'framer-motion'
 
 import { Loader } from '../../design/Loader'
 import { Message } from './Message'
@@ -29,19 +30,21 @@ export const Messages: React.FC = () => {
       id='messages'
       className='scrollbar-firefox-support flex w-full flex-1 flex-col-reverse overflow-y-auto transition-all'
     >
-      <InfiniteScroll
-        scrollableTarget='messages'
-        className='messages-list !overflow-x-hidden'
-        dataLength={messages.length}
-        next={nextPage}
-        inverse
-        hasMore={hasMore}
-        loader={<Loader />}
-      >
-        {messages.map((message) => {
-          return <Message key={message.id} message={message} />
-        })}
-      </InfiniteScroll>
+      <AnimatePresence>
+        <InfiniteScroll
+          scrollableTarget='messages'
+          className='messages-list !overflow-x-hidden'
+          dataLength={messages.length}
+          next={nextPage}
+          inverse
+          hasMore={hasMore}
+          loader={<Loader />}
+        >
+          {messages.map((message) => {
+            return <Message key={message.id} message={message} />
+          })}
+        </InfiniteScroll>
+      </AnimatePresence>
     </div>
   )
 }

components/Application/PopupGuild/PopupGuild.tsx

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

components/Application/SendMessage/SendMessage.tsx

@@ -1,11 +1,12 @@
 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 type { GuildsChannelsPath } from '..'
 import { useAuthentication } from '../../../tools/authentication'
-import { EmojiPicker, EmojiPickerOnClick } from '../../Emoji'
+import type { EmojiPickerOnClick } from '../../Emoji'
+import { EmojiPicker } from '../../Emoji'
 
 export interface SendMessageProps {
   path: GuildsChannelsPath
@@ -65,7 +66,9 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
   }
 
   const handleVisibleEmojiPicker = (): void => {
-    setIsVisibleEmojiPicker((isVisible) => !isVisible)
+    setIsVisibleEmojiPicker((isVisible) => {
+      return !isVisible
+    })
   }
 
   const handleEmojiPicker: EmojiPickerOnClick = (emoji) => {
@@ -96,7 +99,7 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
           onKeyDown={handleTextareaKeyDown}
         >
           <TextareaAutosize
-            className='scrollbar-firefox-support my-2 w-full resize-none bg-transparent p-2 px-6 font-paragraph tracking-wide outline-none'
+            className='scrollbar-firefox-support my-2 w-full resize-none bg-transparent p-2 px-6 tracking-wide outline-none'
             placeholder={t('application:write-a-message')}
             wrap='soft'
             maxRows={6}

components/Application/Sidebar/Sidebar.tsx

@@ -1,6 +1,6 @@
-import classNames from 'classnames'
+import classNames from 'clsx'
 
-import { ApplicationProps } from '..'
+import type { ApplicationProps } from '..'
 
 export type DirectionSidebar = 'left' | 'right'
 

components/Application/UserProfile/UserProfile.tsx

@@ -2,8 +2,8 @@ import Image from 'next/image'
 import date from 'date-and-time'
 import useTranslation from 'next-translate/useTranslation'
 
-import { UserPublic } from '../../../models/User'
-import { Guild } from '../../../models/Guild'
+import type { UserPublic } from '../../../models/User'
+import type { Guild } from '../../../models/Guild'
 
 export interface UserProfileProps {
   className?: string

components/Application/UserSettings/UserSettings.tsx

@@ -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,21 @@ 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 type { ProviderOAuth } from '../../../models/OAuth'
+import { 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 +47,22 @@ 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))
+    return providers.every((provider) => {
+      return 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 +70,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,19 +167,19 @@ export const UserSettings: React.FC = () => {
         setFetchState('idle')
       } catch (error) {
         setFetchState('error')
-        setMessageTranslationKey('errors:server-error')
+        setMessage('errors:server-error')
       }
     }
   }
 
   const handleSignout = async (): Promise<void> => {
-    try {
-      setFetchState('loading')
-      await authentication.signoutServerSide()
-    } catch (error) {
-      setFetchState('error')
-      setMessageTranslationKey('errors:server-error')
-    }
+    setFetchState('loading')
+    await authentication.signoutServerSide()
+  }
+
+  const handleSignoutAllDevices = async (): Promise<void> => {
+    setFetchState('loading')
+    await authentication.signoutAllDevicesServerSide()
   }
 
   const handleDeletionProvider = (
@@ -190,15 +192,15 @@ export const UserSettings: React.FC = () => {
         setUser((oldUser) => {
           return {
             ...oldUser,
-            strategies: oldUser.strategies.filter(
-              (strategy) => strategy !== provider
-            )
+            strategies: oldUser.strategies.filter((strategy) => {
+              return strategy !== provider
+            })
           }
         })
-        setMessageTranslationKey('application:success-deleted-provider')
+        setMessage('application:success-deleted-provider')
       } catch (error) {
         setFetchState('error')
-        setMessageTranslationKey('errors:server-error')
+        setMessage('errors:server-error')
       }
     }
   }
@@ -217,7 +219,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 +259,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 +268,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 +281,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 +296,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 +378,15 @@ export const UserSettings: React.FC = () => {
             {t('application:signout')}
           </Button>
         </div>
-        <FormState state={fetchState} message={message} />
+        <div className='mt-4'>
+          <Button type='button' color='red' onClick={handleSignoutAllDevices}>
+            {t('application:signout-all-devices')}
+          </Button>
+        </div>
+        <FormState
+          state={fetchState}
+          message={message != null ? t(message) : undefined}
+        />
       </div>
     </Form>
   )

components/Authentication/Authentication.tsx

@@ -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'
@@ -11,12 +14,10 @@ import { FormState } from '../design/FormState'
 import { AuthenticationForm } from '.'
 import { userSchema } from '../../models/User'
 import { api } from '../../tools/api'
-import {
-  Tokens,
-  Authentication as AuthenticationClass
-} from '../../tools/authentication'
-import { useForm, HandleSubmitCallback } from '../../hooks/useForm'
+import type { Tokens } from '../../tools/authentication'
+import { Authentication as AuthenticationClass } from '../../tools/authentication'
 import { AuthenticationSocialMedia } from './AuthenticationSocialMedia'
+import { useFormTranslation } from '../../hooks/useFormTranslation'
 
 export interface AuthenticationProps {
   mode: 'signup' | 'signin'
@@ -29,23 +30,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 +103,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 +118,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 +126,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 +147,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>
   )
 }

components/Authentication/AuthenticationForm.tsx

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

components/Authentication/AuthenticationSocialMedia.tsx

@@ -3,7 +3,8 @@ import { useRouter } from 'next/router'
 
 import { api } from '../../tools/api'
 import { Authentication, isTokens } from '../../tools/authentication'
-import { SocialMediaButton, SocialMedia } from '../design/SocialMediaButton'
+import type { SocialMedia } from '../design/SocialMediaButton'
+import { SocialMediaButton } from '../design/SocialMediaButton'
 import { providers } from '../../models/OAuth'
 
 export const AuthenticationSocialMedia: React.FC = () => {

components/Emoji/Emoji.tsx

@@ -5,17 +5,18 @@ import { EMOJI_SET } from './emojiPlugin'
 export interface EmojiProps {
   value: string
   size: number
+  tooltip?: boolean
 }
 
 export const Emoji: React.FC<EmojiProps> = (props) => {
-  const { value, size } = props
+  const { value, size, tooltip = false } = props
 
   return (
     <EmojiMart
       set={EMOJI_SET}
       emoji={value}
       size={size}
-      tooltip
+      tooltip={tooltip}
       fallback={() => {
         return <>{value}</>
       }}

components/Emoji/EmojiPicker/EmojiPicker.tsx

@@ -1,5 +1,6 @@
 import 'emoji-mart/css/emoji-mart.css'
-import { EmojiData, Picker } from 'emoji-mart'
+import type { EmojiData } from 'emoji-mart'
+import { Picker } from 'emoji-mart'
 import { useTheme } from 'next-themes'
 
 import { EMOJI_SET } from '../emojiPlugin'

components/Emoji/emojiPlugin.ts

@@ -1,6 +1,6 @@
 import { visit } from 'unist-util-visit'
-import { Plugin, Transformer } from 'unified'
-import { Literal, Parent } from 'unist'
+import type { Plugin, Transformer } from 'unified'
+import type { Literal, Parent } from 'unist'
 import type { ElementContent } from 'hast'
 import type { EmojiSet } from 'emoji-mart'
 

components/Header/Header.test.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Header } from '.'
-
-describe('<Header />', () => {
-  it('should render', () => {
-    const { getByText } = render(<Header />)
-    expect(getByText('Thream')).toBeInTheDocument()
-  })
-})

components/Header/Language/Language.tsx

@@ -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
@@ -18,34 +19,26 @@ export const Language: React.FC<LanguageProps> = (props) => {
   const languageClickRef = useRef<HTMLDivElement | null>(null)
 
   const handleHiddenMenu = useCallback(() => {
-    setHiddenMenu((oldHiddenMenu) => !oldHiddenMenu)
+    setHiddenMenu((oldHiddenMenu) => {
+      return !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, () => {
+    return 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}
@@ -70,7 +63,9 @@ export const Language: React.FC<LanguageProps> = (props) => {
             <li
               key={index}
               className='flex h-12 w-full items-center justify-center pl-2 hover:bg-[#4f545c] hover:bg-opacity-20'
-              onClick={async () => await handleLanguage(language)}
+              onClick={async () => {
+                return await handleLanguage(language)
+              }}
             >
               <LanguageFlag language={language} />
             </li>

components/design/Button/Button.tsx

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

components/design/Checkbox/Checkbox.tsx

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

components/design/FormState/FormState.tsx

@@ -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'> {
@@ -27,31 +27,21 @@ export const FormState: React.FC<FormStateProps> = (props) => {
   }
 
   return (
-    <>
-      <div
-        {...rest}
-        className={classNames(
-          props.className,
-          'mt-6 flex max-w-xl items-center text-center font-medium',
-          {
-            'text-red-800 dark:text-red-400': state === 'error',
-            'text-green-800 dark:text-green-400': state === 'success'
-          }
-        )}
-      >
-        <div className='thumbnail inline bg-cover font-headline' />
-        <span id={id} className='pl-2'>
-          <b>{t(`errors:${state}`)}:</b> {message}
-        </span>
-      </div>
-
-      <style jsx>{`
-        .thumbnail {
-          height: 20px;
-          width: 20px;
-          background-image: url('/images/svg/icons/input/${state}.svg');
+    <div
+      {...rest}
+      className={classNames(
+        props.className,
+        'mt-6 flex max-w-xl items-center text-center font-medium',
+        {
+          'text-red-800 dark:text-red-400': state === 'error',
+          'text-green-800 dark:text-green-400': state === 'success'
         }
-      `}</style>
-    </>
+      )}
+    >
+      <div className='inline bg-cover font-headline' />
+      <span id={id} className='pl-2'>
+        <b>{t(`errors:${state}`)}:</b> {message}
+      </span>
+    </div>
   )
 }

components/design/IconButton/IconButton.tsx

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

components/design/IconLink/IconLink.tsx

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

components/design/Input/Input.tsx

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

components/design/Main/Main.tsx

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

components/design/SocialMediaButton/SocialMediaButton.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from 'react'
 import Image from 'next/image'
-import classNames from 'classnames'
+import classNames from 'clsx'
 
-import { ProviderOAuth } from '../../../models/OAuth'
+import type { ProviderOAuth } from '../../../models/OAuth'
 
 export type SocialMedia = ProviderOAuth
 

components/design/Textarea/Textarea.tsx

@@ -1,6 +1,5 @@
-import TextareaAutosize, {
-  TextareaAutosizeProps
-} from 'react-textarea-autosize'
+import type { TextareaAutosizeProps } from 'react-textarea-autosize'
+import TextareaAutosize from 'react-textarea-autosize'
 
 export interface TextareaProps extends TextareaAutosizeProps {
   label: string

contexts/Channels.tsx

@@ -1,12 +1,15 @@
-import { createContext, useContext, useEffect } from 'react'
+import { createContext, useContext, useEffect, useMemo } from 'react'
 import { useRouter } from 'next/router'
 
-import { NextPage, usePagination } from '../hooks/usePagination'
+import type { NextPage } from '../hooks/usePagination'
+import { usePagination } from '../hooks/usePagination'
 import { useAuthentication } from '../tools/authentication'
-import { Channel, ChannelWithDefaultChannelId } from '../models/Channel'
-import { GuildsChannelsPath } from '../components/Application'
-import { handleSocketData, SocketData } from '../tools/handleSocketData'
-import { CacheKey, CHANNELS_CACHE_KEY } from '../tools/cache'
+import type { Channel, ChannelWithDefaultChannelId } from '../models/Channel'
+import type { GuildsChannelsPath } from '../components/Application'
+import type { SocketData } from '../tools/handleSocketData'
+import { handleSocketData } from '../tools/handleSocketData'
+import type { CacheKey } from '../tools/cache'
+import { CHANNELS_CACHE_KEY } from '../tools/cache'
 
 export interface Channels {
   channels: Channel[]
@@ -28,7 +31,9 @@ export const ChannelsProvider: React.FC<
   const router = useRouter()
   const { authentication } = useAuthentication()
 
-  const cacheKey: CacheKey = `${path.guildId}-${CHANNELS_CACHE_KEY}`
+  const cacheKey = useMemo<CacheKey>(() => {
+    return `${path.guildId}-${CHANNELS_CACHE_KEY}`
+  }, [path.guildId])
 
   const {
     items: channels,
@@ -75,7 +80,7 @@ export const ChannelsProvider: React.FC<
 export const useChannels = (): Channels => {
   const channels = useContext(ChannelsContext)
   if (channels === defaultChannelsContext) {
-    throw new Error('useChannels must be used within ChannelsProvider')
+    throw new Error('`useChannels` must be used within `ChannelsProvider`')
   }
   return channels
 }

contexts/GuildMember.tsx

@@ -1,19 +1,17 @@
 import { createContext, useContext, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 
-import { GuildWithDefaultChannelId } from '../models/Guild'
-import { Member } from '../models/Member'
+import type { GuildWithDefaultChannelId } from '../models/Guild'
+import type { Member } from '../models/Member'
 import { useAuthentication } from '../tools/authentication'
-import { SocketData } from '../tools/handleSocketData'
+import type { SocketData } from '../tools/handleSocketData'
 
 export interface GuildMember {
   guild: GuildWithDefaultChannelId
   member: Member
 }
 
-export interface GuildMemberResult extends GuildMember {
-  setGuildMember: React.Dispatch<React.SetStateAction<GuildMember>>
-}
+export interface GuildMemberResult extends GuildMember {}
 
 export interface GuildMemberProps {
   guildMember: GuildMember
@@ -79,8 +77,7 @@ export const GuildMemberProvider: React.FC<
   return (
     <GuildMemberContext.Provider
       value={{
-        ...guildMember,
-        setGuildMember
+        ...guildMember
       }}
     >
       {children}
@@ -91,7 +88,9 @@ export const GuildMemberProvider: React.FC<
 export const useGuildMember = (): GuildMemberResult => {
   const guildMember = useContext(GuildMemberContext)
   if (guildMember === defaultGuildMemberContext) {
-    throw new Error('useGuildMember must be used within GuildMemberProvider')
+    throw new Error(
+      '`useGuildMember` must be used within `GuildMemberProvider`'
+    )
   }
   return guildMember
 }

contexts/Guilds.tsx

@@ -1,9 +1,11 @@
 import { createContext, useContext, useEffect } from 'react'
 
-import { NextPage, usePagination } from '../hooks/usePagination'
+import type { NextPage } from '../hooks/usePagination'
+import { usePagination } from '../hooks/usePagination'
 import { useAuthentication } from '../tools/authentication'
-import { GuildWithDefaultChannelId } from '../models/Guild'
-import { handleSocketData, SocketData } from '../tools/handleSocketData'
+import type { GuildWithDefaultChannelId } from '../models/Guild'
+import type { SocketData } from '../tools/handleSocketData'
+import { handleSocketData } from '../tools/handleSocketData'
 import { GUILDS_CACHE_KEY } from '../tools/cache'
 
 export interface Guilds {
@@ -62,7 +64,7 @@ export const GuildsProvider: React.FC<React.PropsWithChildren<{}>> = (
 export const useGuilds = (): Guilds => {
   const guilds = useContext(GuildsContext)
   if (guilds === defaultGuildsContext) {
-    throw new Error('useGuilds must be used within GuildsProvider')
+    throw new Error('`useGuilds` must be used within `GuildsProvider`')
   }
   return guilds
 }

contexts/Members.tsx

@@ -1,12 +1,15 @@
-import { createContext, useContext, useEffect } from 'react'
+import { createContext, useContext, useEffect, useMemo } from 'react'
 
-import { NextPage, usePagination } from '../hooks/usePagination'
+import type { NextPage } from '../hooks/usePagination'
+import { usePagination } from '../hooks/usePagination'
 import { useAuthentication } from '../tools/authentication'
-import { MemberWithPublicUser } from '../models/Member'
-import { GuildsChannelsPath } from '../components/Application'
-import { handleSocketData, SocketData } from '../tools/handleSocketData'
-import { User } from '../models/User'
-import { CacheKey, MEMBERS_CACHE_KEY } from '../tools/cache'
+import type { MemberWithPublicUser } from '../models/Member'
+import type { GuildsChannelsPath } from '../components/Application'
+import type { SocketData } from '../tools/handleSocketData'
+import { handleSocketData } from '../tools/handleSocketData'
+import type { User } from '../models/User'
+import type { CacheKey } from '../tools/cache'
+import { MEMBERS_CACHE_KEY } from '../tools/cache'
 
 export interface Members {
   members: MemberWithPublicUser[]
@@ -28,7 +31,9 @@ export const MembersProviders: React.FC<
 
   const { authentication } = useAuthentication()
 
-  const cacheKey: CacheKey = `${path.guildId}-${MEMBERS_CACHE_KEY}`
+  const cacheKey = useMemo<CacheKey>(() => {
+    return `${path.guildId}-${MEMBERS_CACHE_KEY}`
+  }, [path.guildId])
 
   const {
     items: members,
@@ -89,7 +94,7 @@ export const MembersProviders: React.FC<
 export const useMembers = (): Members => {
   const members = useContext(MembersContext)
   if (members === defaultMembersContext) {
-    throw new Error('useMembers must be used within MembersProvider')
+    throw new Error('`useMembers` must be used within `MembersProvider`')
   }
   return members
 }

contexts/Messages.tsx

@@ -1,11 +1,14 @@
-import { createContext, useContext, useEffect } from 'react'
+import { createContext, useContext, useEffect, useMemo } from 'react'
 
-import { NextPage, usePagination } from '../hooks/usePagination'
+import type { NextPage } from '../hooks/usePagination'
+import { usePagination } from '../hooks/usePagination'
 import { useAuthentication } from '../tools/authentication'
-import { MessageWithMember } from '../models/Message'
-import { GuildsChannelsPath } from '../components/Application'
-import { handleSocketData, SocketData } from '../tools/handleSocketData'
-import { CacheKey, MESSAGES_CACHE_KEY } from '../tools/cache'
+import type { MessageWithMember } from '../models/Message'
+import type { GuildsChannelsPath } from '../components/Application'
+import type { SocketData } from '../tools/handleSocketData'
+import { handleSocketData } from '../tools/handleSocketData'
+import type { CacheKey } from '../tools/cache'
+import { MESSAGES_CACHE_KEY } from '../tools/cache'
 
 export interface Messages {
   messages: MessageWithMember[]
@@ -26,7 +29,9 @@ export const MessagesProvider: React.FC<
   const { path, children } = props
   const { authentication, user } = useAuthentication()
 
-  const cacheKey: CacheKey = `${path.channelId}-${MESSAGES_CACHE_KEY}`
+  const cacheKey = useMemo<CacheKey>(() => {
+    return `${path.channelId}-${MESSAGES_CACHE_KEY}`
+  }, [path.channelId])
 
   const {
     items: messages,
@@ -88,7 +93,7 @@ export const MessagesProvider: React.FC<
 export const useMessages = (): Messages => {
   const messages = useContext(MessagesContext)
   if (messages === defaultMessagesContext) {
-    throw new Error('useMessages must be used within a MessagesProvider')
+    throw new Error('`useMessages` must be used within a `MessagesProvider`')
   }
   return messages
 }

cypress.config.ts

@@ -5,7 +5,7 @@ import { getLocal } from 'mockttp'
 import type { Mockttp } from 'mockttp'
 
 import { API_DEFAULT_PORT } from './tools/api'
-import { Handlers, Method } from './cypress/fixtures/handler'
+import type { Handlers, Method } from './cypress/fixtures/handler'
 
 const UPLOADS_FIXTURES_DIRECTORY = path.join(
   process.cwd(),

cypress/component/hooks/useForm/getErrorTranslationKey.cy.ts

@@ -1,71 +0,0 @@
-import type { ErrorObject } from 'ajv'
-
-import { getErrorTranslationKey } from '../../../../hooks/useForm/getErrorTranslationKey'
-
-const errorObject: ErrorObject = {
-  instancePath: '/path',
-  keyword: 'keyword',
-  params: {},
-  schemaPath: '/path'
-}
-
-describe('hooks/useForm/getErrorTranslationKey', () => {
-  it('returns `errors:invalid` with unknown keyword', () => {
-    expect(
-      getErrorTranslationKey({
-        ...errorObject,
-        keyword: 'unknownkeyword'
-      })
-    ).equal('errors:invalid')
-  })
-
-  it('returns `errors:invalid` with format != email', () => {
-    expect(
-      getErrorTranslationKey({
-        ...errorObject,
-        keyword: 'format',
-        params: { format: 'email' }
-      })
-    ).equal('errors:email')
-  })
-
-  it('returns `errors:email` with format = email', () => {
-    expect(
-      getErrorTranslationKey({
-        ...errorObject,
-        keyword: 'format',
-        params: { format: 'email' }
-      })
-    ).equal('errors:email')
-  })
-
-  it('returns `errors:required` with minLength and limit = 1', () => {
-    expect(
-      getErrorTranslationKey({
-        ...errorObject,
-        keyword: 'minLength',
-        params: { limit: 1 }
-      })
-    ).equal('errors:required')
-  })
-
-  it('returns `errors:minLength` with minLength and limit > 1', () => {
-    expect(
-      getErrorTranslationKey({
-        ...errorObject,
-        keyword: 'minLength',
-        params: { limit: 5 }
-      })
-    ).equal('errors:minLength')
-  })
-
-  it('returns `errors:maxLength` with maxLength', () => {
-    expect(
-      getErrorTranslationKey({
-        ...errorObject,
-        keyword: 'maxLength',
-        params: { limit: 5 }
-      })
-    ).equal('errors:maxLength')
-  })
-})

cypress/component/hooks/useForm/handleCheckboxBoolean.cy.ts

@@ -1,22 +0,0 @@
-import { Type } from '@sinclair/typebox'
-
-import { handleCheckboxBoolean } from '../../../../hooks/useForm/handleCheckboxBoolean'
-
-const schema = Type.Object({
-  myBoolean: Type.Boolean(),
-  myString: Type.String()
-})
-
-describe('hooks/useForm/handleCheckboxBoolean', () => {
-  it('should convert all checkbox property to boolean', () => {
-    const object = {
-      myBoolean: 'on',
-      myString: 'on'
-    }
-    const result = handleCheckboxBoolean(object, schema)
-    expect(result).deep.equal({
-      myBoolean: true,
-      myString: 'on'
-    })
-  })
-})

cypress/component/hooks/useForm/replaceEmptyStringInObjectToNull.cy.ts

@@ -1,20 +0,0 @@
-import { replaceEmptyStringInObjectToNull } from '../../../../hooks/useForm/replaceEmptyStringInObjectToNull'
-
-describe('hooks/useForm/replaceEmptyStringInObjectToNull', () => {
-  it('should replace empty string in object to null except for required properties', () => {
-    expect(
-      replaceEmptyStringInObjectToNull(
-        {
-          foo: '',
-          bar: 'bar',
-          baz: ''
-        },
-        ['baz']
-      )
-    ).deep.equal({
-      foo: null,
-      bar: 'bar',
-      baz: ''
-    })
-  })
-})

cypress/e2e/common/Header.cy.ts

@@ -1,5 +1,7 @@
 describe('Common > Header', () => {
-  beforeEach(() => cy.visit('/'))
+  beforeEach(() => {
+    return cy.visit('/')
+  })
 
   describe('Switch theme color (dark/light)', () => {
     it('should switch theme from `dark` (default) to `light`', () => {

cypress/e2e/pages/application/[guildId]/[channelId]/index.cy.ts

@@ -241,8 +241,8 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
     cy.visit('/application/abc/abc', {
       failOnStatusCode: false
     })
-      .location('pathname')
-      .should('eq', '/404')
+      .get('[data-cy=status-code]')
+      .contains('404')
   })
 
   it("should redirect the user to `/404` if `guildId` doesn't exist", () => {
@@ -253,8 +253,8 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
     cy.visit(`/application/123/${channelExample.id}`, {
       failOnStatusCode: false
     })
-      .location('pathname')
-      .should('eq', '/404')
+      .get('[data-cy=status-code]')
+      .contains('404')
   })
 
   it("should redirect the user to `/404` if `channelId` doesn't exist", () => {
@@ -263,8 +263,8 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
       getGuildMemberWithGuildIdHandler
     ]).setCookie('refreshToken', 'refresh-token')
     cy.visit(`/application/${guildExample.id}/123`, { failOnStatusCode: false })
-      .location('pathname')
-      .should('eq', '/404')
+      .get('[data-cy=status-code]')
+      .contains('404')
   })
 })
 

cypress/e2e/pages/application/[guildId]/[channelId]/settings.cy.ts

@@ -92,8 +92,8 @@ describe('Pages > /application/[guildId]/[channelId]/settings', () => {
     cy.visit(`/application/${guildExample.id}/${channelExample.id}/settings`, {
       failOnStatusCode: false
     })
-      .location('pathname')
-      .should('eq', '/404')
+      .get('[data-cy=status-code]')
+      .contains('404')
   })
 
   it('should redirect the user to `/404` if `guildId` or `channelId` are not numbers', () => {
@@ -104,8 +104,8 @@ describe('Pages > /application/[guildId]/[channelId]/settings', () => {
     cy.visit('/application/abc/abc/settings', {
       failOnStatusCode: false
     })
-      .location('pathname')
-      .should('eq', '/404')
+      .get('[data-cy=status-code]')
+      .contains('404')
   })
 
   it("should redirect the user to `/404` if `guildId` doesn't exist", () => {
@@ -116,8 +116,8 @@ describe('Pages > /application/[guildId]/[channelId]/settings', () => {
     cy.visit(`/application/123/${channelExample.id}/settings`, {
       failOnStatusCode: false
     })
-      .location('pathname')
-      .should('eq', '/404')
+      .get('[data-cy=status-code]')
+      .contains('404')
   })
 
   it("should redirect the user to `/404` if `channelId` doesn't exist", () => {
@@ -128,8 +128,8 @@ describe('Pages > /application/[guildId]/[channelId]/settings', () => {
     cy.visit(`/application/${guildExample.id}/123/settings`, {
       failOnStatusCode: false
     })
-      .location('pathname')
-      .should('eq', '/404')
+      .get('[data-cy=status-code]')
+      .contains('404')
   })
 })
 

cypress/e2e/pages/application/[guildId]/channels/create.cy.ts

@@ -56,8 +56,8 @@ describe('Pages > /application/[guildId]/channels/create', () => {
     cy.visit('/application/abc/channels/create', {
       failOnStatusCode: false
     })
-      .location('pathname')
-      .should('eq', '/404')
+      .get('[data-cy=status-code]')
+      .contains('404')
   })
 
   it("should redirect the user to `/404` if `guildId` doesn't exist", () => {
@@ -68,8 +68,8 @@ describe('Pages > /application/[guildId]/channels/create', () => {
     cy.visit(`/application/123/channels/create`, {
       failOnStatusCode: false
     })
-      .location('pathname')
-      .should('eq', '/404')
+      .get('[data-cy=status-code]')
+      .contains('404')
   })
 })
 

cypress/e2e/pages/application/[guildId]/settings.cy.ts

@@ -86,8 +86,8 @@ describe('Pages > /application/[guildId]/settings', () => {
     cy.visit('/application/abc/settings', {
       failOnStatusCode: false
     })
-      .location('pathname')
-      .should('eq', '/404')
+      .get('[data-cy=status-code]')
+      .contains('404')
   })
 
   it("should redirect the user to `/404` if `guildId` doesn't exist", () => {
@@ -98,8 +98,8 @@ describe('Pages > /application/[guildId]/settings', () => {
     cy.visit(`/application/123/settings`, {
       failOnStatusCode: false
     })
-      .location('pathname')
-      .should('eq', '/404')
+      .get('[data-cy=status-code]')
+      .contains('404')
   })
 })
 

cypress/e2e/pages/application/users/[userId]/index.cy.ts

@@ -29,8 +29,8 @@ describe('Pages > /application/users/[userId]', () => {
       'refresh-token'
     )
     cy.visit(`/application/users/123`, { failOnStatusCode: false })
-      .location('pathname')
-      .should('eq', '/404')
+      .get('[data-cy=status-code]')
+      .contains('404')
   })
 })
 

cypress/fixtures/channels/[channelId]/delete.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 import { channelExample, channelExample2 } from '../channel'
 
 export const deleteChannelWithChannelIdHandler: Handler = {

cypress/fixtures/channels/[channelId]/get.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 import { channelExample, channelExample2 } from '../channel'
 
 export const getChannelWithChannelIdHandler: Handler = {

cypress/fixtures/channels/[channelId]/messages/get.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../../handler'
+import type { Handler } from '../../../handler'
 import {
   messageExampleComplete,
   messageExampleComplete2,

cypress/fixtures/channels/[channelId]/put.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 import { channelExample, channelExample2 } from '../channel'
 
 export const putChannelWithChannelIdHandler: Handler = {

cypress/fixtures/guilds/[guildId]/channels/get.ts

@@ -1,5 +1,5 @@
 import { guildExample } from '../../guild'
-import { Handler } from '../../../handler'
+import type { Handler } from '../../../handler'
 import { channelExample, channelExample2 } from '../../../channels/channel'
 
 export const getChannelsWithGuildIdHandler: Handler = {

cypress/fixtures/guilds/[guildId]/channels/post.ts

@@ -1,5 +1,5 @@
 import { guildExample } from '../../guild'
-import { Handler } from '../../../handler'
+import type { Handler } from '../../../handler'
 import { channelExample, channelExample2 } from '../../../channels/channel'
 
 export const postChannelsWithGuildIdHandler: Handler = {

cypress/fixtures/guilds/[guildId]/delete.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 import { guildExample } from '../guild'
 
 export const deleteGuildWithGuildIdHandler: Handler = {

cypress/fixtures/guilds/[guildId]/get.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 import { guildExample } from '../guild'
 import { memberExampleComplete } from '../../members/member'
 

cypress/fixtures/guilds/[guildId]/members/get.ts

@@ -1,5 +1,5 @@
 import { guildExample } from '../../guild'
-import { Handler } from '../../../handler'
+import type { Handler } from '../../../handler'
 import { memberExampleComplete } from '../../../members/member'
 
 export const getMembersWithGuildIdHandler: Handler = {

cypress/fixtures/guilds/[guildId]/members/join.ts

@@ -1,5 +1,5 @@
 import { guildExample } from '../../guild'
-import { Handler } from '../../../handler'
+import type { Handler } from '../../../handler'
 import { memberExampleComplete } from '../../../members/member'
 import { channelExample } from '../../../channels/channel'
 

cypress/fixtures/guilds/[guildId]/members/leave.ts

@@ -1,5 +1,5 @@
 import { guildExample } from '../../guild'
-import { Handler } from '../../../handler'
+import type { Handler } from '../../../handler'
 import { memberExample } from '../../../members/member'
 
 export const deleteLeaveMembersWithGuildIdHandler: Handler = {

cypress/fixtures/guilds/get.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../handler'
+import type { Handler } from '../handler'
 import { guildExample, guildExample2 } from './guild'
 
 export const getGuildsHandler: Handler = {

cypress/fixtures/guilds/guild.ts

@@ -1,4 +1,4 @@
-import { Guild } from '../../../models/Guild'
+import type { Guild } from '../../../models/Guild'
 
 export const guildExample: Guild = {
   id: 1,

cypress/fixtures/guilds/post.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../handler'
+import type { Handler } from '../handler'
 import { guildExample } from './guild'
 import { channelExample } from '../channels/channel'
 import { memberExampleComplete } from '../members/member'

cypress/fixtures/guilds/public/get.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 import { guildExample, guildExample2 } from '../guild'
 
 export const getGuildsPublicEmptyHandler: Handler = {

cypress/fixtures/uploads/messages/get.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 import {
   messageExampleComplete6,
   messageExampleComplete7,

cypress/fixtures/users/[userId]/get.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 import { userExample, userSettingsExample } from '../user'
 
 export const getUserByIdHandler: Handler = {

cypress/fixtures/users/current/get.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 import { userExample, userSettingsExample } from '../user'
 
 export const getUsersCurrentHandler: Handler = {

cypress/fixtures/users/refresh-token/post.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 
 export const postUsersRefreshTokenHandler: Handler = {
   method: 'POST',

cypress/fixtures/users/reset-password/post.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 
 export const postUsersResetPasswordHandler: Handler = {
   method: 'POST',

cypress/fixtures/users/reset-password/put.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 
 export const putUsersResetPasswordHandler: Handler = {
   method: 'PUT',

cypress/fixtures/users/signin/post.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 
 export const postUsersSigninHandler: Handler = {
   method: 'POST',

cypress/fixtures/users/signup/post.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 import { userExample, userSettingsExample } from '../user'
 
 export const postUsersSignupHandler: Handler = {

cypress/fixtures/users/user.ts

@@ -1,5 +1,5 @@
-import { UserSettings } from '../../../models/UserSettings'
-import { User } from '../../../models/User'
+import type { UserSettings } from '../../../models/UserSettings'
+import type { User } from '../../../models/User'
 
 export const userExample: User = {
   id: 1,

generators/component/Component.tsx.hbs

@@ -1,10 +1,10 @@
-import classNames from 'classnames'
+import classNames from 'clsx'
 
 export interface {{ properCase name }}Props {
   className?: string
 }
 
-export const {{ properCase name }}: React.FC<React.PropsWithChildren{{ properCase name }}Props>> = (props) => {
+export const {{ properCase name }}: React.FC<React.PropsWithChildren<{{ properCase name }}Props>> = (props) => {
   const { children, className } = props
 
   return <main className={classNames(className, '')}>{children}</main>

hooks/useClickOutsideAlerter.ts

@@ -0,0 +1,22 @@
+import { useEffect } from 'react'
+
+export const useClickOutsideAlerter = (
+  ref: React.RefObject<HTMLElement>,
+  callback: () => void
+): void => {
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent): void => {
+      if (
+        event.target != null &&
+        ref.current != null &&
+        !ref.current.contains(event.target as Node)
+      ) {
+        callback()
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [ref, callback])
+}

hooks/useFetchState.ts

@@ -1,15 +0,0 @@
-import { useState } from 'react'
-
-export const fetchState = ['idle', 'loading', 'error', 'success'] as const
-
-export type FetchState = typeof fetchState[number]
-
-export const useFetchState = (
-  initialFetchState: FetchState = 'idle'
-): [
-  fetchState: FetchState,
-  setFetchState: React.Dispatch<React.SetStateAction<FetchState>>
-] => {
-  const [fetchState, setFetchState] = useState<FetchState>(initialFetchState)
-  return [fetchState, setFetchState]
-}

hooks/useForm/getErrorTranslationKey.ts

@@ -1,19 +0,0 @@
-import type { ErrorObject } from 'ajv'
-
-const knownErrorKeywords = ['minLength', 'maxLength', 'format']
-
-export const getErrorTranslationKey = (error: ErrorObject): string => {
-  if (knownErrorKeywords.includes(error?.keyword)) {
-    if (error.keyword === 'minLength' && error.params.limit === 1) {
-      return 'errors:required'
-    }
-    if (error.keyword === 'format') {
-      if (error.params.format === 'email') {
-        return 'errors:email'
-      }
-      return 'errors:invalid'
-    }
-    return `errors:${error.keyword}`
-  }
-  return 'errors:invalid'
-}

hooks/useForm/handleCheckboxBoolean.ts

@@ -1,25 +0,0 @@
-import type { TObject } from '@sinclair/typebox'
-
-import type { ObjectAny } from '../../tools/types'
-
-export const handleCheckboxBoolean = (
-  object: ObjectAny,
-  validateSchemaObject: TObject<ObjectAny>
-): ObjectAny => {
-  const booleanProperties: string[] = []
-  for (const property in validateSchemaObject.properties) {
-    const rule = validateSchemaObject.properties[property]
-    if (rule.type === 'boolean') {
-      booleanProperties.push(property)
-    }
-  }
-  for (const booleanProperty of booleanProperties) {
-    if (object[booleanProperty] == null) {
-      object[booleanProperty] =
-        validateSchemaObject.properties[booleanProperty].default
-    } else {
-      object[booleanProperty] = object[booleanProperty] === 'on'
-    }
-  }
-  return object
-}

hooks/useForm/index.ts

@@ -1 +0,0 @@
-export * from './useForm'

hooks/useForm/replaceEmptyStringInObjectToNull.ts

@@ -1,19 +0,0 @@
-import type { ObjectAny } from '../../tools/types'
-
-export const replaceEmptyStringInObjectToNull = (
-  object: ObjectAny,
-  required: string[] = []
-): ObjectAny => {
-  return Object.fromEntries(
-    Object.entries(object).map(([key, value]) => {
-      if (
-        typeof value === 'string' &&
-        value.length === 0 &&
-        !required.includes(key)
-      ) {
-        return [key, null]
-      }
-      return [key, value]
-    })
-  )
-}

hooks/useForm/useForm.ts

@@ -1,134 +0,0 @@
-import { useMemo, useState } from 'react'
-import useTranslation from 'next-translate/useTranslation'
-import { Type } from '@sinclair/typebox'
-import type { HandleForm } from 'react-component-form'
-import type { ErrorObject } from 'ajv'
-
-import { FetchState, useFetchState } from '../useFetchState'
-import { ajv } from '../../tools/ajv'
-import { getErrorTranslationKey } from './getErrorTranslationKey'
-import { replaceEmptyStringInObjectToNull } from './replaceEmptyStringInObjectToNull'
-import type { ObjectAny } from '../../tools/types'
-import { handleCheckboxBoolean } from './handleCheckboxBoolean'
-
-interface Errors {
-  [key: string]: ErrorObject<string, any> | null | undefined
-}
-
-const findError = (
-  field: string
-): ((value: ErrorObject, index: number, object: ErrorObject[]) => boolean) => {
-  return (validationError) => validationError.instancePath === field
-}
-
-export type GetErrorTranslation = (error?: ErrorObject | null) => string | null
-
-export interface UseFormOptions {
-  validateSchema: { [key: string]: any }
-  replaceEmptyStringToNull?: boolean
-  resetOnSuccess?: boolean
-}
-
-export type HandleSubmit = (callback: HandleSubmitCallback) => HandleForm
-
-interface Message {
-  type: 'error' | 'success'
-  value: string
-}
-
-export type HandleSubmitCallback = (
-  formData: ObjectAny,
-  formElement: HTMLFormElement
-) => Promise<Message | null>
-
-export interface UseFormResult {
-  message: string | null
-  setMessageTranslationKey: React.Dispatch<
-    React.SetStateAction<string | undefined>
-  >
-  fetchState: FetchState
-  setFetchState: React.Dispatch<React.SetStateAction<FetchState>>
-  getErrorTranslation: GetErrorTranslation
-  handleSubmit: HandleSubmit
-  errors: Errors
-}
-
-export const useForm = (options: UseFormOptions): UseFormResult => {
-  const {
-    validateSchema,
-    replaceEmptyStringToNull = false,
-    resetOnSuccess = false
-  } = options
-  const { t } = useTranslation()
-  const [fetchState, setFetchState] = useFetchState()
-  const [messageTranslationKey, setMessageTranslationKey] = useState<
-    string | undefined
-  >(undefined)
-  const [errors, setErrors] = useState<Errors>({})
-
-  const validateSchemaObject = useMemo(() => {
-    return Type.Object(validateSchema)
-  }, [validateSchema])
-
-  const validate = useMemo(() => {
-    return ajv.compile(validateSchemaObject)
-  }, [validateSchemaObject])
-
-  const getErrorTranslation = (error?: ErrorObject | null): string | null => {
-    if (error != null) {
-      return t(getErrorTranslationKey(error)).replace(
-        '{expected}',
-        error?.params?.limit
-      )
-    }
-    return null
-  }
-
-  const handleSubmit: HandleSubmit = (callback) => {
-    return async (formData: ObjectAny, formElement) => {
-      setErrors({})
-      setMessageTranslationKey(undefined)
-      if (replaceEmptyStringToNull) {
-        formData = replaceEmptyStringInObjectToNull(
-          formData,
-          validateSchemaObject.required
-        )
-      }
-      formData = handleCheckboxBoolean(formData, validateSchemaObject)
-      const isValid = validate(formData)
-      if (!isValid) {
-        setFetchState('error')
-        const errors: Errors = {}
-        for (const property in validateSchemaObject.properties) {
-          errors[property] = validate.errors?.find(findError(`/${property}`))
-        }
-        setErrors(errors)
-      } else {
-        setErrors({})
-        setFetchState('loading')
-        const message = await callback(formData, formElement)
-        if (message != null) {
-          setMessageTranslationKey(message.value)
-          if (message.type === 'success') {
-            setFetchState('success')
-            if (resetOnSuccess) {
-              formElement.reset()
-            }
-          } else {
-            setFetchState('error')
-          }
-        }
-      }
-    }
-  }
-
-  return {
-    getErrorTranslation,
-    errors,
-    fetchState,
-    setFetchState,
-    handleSubmit,
-    message: messageTranslationKey != null ? t(messageTranslationKey) : null,
-    setMessageTranslationKey
-  }
-}

hooks/useFormTranslation.ts

@@ -0,0 +1,60 @@
+import useTranslation from 'next-translate/useTranslation'
+import type { Error } from 'react-component-form'
+
+const knownErrorKeywords = ['minLength', 'maxLength', 'format']
+
+const getErrorTranslationKey = (error: Error): string => {
+  if (knownErrorKeywords.includes(error?.keyword)) {
+    if (
+      error.keyword === 'minLength' &&
+      typeof error.data === 'string' &&
+      error.data.length === 0
+    ) {
+      return 'errors:required'
+    }
+    if (error.keyword === 'format') {
+      if (error.params.format === 'email') {
+        return 'errors:invalid-email'
+      }
+      return 'errors:invalid'
+    }
+    return `errors:${error.keyword}`
+  }
+  return 'errors:invalid'
+}
+
+export type GetErrorTranslation = (
+  error: Error | undefined
+) => string | undefined
+
+export type GetFirstErrorTranslation = (
+  errors: Error[] | undefined
+) => string | undefined
+
+export interface UseFormTranslationResult {
+  getErrorTranslation: GetErrorTranslation
+  getFirstErrorTranslation: GetFirstErrorTranslation
+}
+
+export const useFormTranslation = (): UseFormTranslationResult => {
+  const { t } = useTranslation()
+
+  const getErrorTranslation: GetErrorTranslation = (error) => {
+    if (error != null) {
+      return t(getErrorTranslationKey(error)).replace(
+        '{expected}',
+        error?.params?.limit
+      )
+    }
+    return undefined
+  }
+
+  const getFirstErrorTranslation: GetFirstErrorTranslation = (errors) => {
+    if (errors != null) {
+      return getErrorTranslation(errors[0])
+    }
+    return undefined
+  }
+
+  return { getFirstErrorTranslation, getErrorTranslation }
+}

hooks/usePagination.ts

@@ -1,12 +1,9 @@
 import { useState, useRef, useCallback } from 'react'
-import { AxiosInstance } from 'axios'
+import type { AxiosInstance } from 'axios'
+import type { FetchState } from 'react-component-form'
 
-import { FetchState } from './useFetchState'
-import {
-  CacheKey,
-  getPaginationCache,
-  savePaginationCache
-} from '../tools/cache'
+import type { CacheKey } from '../tools/cache'
+import { getPaginationCache, savePaginationCache } from '../tools/cache'
 
 export interface Query {
   [key: string]: string
@@ -45,15 +42,6 @@ export const usePagination = <T extends PaginationItem>(
   const fetchState = useRef<FetchState>('idle')
   const afterId = useRef<number | null>(null)
 
-  const updateAfterId = (newItems: T[]): void => {
-    if (!inverse) {
-      afterId.current =
-        newItems.length > 0 ? newItems[newItems.length - 1].id : null
-    } else {
-      afterId.current = newItems.length > 0 ? newItems[0].id : null
-    }
-  }
-
   const nextPageAsync: NextPageAsync = useCallback(
     async (query) => {
       if (fetchState.current !== 'idle') {
@@ -68,21 +56,33 @@ export const usePagination = <T extends PaginationItem>(
       const { data: newItems } = await api.get<T[]>(
         `${url}?${searchParameters.toString()}`
       )
-      updateAfterId(newItems)
+      if (!inverse) {
+        afterId.current =
+          newItems.length > 0 ? newItems[newItems.length - 1].id : null
+      } else {
+        afterId.current = newItems.length > 0 ? newItems[0].id : null
+      }
       setItems((oldItems) => {
         const updatedItems = inverse
           ? [...newItems, ...oldItems]
           : [...oldItems, ...newItems]
+        const unique = updatedItems.reduce<T[]>((accumulator, item) => {
+          const isExisting = accumulator.some((itemSome) => {
+            return itemSome.id === item.id
+          })
+          if (!isExisting) {
+            accumulator.push(item)
+          }
+          return accumulator
+        }, [])
         if (cacheKey != null) {
-          savePaginationCache(cacheKey, updatedItems)
+          savePaginationCache(cacheKey, unique)
         }
-        return updatedItems
+        return unique
       })
       setHasMore(newItems.length > 0)
       fetchState.current = 'idle'
     },
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- We don't want infinite loops with updateAfterId
     [api, url, inverse, cacheKey]
   )
 
@@ -106,13 +106,18 @@ export const usePagination = <T extends PaginationItem>(
       afterId.current = null
       setItems([])
     } else {
+      fetchState.current = 'loading'
       const newItems = getPaginationCache<T>(cacheKey)
       setItems(newItems)
-      updateAfterId(newItems)
+      if (!inverse) {
+        afterId.current =
+          newItems.length > 0 ? newItems[newItems.length - 1].id : null
+      } else {
+        afterId.current = newItems.length > 0 ? newItems[0].id : null
+      }
+      fetchState.current = 'idle'
     }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- We don't want infinite loops with updateAfterId
-  }, [cacheKey])
+  }, [cacheKey, inverse])
 
   return { items, hasMore, nextPage, resetPagination, setItems }
 }

locales/en/application.json

@@ -21,10 +21,12 @@
   "label-checkbox-guilds": "Show the list of guilds to everyone.",
   "nothing-here": "Nothing's here...",
   "save": "Save",
-  "saved-information": "The information has been saved.",
+  "saved-information": "The information have been saved.",
   "success-email-changed": "Please check your emails to confirm your new email address. You are now signed out.",
   "delete": "Delete",
+  "edit": "Edit",
   "signout": "Sign out",
+  "signout-all-devices": "Sign out of all devices",
   "signin-with-an-account": "Sign in with an account",
   "signout-with-an-account": "Sign out with an account",
   "success-deleted-provider": "The provider has been deleted.",

locales/en/errors.json

@@ -7,6 +7,6 @@
   "required": "Oops, this field is required 🙈.",
   "minLength": "The field must contain at least {expected} characters.",
   "maxLength": "The field must contain at most {expected} characters.",
-  "email": "Mmm… It seems that this email is not valid 🤔.",
+  "invalid-email": "Mmm… It seems that this email is not valid 🤔.",
   "invalid": "Invalid value."
 }

locales/fr/application.json

@@ -24,7 +24,9 @@
   "saved-information": "Les informations ont été enregistrées.",
   "success-email-changed": "Veuillez vérifier vos emails pour confirmer votre nouvelle adresse email. Vous êtes maintenant déconnecté.",
   "delete": "Supprimer",
+  "edit": "Modifier",
   "signout": "Se déconnecter",
+  "signout-all-devices": "Se déconnecter de tous les appareils",
   "signin-with-an-account": "Se connecter avec un compte",
   "signout-with-an-account": "Se déconnecter avec un compte",
   "success-deleted-provider": "Le moyen de connexion a été supprimé.",

locales/fr/errors.json

@@ -7,6 +7,6 @@
   "required": "Oups, ce champ est obligatoire 🙈.",
   "minLength": "Le champ doit contenir au moins {expected} caractères.",
   "maxLength": "Le champ doit contenir au plus {expected} caractères.",
-  "email": "Mmm… Il semblerait que cet email ne soit pas valide 🤔.",
+  "invalid-email": "Mmm… Il semblerait que cet email ne soit pas valide 🤔.",
   "invalid": "Valeur invalide."
 }