chore(release): 1.2.2 [skip ci]

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

.eslintignore

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

.eslintrc.json

@@ -6,8 +6,7 @@
   },
   "env": {
     "node": true,
-    "browser": true,
-    "jest": true
+    "browser": true
   },
   "rules": {
     "prettier/prettier": "error",

.github/workflows/test.yml

@@ -41,6 +41,9 @@ jobs:
       - name: 'Build'
         run: 'npm run build'
 
+      - name: 'html-w3c-validator'
+        run: 'npm run test:html-w3c-validator'
+
       - name: 'Lighthouse'
         run: 'npm run test:lighthouse'
         env:

.gitignore

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

.html-w3c-validatorrc.json

@@ -0,0 +1,9 @@
+{
+  "urls": [
+    "http://localhost:3000/",
+    "http://localhost:3000/authentication/forgot-password",
+    "http://localhost:3000/authentication/reset-password",
+    "http://localhost:3000/authentication/signin",
+    "http://localhost:3000/authentication/signup"
+  ]
+}

.lintstagedrc.json

@@ -1,10 +1,6 @@
 {
   "*": ["editorconfig-checker"],
-  "*.{js,jsx,ts,tsx}": [
-    "prettier --write",
-    "eslint --fix",
-    "jest --findRelatedTests"
-  ],
+  "*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix"],
   "*.{css,scss,sass,json,jsonc,yml,yaml}": ["prettier --write"],
-  "*.md": ["prettier --write", "markdownlint --dot --fix"]
+  "*.{md,mdx}": ["prettier --write", "markdownlint-cli2 --fix"]
 }

.markdownlint-cli2.jsonc

@@ -0,0 +1,11 @@
+{
+  "config": {
+    "default": true,
+    "MD013": false,
+    "MD024": false,
+    "MD033": false,
+    "MD041": false
+  },
+  "globs": ["**/*.{md,mdx}"],
+  "ignores": ["**/node_modules"]
+}

.markdownlint.json

@@ -1,6 +0,0 @@
-{
-  "default": true,
-  "MD013": false,
-  "MD033": false,
-  "MD041": false
-}

.prettierignore

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

Dockerfile

@@ -1,15 +1,15 @@
-FROM node:16.15.0 AS dependencies
+FROM node:16.17.0 AS dependencies
 WORKDIR /usr/src/app
 COPY ./package*.json ./
 RUN npm install
 
-FROM node:16.15.0 AS builder
+FROM node:16.17.0 AS builder
 WORKDIR /usr/src/app
 COPY ./ ./
 COPY --from=dependencies /usr/src/app/node_modules ./node_modules
 RUN npm run build
 
-FROM node:16.15.0 AS runner
+FROM node:16.17.0 AS runner
 WORKDIR /usr/src/app
 ENV NODE_ENV=production
 COPY --from=builder /usr/src/app/next.config.js ./next.config.js

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,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import Image from 'next/image'
 import { PlusIcon, MenuIcon, UsersIcon, XIcon } from '@heroicons/react/solid'
-import classNames from 'classnames'
+import classNames from 'clsx'
 import { useMediaQuery } from 'react-responsive'
 import { useSwipeable } from 'react-swipeable'
 

components/Application/ChannelSettings/ChannelSettings.tsx

@@ -1,11 +1,11 @@
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import { Form } from 'react-component-form'
+import { Form, useForm } from 'react-component-form'
 import useTranslation from 'next-translate/useTranslation'
-import classNames from 'classnames'
+import classNames from 'clsx'
 import axios from 'axios'
+import type { HandleUseFormCallback } from 'react-component-form'
 
-import { HandleSubmitCallback, useForm } from '../../../hooks/useForm'
 import { FormState } from '../../design/FormState'
 import { useGuildMember } from '../../../contexts/GuildMember'
 import { Input } from '../../design/Input'
@@ -17,6 +17,11 @@ import {
   ChannelWithDefaultChannelId
 } from '../../../models/Channel'
 import { ConfirmPopup } from '../ConfirmPopup'
