chore(release): 1.3.5 [skip ci]

fixes #24

.devcontainer/Dockerfile

@@ -1,2 +1 @@
-ARG VARIANT="16"
-FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
+FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:18

.devcontainer/devcontainer.json

@@ -3,20 +3,22 @@
   "dockerComposeFile": "./docker-compose.yml",
   "service": "workspace",
   "workspaceFolder": "/workspace",
-  "settings": {
-    "remote.autoForwardPorts": false
+  "customizations": {
+    "vscode": {
+      "settings": {
+        "remote.autoForwardPorts": false
+      },
+      "extensions": [
+        "editorconfig.editorconfig",
+        "esbenp.prettier-vscode",
+        "dbaeumer.vscode-eslint",
+        "bradlc.vscode-tailwindcss",
+        "mikestead.dotenv",
+        "davidanson.vscode-markdownlint",
+        "ms-azuretools.vscode-docker"
+      ]
+    }
   },
-  "extensions": [
-    "editorconfig.editorconfig",
-    "esbenp.prettier-vscode",
-    "dbaeumer.vscode-eslint",
-    "divlo.vscode-styled-jsx-syntax",
-    "divlo.vscode-styled-jsx-languageserver",
-    "bradlc.vscode-tailwindcss",
-    "mikestead.dotenv",
-    "davidanson.vscode-markdownlint",
-    "ms-azuretools.vscode-docker"
-  ],
   "forwardPorts": [3000],
   "postAttachCommand": ["npm", "install"],
   "remoteUser": "node"

.dockerignore

@@ -1,12 +1,5 @@
-.vscode
-.git
-.env
+.*
+!.npmrc
 build
-.next
 coverage
 node_modules
-tmp
-temp
-.DS_Store
-.lighthouseci
-.vercel

.env.example

@@ -1,3 +1,3 @@
 COMPOSE_PROJECT_NAME=thream-website
-NEXT_PUBLIC_API_URL=http://localhost:8080
+NEXT_PUBLIC_API_URL=http://127.0.0.1:8080
 PORT=3000

.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/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +1,6 @@
 <!-- Please first discuss the change you wish to make via issue before making a change. It might avoid a waste of your time. -->
 
-## What changes this PR introduce?
+# What changes this PR introduce?
 
 ## List any relevant issue numbers
 

.github/workflows/analyze.yml

@@ -16,12 +16,12 @@ jobs:
         language: ['javascript']
 
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.5.2'
 
       - name: 'Initialize CodeQL'
-        uses: 'github/codeql-action/init@v1'
+        uses: 'github/codeql-action/init@v2'
         with:
           languages: ${{ matrix.language }}
 
       - name: 'Perform CodeQL Analysis'
-        uses: 'github/codeql-action/analyze@v1'
+        uses: 'github/codeql-action/analyze@v2'

.github/workflows/build.yml

@@ -10,16 +10,16 @@ jobs:
   build:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.5.2'
 
-      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+      - name: 'Setup Node.js'
+        uses: 'actions/setup-node@v3.6.0'
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           cache: 'npm'
 
-      - name: 'Install'
-        run: 'npm install'
+      - name: 'Install dependencies'
+        run: 'npm clean-install'
 
       - name: 'Build'
         run: 'npm run build'

.github/workflows/lint.yml

@@ -10,16 +10,16 @@ jobs:
   lint:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.5.2'
 
-      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+      - name: 'Setup Node.js'
+        uses: 'actions/setup-node@v3.6.0'
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           cache: 'npm'
 
-      - name: 'Install'
-        run: 'npm install'
+      - name: 'Install dependencies'
+        run: 'npm clean-install'
 
       - name: 'lint:commit'
         run: 'npm run lint:commit -- --to "${{ github.sha }}"'
@@ -30,8 +30,8 @@ jobs:
       - name: 'lint:markdown'
         run: 'npm run lint:markdown'
 
-      - name: 'lint:typescript'
-        run: 'npm run lint:typescript'
+      - name: 'lint:eslint'
+        run: 'npm run lint:eslint'
 
       - name: 'lint:prettier'
         run: 'npm run lint:prettier'
@@ -40,8 +40,3 @@ jobs:
         uses: 'dotenv-linter/action-dotenv-linter@v2'
         with:
           github_token: ${{ secrets.github_token }}
-
-      - name: 'lint:docker'
-        uses: 'hadolint/hadolint-action@v1.6.0'
-        with:
-          dockerfile: './Dockerfile'

.github/workflows/release.yml

@@ -8,26 +8,26 @@ jobs:
   release:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.5.2'
         with:
           fetch-depth: 0
           persist-credentials: false
 
       - name: 'Import GPG key'
-        uses: 'crazy-max/ghaction-import-gpg@v4'
+        uses: 'crazy-max/ghaction-import-gpg@v5.3.0'
         with:
           gpg_private_key: ${{ secrets.GPG_PRIVATE_KEY }}
           git_user_signingkey: true
           git_commit_gpgsign: true
 
-      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.4.0'
+      - name: 'Setup Node.js'
+        uses: 'actions/setup-node@v3.6.0'
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           cache: 'npm'
 
-      - name: 'Install'
-        run: 'npm install'
+      - name: 'Install dependencies'
+        run: 'npm clean-install'
 
       - name: 'Release'
         run: 'npm run release'

.github/workflows/test.yml

@@ -10,58 +10,39 @@ jobs:
   test-unit:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.5.2'
 
-      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+      - name: 'Setup Node.js'
+        uses: 'actions/setup-node@v3.6.0'
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           cache: 'npm'
 
-      - name: 'Install'
-        run: 'npm install'
+      - name: 'Install dependencies'
+        run: 'npm clean-install'
 
       - name: 'Unit Test'
         run: 'npm run test:unit'
 
-  test-lighthouse:
-    runs-on: 'ubuntu-latest'
-    steps:
-      - uses: 'actions/checkout@v3.0.0'
-
-      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
-        with:
-          node-version: '16.x'
-          cache: 'npm'
-
-      - name: 'Install'
-        run: 'npm install'
-
-      - name: 'Build'
-        run: 'npm run build'
-
-      - name: 'Lighthouse'
-        run: 'npm run test:lighthouse'
-        env:
-          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
-
   test-e2e:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.5.0'
 
-      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+      - name: 'Setup Node.js'
+        uses: 'actions/setup-node@v3.6.0'
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           cache: 'npm'
 
-      - name: 'Install'
-        run: 'npm install'
+      - name: 'Install dependencies'
+        run: 'npm clean-install'
 
       - name: 'Build'
         run: 'npm run build'
 
+      - name: 'html-w3c-validator'
+        run: 'npm run test:html-w3c-validator'
+
       - name: 'End To End (e2e) Test'
         run: 'npm run test:e2e'

.gitignore

@@ -49,3 +49,8 @@ npm-debug.log*
 .DS_Store
 .lighthouseci
 .vercel
+*.hbs
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.html-w3c-validatorrc.json

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

.lighthouserc.json

@@ -1,31 +0,0 @@
-{
-  "ci": {
-    "collect": {
-      "startServerCommand": "npm run start",
-      "startServerReadyPattern": "ready on",
-      "startServerReadyTimeout": 20000,
-      "url": [
-        "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"
-      ],
-      "numberOfRuns": 1
-    },
-    "assert": {
-      "preset": "lighthouse:recommended",
-      "assertions": {
-        "image-size-responsive": "warning",
-        "unsized-images": "warning",
-        "csp-xss": "warning",
-        "non-composited-animations": "warning",
-        "unused-javascript": "warning"
-      }
-    },
-    "upload": {
-      "target": "temporary-public-storage"
-    },
-    "server": {}
-  }
-}

.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": {
+    "extends": "markdownlint/style/prettier",
+    "relative-links": true,
+    "default": true,
+    "MD033": false
+  },
+  "globs": ["**/*.{md,mdx}"],
+  "ignores": ["**/node_modules"],
+  "customRules": ["markdownlint-rule-relative-links"]
+}