+import { useFormTranslation } from '../../../hooks/useFormTranslation'
+
+const schema = {
+  name: channelSchema.name
+}
 
 export interface ChannelSettingsProps {
   channel: Channel
@@ -41,25 +46,19 @@ export const ChannelSettings: React.FC<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,12 +1,13 @@
-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 { useGuildMember } from '../../../../contexts/GuildMember'
-import { IconButton } from '../../../design/IconButton'
+import { GuildsChannelsPath } from '../Application'
+import { Channel as ChannelType } from '../../../models/Channel'
+import { useGuildMember } from '../../../contexts/GuildMember'
+import { IconButton } from '../../design/IconButton'
 
 export interface ChannelProps {
   path: GuildsChannelsPath
@@ -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/Channel/index.ts

@@ -1 +0,0 @@
-export * 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'
 

components/Application/CreateChannel/CreateChannel.tsx

@@ -1,32 +1,32 @@
 import { useRouter } from 'next/router'
 import useTranslation from 'next-translate/useTranslation'
-import { Form } from 'react-component-form'
+import { Form, useForm } from 'react-component-form'
+import type { HandleUseFormCallback } from 'react-component-form'
 
 import { useAuthentication } from '../../../tools/authentication'
-import { HandleSubmitCallback, useForm } from '../../../hooks/useForm'
 import { Input } from '../../design/Input'
 import { Main } from '../../design/Main'
 import { Button } from '../../design/Button'
 import { FormState } from '../../design/FormState'
 import { Channel, channelSchema } from '../../../models/Channel'
 import { useGuildMember } from '../../../contexts/GuildMember'
+import { useFormTranslation } from '../../../hooks/useFormTranslation'
+
+const schema = {
+  name: channelSchema.name
+}
 
 export const CreateChannel: React.FC = () => {
   const { t } = useTranslation()
   const router = useRouter()
   const { guild } = useGuildMember()
 
-  const { fetchState, message, errors, getErrorTranslation, handleSubmit } =
-    useForm({
-      validateSchema: {
-        name: channelSchema.name
-      },
-      resetOnSuccess: true
-    })
+  const { handleUseForm, fetchState, message, errors } = useForm(schema)
+  const { getFirstErrorTranslation } = useFormTranslation()
 
   const { authentication } = useAuthentication()
 
-  const onSubmit: HandleSubmitCallback = async (formData) => {
+  const onSubmit: HandleUseFormCallback<typeof schema> = async (formData) => {
     try {
       const { data: channel } = await authentication.api.post<Channel>(
         `/guilds/${guild.id}/channels`,
@@ -44,13 +44,13 @@ export const CreateChannel: React.FC = () => {
 
   return (
     <Main>
-      <Form className='w-4/6 max-w-xs' onSubmit={handleSubmit(onSubmit)}>
+      <Form className='w-4/6 max-w-xs' onSubmit={handleUseForm(onSubmit)}>
         <Input
           type='text'
           placeholder={t('common:name')}
           name='name'
           label={t('common:name')}
-          error={getErrorTranslation(errors.name)}
+          error={getFirstErrorTranslation(errors.name)}
           data-cy='channel-name-input'
         />
         <Button

components/Application/CreateGuild/CreateGuild.tsx

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

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,14 +1,15 @@
+import { memo } from 'react'
 import Image from 'next/image'
 
-import { GuildWithDefaultChannelId } from '../../../../models/Guild'
-import { IconLink } from '../../../design/IconLink'
+import { GuildWithDefaultChannelId } from '../../../models/Guild'
+import { IconLink } from '../../design/IconLink'
 
 export interface GuildProps {
   guild: GuildWithDefaultChannelId
   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/Guild/Guild.test.tsx

@@ -1,18 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Guild } from './Guild'
-import { guildExample } from '../../../../cypress/fixtures/guilds/guild'
-
-describe('<Guild />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(
-      <Guild
-        guild={{
-          ...guildExample,
-          defaultChannelId: 1
-        }}
-      />
-    )
-    expect(baseElement).toBeTruthy()
-  })
-})

components/Application/Guilds/Guild/index.ts

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

components/Application/JoinGuildsPublic/GuildPublic.tsx

@@ -2,16 +2,16 @@ 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 { Emoji } from '../../Emoji'
+import { ConfirmPopup } from '../ConfirmPopup'
 import {
   GuildPublic as GuildPublicType,
   GuildWithDefaultChannelId
-} from '../../../../models/Guild'
-import { useAuthentication } from '../../../../tools/authentication'
+} from '../../../models/Guild'
+import { useAuthentication } from '../../../tools/authentication'
 
 export interface GuildPublicProps {
   guild: GuildPublicType

components/Application/JoinGuildsPublic/GuildPublic/index.ts

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

components/Application/JoinGuildsPublic/JoinGuildsPublic.tsx

@@ -22,12 +22,15 @@ export const JoinGuildsPublic: React.FC = () => {
     })
 
   useEffect(() => {
-    authentication.socket.on('guilds', (data: SocketData<GuildPublicType>) => {
-      handleSocketData({ data, setItems })
-    })
+    authentication?.socket?.on(
+      'guilds',
+      (data: SocketData<GuildPublicType>) => {
+        handleSocketData({ data, setItems })
+      }
+    )
 
     return () => {
-      authentication.socket.off('guilds')
+      authentication?.socket?.off('guilds')
     }
   }, [authentication.socket, setItems])
 

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 { Emoji } from '../../../Emoji'
+import { 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/Members/Member/index.ts

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

components/Application/Messages/Message/Message.tsx

@@ -1,11 +1,16 @@
+import { useState, useRef } from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
 import date from 'date-and-time'
+import TextareaAutosize from 'react-textarea-autosize'
+import useTranslation from 'next-translate/useTranslation'
 
 import { MessageWithMember } from '../../../../models/Message'
 import { MessageText } from './MessageText'
 import { Loader } from '../../../design/Loader'
 import { MessageFile } from './MessageFile'
+import { Emoji } from '../../../Emoji'
+import { useAuthentication } from '../../../../tools/authentication'
 
 export interface MessageProps {
   message: MessageWithMember
@@ -14,9 +19,60 @@ export interface MessageProps {
 export const Message: React.FC<MessageProps> = (props) => {
   const { message } = props
 
+  const textareaReference = useRef<HTMLTextAreaElement>(null)
+  const [isEditing, setIsEditing] = useState(false)
+  const { t } = useTranslation()
+  const { authentication, user } = useAuthentication()
+
+  const handleDeleteMessage = async (): Promise<void> => {
+    try {
+      await authentication.api.delete(`/messages/${message.id}`)
+    } catch {}
+  }
+
+  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 handleEditSubmit: React.FormEventHandler<HTMLFormElement> = async (
+    event
+  ) => {
+    event.preventDefault()
+    await handleEdit()
+  }
+
+  const handleEditMode = (): void => {
+    setIsEditing((oldIsEditing) => {
+      return !oldIsEditing
+    })
+  }
+
   return (
     <div
-      className='flex p-4 transition hover:bg-gray-200 dark:hover:bg-gray-900'
+      className='group flex w-full p-4 transition hover:bg-gray-200 dark:hover:bg-gray-900'
       data-cy={`message-${message.id}`}
     >
       <Link href={`/application/users/${message.member.user.id}`}>
@@ -40,7 +96,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,8 +115,58 @@ 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 ? (
+          <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={isEditing ? handleEdit : handleEditMode}
+              >
+                <Emoji
+                  value={isEditing ? ':white_check_mark:' : ':pencil2:'}
+                  size={18}
+                />
+              </div>
+            ) : null}
+            <div
+              className='message-options rounded-r-lg border-r-slate-600'
+              title={t('application:delete')}
+              onClick={handleDeleteMessage}
+            >
+              <Emoji value=':wastebasket:' size={18} />
+            </div>
+          </div>
+        ) : null}
         {message.type === 'text' ? (
-          <MessageText message={message} />
+          <>
+            {isEditing ? (
+              <form
+                className='flex h-full w-full items-center'
+                onSubmit={handleEditSubmit}
+                onKeyDown={handleTextareaKeyDown}
+              >
+                <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={textareaReference}
+                  autoFocus
+                  onFocus={(event) => {
+                    event.currentTarget.setSelectionRange(
+                      event.currentTarget.value.length,
+                      event.currentTarget.value.length
+                    )
+                  }}
+                />
+              </form>
+            ) : (
+              <MessageText message={message} />
+            )}
+          </>
         ) : message.type === 'file' ? (
           <MessageFile message={message} />
         ) : (

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

@@ -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>
     )
@@ -41,8 +41,16 @@ export const MessageText: React.FC<MessageContentProps> = (props) => {
       rehypePlugins={[[emojiPlugin], [rehypeKatex]]}
       linkTarget='_blank'
       components={{
+        a: (props) => {
+          return (
+            <a
+              className='text-green-800 hover:underline dark:text-green-400'
+              {...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/PopupGuild/PopupGuild.test.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { PopupGuild } from './PopupGuild'
-
-describe('<PopupGuild />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<PopupGuild />)
-    expect(baseElement).toBeTruthy()
-  })
-})

components/Application/PopupGuild/PopupGuild.tsx

@@ -1,9 +1,10 @@
 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/PopupGuildCard'
+import { PopupGuildCard } from './PopupGuildCard'
+
 export interface PopupGuildProps {
   className?: string
 }

components/Application/PopupGuild/PopupGuildCard/PopupGuildCard.test.tsx

@@ -1,30 +0,0 @@
-import { render } from '@testing-library/react'
-import { PlusSmIcon } from '@heroicons/react/solid'
-import Image from 'next/image'
-
-import { PopupGuildCard } from './PopupGuildCard'
-
-describe('<PopupGuildCard />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(
-      <PopupGuildCard
-        image={
-          <Image
-            quality={100}
-            src='/images/svg/design/create-server.svg'
-            alt=''
-            width={230}
-            height={230}
-          />
-        }
-        description='Create your own guild and manage everything within a few clicks !'
-        link={{
-          icon: <PlusSmIcon className='mr-2 h-8 w-8' />,
-          text: 'Create a server',
-          href: '/application/guilds/create'
-        }}
-      />
-    )
-    expect(baseElement).toBeTruthy()
-  })
-})

components/Application/PopupGuild/PopupGuildCard/index.ts

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

components/Application/SendMessage/SendMessage.tsx

@@ -1,7 +1,7 @@
 import { useState, useRef } from 'react'
 import useTranslation from 'next-translate/useTranslation'
 import TextareaAutosize from 'react-textarea-autosize'
-import classNames from 'classnames'
+import classNames from 'clsx'
 
 import { GuildsChannelsPath } from '..'
 import { useAuthentication } from '../../../tools/authentication'
@@ -96,7 +96,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.test.tsx

@@ -1,12 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Sidebar } from './Sidebar'
-
-describe('<Sidebar />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(
-      <Sidebar direction='left' visible={true} isMobile={false} />
-    )
-    expect(baseElement).toBeTruthy()
-  })
-})

components/Application/Sidebar/Sidebar.tsx

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

components/Application/UserProfile/UserProfile.test.tsx

@@ -1,23 +0,0 @@
-import { render } from '@testing-library/react'
-
-import {
-  guildExample,
-  guildExample2
-} from '../../../cypress/fixtures/guilds/guild'
-import {
-  userExample,
-  userSettingsExample
-} from '../../../cypress/fixtures/users/user'
-import { UserProfile } from './UserProfile'
-
-describe('<UserProfile />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(
-      <UserProfile
-        user={{ ...userExample, settings: userSettingsExample }}
-        guilds={[guildExample, guildExample2]}
-      />
-    )
-    expect(baseElement).toBeTruthy()
-  })
-})

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,20 @@ import { Language } from '../../Header/Language'
 import { useAuthentication } from '../../../tools/authentication'
 import { Button } from '../../design/Button'
 import { FormState } from '../../design/FormState'
-import { useForm, HandleSubmitCallback } from '../../../hooks/useForm'
 import { userSchema } from '../../../models/User'
 import { userSettingsSchema } from '../../../models/UserSettings'
 import { ProviderOAuth, providers } from '../../../models/OAuth'
+import { useFormTranslation } from '../../../hooks/useFormTranslation'
+
+const schema = {
+  name: userSchema.name,
+  status: Type.Optional(userSchema.status),
+  email: Type.Optional(Type.Union([userSchema.email, Type.Null()])),
+  website: Type.Optional(userSchema.website),
+  biography: Type.Optional(userSchema.biography),
+  isPublicGuilds: userSettingsSchema.isPublicGuilds,
+  isPublicEmail: userSettingsSchema.isPublicEmail
+}
 
 export const UserSettings: React.FC = () => {
   const { user, setUser, authentication } = useAuthentication()
@@ -35,32 +46,20 @@ export const UserSettings: React.FC = () => {
   })
 
   const {
+    handleUseForm,
     fetchState,
     setFetchState,
     message,
-    setMessageTranslationKey,
-    errors,
-    getErrorTranslation,
-    handleSubmit
-  } = useForm({
-    validateSchema: {
-      name: userSchema.name,
-      status: Type.Optional(userSchema.status),
-      email: Type.Optional(Type.Union([userSchema.email, Type.Null()])),
-      website: Type.Optional(userSchema.website),
-      biography: Type.Optional(userSchema.biography),
-      isPublicGuilds: userSettingsSchema.isPublicGuilds,
-      isPublicEmail: userSettingsSchema.isPublicEmail
-    },
-    replaceEmptyStringToNull: true,
-    resetOnSuccess: false
-  })
+    setMessage,
+    errors
+  } = useForm(schema)
+  const { getFirstErrorTranslation } = useFormTranslation()
 
   const hasAllProviders = useMemo(() => {
     return providers.every((provider) => user.strategies.includes(provider))
   }, [user.strategies])
 
-  const onSubmit: HandleSubmitCallback = async (formData) => {
+  const onSubmit: HandleUseFormCallback<typeof schema> = async (formData) => {
     try {
       const { isPublicGuilds, isPublicEmail, ...userData } = formData
       const userSettings = { isPublicEmail, isPublicGuilds }
@@ -68,7 +67,7 @@ export const UserSettings: React.FC = () => {
         `/users/current?redirectURI=${window.location.origin}/authentication/signin`,
         userData
       )
-      setInputValues(formData as any)
+      setInputValues(formData as unknown as any)
       const hasEmailChanged = user.email !== userCurrentData.user.email
       if (hasEmailChanged) {
         return {
@@ -165,19 +164,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 = (
@@ -195,10 +194,10 @@ export const UserSettings: React.FC = () => {
             )
           }
         })
-        setMessageTranslationKey('application:success-deleted-provider')
+        setMessage('application:success-deleted-provider')
       } catch (error) {
         setFetchState('error')
-        setMessageTranslationKey('errors:server-error')
+        setMessage('errors:server-error')
       }
     }
   }