.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

.vscode/extensions.json

@@ -3,8 +3,6 @@
     "editorconfig.editorconfig",
     "esbenp.prettier-vscode",
     "dbaeumer.vscode-eslint",
-    "divlo.vscode-styled-jsx-syntax",
-    "divlo.vscode-styled-jsx-languageserver",
     "bradlc.vscode-tailwindcss",
     "mikestead.dotenv",
     "davidanson.vscode-markdownlint",

.vscode/settings.json

@@ -6,5 +6,9 @@
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": true
-  }
+  },
+  "eslint.options": {
+    "ignorePath": ".gitignore"
+  },
+  "prettier.ignorePath": ".gitignore"
 }

CODE_OF_CONDUCT.md

@@ -60,7 +60,7 @@ representative at an online or offline event.
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
 reported to the community leaders responsible for enforcement at
-contact@divlo.fr.
+<contact@divlo.fr>.
 All complaints will be reviewed and investigated promptly and fairly.
 
 All community leaders are obligated to respect the privacy and security of the

CONTRIBUTING.md

@@ -16,6 +16,7 @@ All work on **Thream/website** happens directly on [GitHub](https://github.com/T
 - Suggest a new feature idea.
 - Correct spelling errors, improvements or additions to documentation files.
 - Improve structure/format/performance/refactor/tests of the code.
+- [Add translations](#add-a-translation).
 
 ## Pull Requests
 
@@ -29,31 +30,7 @@ If you're adding new features to **Thream/website**, please include tests.
 
 ## Commits
 
-The commit message guidelines respect
-[@commitlint/config-conventional](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional)
-and [Semantic Versioning](https://semver.org/) for releases.
-
-### Types
-
-Types define which kind of changes you made to the project.
-
-| Types    | Description                                                                                                  |
-| -------- | ------------------------------------------------------------------------------------------------------------ |
-| feat     | A new feature.                                                                                               |
-| fix      | A bug fix.                                                                                                   |
-| docs     | Documentation only changes.                                                                                  |
-| style    | Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc).      |
-| refactor | A code change that neither fixes a bug nor adds a feature.                                                   |
-| perf     | A code change that improves performance.                                                                     |
-| test     | Adding missing tests or correcting existing tests.                                                           |
-| build    | Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm).         |
-| ci       | Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs). |
-| chore    | Other changes that don't modify src or test files.                                                           |
-| revert   | Reverts a previous commit.                                                                                   |
-
-### Scopes
-
-Scopes define what part of the code changed.
+The commit message guidelines adheres to [Conventional Commits](https://www.conventionalcommits.org/) and [Semantic Versioning](https://semver.org/) for releases.
 
 ### Examples
 
@@ -61,3 +38,15 @@ Scopes define what part of the code changed.
 git commit -m "feat(components): add Button"
 git commit -m "docs(readme): update installation process"
 ```
+
+## Add a translation
+
+[Reference issue](https://github.com/Thream/website/issues/24)
+
+Feel free to contribute to **Thream** and add new languages, we would appreciate your help!
+
+To add a new language:
+
+- `npm install`
+- `npm run generate`
+- Start editing JSON files with the translation in `locales/{{locale}}` (e.g: `locales/en`)

Dockerfile

@@ -1,23 +1,21 @@
-FROM node:16.15.0 AS dependencies
-WORKDIR /usr/src/app
+FROM node:18.16.0 AS builder-dependencies
+WORKDIR /usr/src/application
 COPY ./package*.json ./
 RUN npm install
 
-FROM node:16.15.0 AS builder
-WORKDIR /usr/src/app
+FROM node:18.16.0 AS builder
+WORKDIR /usr/src/application
+COPY --from=builder-dependencies /usr/src/application/node_modules ./node_modules
 COPY ./ ./
-COPY --from=dependencies /usr/src/app/node_modules ./node_modules
 RUN npm run build
 
-FROM node:16.15.0 AS runner
-WORKDIR /usr/src/app
+FROM gcr.io/distroless/nodejs18-debian11:latest AS runner
+WORKDIR /usr/src/application
 ENV NODE_ENV=production
-COPY --from=builder /usr/src/app/next.config.js ./next.config.js
-COPY --from=builder /usr/src/app/public ./public
-COPY --from=builder /usr/src/app/.next ./.next
-COPY --from=builder /usr/src/app/i18n.json ./i18n.json
-COPY --from=builder /usr/src/app/locales ./locales
-COPY --from=builder /usr/src/app/pages ./pages
-COPY --from=builder /usr/src/app/node_modules ./node_modules
-RUN npx next telemetry disable
-CMD ["node_modules/.bin/next", "start", "--port", "${PORT}"]
+ENV NEXT_TELEMETRY_DISABLED=1
+COPY --from=builder /usr/src/application/.next/standalone ./
+COPY --from=builder /usr/src/application/.next/static ./.next/static
+COPY --from=builder /usr/src/application/public ./public
+COPY --from=builder /usr/src/application/locales ./locales
+COPY --from=builder /usr/src/application/next.config.js ./next.config.js
+CMD ["./server.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.6](https://github.com/Thream/api/releases/tag/v1.2.6).
 
 ## ⚙️ Getting Started
 
@@ -61,7 +61,7 @@ docker compose up --build
 
 #### Services started
 
-- website : `http://localhost:3000`
+- `website`: <http://127.0.0.1:3000>
 
 ## 💡 Contributing
 

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>
@@ -180,7 +185,7 @@ export const Application: React.FC<
           visible={visibleSidebars.left}
           isMobile={isMobile}
         >
-          <div className='top-0 left-0 z-50 flex min-w-[92px] flex-col space-y-4 border-r-2 border-gray-500 bg-gray-200 py-2 dark:border-white/20 dark:bg-gray-800'>
+          <div className='left-0 top-0 z-50 flex min-w-[92px] flex-col space-y-4 border-r-2 border-gray-500 bg-gray-200 py-2 dark:border-white/20 dark:bg-gray-800'>
             <IconLink
               href={`/application/users/settings`}
               selected={path === `/application/users/settings`}

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,31 +46,25 @@ 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) {
       return {
         type: 'error',
-        value: 'errors:server-error'
+        message: 'errors:server-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

@@ -0,0 +1,54 @@
+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 type { GuildsChannelsPath } from '../Application'
+import type { Channel as ChannelType } from '../../../models/Channel'
+import { useGuildMember } from '../../../contexts/GuildMember'
+import { IconButton } from '../../design/IconButton'
+
+export interface ChannelProps {
+  path: GuildsChannelsPath
+  channel: ChannelType
+  selected?: boolean
+}
+
+const ChannelMemo: React.FC<ChannelProps> = (props) => {
+  const { channel, path, selected = false } = props
+  const router = useRouter()
+
+  const { member } = useGuildMember()
+
+  return (
+    <Link
+      href={`/application/${path.guildId}/${channel.id}`}
+      className={classNames(
+        'group relative mx-3 my-3 flex items-center justify-between overflow-hidden rounded-lg py-2 text-sm transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-600',
+        {
+          'font-semibold text-green-800 dark:text-green-400': selected
+        }
+      )}
+    >
+      <span className='max-[315px] ml-2 mr-4 break-all' data-cy='channel-name'>
+        # {channel.name}
+      </span>
+      {member.isOwner && (
+        <IconButton
+          onClick={async () => {
+            await router.push(
+              `/application/${channel.guildId}/${channel.id}/settings`
+            )
+          }}
+          className='bg-unherit absolute -right-10 h-full w-8 transition-all group-hover:right-0 group-hover:shadow-lg dark:group-hover:bg-gray-600'
+          title='Settings'
+        >
+          <CogIcon height={20} width={20} />
+        </IconButton>
+      )}
+    </Link>
+  )
+}
+
+export const Channel = memo(ChannelMemo)

components/Application/Channels/Channel/Channel.tsx

@@ -1,55 +0,0 @@
-import classNames from 'classnames'
-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'
-
-export interface ChannelProps {
-  path: GuildsChannelsPath
-  channel: ChannelType
-  selected?: boolean
-}
-
-export const Channel: React.FC<ChannelProps> = (props) => {
-  const { channel, path, selected = false } = props
-  const router = useRouter()
-
-  const { member } = useGuildMember()
-
-  return (
-    <Link href={`/application/${path.guildId}/${channel.id}`}>
-      <a
-        className={classNames(
-          'group relative my-3 mx-3 flex items-center justify-between overflow-hidden rounded-lg py-2 text-sm transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-600',
-          {
-            'font-semibold text-green-800 dark:text-green-400': selected
-          }
-        )}
-      >
-        <span
-          className='max-[315px] ml-2 mr-4 break-all'
-          data-cy='channel-name'
-        >
-          # {channel.name}
-        </span>
-        {member.isOwner && (
-          <IconButton
-            onClick={async () => {
-              await router.push(
-                `/application/${channel.guildId}/${channel.id}/settings`
-              )
-            }}
-            className='bg-unherit absolute -right-10 h-full w-8 transition-all group-hover:right-0 group-hover:shadow-lg dark:group-hover:bg-gray-600'
-            title='Settings'
-          >
-            <CogIcon height={20} width={20} />
-          </IconButton>
-        )}
-      </a>
-    </Link>
-  )
-}

components/Application/Channels/Channel/index.ts

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

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()
   }
 
@@ -25,7 +27,7 @@ export const ConfirmPopup: React.FC<ConfirmPopupProps> = ({ ...props }) => {
     <div className={props.className}>
       <Loader
         className={classNames(
-          'absolute top-1/2 left-1/2 scale-0 transition-all',
+          'absolute left-1/2 top-1/2 scale-0 transition-all',
           {
             'scale-100': isLoading
           }

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`,
@@ -37,20 +38,20 @@ export const CreateChannel: React.FC = () => {
     } catch (error) {
       return {
         type: 'error',
-        value: 'errors:server-error'
+        message: 'errors:server-error'
       }
     }
   }
 
   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,59 +1,64 @@
 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)
+  const { getFirstErrorTranslation } = useFormTranslation()
 
   const { authentication } = useAuthentication()
 
-  const onSubmit: HandleSubmitCallback = async (formData) => {
+  const onSubmit: HandleUseFormCallback<typeof schema> = async (formData) => {
     try {
       const { data } = await authentication.api.post<
         any,
         AxiosResponse<{ guild: GuildComplete }>
       >('/guilds', { name: formData.name, description: formData.description })
       const guildId = data.guild.id
-      const channelId = data.guild.channels[0].id
+      const channel = data.guild.channels[0]
+      if (channel == null) {
+        throw new Error('No channel found')
+      }
+      const channelId = channel.id
       await router.push(`/application/${guildId}/${channelId}`)
       return null
     } catch (error) {
       return {
         type: 'error',
-        value: 'errors:server-error'
+        message: 'errors:server-error'
       }
     }
   }
 
   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 +69,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
@@ -28,20 +28,24 @@ export const GuildLeftSidebar: React.FC<GuildLeftSidebarProps> = (props) => {
       <Divider />
       <div className='mb-1 flex items-center justify-center space-x-6 p-2'>
         {member.isOwner && (
-          <Link href={`/application/${path.guildId}/channels/create`} passHref>
-            <a data-cy='link-add-channel'>
-              <IconButton className='h-10 w-10' title='Add a Channel'>
-                <PlusIcon />
-              </IconButton>
-            </a>
+          <Link
+            href={`/application/${path.guildId}/channels/create`}
+            passHref
+            data-cy='link-add-channel'
+          >
+            <IconButton className='h-10 w-10' title='Add a Channel'>
+              <PlusIcon />
+            </IconButton>
           </Link>
         )}
-        <Link href={`/application/${path.guildId}/settings`} passHref>
-          <a data-cy='link-settings-guild'>
-            <IconButton className='h-7 w-7' title='Settings'>
-              <CogIcon />
-            </IconButton>
-          </a>
+        <Link
+          href={`/application/${path.guildId}/settings`}
+          passHref
+          data-cy='link-settings-guild'
+        >
+          <IconButton className='h-7 w-7' title='Settings'>
+            <CogIcon />
+          </IconButton>
         </Link>
       </div>
     </div>

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,34 +41,27 @@ 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)
+  const { getFirstErrorTranslation } = useFormTranslation()
 
-  const onSubmit: HandleSubmitCallback = async (formData) => {
+  const onSubmit: HandleUseFormCallback<typeof schema> = 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'
+        message: 'application:saved-information'
       }
     } catch (error) {
       return {
         type: 'error',
-        value: 'errors:server-error'
+        message: 'errors:server-error'
       }
     }
   }
@@ -83,7 +82,7 @@ export const GuildSettings: React.FC = () => {
   ) => {
     setFetchState('loading')
     const files = event?.target?.files
-    if (files != null && files.length === 1) {
+    if (files != null && files.length === 1 && files[0] != null) {
       const file = files[0]
       const formData = new FormData()
       formData.append('icon', file)
@@ -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.name)
+            }
           />
         </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 type { 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/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,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 {
+import { Emoji } from '../../Emoji'
+import { ConfirmPopup } from '../ConfirmPopup'
+import type {
   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
@@ -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> => {
@@ -94,7 +96,7 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
       <ConfirmPopup
         title={`${t('application:join-the-guild')} ?`}
         className={classNames(
-          'w-ful h-ful translate-x- absolute top-1/2 left-full flex h-full w-full -translate-y-1/2 flex-col items-center justify-center rounded-2xl transition-all',
+          'w-ful h-ful translate-x- absolute left-full top-1/2 flex h-full w-full -translate-y-1/2 flex-col items-center justify-center rounded-2xl transition-all',
           {
             '!left-0': isConfirmed
           }

components/Application/JoinGuildsPublic/GuildPublic/index.ts

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

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('')
@@ -22,12 +23,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])
 
@@ -45,7 +49,7 @@ export const JoinGuildsPublic: React.FC = () => {
       <input
         data-cy='search-guild-input'
         onChange={handleChange}
-        className='my-6 mx-auto mt-16 w-10/12 rounded-md border border-gray-500 bg-white p-3 dark:border-gray-700 dark:bg-[#3B3B3B] sm:w-8/12 md:w-6/12 lg:w-5/12'
+        className='mx-auto my-6 mt-16 w-10/12 rounded-md border border-gray-500 bg-white p-3 dark:border-gray-700 dark:bg-[#3B3B3B] sm:w-8/12 md:w-6/12 lg:w-5/12'
         type='search'
         name='search-guild'
         placeholder={`🔎  ${t('application:search')}...`}

components/Application/Members/Member.tsx

@@ -0,0 +1,48 @@
+import { memo } from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+
+import type { MemberWithPublicUser } from '../../../models/Member'
+import { Emoji } from '../../Emoji'
+
+export interface MemberProps {
+  member: MemberWithPublicUser
+}
+
+const MemberMemo: React.FC<MemberProps> = (props) => {
+  const { member } = props
+
+  return (
+    <Link href={`/application/users/${member.user.id}`}>
+      <div className='flex cursor-pointer items-center overflow-hidden px-6 py-2 pr-10 hover:bg-gray-300 dark:hover:bg-gray-900'>
+        <div className='flex min-w-[50px] rounded-full'>
+          <Image
+            src={
+              member.user.logo == null
+                ? '/images/data/user-default.png'
+                : member.user.logo
+            }
+            alt={"Users's profil picture"}
+            height={50}
+            width={50}
+            draggable={false}
+            className='rounded-full'
+          />
+        </div>
+        <div className='ml-5'>
+          <p data-cy='member-user-name' className='flex truncate font-bold'>
+            {member.user.name}
+            {member.isOwner && (
+              <span className='ml-4'>
+                <Emoji value=':crown:' size={18} />
+              </span>
+            )}
+          </p>
+          {member.user.status != null && member.user.status}
+        </div>
+      </div>
+    </Link>
+  )
+}
+
+export const Member = memo(MemberMemo)

components/Application/Members/Member/Member.tsx

@@ -1,47 +0,0 @@
-import Image from 'next/image'
-import Link from 'next/link'
-
-import { MemberWithPublicUser } from '../../../../models/Member'
-import { Emoji } from '../../../Emoji'
-
-export interface MemberProps {
-  member: MemberWithPublicUser
-}
-
-export const Member: React.FC<MemberProps> = (props) => {
-  const { member } = props
-
-  return (
-    <Link href={`/application/users/${member.user.id}`}>
-      <a>
-        <div className='flex cursor-pointer items-center overflow-hidden py-2 px-6 pr-10 hover:bg-gray-300 dark:hover:bg-gray-900'>
-          <div className='flex min-w-[50px] rounded-full'>
-            <Image
-              src={
-                member.user.logo == null
-                  ? '/images/data/user-default.png'
-                  : member.user.logo
-              }
-              alt={"Users's profil picture"}
-              height={50}
-              width={50}
-              draggable={false}
-              className='rounded-full'
-            />
-          </div>
-          <div className='ml-5'>
-            <p data-cy='member-user-name' className='flex truncate font-bold'>
-              {member.user.name}
-              {member.isOwner && (
-                <span className='ml-4'>
-                  <Emoji value=':crown:' size={18} />
-                </span>
-              )}
-            </p>
-            {member.user.status != null && member.user.status}
-          </div>
-        </div>
-      </a>
-    </Link>
-  )
-}

components/Application/Members/Member/index.ts

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

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,11 +1,15 @@
+import { useState, useRef } from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
 import date from 'date-and-time'
 
-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 {
   message: MessageWithMember
@@ -14,43 +18,76 @@ export interface MessageProps {
 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'
       data-cy={`message-${message.id}`}
+      className='group flex w-full p-4 transition hover:bg-gray-200 dark:hover:bg-gray-900'
     >
       <Link href={`/application/users/${message.member.user.id}`}>
-        <a>
-          <div className='mr-4 flex h-12 w-12 flex-shrink-0 items-center justify-center'>
-            <div className='h-10 w-10 drop-shadow-md'>
-              <Image
-                quality={100}
-                className='rounded-full'
-                src={
-                  message.member.user.logo == null
-                    ? '/images/data/user-default.png'
-                    : message.member.user.logo
-                }
-                alt={"Users's profil picture"}
-                width={50}
-                height={50}
-                draggable={false}
-              />
-            </div>
+        <div className='mr-4 flex h-12 w-12 flex-shrink-0 items-center justify-center'>
+          <div className='h-10 w-10 drop-shadow-md'>
+            <Image
+              quality={100}
+              className='rounded-full'
+              src={
+                message.member.user.logo == null
+                  ? '/images/data/user-default.png'
+                  : message.member.user.logo
+              }
+              alt={"Users's profil picture"}
+              width={50}
+              height={50}
+              draggable={false}
+            />
           </div>
-        </a>
+        </div>
       </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>
-              <span
-                data-cy='message-member-user-name'
-                className='font-bold text-gray-900 dark:text-gray-200'
-              >
-                {message.member.user.name}
-              </span>
-            </a>
+            <span
+              data-cy='message-member-user-name'
+              className='font-bold text-gray-900 dark:text-gray-200'
+            >
+              {message.member.user.name}
+            </span>
           </Link>
           <span
             data-cy='message-date'
@@ -59,8 +96,28 @@ 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} />
         ) : (

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 -top-8 right-6 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>
     )
@@ -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.tsx

@@ -23,11 +23,12 @@ export const PopupGuildCard: React.FC<PopupGuildCardProps> = (props) => {
         <p className='mt-6 px-8 text-center text-sm text-gray-200'>
           {description}
         </p>
-        <Link href={link.href}>
-          <a className='mb-6 flex h-10 w-4/5 items-center justify-center self-center rounded-2xl bg-green-400 font-bold tracking-wide text-white transition duration-200 ease-in-out hover:bg-green-600'>
-            {link.icon}
-            {link.text}
-          </a>
+        <Link
+          href={link.href}
+          className='mb-6 flex h-10 w-4/5 items-center justify-center self-center rounded-2xl bg-green-400 font-bold tracking-wide text-white transition duration-200 ease-in-out hover:bg-green-600'
+        >
+          {link.icon}
+          {link.text}
         </Link>
       </div>
     </div>

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,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
@@ -53,7 +54,7 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
     event
   ) => {
     const files = event?.target?.files
-    if (files != null && files.length === 1) {
+    if (files != null && files.length === 1 && files[0] != null) {
       const file = files[0]
       const formData = new FormData()
       formData.append('file', file)
@@ -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.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,6 +1,6 @@
-import classNames from 'classnames'
+import classNames from 'clsx'
 
-import { ApplicationProps } from '..'
+import type { ApplicationProps } from '..'
 
 export type DirectionSidebar = 'left' | 'right'
 
@@ -21,13 +21,13 @@ export const Sidebar: React.FC<React.PropsWithChildren<SidebarProps>> = (
       className={classNames(
         'h-full-without-header visible z-50 flex bg-gray-200 drop-shadow-2xl transition-all dark:bg-gray-800',
         {
-          'scrollbar-firefox-support top-0 right-0 flex-col space-y-1 overflow-y-auto':
+          'scrollbar-firefox-support right-0 top-0 flex-col space-y-1 overflow-y-auto':
             direction === 'right',
           'w-72': direction === 'right' && visible,
           'invisible w-0 opacity-0': !visible,
           'w-80': direction === 'left' && visible,
           'max-w-max': typeof path !== 'string' && direction === 'left',
-          'top-0 right-0': direction === 'right' && isMobile,
+          'right-0 top-0': direction === 'right' && isMobile,
           absolute: isMobile
         }
       )}

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/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
@@ -16,96 +16,88 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
   const { t } = useTranslation()
 
   return (
-    <>
-      <div className='relative flex h-full flex-col items-center justify-center'>
-        <div className='transition'>
-          <div className='max-w-[1000px] px-12'>
-            <div className='flex items-center justify-between'>
-              <div className='flex w-max flex-col items-center gap-7 md:flex-row'>
-                <div className='relative flex items-center justify-center overflow-hidden rounded-full shadow-lg transition-all'>
-                  <Image
-                    quality={100}
-                    className='rounded-full'
-                    src={
-                      user.logo != null
-                        ? user.logo
-                        : '/images/data/user-default.png'
-                    }
-                    alt='Profil Picture'
-                    draggable='false'
-                    height={125}
-                    width={125}
-                  />
+    <div className='relative flex h-full flex-col items-center justify-center'>
+      <div className='transition'>
+        <div className='max-w-[1000px] px-12'>
+          <div className='flex items-center justify-between'>
+            <div className='flex w-max flex-col items-center gap-7 md:flex-row'>
+              <div className='relative flex items-center justify-center overflow-hidden rounded-full shadow-lg transition-all'>
+                <Image
+                  quality={100}
+                  className='rounded-full'
+                  src={
+                    user.logo != null
+                      ? user.logo
+                      : '/images/data/user-default.png'
+                  }
+                  alt='Profil Picture'
+                  draggable='false'
+                  height={125}
+                  width={125}
+                />
+              </div>
+              <div className='ml-10 flex flex-col'>
+                <div className='mb-2 flex items-center'>
+                  <p
+                    className='space text-dark text-3xl font-bold tracking-wide dark:text-white'
+                    data-cy='user-name'
+                  >
+                    {user.name}
+                  </p>
+                  <p
+                    className='ml-8 select-none text-sm tracking-widest text-white opacity-40'
+                    data-cy='user-createdAt'
+                  >
+                    {date.format(new Date(user.createdAt), 'DD/MM/YYYY')}
+                  </p>
                 </div>
-                <div className='ml-10 flex flex-col'>
-                  <div className='mb-2 flex items-center'>
-                    <p
-                      className='space text-dark text-3xl font-bold tracking-wide dark:text-white'
-                      data-cy='user-name'
-                    >
-                      {user.name}
+                <div className='my-2 text-left'>
+                  {user.email != null && (
+                    <p className='font-bold'>
+                      Email:{' '}
+                      <a
+                        href={`mailto:${user.email}`}
+                        target='_blank'
+                        className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:bottom-[-1px] after:left-0 after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
+                        rel='noreferrer'
+                        data-cy='user-email'
+                      >
+                        {user.email}
+                      </a>
                     </p>
-                    <p
-                      className='ml-8 select-none text-sm tracking-widest text-white opacity-40'
-                      data-cy='user-createdAt'
-                    >
-                      {date.format(new Date(user.createdAt), 'DD/MM/YYYY')}
+                  )}
+                  {user.website != null && (
+                    <p className='font-bold'>
+                      {t('application:website')}:{' '}
+                      <a
+                        target='_blank'
+                        rel='noreferrer'
+                        href={user.website}
+                        className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:bottom-[-2px] after:left-0 after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
+                      >
+                        {user.website}
+                      </a>
                     </p>
-                  </div>
-                  <div className='my-2 text-left'>
-                    {user.email != null && (
-                      <p className='font-bold'>
-                        Email:{' '}
-                        <a
-                          href={`mailto:${user.email}`}
-                          target='_blank'
-                          className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-1px] after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
-                          rel='noreferrer'
-                          data-cy='user-email'
-                        >
-                          {user.email}
-                        </a>
-                      </p>
-                    )}
-                    {user.website != null && (
-                      <p className='font-bold'>
-                        {t('application:website')}:{' '}
-                        <a
-                          target='_blank'
-                          rel='noreferrer'
-                          href={user.website}
-                          className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-2px] after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
-                        >
-                          {user.website}
-                        </a>
-                      </p>
-                    )}
-                    {user.status != null && (
-                      <p className='flex font-bold'>
-                        {t('application:status')}:{' '}
-                        <span className='ml-2 font-normal tracking-wide'>
-                          {user.status}
-                        </span>
-                      </p>
-                    )}
-                  </div>
+                  )}
+                  {user.status != null && (
+                    <p className='flex font-bold'>
+                      {t('application:status')}:{' '}
+                      <span className='ml-2 font-normal tracking-wide'>
+                        {user.status}
+                      </span>
+                    </p>
+                  )}
                 </div>
               </div>
             </div>
-            {user.biography != null && (
-              <div className='mt-7 text-center'>
-                <p>{user.biography}</p>
-              </div>
-            )}
           </div>
+          {user.biography != null && (
+            <div className='mt-7 text-center'>
+              <p>{user.biography}</p>
+            </div>
+          )}
         </div>
       </div>
-
-      <style jsx global>{`
-        #application-page-content {
-          overflow-x: hidden;
-        }
-      `}</style>
-    </>
+    </div>
   )
 }

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,12 +70,12 @@ 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 {
           type: 'success',
-          value: 'application:success-email-changed'
+          message: 'application:success-email-changed'
         }
       }
       const { data: userCurrentSettings } = await authentication.api.put(
@@ -92,7 +94,7 @@ export const UserSettings: React.FC = () => {
       })
       return {
         type: 'success',
-        value: 'application:saved-information'
+        message: 'application:saved-information'
       }
     } catch (error) {
       if (axios.isAxiosError(error) && error.response?.status === 400) {
@@ -100,22 +102,22 @@ export const UserSettings: React.FC = () => {
         if (message.endsWith('already taken.')) {
           return {
             type: 'error',
-            value: 'authentication:already-used'
+            message: 'authentication:already-used'
           }
         } else if (message.endsWith('email to sign in.')) {
           return {
             type: 'error',
-            value: 'authentication:email-required-to-sign-in'
+            message: 'authentication:email-required-to-sign-in'
           }
         }
         return {
           type: 'error',
-          value: 'errors:server-error'
+          message: 'errors:server-error'
         }
       }
       return {
         type: 'error',
-        value: 'errors:server-error'
+        message: 'errors:server-error'
       }
     }
   }
@@ -147,7 +149,7 @@ export const UserSettings: React.FC = () => {
   ) => {
     setFetchState('loading')
     const files = event?.target?.files
-    if (files != null && files.length === 1) {
+    if (files != null && files.length === 1 && files[0] != null) {
       const file = files[0]
       const formData = new FormData()
       formData.append('logo', file)
@@ -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'
@@ -310,16 +312,15 @@ export const UserSettings: React.FC = () => {
             <Language className='!top-12' />
             <div className='ml-auto flex'>
               <SwitchTheme />
-              <Link href={`/application/users/${user.id}`}>
-                <a
-                  className='group ml-3 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-slate-200 transition-colors hover:bg-slate-300 dark:bg-slate-700 hover:dark:bg-slate-800'
-                  title='Preview Public Profile'
-                >
-                  <EyeIcon
-                    height={20}
-                    className='opacity-50 transition-opacity group-hover:opacity-100'
-                  />
-                </a>
+              <Link
+                href={`/application/users/${user.id}`}
+                className='group ml-3 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-slate-200 transition-colors hover:bg-slate-300 dark:bg-slate-700 hover:dark:bg-slate-800'
+                title='Preview Public Profile'
+              >
+                <EyeIcon
+                  height={20}
+                  className='opacity-50 transition-opacity group-hover:opacity-100'
+                />
               </Link>
             </div>
           </div>
@@ -376,7 +377,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,26 +30,31 @@ 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'
+          message: 'authentication:success-signup'
         }
       } catch (error) {
         if (axios.isAxiosError(error) && error.response?.status === 400) {
@@ -56,23 +62,23 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
           if (message.endsWith('already taken.')) {
             return {
               type: 'error',
-              value: 'authentication:already-used'
+              message: 'authentication:already-used'
             }
           }
           return {
             type: 'error',
-            value: 'errors:server-error'
+            message: 'errors:server-error'
           }
         }
         return {
           type: 'error',
-          value: 'errors:server-error'
+          message: 'errors:server-error'
         }
       }
     } 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
@@ -80,12 +86,12 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
         if (axios.isAxiosError(error) && error.response?.status === 400) {
           return {
             type: 'error',
-            value: 'authentication:wrong-credentials'
+            message: 'authentication:wrong-credentials'
           }
         }
         return {
           type: 'error',
-          value: 'errors:server-error'
+          message: 'errors:server-error'
         }
       }
     }
@@ -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')}
@@ -133,15 +139,17 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
                 : '/authentication/signup'
             }
           >
-            <a>
-              {mode === 'signup'
-                ? t('authentication:already-have-an-account')
-                : t('authentication:dont-have-an-account')}
-            </a>
+            {mode === 'signup'
+              ? t('authentication:already-have-an-account')
+              : t('authentication:dont-have-an-account')}
           </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 = () => {
@@ -24,7 +25,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/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/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.tsx

@@ -0,0 +1,45 @@
+import useTranslation from 'next-translate/useTranslation'
+import Link from 'next/link'
+
+import type { FooterProps } from './Footer'
+import { Footer } from './Footer'
+import { Header } from './Header'
+
+export interface ErrorPageProps extends FooterProps {
+  statusCode: number
+  message: string
+}
+
+export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
+  const { message, statusCode, version } = props
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <div className='flex h-screen flex-col pt-0'>
+        <Header />
+        <main className='flex min-w-full flex-1 flex-col items-center justify-center'>
+          <h1 className='my-6 text-4xl font-semibold'>
+            {t('errors:error')}{' '}
+            <span
+              className='text-green-800 dark:text-green-400'
+              data-cy='status-code'
+            >
+              {statusCode}
+            </span>
+          </h1>
+          <p className='text-center text-lg'>
+            {message}{' '}
+            <Link
+              href='/'
+              className='text-green-800 hover:underline dark:text-green-400'
+            >
+              {t('errors:return-to-home-page')}
+            </Link>
+          </p>
+        </main>
+        <Footer version={version} />
+      </div>
+    </>
+  )
+}

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/ErrorPage.tsx

@@ -1,53 +0,0 @@
-import useTranslation from 'next-translate/useTranslation'
-import Link from 'next/link'
-
-export interface ErrorPageProps {
-  statusCode: number
-  message: string
-}
-
-export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
-  const { message, statusCode } = props
-  const { t } = useTranslation()
-
-  return (
-    <>
-      <h1 className='my-6 text-4xl font-semibold'>
-        {t('errors:error')}{' '}
-        <span
-          className='text-green-800 dark:text-green-400'
-          data-cy='status-code'
-        >
-          {statusCode}
-        </span>
-      </h1>
-      <p className='text-center text-lg'>
-        {message}{' '}
-        <Link href='/'>
-          <a className='text-green-800 hover:underline dark:text-green-400'>
-            {t('errors:return-to-home-page')}
-          </a>
-        </Link>
-      </p>
-
-      <style jsx global>
-        {`
-          main {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            min-width: 100vw;
-            flex: 1;
-          }
-          #__next {
-            display: flex;
-            flex-direction: column;
-            padding-top: 0;
-            height: 100vh;
-          }
-        `}
-      </style>
-    </>
-  )
-}

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/Footer.tsx

@@ -15,10 +15,11 @@ export const Footer: React.FC<FooterProps> = (props) => {
   return (
     <footer className='flex flex-col items-center justify-center border-t-2 border-gray-600 bg-white py-6 text-lg dark:border-gray-400 dark:bg-black'>
       <p>
-        <Link href='/'>
-          <a className='text-green-800 hover:underline dark:text-green-400'>
-            Thream
-          </a>
+        <Link
+          href='/'
+          className='text-green-800 hover:underline dark:text-green-400'
+        >
+          Thream
         </Link>{' '}
         | {t('common:all-rights-reserved')}
       </p>

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/Header.tsx

@@ -9,20 +9,19 @@ export const Header: React.FC = () => {
     <header className='sticky top-0 z-50 flex w-full justify-center border-b-2 border-gray-600 bg-white px-6 py-2 dark:border-gray-400 dark:bg-black'>
       <div className='container flex justify-between'>
         <Link href='/'>
-          <a>
-            <div className='flex items-center justify-center'>
-              <Image
-                quality={100}
-                width={60}
-                height={60}
-                src='/images/icons/Thream.png'
-                alt='Thream'
-              />
-              <span className='ml-1 hidden font-headline font-medium text-green-800 dark:text-green-400 xs:block'>
-                Thream
-              </span>
-            </div>
-          </a>
+          <div className='flex items-center justify-center'>
+            <Image
+              priority
+              quality={100}
+              width={60}
+              height={60}
+              src='/images/icons/Thream.png'
+              alt='Thream'
+            />
+            <span className='ml-1 hidden font-headline font-medium text-green-800 dark:text-green-400 xs:block'>
+              Thream
+            </span>
+          </div>
         </Link>
         <div className='flex justify-between'>
           <Language />

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/Header/SwitchTheme.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react'
+import classNames from 'clsx'
+import { useTheme } from 'next-themes'
+
+export const SwitchTheme: React.FC = () => {
+  const [mounted, setMounted] = useState(false)
+  const { theme, setTheme } = useTheme()
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return null
+  }
+
+  const handleClick = (): void => {
+    setTheme(theme === 'dark' ? 'light' : 'dark')
+  }
+
+  return (
+    <div
+      className='flex items-center'
+      data-cy='switch-theme-click'
+      onClick={handleClick}
+    >
+      <div className='relative inline-block cursor-pointer touch-pan-x select-none border-0 bg-transparent p-0'>
+        <div className='h-[24px] w-[50px] rounded-[30px] bg-[#4d4d4d] p-0 text-white transition-all duration-200 ease-in-out'>
+          <div
+            data-cy='switch-theme-dark'
+            className={classNames(
+              'absolute bottom-0 left-[8px] top-0 mb-auto mt-auto h-[10px] w-[14px] leading-[0] transition-opacity duration-[250ms] ease-in-out',
+              {
+                'opacity-100': theme === 'dark',
+                'opacity-0': theme === 'light'
+              }
+            )}
+          >
+            <span className='relative flex h-[10px] w-[10px] items-center justify-center'>
+              🌜
+            </span>
+          </div>
+          <div
+            data-cy='switch-theme-light'
+            className={classNames(
+              'absolute bottom-0 right-[10px] top-0 mb-auto mt-auto h-[10px] w-[10px] leading-[0]',
+              {
+                'opacity-100': theme === 'light',
+                'opacity-0': theme === 'dark'
+              }
+            )}
+          >
+            <span className='relative flex h-[10px] w-[10px] items-center justify-center'>
+              🌞
+            </span>
+          </div>
+        </div>
+        <div
+          className={classNames(
+            'absolute top-[1px] box-border h-[22px] w-[22px] rounded-[50%] bg-[#fafafa] text-white transition-all duration-[250ms] ease-in-out',
+            {
+              'left-[27px]': theme === 'dark',
+              'left-0': theme === 'light'
+            }
+          )}
+          style={{ border: '1px solid #4d4d4d' }}
+        />
+        <input
+          data-cy='switch-theme-input'
+          type='checkbox'
+          aria-label='Dark mode toggle'
+          className='absolute m-[-1px] h-[1px] w-[1px] overflow-hidden border-0 p-0'
+          defaultChecked
+        />
+      </div>
+    </div>
+  )
+}

components/Header/SwitchTheme/SwitchTheme.tsx

@@ -1,126 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useTheme } from 'next-themes'
-
-export const SwitchTheme: React.FC = () => {
-  const [mounted, setMounted] = useState(false)
-  const { theme, setTheme } = useTheme()
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  if (!mounted) {
-    return null
-  }
-
-  const handleClick = (): void => {
-    setTheme(theme === 'dark' ? 'light' : 'dark')
-  }
-
-  return (
-    <>
-      <div
-        className='flex items-center'
-        data-cy='switch-theme-click'
-        onClick={handleClick}
-      >
-        <div className='toggle-theme-button relative inline-block cursor-pointer bg-transparent'>
-          <div className='toggle-track'>
-            <div
-              data-cy='switch-theme-dark'
-              className='toggle-track-check absolute'
-            >
-              <span className='toggle_Dark relative flex items-center justify-center'>
-                🌜
-              </span>
-            </div>
-            <div
-              data-cy='switch-theme-light'
-              className='toggle-track-x absolute'
-            >
-              <span className='toggle_Light relative flex items-center justify-center'>
-                🌞
-              </span>
-            </div>
-          </div>
-          <div className='toggle-thumb absolute' />
-          <input
-            data-cy='switch-theme-input'
-            type='checkbox'
-            aria-label='Dark mode toggle'
-            className='toggle-screenreader-only absolute overflow-hidden'
-            defaultChecked
-          />
-        </div>
-      </div>
-
-      <style jsx>
-        {`
-          .toggle-theme-button {
-            touch-action: pan-x;
-            border: 0;
-            padding: 0;
-            user-select: none;
-          }
-          .toggle-track {
-            width: 50px;
-            height: 24px;
-            padding: 0;
-            border-radius: 30px;
-            background-color: #4d4d4d;
-            transition: all 0.2s ease;
-            color: #fff;
-          }
-          .toggle-track-check {
-            width: 14px;
-            height: 10px;
-            top: 0;
-            bottom: 0;
-            margin-top: auto;
-            margin-bottom: auto;
-            line-height: 0;
-            left: 8px;
-            opacity: ${theme === 'dark' ? 1 : 0};
-            transition: opacity 0.25s ease;
-          }
-          .toggle-track-x {
-            width: 10px;
-            height: 10px;
-            top: 0;
-            bottom: 0;
-            margin-top: auto;
-            margin-bottom: auto;
-            line-height: 0;
-            right: 10px;
-            opacity: ${theme === 'dark' ? 0 : 1};
-          }
-          .toggle_Dark,
-          .toggle_Light {
-            height: 10px;
-            width: 10px;
-          }
-          .toggle-thumb {
-            left: ${theme === 'dark' ? '27px' : '0px'};
-            width: 22px;
-            height: 22px;
-            border: 1px solid #4d4d4d;
-            border-radius: 50%;
-            background-color: #fafafa;
-            box-sizing: border-box;
-            transition: all 0.25s ease;
-            top: 1px;
-            color: #fff;
-          }
-          .toggle-screenreader-only {
-            border: 0;
-            clip: rect(0 0 0 0);
-            height: 1px;
-            margin: -1px;
-            padding: 0;
-            width: 1px;
-          }
-        `}
-      </style>
-    </>
-  )
-}

components/Header/SwitchTheme/index.ts

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

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/ScrollableBody.tsx

@@ -1,20 +0,0 @@
-export const ScrollableBody: React.FC<React.PropsWithChildren<{}>> = (
-  props
-) => {
-  const { children } = props
-
-  return (
-    <>
-      {children}
-      <style jsx global>{`
-        body {
-          scrollbar-width: thin;
-          scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color);
-          z-index: 1000;
-          height: calc(100vh - 64px);
-          overflow-y: auto;
-        }
-      `}</style>
-    </>
-  )
-}

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
@@ -13,7 +13,7 @@ export const Checkbox: React.FC<CheckboxProps> = (props) => {
         {...props}
         type='checkbox'
         id={id}
-        className='relative mr-3 min-h-[25px] min-w-[25px] cursor-pointer appearance-none rounded-md bg-gradient-to-t from-[#bcc7d4] to-[#d3dfed] transition-all before:absolute before:top-[50%] before:left-[59%] before:h-[12px] before:w-[2px] before:translate-x-[-59%] before:translate-y-[-50%] before:rotate-[40deg] before:scale-0 before:bg-black before:transition-all after:absolute after:top-[62.5%] after:left-[36%] after:h-[7px] after:w-[2px] after:translate-x-[-35%] after:translate-y-[-62.5%] after:rotate-[-50deg] after:scale-0 after:bg-black after:transition-all after:duration-200 checked:before:scale-100 checked:after:scale-100 dark:from-[#1f2937] dark:to-[#273547] dark:before:bg-white dark:after:bg-white'
+        className='relative mr-3 min-h-[25px] min-w-[25px] cursor-pointer appearance-none rounded-md bg-gradient-to-t from-[#bcc7d4] to-[#d3dfed] transition-all before:absolute before:left-[59%] before:top-[50%] before:h-[12px] before:w-[2px] before:translate-x-[-59%] before:translate-y-[-50%] before:rotate-[40deg] before:scale-0 before:bg-black before:transition-all after:absolute after:left-[36%] after:top-[62.5%] after:h-[7px] after:w-[2px] after:translate-x-[-35%] after:translate-y-[-62.5%] after:rotate-[-50deg] after:scale-0 after:bg-black after:transition-all after:duration-200 checked:before:scale-100 checked:after:scale-100 dark:from-[#1f2937] dark:to-[#273547] dark:before:bg-white dark:after:bg-white'
       />
       <label
         className='duration-400 cursor-pointer select-none opacity-80 transition hover:opacity-100 '

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
@@ -14,24 +14,26 @@ export const IconLink: React.FC<React.PropsWithChildren<IconLinkProps>> = (
   const { children, selected, href, title, className } = props
 
   return (
-    <Link href={href}>
-      <a className='group relative flex w-full justify-center' title={title}>
-        <div
-          className={classNames('group flex w-full justify-center', className)}
-        >
-          {children}
-          <div className='absolute left-0 flex h-12 w-3 items-center'>
-            <span
-              className={classNames(
-                'absolute w-4/12 rounded-r-lg bg-green-700 group-hover:h-5',
-                {
-                  'h-full': selected
-                }
-              )}
-            ></span>
-          </div>
+    <Link
+      href={href}
+      className='group relative flex w-full justify-center'
+      title={title}
+    >
+      <div
+        className={classNames('group flex w-full justify-center', className)}
+      >
+        {children}
+        <div className='absolute left-0 flex h-12 w-3 items-center'>
+          <span
+            className={classNames(
+              'absolute w-4/12 rounded-r-lg bg-green-700 group-hover:h-5',
+              {
+                'h-full': selected
+              }
+            )}
+          ></span>
         </div>
-      </a>
+      </div>
     </Link>
   )
 }

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'
 
@@ -35,62 +35,46 @@ export const Input: React.FC<InputProps> = (props) => {
   }
 
   return (
-    <>
-      <div className='flex flex-col'>
-        <div
-          className={classNames('mt-6 mb-2 flex justify-between', className)}
-        >
-          <label className='pl-1' htmlFor={name}>
-            {label}
-          </label>
-          {type === 'password' && showForgotPassword ? (
-            <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'
-              >
-                {t('authentication:forgot-password')}
-              </a>
-            </Link>
-          ) : null}
-        </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}
-            id={name}
-            name={name}
-            type={inputType}
-          />
-          {type === 'password' && (
-            <div
-              data-testid='password-eye'
-              onClick={handlePassword}
-              className='password-eye absolute cursor-pointer bg-[#f1f1f1] bg-cover'
-            />
-          )}
-          <FormState
-            id={`error-${name ?? 'input'}`}
-            state={error == null ? 'idle' : 'error'}
-            message={error}
-          />
-        </div>
+    <div className='flex flex-col'>
+      <div className={classNames('mb-2 mt-6 flex justify-between', className)}>
+        <label className='pl-1' htmlFor={name}>
+          {label}
+        </label>
+        {type === 'password' && showForgotPassword ? (
+          <Link
+            href='/authentication/forgot-password'
+            className='text-center font-headline text-xs text-green-800 hover:underline dark:text-green-400 sm:text-sm'
+            data-cy='forgot-password-link'
+          >
+            {t('authentication:forgot-password')}
+          </Link>
+        ) : null}
       </div>
-
-      <style jsx>
-        {`
-          .password-eye {
-            top: 12px;
-            right: 16px;
-            z-index: 1;
-            width: 20px;
-            height: 20px;
-            background-image: url('/images/svg/icons/input/${inputType}.svg');
-          }
-        `}
-      </style>
-    </>
+      <div className='relative mt-0'>
+        <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}
+          id={name}
+          name={name}
+          type={inputType}
+        />
+        {type === 'password' && (
+          <div
+            data-cy='password-eye'
+            onClick={handlePassword}
+            style={{
+              backgroundImage: `url('/images/svg/icons/input/${inputType}.svg')`
+            }}
+            className='absolute right-4 top-3 z-10 h-5 w-5 cursor-pointer bg-[#f1f1f1] bg-cover'
+          />
+        )}
+        <FormState
+          id={`error-${name ?? 'input'}`}
+          state={error == null ? 'idle' : 'error'}
+          message={error}
+        />
+      </div>
+    </div>
   )
 }