@@ -217,7 +216,7 @@ export const UserSettings: React.FC = () => {
 
   return (
     <Form
-      onSubmit={handleSubmit(onSubmit)}
+      onSubmit={handleUseForm(onSubmit)}
       className='my-auto flex flex-col items-center justify-center py-12 lg:min-w-[875px]'
     >
       <div className='flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row'>
@@ -257,7 +256,7 @@ export const UserSettings: React.FC = () => {
               className='!mt-0'
               onChange={onChange}
               value={inputValues.name ?? ''}
-              error={getErrorTranslation(errors.name)}
+              error={getFirstErrorTranslation(errors.name)}
             />
             <Input
               name='status'
@@ -266,7 +265,7 @@ export const UserSettings: React.FC = () => {
               className='!mt-4'
               onChange={onChange}
               value={inputValues.status ?? ''}
-              error={getErrorTranslation(errors.status)}
+              error={getFirstErrorTranslation(errors.status)}
             />
           </div>
         </div>
@@ -279,7 +278,7 @@ export const UserSettings: React.FC = () => {
             placeholder='Email'
             onChange={onChange}
             value={inputValues.email ?? ''}
-            error={getErrorTranslation(errors.email)}
+            error={getFirstErrorTranslation(errors.email)}
           />
           <Checkbox
             name='isPublicEmail'
@@ -294,7 +293,7 @@ export const UserSettings: React.FC = () => {
             placeholder={t('application:website')}
             onChange={onChange}
             value={inputValues.website ?? ''}
-            error={getErrorTranslation(errors.website)}
+            error={getFirstErrorTranslation(errors.website)}
           />
           <Textarea
             name='biography'
@@ -376,7 +375,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'
@@ -15,8 +18,8 @@ import {
   Tokens,
   Authentication as AuthenticationClass
 } from '../../tools/authentication'
-import { useForm, HandleSubmitCallback } from '../../hooks/useForm'
 import { AuthenticationSocialMedia } from './AuthenticationSocialMedia'
+import { useFormTranslation } from '../../hooks/useFormTranslation'
 
 export interface AuthenticationProps {
   mode: 'signup' | 'signin'
@@ -29,23 +32,28 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
   const { lang, t } = useTranslation()
   const { theme } = useTheme()
 
-  const { errors, fetchState, message, getErrorTranslation, handleSubmit } =
-    useForm({
-      validateSchema: {
-        ...(mode === 'signup' && { name: userSchema.name }),
-        email: userSchema.email,
-        password: userSchema.password
-      },
-      resetOnSuccess: true
-    })
+  const schema = useMemo(() => {
+    return {
+      ...(mode === 'signup' && { name: userSchema.name }),
+      email: userSchema.email,
+      password: userSchema.password
+    }
+  }, [mode])
 
-  const onSubmit: HandleSubmitCallback = async (formData) => {
+  const { handleUseForm, errors, fetchState, message } = useForm(schema)
+  const { getFirstErrorTranslation } = useFormTranslation()
+
+  const onSubmit: HandleUseFormCallback<typeof schema> = async (
+    formData,
+    formElement
+  ) => {
     if (mode === 'signup') {
       try {
         await api.post(
           `/users/signup?redirectURI=${window.location.origin}/authentication/signin`,
           { ...formData, language: lang, theme }
         )
+        formElement.reset()
         return {
           type: 'success',
           value: 'authentication:success-signup'
@@ -72,7 +80,7 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
     } else {
       try {
         const { data } = await api.post<Tokens>('/users/signin', formData)
-        const authentication = new AuthenticationClass(data)
+        const authentication = new AuthenticationClass(data, true)
         authentication.signin()
         await router.push('/application')
         return null
@@ -97,14 +105,14 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
       <div className='pt-8 text-center font-paragraph text-lg'>
         {t('authentication:or')}
       </div>
-      <AuthenticationForm onSubmit={handleSubmit(onSubmit)}>
+      <AuthenticationForm onSubmit={handleUseForm(onSubmit)}>
         {mode === 'signup' && (
           <Input
             type='text'
             placeholder={t('common:name')}
             name='name'
             label={t('common:name')}
-            error={getErrorTranslation(errors.name)}
+            error={getFirstErrorTranslation(errors.name)}
           />
         )}
         <Input
@@ -112,7 +120,7 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
           placeholder='Email'
           name='email'
           label='Email'
-          error={getErrorTranslation(errors.email)}
+          error={getFirstErrorTranslation(errors.email)}
         />
         <Input
           type='password'
@@ -120,7 +128,7 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
           name='password'
           label={t('authentication:password')}
           showForgotPassword={mode === 'signin'}
-          error={getErrorTranslation(errors.password)}
+          error={getFirstErrorTranslation(errors.password)}
         />
         <Button data-cy='submit' className='mt-6 w-full' type='submit'>
           {t('authentication:submit')}
@@ -141,7 +149,11 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
           </Link>
         </p>
       </AuthenticationForm>
-      <FormState id='message' state={fetchState} message={message} />
+      <FormState
+        id='message'
+        state={fetchState}
+        message={message != null ? t(message) : undefined}
+      />
     </Main>
   )
 }

components/Authentication/AuthenticationForm.tsx

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

components/Authentication/AuthenticationSocialMedia.tsx

@@ -24,7 +24,7 @@ export const AuthenticationSocialMedia: React.FC = () => {
   useEffect(() => {
     const data = router.query
     if (isTokens(data)) {
-      const authentication = new Authentication(data)
+      const authentication = new Authentication(data, true)
       authentication.signin()
       router.push('/application').catch(() => {})
     }

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/isStringWithOnlyOneEmoji.test.ts

@@ -1,18 +0,0 @@
-import { isStringWithOnlyOneEmoji } from './isStringWithOnlyOneEmoji'
-
-describe('components/Emoji/isStringWithOnlyOneEmoji', () => {
-  it('returns true with a string with only one emoji', () => {
-    expect(isStringWithOnlyOneEmoji(':wave:')).toBeTruthy()
-    expect(isStringWithOnlyOneEmoji(':smile:')).toBeTruthy()
-  })
-
-  it('returns false with a string with multiple emoji or with text', () => {
-    expect(isStringWithOnlyOneEmoji(':wave: :smile:')).toBeFalsy()
-    expect(isStringWithOnlyOneEmoji(':wave: some text')).toBeFalsy()
-    expect(isStringWithOnlyOneEmoji('some text :wave:')).toBeFalsy()
-  })
-
-  it('returns false with a string without emoji', () => {
-    expect(isStringWithOnlyOneEmoji('some text')).toBeFalsy()
-  })
-})

components/ErrorPage/ErrorPage.test.tsx

@@ -1,15 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { ErrorPage } from '.'
-
-describe('<ErrorPage />', () => {
-  it('should render the message and statusCode', () => {
-    const messageContent = 'message content'
-    const statusCode = 404
-    const { getByText } = render(
-      <ErrorPage statusCode={statusCode} message={messageContent} />
-    )
-    expect(getByText(messageContent)).toBeInTheDocument()
-    expect(getByText(statusCode)).toBeInTheDocument()
-  })
-})

components/ErrorPage/index.ts

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

components/Footer/Footer.test.tsx

@@ -1,16 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Footer } from '.'
-
-describe('<Footer />', () => {
-  it('should render with appropriate link tag version', () => {
-    const version = '1.0.0'
-    const { getByText } = render(<Footer version={version} />)
-    const versionLink = getByText(`website v${version}`) as HTMLAnchorElement
-    expect(getByText('Thream')).toBeInTheDocument()
-    expect(versionLink).toBeInTheDocument()
-    expect(versionLink.href).toEqual(
-      `https://github.com/Thream/website/releases/tag/v${version}`
-    )
-  })
-})

components/Footer/VersionLink.tsx

@@ -8,6 +8,7 @@ export const VersionLink: React.FC<VersionLinkProps> = (props) => {
 
   return (
     <a
+      data-cy={`version-link-${repository}`}
       className='text-green-800 hover:underline dark:text-green-400'
       href={`https://github.com/Thream/${repository}/releases/tag/v${version}`}
       target='_blank'

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
@@ -21,31 +22,19 @@ export const Language: React.FC<LanguageProps> = (props) => {
     setHiddenMenu((oldHiddenMenu) => !oldHiddenMenu)
   }, [])
 
-  useEffect(() => {
-    const handleClickEvent = (event: MouseEvent): void => {
-      if (languageClickRef.current == null || event.target == null) {
-        return
-      }
-      if (!languageClickRef.current.contains(event.target as Node)) {
-        setHiddenMenu(true)
-      }
-    }
-
-    window.document.addEventListener('click', handleClickEvent)
-
-    return () => {
-      return window.removeEventListener('click', handleClickEvent)
-    }
-  }, [])
+  useClickOutsideAlerter(languageClickRef, () => setHiddenMenu(true))
 
   const handleLanguage = async (language: string): Promise<void> => {
     await setLanguage(language)
+    handleHiddenMenu()
   }
 
   return (
-    <div className='relative flex cursor-pointer flex-col items-center justify-center'>
+    <div
+      className='relative flex cursor-pointer flex-col items-center justify-center'
+      ref={languageClickRef}
+    >
       <div
-        ref={languageClickRef}
         data-cy='language-click'
         className='mr-5 flex items-center'
         onClick={handleHiddenMenu}

components/ScrollableBody/ScrollableBody.test.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { ScrollableBody } from './ScrollableBody'
-
-describe('<ScrollableBody />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<ScrollableBody />)
-    expect(baseElement).toBeTruthy()
-  })
-})

components/ScrollableBody/index.ts

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

components/design/Button/Button.test.tsx

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

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.test.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Checkbox } from './Checkbox'
-
-describe('<Checkbox />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<Checkbox label='Checkbox' />)
-    expect(baseElement).toBeTruthy()
-  })
-})

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/Divider/Divider.test.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Divider } from '.'
-
-describe('<Divider />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<Divider />)
-    expect(baseElement).toBeTruthy()
-  })
-})

components/design/FormState/FormState.test.tsx

@@ -1,34 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { FormState } from '.'
-
-describe('<FormState />', () => {
-  it('should return nothing if the state is idle', () => {
-    const { container } = render(<FormState state='idle' />)
-    expect(container.innerHTML.length).toEqual(0)
-  })
-
-  it('should return nothing if the message is null', () => {
-    const { container } = render(<FormState state='error' />)
-    expect(container.innerHTML.length).toEqual(0)
-  })
-
-  it('should render the <Loader /> if state is loading', () => {
-    const { getByTestId } = render(<FormState state='loading' />)
-    expect(getByTestId('loader')).toBeInTheDocument()
-  })
-
-  it('should render the success message if state is success', () => {
-    const message = 'Success Message'
-    const { getByText } = render(
-      <FormState state='success' message={message} />
-    )
-    expect(getByText(message)).toBeInTheDocument()
-  })
-
-  it('should render the error message if state is error', () => {
-    const message = 'Error Message'
-    const { getByText } = render(<FormState state='error' message={message} />)
-    expect(getByText(message)).toBeInTheDocument()
-  })
-})

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'> {
@@ -16,7 +16,7 @@ export const FormState: React.FC<FormStateProps> = (props) => {
 
   if (state === 'loading') {
     return (
-      <div data-testid='loader' className='mt-8 flex justify-center'>
+      <div data-cy='loader' className='mt-8 flex justify-center'>
         <Loader />
       </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.test.tsx

@@ -1,15 +0,0 @@
-import { render } from '@testing-library/react'
-import { CogIcon } from '@heroicons/react/solid'
-
-import { IconButton } from './IconButton'
-
-describe('<IconButton />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(
-      <IconButton className='h-10 w-10'>
-        <CogIcon />
-      </IconButton>
-    )
-    expect(baseElement).toBeTruthy()
-  })
-})

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.test.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { IconLink } from './IconLink'
-
-describe('<IconLink />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<IconLink href='' />)
-    expect(baseElement).toBeTruthy()
-  })
-})

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.test.tsx

@@ -1,52 +0,0 @@
-import { render, fireEvent } from '@testing-library/react'
-
-import { Input, getInputType } from '.'
-
-describe('<Input />', () => {
-  it('should render the label', () => {
-    const labelContent = 'label content'
-    const { getByText } = render(<Input label={labelContent} />)
-    expect(getByText(labelContent)).toBeInTheDocument()
-  })
-
-  it('should not render forgot password link', () => {
-    const { queryByTestId } = render(
-      <Input type='text' label='content' showForgotPassword />
-    )
-    const forgotPasswordLink = queryByTestId('forgot-password-link')
-    expect(forgotPasswordLink).not.toBeInTheDocument()
-  })
-
-  it('should render forgot password link', () => {
-    const { queryByTestId } = render(
-      <Input type='password' label='content' showForgotPassword />
-    )
-    const forgotPasswordLink = queryByTestId('forgot-password-link')
-    expect(forgotPasswordLink).toBeInTheDocument()
-  })
-
-  it('should not render the eye icon if the input is not of type "password"', () => {
-    const { queryByTestId } = render(<Input type='text' label='content' />)
-    const passwordEye = queryByTestId('password-eye')
-    expect(passwordEye).not.toBeInTheDocument()
-  })
-
-  it('should handlePassword with eye icon', async () => {
-    const { findByTestId } = render(<Input type='password' label='content' />)
-    const passwordEye = await findByTestId('password-eye')
-    const input = await findByTestId('input')
-    expect(input).toHaveAttribute('type', 'password')
-    fireEvent.click(passwordEye)
-    expect(input).toHaveAttribute('type', 'text')
-  })
-})
-
-describe('getInputType', () => {
-  it('should return `text`', () => {
-    expect(getInputType('password')).toEqual('text')
-  })
-
-  it('should return `password`', () => {
-    expect(getInputType('text')).toEqual('password')
-  })
-})

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'
 
@@ -47,7 +47,7 @@ export const Input: React.FC<InputProps> = (props) => {
             <Link href='/authentication/forgot-password'>
               <a
                 className='text-center font-headline text-xs text-green-800 hover:underline dark:text-green-400 sm:text-sm'
-                data-testid='forgot-password-link'
+                data-cy='forgot-password-link'
               >
                 {t('authentication:forgot-password')}
               </a>
@@ -56,7 +56,6 @@ export const Input: React.FC<InputProps> = (props) => {
         </div>
         <div className='relative mt-0'>
           <input
-            data-testid='input'
             data-cy={`input-${name ?? 'name'}`}
             className='h-11 w-full rounded-lg border border-transparent bg-[#f1f1f1] px-3 font-paragraph leading-10 text-[#2a2a2a] caret-green-600 focus:border focus:shadow-green focus:outline-none'
             {...rest}
@@ -66,7 +65,7 @@ export const Input: React.FC<InputProps> = (props) => {
           />
           {type === 'password' && (
             <div
-              data-testid='password-eye'
+              data-cy='password-eye'
               onClick={handlePassword}
               className='password-eye absolute cursor-pointer bg-[#f1f1f1] bg-cover'
             />

components/design/Loader/Loader.test.tsx

@@ -1,20 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Loader } from '.'
-
-describe('<Loader />', () => {
-  it('should render with correct width and height', async () => {
-    const size = 20
-    const { findByTestId } = render(<Loader width={size} height={size} />)
-    const progressSpinner = await findByTestId('progress-spinner')
-    expect(progressSpinner).toHaveStyle(`width: ${size}px`)
-    expect(progressSpinner).toHaveStyle(`height: ${size}px`)
-  })
-
-  it('should render with default width and height', async () => {
-    const { findByTestId } = render(<Loader />)
-    const progressSpinner = await findByTestId('progress-spinner')
-    expect(progressSpinner).toHaveStyle('width: 50px')
-    expect(progressSpinner).toHaveStyle('height: 50px')
-  })
-})

components/design/Loader/Loader.tsx

@@ -9,7 +9,7 @@ export const Loader: React.FC<LoaderProps> = (props) => {
 
   return (
     <div className={props.className}>
-      <div data-testid='progress-spinner' className='progress-spinner'>
+      <div data-cy='progress-spinner' className='progress-spinner'>
         <svg className='progress-spinner-svg' viewBox='25 25 50 50'>
           <circle
             className='progress-spinner-circle'

components/design/Main/Main.test.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Main } from '.'
-
-describe('<Main />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<Main />)
-    expect(baseElement).toBeTruthy()
-  })
-})

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.test.tsx

@@ -1,23 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { SocialMedia, SocialMediaButton } from '.'
-
-describe('<SocialMediaButton />', () => {
-  it('should render the social media', async () => {
-    const socialMedia: SocialMedia = 'Discord'
-    const { findByAltText } = render(
-      <SocialMediaButton socialMedia={socialMedia} />
-    )
-    const socialMediaButton = await findByAltText(socialMedia)
-    expect(socialMediaButton).toBeInTheDocument()
-  })
-
-  it('should render with a black text color with Google social media', async () => {
-    const socialMedia: SocialMedia = 'Google'
-    const { findByTestId } = render(
-      <SocialMediaButton socialMedia={socialMedia} />
-    )
-    const button = await findByTestId('social-media-button')
-    expect(button).toHaveStyle('color: #000')
-  })
-})

components/design/SocialMediaButton/SocialMediaButton.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 import Image from 'next/image'
-import classNames from 'classnames'
+import classNames from 'clsx'
 
 import { ProviderOAuth } from '../../../models/OAuth'
 
@@ -54,7 +54,6 @@ export const SocialMediaButton: React.FC<SocialMediaButtonProps> = (props) => {
   return (
     <>
       <button
-        data-testid='social-media-button'
         {...rest}
         className={classNames(className, 'button', givenClassName)}
       >

components/design/Textarea/Textarea.test.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Textarea } from './Textarea'
-
-describe('<Textarea />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<Textarea label='Textarea' />)
-    expect(baseElement).toBeTruthy()
-  })
-})

contexts/Channels.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect } from 'react'
+import { createContext, useContext, useEffect, useMemo } from 'react'
 import { useRouter } from 'next/router'
 
 import { NextPage, usePagination } from '../hooks/usePagination'
@@ -6,6 +6,7 @@ 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'
 
 export interface Channels {
   channels: Channel[]
@@ -27,6 +28,10 @@ export const ChannelsProvider: React.FC<
   const router = useRouter()
   const { authentication } = useAuthentication()
 
+  const cacheKey = useMemo<CacheKey>(() => {
+    return `${path.guildId}-${CHANNELS_CACHE_KEY}`
+  }, [path.guildId])
+
   const {
     items: channels,
     hasMore,
@@ -35,14 +40,15 @@ export const ChannelsProvider: React.FC<
     setItems
   } = usePagination<Channel>({
     api: authentication.api,
-    url: `/guilds/${path.guildId}/channels`
+    url: `/guilds/${path.guildId}/channels`,
+    cacheKey
   })
 
   useEffect(() => {
-    authentication.socket.on(
+    authentication?.socket?.on(
       'channels',
       async (data: SocketData<ChannelWithDefaultChannelId>) => {
-        handleSocketData({ data, setItems })
+        handleSocketData({ data, setItems, cacheKey })
         if (data.action === 'delete') {
           await router.push(
             `/application/${path.guildId}/${data.item.defaultChannelId}`
@@ -52,9 +58,9 @@ export const ChannelsProvider: React.FC<
     )
 
     return () => {
-      authentication.socket.off('channels')
+      authentication?.socket?.off('channels')
     }
-  }, [authentication.socket, path.guildId, router, setItems])
+  }, [authentication.socket, path.guildId, router, setItems, cacheKey])
 
   useEffect(() => {
     resetPagination()
@@ -71,7 +77,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

@@ -11,9 +11,7 @@ export interface GuildMember {
   member: Member
 }
 
-export interface GuildMemberResult extends GuildMember {
-  setGuildMember: React.Dispatch<React.SetStateAction<GuildMember>>
-}
+export interface GuildMemberResult extends GuildMember {}
 
 export interface GuildMemberProps {
   guildMember: GuildMember
@@ -47,7 +45,7 @@ export const GuildMemberProvider: React.FC<
   }, [path, authentication.api])
 
   useEffect(() => {
-    authentication.socket.on(
+    authentication?.socket?.on(
       'guilds',
       async (data: SocketData<GuildWithDefaultChannelId>) => {
         if (data.item.id === path.guildId) {
@@ -72,15 +70,14 @@ export const GuildMemberProvider: React.FC<
     )
 
     return () => {
-      authentication.socket.off('guilds')
+      authentication?.socket?.off('guilds')
     }
   }, [authentication.socket, path.guildId, router])
 
   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

@@ -4,6 +4,7 @@ import { NextPage, usePagination } from '../hooks/usePagination'
 import { useAuthentication } from '../tools/authentication'
 import { GuildWithDefaultChannelId } from '../models/Guild'
 import { handleSocketData, SocketData } from '../tools/handleSocketData'
+import { GUILDS_CACHE_KEY } from '../tools/cache'
 
 export interface Guilds {
   guilds: GuildWithDefaultChannelId[]
@@ -29,19 +30,20 @@ export const GuildsProvider: React.FC<React.PropsWithChildren<{}>> = (
     setItems
   } = usePagination<GuildWithDefaultChannelId>({
     api: authentication.api,
-    url: '/guilds'
+    url: '/guilds',
+    cacheKey: GUILDS_CACHE_KEY
   })
 
   useEffect(() => {
-    authentication.socket.on(
+    authentication?.socket?.on(
       'guilds',
       (data: SocketData<GuildWithDefaultChannelId>) => {
-        handleSocketData({ data, setItems })
+        handleSocketData({ data, setItems, cacheKey: GUILDS_CACHE_KEY })
       }
     )
 
     return () => {
-      authentication.socket.off('guilds')
+      authentication?.socket?.off('guilds')
     }
   }, [authentication.socket, setItems])
 
@@ -60,7 +62,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,4 +1,4 @@
-import { createContext, useContext, useEffect } from 'react'
+import { createContext, useContext, useEffect, useMemo } from 'react'
 
 import { NextPage, usePagination } from '../hooks/usePagination'
 import { useAuthentication } from '../tools/authentication'
@@ -6,6 +6,7 @@ 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'
 
 export interface Members {
   members: MemberWithPublicUser[]
@@ -27,6 +28,10 @@ export const MembersProviders: React.FC<
 
   const { authentication } = useAuthentication()
 
+  const cacheKey = useMemo<CacheKey>(() => {
+    return `${path.guildId}-${MEMBERS_CACHE_KEY}`
+  }, [path.guildId])
+
   const {
     items: members,
     hasMore,
@@ -35,18 +40,19 @@ export const MembersProviders: React.FC<
     setItems
   } = usePagination<MemberWithPublicUser>({
     api: authentication.api,
-    url: `/guilds/${path.guildId}/members`
+    url: `/guilds/${path.guildId}/members`,
+    cacheKey
   })
 
   useEffect(() => {
-    authentication.socket.on(
+    authentication?.socket?.on(
       'members',
       (data: SocketData<MemberWithPublicUser>) => {
-        handleSocketData({ data, setItems })
+        handleSocketData({ data, setItems, cacheKey })
       }
     )
 
-    authentication.socket.on('users', (data: SocketData<User>) => {
+    authentication?.socket?.on('users', (data: SocketData<User>) => {
       setItems((oldItems) => {
         const newItems = [...oldItems]
         switch (data.action) {
@@ -65,10 +71,10 @@ export const MembersProviders: React.FC<
     })
 
     return () => {
-      authentication.socket.off('members')
-      authentication.socket.off('users')
+      authentication?.socket?.off('members')
+      authentication?.socket?.off('users')
     }
-  }, [authentication.socket, setItems])
+  }, [authentication.socket, setItems, cacheKey])
 
   useEffect(() => {
     resetPagination()
@@ -85,7 +91,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,10 +1,11 @@
-import { createContext, useContext, useEffect } from 'react'
+import { createContext, useContext, useEffect, useMemo } from 'react'
 
 import { NextPage, 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'
 
 export interface Messages {
   messages: MessageWithMember[]
@@ -25,6 +26,10 @@ export const MessagesProvider: React.FC<
   const { path, children } = props
   const { authentication, user } = useAuthentication()
 
+  const cacheKey = useMemo<CacheKey>(() => {
+    return `${path.channelId}-${MESSAGES_CACHE_KEY}`
+  }, [path.channelId])
+
   const {
     items: messages,
     hasMore,
@@ -34,11 +39,12 @@ export const MessagesProvider: React.FC<
   } = usePagination<MessageWithMember>({
     api: authentication.api,
     url: `/channels/${path.channelId}/messages`,
-    inverse: true
+    inverse: true,
+    cacheKey
   })
 
   useEffect(() => {
-    authentication.socket.on(
+    authentication?.socket?.on(
       'messages',
       (data: SocketData<MessageWithMember>) => {
         if (data.item.channelId === path.channelId) {
@@ -48,7 +54,7 @@ export const MessagesProvider: React.FC<
           const isAtBottom =
             messagesDiv.scrollHeight - messagesDiv.scrollTop <=
             messagesDiv.clientHeight
-          handleSocketData({ data, setItems })
+          handleSocketData({ data, setItems, cacheKey })
           if (
             data.action === 'create' &&
             (isAtBottom || data.item.member.userId === user.id)
@@ -60,9 +66,9 @@ export const MessagesProvider: React.FC<
     )
 
     return () => {
-      authentication.socket.off('messages')
+      authentication?.socket?.off('messages')
     }
-  }, [authentication.socket, setItems, path, user.id])
+  }, [authentication.socket, setItems, path, user.id, cacheKey])
 
   useEffect(() => {
     resetPagination()
@@ -84,7 +90,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

@@ -0,0 +1,72 @@
+import path from 'node:path'
+
+import { defineConfig } from 'cypress'
+import { getLocal } from 'mockttp'
+import type { Mockttp } from 'mockttp'
+
+import { API_DEFAULT_PORT } from './tools/api'
+import { Handlers, Method } from './cypress/fixtures/handler'
+
+const UPLOADS_FIXTURES_DIRECTORY = path.join(
+  process.cwd(),
+  'cypress',
+  'fixtures',
+  'uploads'
+)
+
+let server: Mockttp | null = null
+
+export default defineConfig({
+  fixturesFolder: false,
+  video: false,
+  downloadsFolder: undefined,
+  screenshotOnRunFailure: false,
+
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    supportFile: false,
+    setupNodeEvents(on, config) {
+      on('task', {
+        async startMockServer(handlers: Handlers): Promise<null> {
+          server = getLocal({
+            cors: true
+          })
+          await server.start(API_DEFAULT_PORT)
+          for (const handler of handlers) {
+            const { isFile = false } = handler.response
+            const method = handler.method.toLowerCase() as Lowercase<Method>
+            if (isFile) {
+              await server[method](handler.url).thenFromFile(
+                handler.response.statusCode,
+                path.join(UPLOADS_FIXTURES_DIRECTORY, ...handler.response.body)
+              )
+            } else {
+              await server[method](handler.url).thenJson(
+                handler.response.statusCode,
+                handler.response.body
+              )
+            }
+          }
+          return null
+        },
+
+        async stopMockServer(): Promise<null> {
+          if (server != null) {
+            await server.stop()
+            server = null
+          }
+          return null
+        }
+      })
+
+      return config
+    }
+  },
+
+  component: {
+    devServer: {
+      framework: 'next',
+      bundler: 'webpack'
+    }
+  }
+})

cypress.json

@@ -1,6 +0,0 @@
-{
-  "baseUrl": "http://localhost:3000",
-  "supportFile": false,
-  "video": false,
-  "screenshotOnRunFailure": false
-}

cypress/component/components/Emoji/isStringWithOnlyOneEmoji.cy.ts

@@ -0,0 +1,18 @@
+import { isStringWithOnlyOneEmoji } from '../../../../components/Emoji/isStringWithOnlyOneEmoji'
+
+describe('components/Emoji/isStringWithOnlyOneEmoji', () => {
+  it('returns true with a string with only one emoji', () => {
+    expect(isStringWithOnlyOneEmoji(':wave:')).equal(true)
+    expect(isStringWithOnlyOneEmoji(':smile:')).equal(true)
+  })
+
+  it('returns false with a string with multiple emoji or with text', () => {
+    expect(isStringWithOnlyOneEmoji(':wave: :smile:')).equal(false)
+    expect(isStringWithOnlyOneEmoji(':wave: some text')).equal(false)
+    expect(isStringWithOnlyOneEmoji('some text :wave:')).equal(false)
+  })
+
+  it('returns false with a string without emoji', () => {
+    expect(isStringWithOnlyOneEmoji('some text')).equal(false)
+  })
+})

cypress/component/components/Footer.cy.tsx

@@ -0,0 +1,16 @@
+import { Footer } from '../../../components/Footer'
+
+describe('<Footer />', () => {
+  it('should render with appropriate link tag version', () => {
+    const version = '1.0.0'
+    cy.mount(<Footer version={version} />)
+    cy.contains('Thream')
+      .get('[data-cy=version-link-website]')
+      .should('have.text', `website v${version}`)
+      .should(
+        'have.attr',
+        'href',
+        `https://github.com/Thream/website/releases/tag/v${version}`
+      )
+  })
+})

cypress/component/components/design/FormState.cy.tsx

@@ -0,0 +1,35 @@
+import { FormState } from '../../../../components/design/FormState'
+
+describe('<FormState />', () => {
+  it('should return nothing if the state is idle', () => {
+    cy.mount(<FormState state='idle' />)
+      .get('[data-cy-root]')
+      .should('be.empty')
+  })
+
+  it('should return nothing if the message is null', () => {
+    cy.mount(<FormState state='error' />)
+      .get('[data-cy-root]')
+      .should('be.empty')
+  })
+
+  it('should render the <Loader /> if state is loading', () => {
+    cy.mount(<FormState state='loading' />)
+      .get('[data-cy=loader]')
+      .should('be.visible')
+  })
+
+  it('should render the success message if state is success', () => {
+    const message = 'Success Message'
+    cy.mount(<FormState state='success' message={message} id='success' />)
+      .get('#success')
+      .contains(message)
+  })
+
+  it('should render the error message if state is error', () => {
+    const message = 'Error Message'
+    cy.mount(<FormState state='error' message={message} id='error' />)
+      .get('#error')
+      .contains(message)
+  })
+})

cypress/component/components/design/Input.cy.tsx

@@ -0,0 +1,48 @@
+import { Input, getInputType } from '../../../../components/design/Input'
+
+describe('<Input />', () => {
+  it('should render the label', () => {
+    const labelContent = 'label content'
+    cy.mount(<Input label={labelContent} />)
+      .get('label')
+      .should('have.text', labelContent)
+  })
+
+  it('should not render forgot password link', () => {
+    cy.mount(<Input type='text' label='content' showForgotPassword />)
+      .get('[data-cy=forgot-password-link]')
+      .should('not.exist')
+  })
+
+  it('should render forgot password link', () => {
+    cy.mount(<Input type='password' label='content' showForgotPassword />)
+      .get('[data-cy=forgot-password-link]')
+      .should('exist')
+  })
+
+  it('should not render the eye icon if the input is not of type "password"', () => {
+    cy.mount(<Input type='text' label='content' />)
+      .get('[data-cy=password-eye]')
+      .should('not.exist')
+  })
+
+  it('should handlePassword with eye icon', async () => {
+    cy.mount(<Input type='password' label='content' />)
+      .get('input')
+      .should('have.attr', 'type', 'password')
+      .get('[data-cy=password-eye]')
+      .click()
+      .get('input')
+      .should('have.attr', 'type', 'text')
+  })
+
+  describe('getInputType', () => {
+    it('should return `text`', () => {
+      expect(getInputType('password')).equal('text')
+    })
+
+    it('should return `password`', () => {
+      expect(getInputType('text')).equal('password')
+    })
+  })
+})

cypress/component/tools/utils/capitalize.cy.ts

@@ -0,0 +1,10 @@
+import { capitalize } from '../../../../tools/utils/capitalize'
+
+describe('tools/utils/capitalize', () => {
+  it('should capitalize the first letter of a string', () => {
+    expect(capitalize('hello')).equal('Hello')
+    expect(capitalize('HeLlo')).equal('HeLlo')
+    expect(capitalize('member(s)')).equal('Member(s)')
+    expect(capitalize('Member(s)')).equal('Member(s)')
+  })
+})

cypress/e2e/common/Header.cy.ts

@@ -49,3 +49,5 @@ describe('Common > Header', () => {
     })
   })
 })
+
+export {}

cypress/e2e/common/application/authentication.cy.ts

@@ -45,3 +45,5 @@ describe('Common > application/authentication', () => {
     }
   })
 })
+
+export {}

cypress/e2e/pages/400.cy.ts

@@ -7,3 +7,5 @@ describe('Page > /404', () => {
     cy.get('[data-cy=status-code]').contains('404')
   })
 })
+
+export {}

cypress/e2e/pages/500.cy.ts

@@ -7,3 +7,5 @@ describe('Page > /500', () => {
     cy.get('[data-cy=status-code]').contains('500')
   })
 })
+
+export {}

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,7 +263,9 @@ 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')
   })
 })
+
+export {}

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,7 +128,9 @@ 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')
   })
 })
+
+export {}

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,7 +68,9 @@ 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')
   })
 })
+
+export {}

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,7 +98,9 @@ describe('Pages > /application/[guildId]/settings', () => {
     cy.visit(`/application/123/settings`, {
       failOnStatusCode: false
     })
-      .location('pathname')
-      .should('eq', '/404')
+      .get('[data-cy=status-code]')
+      .contains('404')
   })
 })
+
+export {}

cypress/e2e/pages/application/guilds/create.cy.ts

@@ -42,3 +42,5 @@ describe('Pages > /application/guilds/create', () => {
     cy.get('#message').should('have.text', 'Error: Internal Server Error.')
   })
 })
+
+export {}

cypress/e2e/pages/application/guilds/join.cy.ts

@@ -75,6 +75,8 @@ describe('Pages > /application/guilds/join', () => {
     )
     cy.visit('/application/guilds/join')
     cy.get('.guilds-public-list').children().should('have.length', 1)
-    cy.get('[data-testid=progress-spinner]').should('be.visible')
+    cy.get('[data-cy=progress-spinner]').should('be.visible')
   })
 })
+
+export {}

cypress/e2e/pages/application/index.cy.ts

@@ -30,3 +30,5 @@ describe('Pages > /application', () => {
       .should('eq', '/application/guilds/join')
   })
 })
+
+export {}

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

@@ -29,7 +29,9 @@ 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')
   })
 })
+
+export {}

cypress/e2e/pages/authentication/forgot-password.cy.ts

@@ -35,3 +35,5 @@ describe('Pages > /authentication/forgot-password', () => {
     )
   })
 })
+
+export {}

cypress/e2e/pages/authentication/reset-password.cy.ts

@@ -46,3 +46,5 @@ describe('Pages > /authentication/reset-password', () => {
     )
   })
 })
+
+export {}