chore(release): 1.3.10 [skip ci]

It improves performance when extra checking is not necessary.

.devcontainer/Dockerfile

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

.devcontainer/compose.yaml

@@ -0,0 +1,9 @@
+services:
+  workspace:
+    build:
+      context: "./"
+      dockerfile: "./Dockerfile"
+    volumes:
+      - "..:/workspace:cached"
+    command: "sleep infinity"
+    network_mode: "host"

.devcontainer/devcontainer.json

@@ -1,23 +1,24 @@
 {
   "name": "@thream/website",
-  "dockerComposeFile": "./docker-compose.yml",
+  "dockerComposeFile": "./compose.yaml",
   "service": "workspace",
   "workspaceFolder": "/workspace",
-  "settings": {
+  "customizations": {
-    "remote.autoForwardPorts": false
+    "vscode": {
+      "settings": {
+        "remote.autoForwardPorts": false,
+        "remote.localPortHost": "allInterfaces"
+      },
+      "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"
 }

.devcontainer/docker-compose.yml

@@ -1,8 +0,0 @@
-services:
-  workspace:
-    build:
-      context: './'
-      dockerfile: './Dockerfile'
-    volumes:
-      - '..:/workspace:cached'
-    command: 'sleep infinity'

.dockerignore

@@ -1,12 +1,4 @@
-.vscode
-.git
-.env
 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

.eslintrc.json

@@ -4,12 +4,14 @@
   "parserOptions": {
     "project": "./tsconfig.json"
   },
-  "env": {
-    "node": true,
-    "browser": true
-  },
   "rules": {
     "prettier/prettier": "error",
     "@next/next/no-img-element": "off"
-  }
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "parser": "@typescript-eslint/parser"
+    }
+  ]
 }

.github/ISSUE_TEMPLATE/BUG.md

@@ -1,8 +1,8 @@
 ---
-name: '🐛 Bug Report'
+name: "🐛 Bug Report"
-about: 'Report an unexpected problem or unintended behavior.'
+about: "Report an unexpected problem or unintended behavior."
-title: '[Bug]'
+title: "[Bug]"
-labels: 'bug'
+labels: "bug"
 ---
 
 <!--

.github/ISSUE_TEMPLATE/DOCUMENTATION.md

@@ -1,8 +1,8 @@
 ---
-name: '📜 Documentation'
+name: "📜 Documentation"
-about: 'Correct spelling errors, improvements or additions to documentation files (README, CONTRIBUTING...).'
+about: "Correct spelling errors, improvements or additions to documentation files (README, CONTRIBUTING...)."
-title: '[Documentation]'
+title: "[Documentation]"
-labels: 'documentation'
+labels: "documentation"
 ---
 
 <!-- Please make sure your issue has not already been fixed. -->

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md

@@ -1,8 +1,8 @@
 ---
-name: '✨ Feature Request'
+name: "✨ Feature Request"
-about: 'Suggest a new feature idea.'
+about: "Suggest a new feature idea."
-title: '[Feature]'
+title: "[Feature]"
-labels: 'feature request'
+labels: "feature request"
 ---
 
 <!-- Please make sure your issue has not already been fixed. -->

.github/ISSUE_TEMPLATE/IMPROVEMENT.md

@@ -1,8 +1,8 @@
 ---
-name: '🔧 Improvement'
+name: "🔧 Improvement"
-about: 'Improve structure/format/performance/refactor/tests of the code.'
+about: "Improve structure/format/performance/refactor/tests of the code."
-title: '[Improvement]'
+title: "[Improvement]"
-labels: 'improvement'
+labels: "improvement"
 ---
 
 <!-- Please make sure your issue has not already been fixed. -->

.github/ISSUE_TEMPLATE/QUESTION.md

@@ -1,8 +1,8 @@
 ---
-name: '🙋 Question'
+name: "🙋 Question"
-about: 'Further information is requested.'
+about: "Further information is requested."
-title: '[Question]'
+title: "[Question]"
-labels: 'question'
+labels: "question"
 ---
 
 ### Question

.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

@@ -1,4 +1,4 @@
-name: 'Analyze'
+name: "Analyze"
 
 on:
   push:
@@ -8,20 +8,20 @@ on:
 
 jobs:
   analyze:
-    runs-on: 'ubuntu-latest'
+    runs-on: "ubuntu-latest"
 
     strategy:
       fail-fast: false
       matrix:
-        language: ['javascript']
+        language: ["javascript"]
 
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: "actions/checkout@v4.0.0"
 
-      - name: 'Initialize CodeQL'
+      - name: "Initialize CodeQL"
-        uses: 'github/codeql-action/init@v1'
+        uses: "github/codeql-action/init@v2"
         with:
           languages: ${{ matrix.language }}
 
-      - name: 'Perform CodeQL Analysis'
+      - name: "Perform CodeQL Analysis"
-        uses: 'github/codeql-action/analyze@v1'
+        uses: "github/codeql-action/analyze@v2"

.github/workflows/build.yml

@@ -1,4 +1,4 @@
-name: 'Build'
+name: "Build"
 
 on:
   push:
@@ -8,18 +8,18 @@ on:
 
 jobs:
   build:
-    runs-on: 'ubuntu-latest'
+    runs-on: "ubuntu-latest"
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: "actions/checkout@v4.0.0"
 
-      - name: 'Use Node.js'
+      - name: "Setup Node.js"
-        uses: 'actions/setup-node@v3.0.0'
+        uses: "actions/setup-node@v3.8.1"
         with:
-          node-version: '16.x'
+          node-version: "20.x"
-          cache: 'npm'
+          cache: "npm"
 
-      - name: 'Install'
+      - name: "Install dependencies"
-        run: 'npm install'
+        run: "npm clean-install"
 
-      - name: 'Build'
+      - name: "Build"
-        run: 'npm run build'
+        run: "npm run build"

.github/workflows/lint.yml

@@ -1,4 +1,4 @@
-name: 'Lint'
+name: "Lint"
 
 on:
   push:
@@ -8,40 +8,30 @@ on:
 
 jobs:
   lint:
-    runs-on: 'ubuntu-latest'
+    runs-on: "ubuntu-latest"
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: "actions/checkout@v4.0.0"
 
-      - name: 'Use Node.js'
+      - name: "Setup Node.js"
-        uses: 'actions/setup-node@v3.0.0'
+        uses: "actions/setup-node@v3.8.1"
         with:
-          node-version: '16.x'
+          node-version: "20.x"
-          cache: 'npm'
+          cache: "npm"
 
-      - name: 'Install'
+      - name: "Install dependencies"
-        run: 'npm install'
+        run: "npm clean-install"
 
-      - name: 'lint:commit'
+      - name: "lint:commit"
         run: 'npm run lint:commit -- --to "${{ github.sha }}"'
 
-      - name: 'lint:editorconfig'
+      - name: "lint:editorconfig"
-        run: 'npm run lint:editorconfig'
+        run: "npm run lint:editorconfig"
 
-      - name: 'lint:markdown'
+      - name: "lint:markdown"
-        run: 'npm run lint:markdown'
+        run: "npm run lint:markdown"
 
-      - name: 'lint:typescript'
+      - name: "lint:eslint"
-        run: 'npm run lint:typescript'
+        run: "npm run lint:eslint"
 
-      - name: 'lint:prettier'
+      - name: "lint:prettier"
-        run: 'npm run lint:prettier'
+        run: "npm run lint:prettier"
-
-      - name: 'lint:dotenv'
-        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

@@ -1,4 +1,4 @@
-name: 'Release'
+name: "Release"
 
 on:
   push:
@@ -6,39 +6,32 @@ on:
 
 jobs:
   release:
-    runs-on: 'ubuntu-latest'
+    runs-on: "ubuntu-latest"
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: "actions/checkout@v4.0.0"
         with:
           fetch-depth: 0
           persist-credentials: false
 
-      - name: 'Import GPG key'
+      - name: "Import GPG key"
-        uses: 'crazy-max/ghaction-import-gpg@v4'
+        uses: "crazy-max/ghaction-import-gpg@v6.0.0"
         with:
           gpg_private_key: ${{ secrets.GPG_PRIVATE_KEY }}
           git_user_signingkey: true
           git_commit_gpgsign: true
 
-      - name: 'Use Node.js'
+      - name: "Setup Node.js"
-        uses: 'actions/setup-node@v2.4.0'
+        uses: "actions/setup-node@v3.8.1"
         with:
-          node-version: '16.x'
+          node-version: "20.x"
-          cache: 'npm'
+          cache: "npm"
 
-      - name: 'Install'
+      - name: "Install dependencies"
-        run: 'npm install'
+        run: "npm clean-install"
 
-      - name: 'Release'
+      - name: "Release"
-        run: 'npm run release'
+        run: "npm run release"
         env:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
           GIT_COMMITTER_NAME: ${{ secrets.GIT_NAME }}
           GIT_COMMITTER_EMAIL: ${{ secrets.GIT_EMAIL }}
-
-      - name: 'Deploy to Vercel'
-        run: 'npm run deploy -- --token="${VERCEL_TOKEN}" --prod'
-        env:
-          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
-          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
-          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}

.github/workflows/test.yml

@@ -1,4 +1,4 @@
-name: 'Test'
+name: "Test"
 
 on:
   push:
@@ -8,63 +8,41 @@ on:
 
 jobs:
   test-unit:
-    runs-on: 'ubuntu-latest'
+    runs-on: "ubuntu-latest"
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: "actions/checkout@v4.0.0"
 
-      - name: 'Use Node.js'
+      - name: "Setup Node.js"
-        uses: 'actions/setup-node@v3.0.0'
+        uses: "actions/setup-node@v3.8.1"
         with:
-          node-version: '16.x'
+          node-version: "20.x"
-          cache: 'npm'
+          cache: "npm"
 
-      - name: 'Install'
+      - name: "Install dependencies"
-        run: 'npm install'
+        run: "npm clean-install"
 
-      - name: 'Unit Test'
+      - name: "Unit Test"
-        run: 'npm run test:unit'
+        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: 'html-w3c-validator'
-        run: 'npm run test:html-w3c-validator'
-
-      - name: 'Lighthouse'
-        run: 'npm run test:lighthouse'
-        env:
-          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
 
   test-e2e:
-    runs-on: 'ubuntu-latest'
+    runs-on: "ubuntu-latest"
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: "actions/checkout@v4.0.0"
 
-      - name: 'Use Node.js'
+      - name: "Setup Node.js"
-        uses: 'actions/setup-node@v3.0.0'
+        uses: "actions/setup-node@v3.8.1"
         with:
-          node-version: '16.x'
+          node-version: "20.x"
-          cache: 'npm'
+          cache: "npm"
 
-      - name: 'Install'
+      - name: "Install dependencies"
-        run: 'npm install'
+        run: "npm clean-install"
 
-      - name: 'Build'
+      - name: "Build"
-        run: 'npm run build'
+        run: "npm run build"
 
-      - name: 'End To End (e2e) Test'
+      - name: "html-w3c-validator"
-        run: 'npm run test:e2e'
+        run: "npm run test:html-w3c-validator"
+
+      - name: "End To End (e2e) Test"
+        run: "npm run test:e2e"

.gitignore

@@ -18,10 +18,6 @@ cypress/screenshots
 cypress/videos
 cypress/downloads
 
-# PWA
-**/workbox-*.js
-**/sw.js
-
 # envs
 .env
 .env.production
@@ -47,6 +43,8 @@ npm-debug.log*
 
 # misc
 .DS_Store
-.lighthouseci
-.vercel
 *.hbs
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.html-w3c-validatorrc.json

@@ -1,9 +1,9 @@
 {
   "urls": [
-    "http://localhost:3000/",
+    "http://127.0.0.1:3000/",
-    "http://localhost:3000/authentication/forgot-password",
+    "http://127.0.0.1:3000/authentication/forgot-password",
-    "http://localhost:3000/authentication/reset-password",
+    "http://127.0.0.1:3000/authentication/reset-password",
-    "http://localhost:3000/authentication/signin",
+    "http://127.0.0.1:3000/authentication/signin",
-    "http://localhost:3000/authentication/signup"
+    "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": {}
-  }
-}

.markdownlint-cli2.jsonc

@@ -1,11 +1,11 @@
 {
   "config": {
+    "extends": "markdownlint/style/prettier",
+    "relative-links": true,
     "default": true,
-    "MD013": false,
+    "MD033": false
-    "MD024": false,
-    "MD033": false,
-    "MD041": false
   },
   "globs": ["**/*.{md,mdx}"],
-  "ignores": ["**/node_modules"]
+  "ignores": ["**/node_modules"],
+  "customRules": ["markdownlint-rule-relative-links"]
 }

.prettierrc.json

@@ -1,6 +1,3 @@
 {
-  "singleQuote": true,
+  "semi": false
-  "jsxSingleQuote": true,
-  "semi": false,
-  "trailingComma": "none"
 }

.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

@@ -5,6 +5,10 @@
   "editor.bracketPairColorization.enabled": true,
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
-  }
+  },
+  "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@theoludwig.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
+The commit message guidelines adheres to [Conventional Commits](https://www.conventionalcommits.org/) and [Semantic Versioning](https://semver.org/) for releases.
-[@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.
 
 ### 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 clean-install`
+- `npm run generate`
+- Start editing JSON files with the translation in `locales/{{locale}}` (e.g: `locales/en`)

Dockerfile

@@ -1,23 +1,23 @@
-FROM node:16.17.0 AS dependencies
+FROM node:20.9.0 AS builder-dependencies
-WORKDIR /usr/src/app
+WORKDIR /usr/src/application
+COPY ./.npmrc ./
 COPY ./package*.json ./
-RUN npm install
+RUN npm clean-install
 
-FROM node:16.17.0 AS builder
+FROM node:20.9.0 AS builder
-WORKDIR /usr/src/app
+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.17.0 AS runner
+FROM gcr.io/distroless/nodejs20-debian12:latest AS runner
-WORKDIR /usr/src/app
+WORKDIR /usr/src/application
 ENV NODE_ENV=production
-COPY --from=builder /usr/src/app/next.config.js ./next.config.js
+ENV HOSTNAME=0.0.0.0
-COPY --from=builder /usr/src/app/public ./public
+ENV NEXT_TELEMETRY_DISABLED=1
-COPY --from=builder /usr/src/app/.next ./.next
+COPY --from=builder /usr/src/application/.next/standalone ./
-COPY --from=builder /usr/src/app/i18n.json ./i18n.json
+COPY --from=builder /usr/src/application/.next/static ./.next/static
-COPY --from=builder /usr/src/app/locales ./locales
+COPY --from=builder /usr/src/application/public ./public
-COPY --from=builder /usr/src/app/pages ./pages
+COPY --from=builder /usr/src/application/locales ./locales
-COPY --from=builder /usr/src/app/node_modules ./node_modules
+COPY --from=builder /usr/src/application/next.config.js ./next.config.js
-RUN npx next telemetry disable
+CMD ["./server.js"]
-CMD ["node_modules/.bin/next", "start", "--port", "${PORT}"]

README.md

@@ -1,4 +1,8 @@
-<h1 align="center"><a href="https://thream.divlo.fr/">Thream/website</a></h1>
+<h1 align="center"><a href="https://thream.theoludwig.fr/">Thream/website</a></h1>
+
+<p align="center">
+  <strong>⚠️ This project is not maintained anymore, you can still use the code as you wish and fork it to maintain it yourself.</strong>
+</p>
 
 <p align="center">
   <a href="./CONTRIBUTING.md"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat" /></a>
@@ -18,7 +22,7 @@
 
 Thream's website to stay close with your friends and communities.
 
-It uses [Thream/api](https://github.com/Thream/api) [v1.2.0](https://github.com/Thream/api/releases/tag/v1.2.0).
+It uses [Thream/api](https://github.com/Thream/api) [v1.2.10](https://github.com/Thream/api/releases/tag/v1.2.10).
 
 ## ⚙️ Getting Started
 
@@ -31,7 +35,7 @@ It uses [Thream/api](https://github.com/Thream/api) [v1.2.0](https://github.com/
 
 ```sh
 # Clone the repository
-git clone https://github.com/Thream/website.git
+git clone git@github.com:Thream/website.git
 
 # Go to the project root
 cd website
@@ -40,7 +44,7 @@ cd website
 cp .env.example .env
 
 # Install
-npm install
+npm clean-install
 ```
 
 You will need to configure the environment variables by creating an `.env` file at
@@ -61,7 +65,7 @@ docker compose up --build
 
 #### Services started
 
-- website : `http://localhost:3000`
+- `website`: <http://127.0.0.1:3000>
 
 ## 💡 Contributing
 

components/Application/Application.tsx

@@ -1,17 +1,18 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from "react"
-import Image from 'next/image'
+import Image from "next/image"
-import { PlusIcon, MenuIcon, UsersIcon, XIcon } from '@heroicons/react/solid'
+import { PlusIcon, MenuIcon, UsersIcon, XIcon } from "@heroicons/react/solid"
-import classNames from 'clsx'
+import classNames from "clsx"
-import { useMediaQuery } from 'react-responsive'
+import { useMediaQuery } from "react-responsive"
-import { useSwipeable } from 'react-swipeable'
+import { useSwipeable } from "react-swipeable"
 
-import { Sidebar, DirectionSidebar } from './Sidebar'
+import type { DirectionSidebar } from "./Sidebar"
-import { IconButton } from '../design/IconButton'
+import { Sidebar } from "./Sidebar"
-import { IconLink } from '../design/IconLink'
+import { IconButton } from "../design/IconButton"
-import { Guilds } from './Guilds/Guilds'
+import { IconLink } from "../design/IconLink"
-import { Divider } from '../design/Divider'
+import { Guilds } from "./Guilds/Guilds"
-import { Members } from './Members'
+import { Divider } from "../design/Divider"
-import { useAuthentication } from '../../tools/authentication'
+import { Members } from "./Members"
+import { useAuthentication } from "../../tools/authentication"
 
 export interface ChannelsPath {
   channelId: number
@@ -26,9 +27,9 @@ const isGuildsChannelsPath = (path: any): path is GuildsChannelsPath => {
 }
 
 export type ApplicationPath =
-  | '/application'
+  | "/application"
-  | '/application/guilds/join'
+  | "/application/guilds/join"
-  | '/application/guilds/create'
+  | "/application/guilds/create"
   | `/application/users/${number}`
   | `/application/users/settings`
   | GuildsChannelsPath
@@ -50,51 +51,51 @@ export const Application: React.FC<
   const [mounted, setMounted] = useState(false)
 
   const isMobile = useMediaQuery({
-    query: '(max-width: 900px)'
+    query: "(max-width: 900px)",
   })
 
   const [visibleSidebars, setVisibleSidebars] = useState({
     left: !isMobile,
-    right: false
+    right: false,
   })
 
   const handleToggleSidebars = (direction: DirectionSidebar): void => {
     if (!isMobile) {
-      if (direction === 'left') {
+      if (direction === "left") {
         return setVisibleSidebars({
           ...visibleSidebars,
-          left: !visibleSidebars.left
+          left: !visibleSidebars.left,
         })
       }
-      if (direction === 'right') {
+      if (direction === "right") {
         return setVisibleSidebars({
           ...visibleSidebars,
-          right: !visibleSidebars.right
+          right: !visibleSidebars.right,
         })
       }
     } else {
-      if (direction === 'right' && visibleSidebars.left) {
+      if (direction === "right" && visibleSidebars.left) {
         return setVisibleSidebars({
           left: false,
-          right: true
+          right: true,
         })
       }
-      if (direction === 'left' && visibleSidebars.right) {
+      if (direction === "left" && visibleSidebars.right) {
         return setVisibleSidebars({
           left: true,
-          right: false
+          right: false,
         })
       }
-      if (direction === 'left' && !visibleSidebars.right) {
+      if (direction === "left" && !visibleSidebars.right) {
         return setVisibleSidebars({
           ...visibleSidebars,
-          left: !visibleSidebars.left
+          left: !visibleSidebars.left,
         })
       }
-      if (direction === 'right' && !visibleSidebars.left) {
+      if (direction === "right" && !visibleSidebars.left) {
         return setVisibleSidebars({
           ...visibleSidebars,
-          right: !visibleSidebars.right
+          right: !visibleSidebars.right,
         })
       }
     }
@@ -104,7 +105,7 @@ export const Application: React.FC<
     if (isMobile && (visibleSidebars.left || visibleSidebars.right)) {
       return setVisibleSidebars({
         left: false,
-        right: false
+        right: false,
       })
     }
   }
@@ -119,7 +120,7 @@ export const Application: React.FC<
       }
       setVisibleSidebars({
         ...visibleSidebars,
-        left: true
+        left: true,
       })
     },
     onSwipedLeft: () => {
@@ -129,10 +130,10 @@ export const Application: React.FC<
         }
         setVisibleSidebars({
           ...visibleSidebars,
-          right: true
+          right: true,
         })
       }
-    }
+    },
   })
 
   useEffect(() => {
@@ -145,25 +146,29 @@ export const Application: React.FC<
 
   return (
     <>
-      <header className='z-50 flex h-16 items-center justify-between bg-gray-200 px-2 py-3 shadow-lg dark:bg-gray-800'>
+      <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'
+          className="h-10 w-10 p-2"
-          onClick={() => handleToggleSidebars('left')}
+          onClick={() => {
+            return handleToggleSidebars("left")
+          }}
         >
           {!visibleSidebars.left ? <MenuIcon /> : <XIcon />}
         </IconButton>
         <div
-          data-cy='application-title'
+          data-cy="application-title"
-          className='text-md font-semibold text-green-800 dark:text-green-400'
+          className="text-md font-semibold text-green-800 dark:text-green-400"
         >
           {title}
         </div>
-        <div className='flex space-x-2'>
+        <div className="flex space-x-2">
-          {title.startsWith('#') && (
+          {title.startsWith("#") && (
             <IconButton
-              data-cy='icon-button-right-sidebar-members'
+              data-cy="icon-button-right-sidebar-members"
-              className='h-10 w-10 p-2'
+              className="h-10 w-10 p-2"
-              onClick={() => handleToggleSidebars('right')}
+              onClick={() => {
+                return handleToggleSidebars("right")
+              }}
             >
               {!visibleSidebars.right ? <UsersIcon /> : <XIcon />}
             </IconButton>
@@ -172,26 +177,26 @@ export const Application: React.FC<
       </header>
 
       <main
-        className='h-full-without-header relative flex overflow-hidden'
+        className="h-full-without-header relative flex overflow-hidden"
         {...swipeableHandlers}
       >
         <Sidebar
-          direction='left'
+          direction="left"
           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`}
-              title='Settings'
+              title="Settings"
             >
               <Image
                 quality={100}
-                className='rounded-full'
+                className="rounded-full"
                 src={
                   user.logo == null
-                    ? '/images/data/user-default.png'
+                    ? "/images/data/user-default.png"
                     : user.logo
                 }
                 alt={"Users's profil picture"}
@@ -201,11 +206,11 @@ export const Application: React.FC<
               />
             </IconLink>
             <IconLink
-              href='/application'
+              href="/application"
-              selected={path === '/application'}
+              selected={path === "/application"}
-              title='Join or create a Guild'
+              title="Join or create a Guild"
             >
-              <PlusIcon className='h-12 w-12 text-green-800 dark:text-green-400' />
+              <PlusIcon className="h-12 w-12 text-green-800 dark:text-green-400" />
             </IconLink>
             <Divider />
             <Guilds path={path} />
@@ -214,14 +219,14 @@ export const Application: React.FC<
         </Sidebar>
 
         <div
-          id='application-page-content'
+          id="application-page-content"
           onClick={handleCloseSidebars}
           className={classNames(
-            'h-full-without-header relative top-0 z-0 flex w-full flex-1 flex-col overflow-y-auto transition',
+            "h-full-without-header relative top-0 z-0 flex w-full flex-1 flex-col overflow-y-auto transition",
             {
-              'absolute opacity-20':
+              "absolute opacity-20":
-                isMobile && (visibleSidebars.left || visibleSidebars.right)
+                isMobile && (visibleSidebars.left || visibleSidebars.right),
-            }
+            },
           )}
         >
           {children}
@@ -229,7 +234,7 @@ export const Application: React.FC<
 
         {isGuildsChannelsPath(path) && (
           <Sidebar
-            direction='right'
+            direction="right"
             visible={visibleSidebars.right}
             isMobile={isMobile}
           >

components/Application/ChannelSettings/ChannelSettings.tsx

@@ -1,26 +1,26 @@
-import { useRouter } from 'next/router'
+import { useRouter } from "next/router"
-import { useState } from 'react'
+import { useState } from "react"
-import { Form, useForm } from 'react-component-form'
+import { Form, useForm } from "react-component-form"
-import useTranslation from 'next-translate/useTranslation'
+import useTranslation from "next-translate/useTranslation"
-import classNames from 'clsx'
+import classNames from "clsx"
-import axios from 'axios'
+import axios from "axios"
-import type { HandleUseFormCallback } from 'react-component-form'
+import type { HandleUseFormCallback } from "react-component-form"
 
-import { FormState } from '../../design/FormState'
+import { FormState } from "../../design/FormState"
-import { useGuildMember } from '../../../contexts/GuildMember'
+import { useGuildMember } from "../../../contexts/GuildMember"
-import { Input } from '../../design/Input'
+import { Input } from "../../design/Input"
-import { Button } from '../../design/Button'
+import { Button } from "../../design/Button"
-import { useAuthentication } from '../../../tools/authentication'
+import { useAuthentication } from "../../../tools/authentication"
-import {
+import type {
   Channel,
-  channelSchema,
+  ChannelWithDefaultChannelId,
-  ChannelWithDefaultChannelId
+} from "../../../models/Channel"
-} from '../../../models/Channel'
+import { channelSchema } from "../../../models/Channel"
-import { ConfirmPopup } from '../ConfirmPopup'
+import { ConfirmPopup } from "../ConfirmPopup"
-import { useFormTranslation } from '../../../hooks/useFormTranslation'
+import { useFormTranslation } from "../../../hooks/useFormTranslation"
 
 const schema = {
-  name: channelSchema.name
+  name: channelSchema.name,
 }
 
 export interface ChannelSettingsProps {
@@ -36,7 +36,7 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
   const { channel } = props
 
   const [inputValues, setInputValues] = useState({
-    name: channel.name
+    name: channel.name,
   })
 
   const [confirmation, setConfirmation] = useState(false)
@@ -51,7 +51,7 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
     message,
     errors,
     setFetchState,
-    setMessage
+    setMessage,
   } = useForm(schema)
   const { getFirstErrorTranslation } = useFormTranslation()
 
@@ -63,8 +63,8 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
       return null
     } catch (error) {
       return {
-        type: 'error',
+        type: "error",
-        value: 'errors:server-error'
+        message: "errors:server-error",
       }
     }
   }
@@ -75,7 +75,7 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
     setInputValues((oldInputValues) => {
       return {
         ...oldInputValues,
-        [event.target.name]: event.target.value
+        [event.target.name]: event.target.value,
       }
     })
   }
@@ -84,15 +84,15 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
     try {
       const { data } =
         await authentication.api.delete<ChannelWithDefaultChannelId>(
-          `/channels/${channel.id}`
+          `/channels/${channel.id}`,
         )
       await router.push(`/application/${guild.id}/${data.defaultChannelId}`)
     } catch (error) {
-      setFetchState('error')
+      setFetchState("error")
       if (axios.isAxiosError(error) && error.response?.status === 400) {
-        setMessage('application:delete-channel-only-one')
+        setMessage("application:delete-channel-only-one")
       } else {
-        setMessage('errors:server-error')
+        setMessage("errors:server-error")
       }
     }
   }
@@ -101,37 +101,37 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
     <>
       <Form
         onSubmit={handleUseForm(onSubmit)}
-        className='my-auto flex flex-col items-center justify-center py-12'
+        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'>
+        <div className="flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row">
-          <div className=' flex w-full flex-wrap items-center justify-center px-6 sm:w-max'>
+          <div className=" flex w-full flex-wrap items-center justify-center px-6 sm:w-max">
-            <div className='mx-12 flex flex-col'>
+            <div className="mx-12 flex flex-col">
               <Input
-                name='name'
+                name="name"
-                label={t('common:name')}
+                label={t("common:name")}
-                placeholder={t('common:name')}
+                placeholder={t("common:name")}
-                className='!mt-0'
+                className="!mt-0"
                 onChange={onChange}
                 value={inputValues.name}
                 error={getFirstErrorTranslation(errors.name)}
-                data-cy='channel-name-input'
+                data-cy="channel-name-input"
               />
             </div>
           </div>
         </div>
 
-        <div className='mt-12 flex flex-col items-center justify-center sm:w-fit'>
+        <div className="mt-12 flex flex-col items-center justify-center sm:w-fit">
-          <div className='space-x-6'>
+          <div className="space-x-6">
-            <Button type='submit' data-cy='button-save-channel-settings'>
+            <Button type="submit" data-cy="button-save-channel-settings">
-              {t('application:save')}
+              {t("application:save")}
             </Button>
             <Button
-              type='button'
+              type="button"
-              color='red'
+              color="red"
               onClick={handleConfirmation}
-              data-cy='button-delete-channel-settings'
+              data-cy="button-delete-channel-settings"
             >
-              {t('application:delete')}
+              {t("application:delete")}
             </Button>
           </div>
           <FormState state={fetchState} message={message} />
@@ -139,17 +139,17 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
       </Form>
       <div
         className={classNames(
-          'pointer-events-none invisible absolute z-50 flex h-full w-full items-center justify-center bg-black bg-opacity-90 opacity-0 backdrop-blur-md transition-all',
+          "pointer-events-none invisible absolute z-50 flex h-full w-full items-center justify-center bg-black bg-opacity-90 opacity-0 backdrop-blur-md transition-all",
-          { 'pointer-events-auto !visible !opacity-100': confirmation }
+          { "pointer-events-auto !visible !opacity-100": confirmation },
         )}
       >
         <ConfirmPopup
-          className={classNames('relative top-8 transition-all', {
+          className={classNames("relative top-8 transition-all", {
-            '!top-0': confirmation
+            "!top-0": confirmation,
           })}
           handleYes={handleDelete}
           handleNo={handleConfirmation}
-          title={`${t('application:delete-the-channel')} ?`}
+          title={`${t("application:delete-the-channel")} ?`}
         />
       </div>
     </>

components/Application/ChannelSettings/index.ts

@@ -1 +1 @@
-export * from './ChannelSettings'
+export * from "./ChannelSettings"

components/Application/Channels/Channel.tsx

@@ -1,12 +1,13 @@
-import classNames from 'clsx'
+import { memo } from "react"
-import Link from 'next/link'
+import classNames from "clsx"
-import { useRouter } from 'next/router'
+import Link from "next/link"
-import { CogIcon } from '@heroicons/react/solid'
+import { useRouter } from "next/router"
+import { CogIcon } from "@heroicons/react/solid"
 
-import { GuildsChannelsPath } from '../Application'
+import type { GuildsChannelsPath } from "../Application"
-import { Channel as ChannelType } from '../../../models/Channel'
+import type { Channel as ChannelType } from "../../../models/Channel"
-import { useGuildMember } from '../../../contexts/GuildMember'
+import { useGuildMember } from "../../../contexts/GuildMember"
-import { IconButton } from '../../design/IconButton'
+import { IconButton } from "../../design/IconButton"
 
 export interface ChannelProps {
   path: GuildsChannelsPath
@@ -14,42 +15,40 @@ export interface ChannelProps {
   selected?: boolean
 }
 
-export const Channel: React.FC<ChannelProps> = (props) => {
+const ChannelMemo: React.FC<ChannelProps> = (props) => {
   const { channel, path, selected = false } = props
   const router = useRouter()
 
   const { member } = useGuildMember()
 
   return (
-    <Link href={`/application/${path.guildId}/${channel.id}`}>
+    <Link
-      <a
+      href={`/application/${path.guildId}/${channel.id}`}
-        className={classNames(
+      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',
+        "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
+          "font-semibold text-green-800 dark:text-green-400": selected,
-          }
+        },
-        )}
+      )}
-      >
+    >
-        <span
+      <span className="max-[315px] ml-2 mr-4 break-all" data-cy="channel-name">
-          className='max-[315px] ml-2 mr-4 break-all'
+        # {channel.name}
-          data-cy='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"
         >
-          # {channel.name}
+          <CogIcon height={20} width={20} />
-        </span>
+        </IconButton>
-        {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>
   )
 }
+
+export const Channel = memo(ChannelMemo)

components/Application/Channels/Channels.tsx

@@ -1,9 +1,9 @@
-import InfiniteScroll from 'react-infinite-scroll-component'
+import InfiniteScroll from "react-infinite-scroll-component"
 
-import { useChannels } from '../../../contexts/Channels'
+import { useChannels } from "../../../contexts/Channels"
-import { GuildsChannelsPath } from '../Application'
+import type { GuildsChannelsPath } from "../Application"
-import { Loader } from '../../design/Loader'
+import { Loader } from "../../design/Loader"
-import { Channel } from './Channel'
+import { Channel } from "./Channel"
 
 export interface ChannelsProps {
   path: GuildsChannelsPath
@@ -16,12 +16,12 @@ export const Channels: React.FC<ChannelsProps> = (props) => {
 
   return (
     <div
-      id='channels'
+      id="channels"
-      className='scrollbar-firefox-support flex flex-1 flex-col overflow-y-auto'
+      className="scrollbar-firefox-support flex flex-1 flex-col overflow-y-auto"
     >
       <InfiniteScroll
-        className='channels-list w-full'
+        className="channels-list w-full"
-        scrollableTarget='channels'
+        scrollableTarget="channels"
         dataLength={channels.length}
         next={nextPage}
         hasMore={hasMore}

components/Application/Channels/index.ts

@@ -1 +1 @@
-export * from './Channels'
+export * from "./Channels"

components/Application/ConfirmPopup/ConfirmPopup.tsx

@@ -1,9 +1,9 @@
-import Image from 'next/image'
+import Image from "next/image"
-import { useState } from 'react'
+import { useState } from "react"
-import useTranslation from 'next-translate/useTranslation'
+import useTranslation from "next-translate/useTranslation"
-import classNames from 'clsx'
+import classNames from "clsx"
 
-import { Loader } from '../../design/Loader'
+import { Loader } from "../../design/Loader"
 
 export interface ConfirmPopupProps {
   className?: string
@@ -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,43 +27,43 @@ 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
+            "scale-100": isLoading,
-          }
+          },
         )}
       />
       <div
         className={classNames(
-          'visible flex flex-col items-center opacity-100 transition-all',
+          "visible flex flex-col items-center opacity-100 transition-all",
           {
-            'invisible opacity-0': isLoading
+            "invisible opacity-0": isLoading,
-          }
+          },
         )}
       >
         <Image
           quality={100}
-          src='/images/svg/design/join-guild.svg'
+          src="/images/svg/design/join-guild.svg"
-          alt='Illustration'
+          alt="Illustration"
           height={150}
           width={150}
         />
-        <div className='mt-8 flex flex-col'>
+        <div className="mt-8 flex flex-col">
-          <h1 className='mb-6 text-center text-xl'>{props.title}</h1>
+          <h1 className="mb-6 text-center text-xl">{props.title}</h1>
-          <div className='flex gap-7'>
+          <div className="flex gap-7">
             <button
-              className='rounded-3xl bg-success px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75'
+              className="rounded-3xl bg-success px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75"
               onClick={handleYesLoading}
-              data-cy='confirm-popup-yes-button'
+              data-cy="confirm-popup-yes-button"
             >
-              {t('common:yes')}
+              {t("common:yes")}
             </button>
             <button
-              className='rounded-3xl bg-error px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75'
+              className="rounded-3xl bg-error px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75"
               onClick={props.handleNo}
-              data-cy='confirm-popup-no-button'
+              data-cy="confirm-popup-no-button"
             >
-              {t('common:no')}
+              {t("common:no")}
             </button>
           </div>
         </div>

components/Application/ConfirmPopup/index.ts

@@ -1 +1 @@
-export * from './ConfirmPopup'
+export * from "./ConfirmPopup"

components/Application/CreateChannel/CreateChannel.tsx

@@ -1,19 +1,20 @@
-import { useRouter } from 'next/router'
+import { useRouter } from "next/router"
-import useTranslation from 'next-translate/useTranslation'
+import useTranslation from "next-translate/useTranslation"
-import { Form, useForm } from 'react-component-form'
+import { Form, useForm } from "react-component-form"
-import type { HandleUseFormCallback } from 'react-component-form'
+import type { HandleUseFormCallback } from "react-component-form"
 
-import { useAuthentication } from '../../../tools/authentication'
+import { useAuthentication } from "../../../tools/authentication"
-import { Input } from '../../design/Input'
+import { Input } from "../../design/Input"
-import { Main } from '../../design/Main'
+import { Main } from "../../design/Main"
-import { Button } from '../../design/Button'
+import { Button } from "../../design/Button"
-import { FormState } from '../../design/FormState'
+import { FormState } from "../../design/FormState"
-import { Channel, channelSchema } from '../../../models/Channel'
+import type { Channel } from "../../../models/Channel"
-import { useGuildMember } from '../../../contexts/GuildMember'
+import { channelSchema } from "../../../models/Channel"
-import { useFormTranslation } from '../../../hooks/useFormTranslation'
+import { useGuildMember } from "../../../contexts/GuildMember"
+import { useFormTranslation } from "../../../hooks/useFormTranslation"
 
 const schema = {
-  name: channelSchema.name
+  name: channelSchema.name,
 }
 
 export const CreateChannel: React.FC = () => {
@@ -30,38 +31,38 @@ export const CreateChannel: React.FC = () => {
     try {
       const { data: channel } = await authentication.api.post<Channel>(
         `/guilds/${guild.id}/channels`,
-        formData
+        formData,
       )
       await router.push(`/application/${guild.id}/${channel.id}`)
       return null
     } catch (error) {
       return {
-        type: 'error',
+        type: "error",
-        value: 'errors:server-error'
+        message: "errors:server-error",
       }
     }
   }
 
   return (
     <Main>
-      <Form className='w-4/6 max-w-xs' onSubmit={handleUseForm(onSubmit)}>
+      <Form className="w-4/6 max-w-xs" onSubmit={handleUseForm(onSubmit)}>
         <Input
-          type='text'
+          type="text"
-          placeholder={t('common:name')}
+          placeholder={t("common:name")}
-          name='name'
+          name="name"
-          label={t('common:name')}
+          label={t("common:name")}
           error={getFirstErrorTranslation(errors.name)}
-          data-cy='channel-name-input'
+          data-cy="channel-name-input"
         />
         <Button
-          className='mt-6 w-full'
+          className="mt-6 w-full"
-          type='submit'
+          type="submit"
-          data-cy='button-create-channel'
+          data-cy="button-create-channel"
         >
-          {t('application:create')}
+          {t("application:create")}
         </Button>
       </Form>
-      <FormState id='message' state={fetchState} message={message} />
+      <FormState id="message" state={fetchState} message={message} />
     </Main>
   )
 }

components/Application/CreateChannel/index.ts

@@ -1 +1 @@
-export * from './CreateChannel'
+export * from "./CreateChannel"

components/Application/CreateGuild/CreateGuild.tsx

@@ -1,71 +1,76 @@
-import { useRouter } from 'next/router'
+import { useRouter } from "next/router"
-import useTranslation from 'next-translate/useTranslation'
+import useTranslation from "next-translate/useTranslation"
-import { Form, useForm } from 'react-component-form'
+import { Form, useForm } from "react-component-form"
-import { AxiosResponse } from 'axios'
+import type { AxiosResponse } from "axios"
-import type { HandleUseFormCallback } from 'react-component-form'
+import type { HandleUseFormCallback } from "react-component-form"
 
-import { useAuthentication } from '../../../tools/authentication'
+import { useAuthentication } from "../../../tools/authentication"
-import { GuildComplete, guildSchema } from '../../../models/Guild'
+import type { GuildComplete } from "../../../models/Guild"
-import { Input } from '../../design/Input'
+import { guildSchema } from "../../../models/Guild"
-import { Main } from '../../design/Main'
+import { Input } from "../../design/Input"
-import { Button } from '../../design/Button'
+import { Main } from "../../design/Main"
-import { FormState } from '../../design/FormState'
+import { Button } from "../../design/Button"
-import { Textarea } from '../../design/Textarea'
+import { FormState } from "../../design/FormState"
-import { useFormTranslation } from '../../../hooks/useFormTranslation'
+import { Textarea } from "../../design/Textarea"
+import { useFormTranslation } from "../../../hooks/useFormTranslation"
 
 const schema = {
   name: guildSchema.name,
-  description: guildSchema.description
+  description: guildSchema.description,
 }
 
 export const CreateGuild: React.FC = () => {
   const { t } = useTranslation()
   const router = useRouter()
 
-  const { handleUseForm, fetchState, message, errors } = useForm(schema as any)
+  const { handleUseForm, fetchState, message, errors } = useForm(schema)
   const { getFirstErrorTranslation } = useFormTranslation()
 
   const { authentication } = useAuthentication()
 
-  const onSubmit: HandleUseFormCallback<any> = 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 })
+      >("/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',
+        type: "error",
-        value: 'errors:server-error'
+        message: "errors:server-error",
       }
     }
   }
 
   return (
     <Main>
-      <Form className='w-4/6 max-w-xs' onSubmit={handleUseForm(onSubmit)}>
+      <Form className="w-4/6 max-w-xs" onSubmit={handleUseForm(onSubmit)}>
         <Input
-          type='text'
+          type="text"
-          placeholder={t('common:name')}
+          placeholder={t("common:name")}
-          name='name'
+          name="name"
-          label={t('common:name')}
+          label={t("common:name")}
           error={getFirstErrorTranslation(errors.name)}
         />
         <Textarea
-          label='Description'
+          label="Description"
-          placeholder='Description'
+          placeholder="Description"
-          id='description'
+          id="description"
         />
-        <Button className='mt-6 w-full' type='submit' data-cy='submit'>
+        <Button className="mt-6 w-full" type="submit" data-cy="submit">
-          {t('application:create')}
+          {t("application:create")}
         </Button>
       </Form>
       <FormState
-        id='message'
+        id="message"
         state={fetchState}
         message={message != null ? t(message) : undefined}
       />

components/Application/CreateGuild/index.ts

@@ -1 +1 @@
-export * from './CreateGuild'
+export * from "./CreateGuild"

components/Application/GuildLeftSidebar/GuildLeftSidebar.tsx

@@ -1,11 +1,11 @@
-import Link from 'next/link'
+import Link from "next/link"
-import { CogIcon, PlusIcon } from '@heroicons/react/solid'
+import { CogIcon, PlusIcon } from "@heroicons/react/solid"
 
-import { useGuildMember } from '../../../contexts/GuildMember'
+import { useGuildMember } from "../../../contexts/GuildMember"
-import { Divider } from '../../design/Divider'
+import { Divider } from "../../design/Divider"
-import { Channels } from '../Channels'
+import { Channels } from "../Channels"
-import { IconButton } from '../../design/IconButton'
+import { IconButton } from "../../design/IconButton"
-import { GuildsChannelsPath } from '..'
+import type { GuildsChannelsPath } from ".."
 
 export interface GuildLeftSidebarProps {
   path: GuildsChannelsPath
@@ -17,31 +17,35 @@ export const GuildLeftSidebar: React.FC<GuildLeftSidebarProps> = (props) => {
   const { guild, member } = useGuildMember()
 
   return (
-    <div className='mt-2 flex w-full flex-col justify-between'>
+    <div className="mt-2 flex w-full flex-col justify-between">
-      <div className='mx-8 mt-2 p-2 text-center'>
+      <div className="mx-8 mt-2 p-2 text-center">
-        <h2 data-cy='guild-left-sidebar-title' className='text-xl'>
+        <h2 data-cy="guild-left-sidebar-title" className="text-xl">
           {guild.name}
         </h2>
       </div>
       <Divider />
       <Channels path={path} />
       <Divider />
-      <div className='mb-1 flex items-center justify-center space-x-6 p-2'>
+      <div className="mb-1 flex items-center justify-center space-x-6 p-2">
         {member.isOwner && (
-          <Link href={`/application/${path.guildId}/channels/create`} passHref>
+          <Link
-            <a data-cy='link-add-channel'>
+            href={`/application/${path.guildId}/channels/create`}
-              <IconButton className='h-10 w-10' title='Add a Channel'>
+            passHref
-                <PlusIcon />
+            data-cy="link-add-channel"
-              </IconButton>
+          >
-            </a>
+            <IconButton className="h-10 w-10" title="Add a Channel">
+              <PlusIcon />
+            </IconButton>
           </Link>
         )}
-        <Link href={`/application/${path.guildId}/settings`} passHref>
+        <Link
-          <a data-cy='link-settings-guild'>
+          href={`/application/${path.guildId}/settings`}
-            <IconButton className='h-7 w-7' title='Settings'>
+          passHref
-              <CogIcon />
+          data-cy="link-settings-guild"
-            </IconButton>
+        >
-          </a>
+          <IconButton className="h-7 w-7" title="Settings">
+            <CogIcon />
+          </IconButton>
         </Link>
       </div>
     </div>

components/Application/GuildLeftSidebar/index.ts

@@ -1 +1 @@
-export * from './GuildLeftSidebar'
+export * from "./GuildLeftSidebar"

components/Application/GuildSettings/GuildSettings.tsx

@@ -1,26 +1,26 @@
-import Image from 'next/image'
+import Image from "next/image"
-import { useRouter } from 'next/router'
+import { useRouter } from "next/router"
-import { useState } from 'react'
+import { useState } from "react"
-import { Type } from '@sinclair/typebox'
+import { Type } from "@sinclair/typebox"
-import { PhotographIcon } from '@heroicons/react/solid'
+import { PhotographIcon } from "@heroicons/react/solid"
-import { Form, useForm } from 'react-component-form'
+import { Form, useForm } from "react-component-form"
-import useTranslation from 'next-translate/useTranslation'
+import useTranslation from "next-translate/useTranslation"
-import classNames from 'clsx'
+import classNames from "clsx"
-import type { HandleUseFormCallback } from 'react-component-form'
+import type { HandleUseFormCallback } from "react-component-form"
 
-import { guildSchema } from '../../../models/Guild'
+import { guildSchema } from "../../../models/Guild"
-import { FormState } from '../../design/FormState'
+import { FormState } from "../../design/FormState"
-import { useGuildMember } from '../../../contexts/GuildMember'
+import { useGuildMember } from "../../../contexts/GuildMember"
-import { Textarea } from '../../design/Textarea'
+import { Textarea } from "../../design/Textarea"
-import { Input } from '../../design/Input'
+import { Input } from "../../design/Input"
-import { Button } from '../../design/Button'
+import { Button } from "../../design/Button"
-import { useAuthentication } from '../../../tools/authentication'
+import { useAuthentication } from "../../../tools/authentication"
-import { ConfirmPopup } from '../ConfirmPopup'
+import { ConfirmPopup } from "../ConfirmPopup"
-import { useFormTranslation } from '../../../hooks/useFormTranslation'
+import { useFormTranslation } from "../../../hooks/useFormTranslation"
 
 const schema = {
   name: guildSchema.name,
-  description: Type.Optional(guildSchema.description)
+  description: Type.Optional(guildSchema.description),
 }
 
 export const GuildSettings: React.FC = () => {
@@ -31,7 +31,7 @@ export const GuildSettings: React.FC = () => {
 
   const [inputValues, setInputValues] = useState({
     name: guild.name,
-    description: guild.description
+    description: guild.description,
   })
 
   const [confirmation, setConfirmation] = useState(false)
@@ -46,22 +46,22 @@ export const GuildSettings: React.FC = () => {
     message,
     errors,
     setFetchState,
-    setMessage
+    setMessage,
-  } = useForm(schema as any)
+  } = useForm(schema)
   const { getFirstErrorTranslation } = useFormTranslation()
 
-  const onSubmit: HandleUseFormCallback<any> = async (formData) => {
+  const onSubmit: HandleUseFormCallback<typeof schema> = async (formData) => {
     try {
       await authentication.api.put(`/guilds/${guild.id}`, formData)
       setInputValues(formData as unknown as any)
       return {
-        type: 'success',
+        type: "success",
-        value: 'application:saved-information'
+        message: "application:saved-information",
       }
     } catch (error) {
       return {
-        type: 'error',
+        type: "error",
-        value: 'errors:server-error'
+        message: "errors:server-error",
       }
     }
   }
@@ -72,26 +72,30 @@ export const GuildSettings: React.FC = () => {
     setInputValues((oldInputValues) => {
       return {
         ...oldInputValues,
-        [event.target.name]: event.target.value
+        [event.target.name]: event.target.value,
       }
     })
   }
 
   const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = async (
-    event
+    event,
   ) => {
-    setFetchState('loading')
+    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)
+      formData.append("icon", file)
       try {
-        await authentication.api.put(`/guilds/${guild.id}/icon`, formData)
+        await authentication.api.put(`/guilds/${guild.id}/icon`, formData, {
-        setFetchState('idle')
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+        })
+        setFetchState("idle")
       } catch (error) {
-        setFetchState('error')
+        setFetchState("error")
-        setMessage('errors:server-error')
+        setMessage("errors:server-error")
       }
     }
   }
@@ -100,18 +104,18 @@ export const GuildSettings: React.FC = () => {
     try {
       await authentication.api.delete(`/guilds/${guild.id}`)
     } catch (error) {
-      setFetchState('error')
+      setFetchState("error")
-      setMessage('errors:server-error')
+      setMessage("errors:server-error")
     }
   }
 
   const handleLeave = async (): Promise<void> => {
     try {
       await authentication.api.delete(`/guilds/${guild.id}/members/leave`)
-      await router.push('/application')
+      await router.push("/application")
     } catch (error) {
-      setFetchState('error')
+      setFetchState("error")
-      setMessage('errors:server-error')
+      setMessage("errors:server-error")
     }
   }
 
@@ -119,85 +123,85 @@ export const GuildSettings: React.FC = () => {
     <>
       <Form
         onSubmit={handleUseForm(onSubmit)}
-        className='my-auto flex flex-col items-center justify-center py-12'
+        className="my-auto flex flex-col items-center justify-center py-12"
       >
         {member.isOwner && (
-          <div className='flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row'>
+          <div className="flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row">
-            <div className=' flex w-full flex-wrap items-center justify-center px-6 sm:w-max'>
+            <div className=" flex w-full flex-wrap items-center justify-center px-6 sm:w-max">
-              <div className='relative'>
+              <div className="relative">
-                <div className='absolute z-50 h-full w-full'>
+                <div className="absolute z-50 h-full w-full">
-                  <button className='relative flex h-full w-full items-center justify-center transition hover:scale-110'>
+                  <button className="relative flex h-full w-full items-center justify-center transition hover:scale-110">
                     <input
-                      type='file'
+                      type="file"
-                      className='absolute h-full w-full cursor-pointer opacity-0'
+                      className="absolute h-full w-full cursor-pointer opacity-0"
                       onChange={handleFileChange}
                     />
-                    <PhotographIcon color='white' className='h-8 w-8' />
+                    <PhotographIcon color="white" className="h-8 w-8" />
                   </button>
                 </div>
-                <div className='flex items-center justify-center rounded-full bg-black shadow-xl'>
+                <div className="flex items-center justify-center rounded-full bg-black shadow-xl">
                   <Image
                     quality={100}
-                    className='rounded-full opacity-50'
+                    className="rounded-full opacity-50"
                     src={
                       guild.icon == null
-                        ? '/images/data/guild-default.png'
+                        ? "/images/data/guild-default.png"
                         : guild.icon
                     }
-                    alt='Profil Picture'
+                    alt="Profil Picture"
-                    draggable='false'
+                    draggable="false"
                     height={125}
                     width={125}
                   />
                 </div>
               </div>
-              <div className='mx-12 flex flex-col'>
+              <div className="mx-12 flex flex-col">
                 <Input
-                  name='name'
+                  name="name"
-                  label={t('common:name')}
+                  label={t("common:name")}
-                  placeholder={t('common:name')}
+                  placeholder={t("common:name")}
-                  className='!mt-0'
+                  className="!mt-0"
                   onChange={onChange}
                   value={inputValues.name}
                   error={getFirstErrorTranslation(errors.name)}
-                  data-cy='guild-name-input'
+                  data-cy="guild-name-input"
                 />
                 <Textarea
-                  name='description'
+                  name="description"
-                  label={'Description'}
+                  label={"Description"}
-                  placeholder={'Description'}
+                  placeholder={"Description"}
-                  id='textarea-description'
+                  id="textarea-description"
                   onChange={onChange}
-                  value={inputValues.description ?? ''}
+                  value={inputValues.description ?? ""}
-                  data-cy='guild-description-input'
+                  data-cy="guild-description-input"
                 />
               </div>
             </div>
           </div>
         )}
-        <div className='mt-12 flex flex-col items-center justify-center sm:w-fit'>
+        <div className="mt-12 flex flex-col items-center justify-center sm:w-fit">
-          <div className='space-x-6'>
+          <div className="space-x-6">
             {member.isOwner ? (
               <>
-                <Button type='submit' data-cy='button-save-guild-settings'>
+                <Button type="submit" data-cy="button-save-guild-settings">
-                  {t('application:save')}
+                  {t("application:save")}
                 </Button>
                 <Button
-                  type='button'
+                  type="button"
-                  color='red'
+                  color="red"
                   onClick={handleConfirmation}
-                  data-cy='button-delete-guild-settings'
+                  data-cy="button-delete-guild-settings"
                 >
-                  {t('application:delete')}
+                  {t("application:delete")}
                 </Button>
               </>
             ) : (
               <Button
-                color='red'
+                color="red"
                 onClick={handleLeave}
-                data-cy='button-leave-guild-settings'
+                data-cy="button-leave-guild-settings"
               >
-                {t('application:leave')} {guild.name}
+                {t("application:leave")} {guild.name}
               </Button>
             )}
           </div>
@@ -206,24 +210,24 @@ export const GuildSettings: React.FC = () => {
             message={
               message != null
                 ? t(message)
-                : getFirstErrorTranslation(errors.email)
+                : getFirstErrorTranslation(errors.name)
             }
           />
         </div>
       </Form>
       <div
         className={classNames(
-          'pointer-events-none invisible absolute z-50 flex h-full w-full items-center justify-center bg-black bg-opacity-90 opacity-0 backdrop-blur-md transition-all',
+          "pointer-events-none invisible absolute z-50 flex h-full w-full items-center justify-center bg-black bg-opacity-90 opacity-0 backdrop-blur-md transition-all",
-          { 'pointer-events-auto !visible !opacity-100': confirmation }
+          { "pointer-events-auto !visible !opacity-100": confirmation },
         )}
       >
         <ConfirmPopup
-          className={classNames('relative top-8 transition-all', {
+          className={classNames("relative top-8 transition-all", {
-            '!top-0': confirmation
+            "!top-0": confirmation,
           })}
           handleYes={handleDelete}
           handleNo={handleConfirmation}
-          title={`${t('application:delete-the-guild')} ?`}
+          title={`${t("application:delete-the-guild")} ?`}
         />
       </div>
     </>

components/Application/GuildSettings/index.ts

@@ -1 +1 @@
-export * from './GuildSettings'
+export * from "./GuildSettings"

components/Application/Guilds/Guild.tsx

@@ -1,31 +1,32 @@
-import Image from 'next/image'
+import { memo } from "react"
+import Image from "next/image"
 
-import { GuildWithDefaultChannelId } from '../../../models/Guild'
+import type { GuildWithDefaultChannelId } from "../../../models/Guild"
-import { IconLink } from '../../design/IconLink'
+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 (
     <IconLink
-      className='mt-2'
+      className="mt-2"
       href={`/application/${guild.id}/${guild.defaultChannelId}`}
       selected={selected}
       title={guild.name}
     >
-      <div className='pl-[6px]'>
+      <div className="pl-[6px]">
         <Image
           quality={100}
-          className='rounded-full'
+          className="rounded-full"
           src={
-            guild.icon != null ? guild.icon : '/images/data/guild-default.png'
+            guild.icon != null ? guild.icon : "/images/data/guild-default.png"
           }
-          alt='logo'
+          alt="logo"
           width={48}
           height={48}
           draggable={false}
@@ -34,3 +35,5 @@ export const Guild: React.FC<GuildProps> = (props) => {
     </IconLink>
   )
 }
+
+export const Guild = memo(GuildMemo)

components/Application/Guilds/Guilds.tsx

@@ -1,9 +1,9 @@
-import InfiniteScroll from 'react-infinite-scroll-component'
+import InfiniteScroll from "react-infinite-scroll-component"
 
-import { Loader } from '../../design/Loader'
+import { Loader } from "../../design/Loader"
-import { useGuilds } from '../../../contexts/Guilds'
+import { useGuilds } from "../../../contexts/Guilds"
-import { GuildsPath } from '..'
+import type { GuildsPath } from ".."
-import { Guild } from './Guild'
+import { Guild } from "./Guild"
 
 export interface GuildsProps {
   path: GuildsPath | string
@@ -16,19 +16,19 @@ export const Guilds: React.FC<GuildsProps> = (props) => {
 
   return (
     <div
-      id='guilds-list'
+      id="guilds-list"
-      className='border-r-1 scrollbar-firefox-support mt-[130px] h-full min-w-[92px] space-y-2 overflow-y-auto border-gray-500 pt-2 dark:border-white/20'
+      className="border-r-1 scrollbar-firefox-support mt-[130px] h-full min-w-[92px] space-y-2 overflow-y-auto border-gray-500 pt-2 dark:border-white/20"
     >
       <InfiniteScroll
-        className='guilds-list'
+        className="guilds-list"
         dataLength={guilds.length}
         next={nextPage}
         hasMore={hasMore}
-        scrollableTarget='guilds-list'
+        scrollableTarget="guilds-list"
         loader={<Loader />}
       >
         {guilds.map((guild) => {
-          const selected = typeof path !== 'string' && path.guildId === guild.id
+          const selected = typeof path !== "string" && path.guildId === guild.id
           return <Guild key={guild.id} guild={guild} selected={selected} />
         })}
       </InfiniteScroll>

components/Application/Guilds/index.ts

@@ -1 +1 @@
-export * from './Guilds'
+export * from "./Guilds"

components/Application/JoinGuildsPublic/GuildPublic.tsx

@@ -1,17 +1,17 @@
-import Image from 'next/image'
+import Image from "next/image"
-import { useRouter } from 'next/router'
+import { useRouter } from "next/router"
-import { useState } from 'react'
+import { useState } from "react"
-import useTranslation from 'next-translate/useTranslation'
+import useTranslation from "next-translate/useTranslation"
-import classNames from 'clsx'
+import classNames from "clsx"
-import axios from 'axios'
+import axios from "axios"
 
-import { Emoji } from '../../Emoji'
+import { Emoji } from "../../Emoji"
-import { ConfirmPopup } from '../ConfirmPopup'
+import { ConfirmPopup } from "../ConfirmPopup"
-import {
+import type {
   GuildPublic as GuildPublicType,
-  GuildWithDefaultChannelId
+  GuildWithDefaultChannelId,
-} from '../../../models/Guild'
+} from "../../../models/Guild"
-import { useAuthentication } from '../../../tools/authentication'
+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> => {
@@ -34,70 +36,70 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
         guild: GuildWithDefaultChannelId
       }>(`/guilds/${guild.id}/members/join`)
       await router.push(
-        `/application/${guild.id}/${data.guild.defaultChannelId}`
+        `/application/${guild.id}/${data.guild.defaultChannelId}`,
       )
     } catch (error) {
       if (
         axios.isAxiosError(error) &&
         error.response?.status === 400 &&
-        typeof error?.response?.data.defaultChannelId === 'number'
+        typeof error?.response?.data.defaultChannelId === "number"
       ) {
         const defaultChannelId = error.response.data.defaultChannelId as number
         await router.push(`/application/${guild.id}/${defaultChannelId}`)
       } else {
-        await router.push('/application')
+        await router.push("/application")
       }
     }
   }
 
   return (
-    <div className='relative h-80 overflow-hidden rounded border border-gray-500 shadow-lg transition duration-200 ease-in-out hover:-translate-y-2 hover:shadow-none dark:border-gray-700'>
+    <div className="relative h-80 overflow-hidden rounded border border-gray-500 shadow-lg transition duration-200 ease-in-out hover:-translate-y-2 hover:shadow-none dark:border-gray-700">
       <div
         className={classNames(
-          'flex h-full cursor-pointer flex-col items-center justify-center p-4 pt-8 transition duration-200 ease-in-out',
+          "flex h-full cursor-pointer flex-col items-center justify-center p-4 pt-8 transition duration-200 ease-in-out",
-          { '-translate-x-full': isConfirmed }
+          { "-translate-x-full": isConfirmed },
         )}
         onClick={handleIsConfirmed}
       >
         <Image
           quality={100}
-          className='rounded-full'
+          className="rounded-full"
           src={
-            guild.icon != null ? guild.icon : '/images/data/guild-default.png'
+            guild.icon != null ? guild.icon : "/images/data/guild-default.png"
           }
-          alt='logo'
+          alt="logo"
           width={80}
           height={80}
         />
-        <div className='m-2 mt-6 w-full px-4 text-center'>
+        <div className="m-2 mt-6 w-full px-4 text-center">
           <h3
-            data-cy='guild-name'
+            data-cy="guild-name"
-            className='center mb-2 w-full truncate text-xl font-bold'
+            className="center mb-2 w-full truncate text-xl font-bold"
           >
             {guild.name}
           </h3>
-          <p className='break-words'>
+          <p className="break-words">
             {guild.description != null ? (
               guild.description
             ) : (
-              <span className='flex h-full items-center justify-center opacity-40 dark:opacity-20'>
+              <span className="flex h-full items-center justify-center opacity-40 dark:opacity-20">
-                <Emoji value=':eyes:' size={25} />
+                <Emoji value=":eyes:" size={25} />
-                <span className='ml-2'>{t('application:nothing-here')}</span>
+                <span className="ml-2">{t("application:nothing-here")}</span>
               </span>
             )}
           </p>
         </div>
-        <p className='mt-auto flex flex-col text-green-800 dark:text-green-400'>
+        <p className="mt-auto flex flex-col text-green-800 dark:text-green-400">
-          {guild.membersCount} {t('application:members')}
+          {guild.membersCount} {t("application:members")}
         </p>
       </div>
       <ConfirmPopup
-        title={`${t('application:join-the-guild')} ?`}
+        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
+            "!left-0": isConfirmed,
-          }
+          },
         )}
         handleYes={handleYes}
         handleNo={handleIsConfirmed}

components/Application/JoinGuildsPublic/JoinGuildsPublic.tsx

@@ -1,16 +1,17 @@
-import useTranslation from 'next-translate/useTranslation'
+import useTranslation from "next-translate/useTranslation"
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react"
-import InfiniteScroll from 'react-infinite-scroll-component'
+import InfiniteScroll from "react-infinite-scroll-component"
 
-import { useAuthentication } from '../../../tools/authentication'
+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 { Loader } from "../../design/Loader"
-import { GuildPublic } from './GuildPublic'
+import { GuildPublic } from "./GuildPublic"
-import { usePagination } from '../../../hooks/usePagination'
+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('')
+  const [search, setSearch] = useState("")
 
   const { authentication } = useAuthentication()
   const { t } = useTranslation()
@@ -18,19 +19,19 @@ export const JoinGuildsPublic: React.FC = () => {
   const { items, hasMore, nextPage, resetPagination, setItems } =
     usePagination<GuildPublicType>({
       api: authentication.api,
-      url: '/guilds/public'
+      url: "/guilds/public",
     })
 
   useEffect(() => {
     authentication?.socket?.on(
-      'guilds',
+      "guilds",
       (data: SocketData<GuildPublicType>) => {
         handleSocketData({ data, setItems })
-      }
+      },
     )
 
     return () => {
-      authentication?.socket?.off('guilds')
+      authentication?.socket?.off("guilds")
     }
   }, [authentication.socket, setItems])
 
@@ -44,23 +45,23 @@ export const JoinGuildsPublic: React.FC = () => {
   }
 
   return (
-    <div className='flex h-full w-full flex-col transition-all'>
+    <div className="flex h-full w-full flex-col transition-all">
       <input
-        data-cy='search-guild-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'
+        type="search"
-        name='search-guild'
+        name="search-guild"
-        placeholder={`🔎  ${t('application:search')}...`}
+        placeholder={`🔎  ${t("application:search")}...`}
       />
-      <div className='w-full p-12'>
+      <div className="w-full p-12">
         <InfiniteScroll
-          className='guilds-public-list relative mx-auto grid max-w-[1400px] grid-cols-[repeat(auto-fill,_minmax(20em,_1fr))] gap-8 !overflow-visible'
+          className="guilds-public-list relative mx-auto grid max-w-[1400px] grid-cols-[repeat(auto-fill,_minmax(20em,_1fr))] gap-8 !overflow-visible"
           dataLength={items.length}
           next={nextPage}
-          scrollableTarget='application-page-content'
+          scrollableTarget="application-page-content"
           hasMore={hasMore}
-          loader={<Loader className='absolute left-1/2 -translate-x-1/2' />}
+          loader={<Loader className="absolute left-1/2 -translate-x-1/2" />}
         >
           {items.map((guild) => {
             return <GuildPublic guild={guild} key={guild.id} />

components/Application/JoinGuildsPublic/index.ts

@@ -1 +1 @@
-export * from './JoinGuildsPublic'
+export * from "./JoinGuildsPublic"

components/Application/Members/Member.tsx

@@ -1,47 +1,48 @@
-import Image from 'next/image'
+import { memo } from "react"
-import Link from 'next/link'
+import Image from "next/image"
+import Link from "next/link"
 
-import { MemberWithPublicUser } from '../../../models/Member'
+import type { MemberWithPublicUser } from "../../../models/Member"
-import { Emoji } from '../../Emoji'
+import { Emoji } from "../../Emoji"
 
 export interface MemberProps {
   member: MemberWithPublicUser
 }
 
-export const Member: React.FC<MemberProps> = (props) => {
+const MemberMemo: React.FC<MemberProps> = (props) => {
   const { member } = props
 
   return (
     <Link href={`/application/users/${member.user.id}`}>
-      <a>
+      <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 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">
-          <div className='flex min-w-[50px] rounded-full'>
+          <Image
-            <Image
+            src={
-              src={
+              member.user.logo == null
-                member.user.logo == null
+                ? "/images/data/user-default.png"
-                  ? '/images/data/user-default.png'
+                : member.user.logo
-                  : member.user.logo
+            }
-              }
+            alt={"Users's profil picture"}
-              alt={"Users's profil picture"}
+            height={50}
-              height={50}
+            width={50}
-              width={50}
+            draggable={false}
-              draggable={false}
+            className="rounded-full"
-              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>
+        <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/Members.tsx

@@ -1,11 +1,11 @@
-import useTranslation from 'next-translate/useTranslation'
+import useTranslation from "next-translate/useTranslation"
-import InfiniteScroll from 'react-infinite-scroll-component'
+import InfiniteScroll from "react-infinite-scroll-component"
 
-import { Divider } from '../../design/Divider'
+import { Divider } from "../../design/Divider"
-import { Loader } from '../../design/Loader'
+import { Loader } from "../../design/Loader"
-import { useMembers } from '../../../contexts/Members'
+import { useMembers } from "../../../contexts/Members"
-import { Member } from './Member'
+import { Member } from "./Member"
-import { capitalize } from '../../../tools/utils/capitalize'
+import { capitalize } from "../../../tools/utils/capitalize"
 
 export const Members: React.FC = () => {
   const { members, hasMore, nextPage } = useMembers()
@@ -14,14 +14,14 @@ export const Members: React.FC = () => {
 
   return (
     <>
-      <div className='mb-2'>
+      <div className="mb-2">
-        <h1 data-cy='members-title' className='my-2 pt-2 text-center text-xl'>
+        <h1 data-cy="members-title" className="my-2 pt-2 text-center text-xl">
-          {capitalize(t('application:members'))}
+          {capitalize(t("application:members"))}
         </h1>
         <Divider />
       </div>
       <InfiniteScroll
-        className='members-list'
+        className="members-list"
         dataLength={members.length}
         next={nextPage}
         hasMore={hasMore}

components/Application/Members/index.ts

@@ -1 +1 @@
-export * from './Members'
+export * from "./Members"

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,16 +1,15 @@
-import { useState, useRef } from 'react'
+import { useState, useRef } from "react"
-import Image from 'next/image'
+import Image from "next/image"
-import Link from 'next/link'
+import Link from "next/link"
-import date from 'date-and-time'
+import date from "date-and-time"
-import TextareaAutosize from 'react-textarea-autosize'
-import useTranslation from 'next-translate/useTranslation'
 
-import { MessageWithMember } from '../../../../models/Message'
+import type { MessageWithMember } from "../../../../models/Message"
-import { MessageText } from './MessageText'
+import { MessageText } from "./MessageText"
-import { Loader } from '../../../design/Loader'
+import { Loader } from "../../../design/Loader"
-import { MessageFile } from './MessageFile'
+import { MessageFile } from "./MessageFile"
-import { Emoji } from '../../../Emoji'
+import { useAuthentication } from "../../../../tools/authentication"
-import { useAuthentication } from '../../../../tools/authentication'
+import { MessageOptions } from "./MessageOptions"
+import { EditMessage } from "./EditMessage"
 
 export interface MessageProps {
   message: MessageWithMember
@@ -21,22 +20,15 @@ export const Message: React.FC<MessageProps> = (props) => {
 
   const textareaReference = useRef<HTMLTextAreaElement>(null)
   const [isEditing, setIsEditing] = useState(false)
-  const { t } = useTranslation()
   const { authentication, user } = useAuthentication()
 
-  const handleDeleteMessage = async (): Promise<void> => {
-    try {
-      await authentication.api.delete(`/messages/${message.id}`)
-    } catch {}
-  }
-
   const handleTextareaKeyDown: React.KeyboardEventHandler<HTMLFormElement> = (
-    event
+    event,
   ) => {
-    if (event.key === 'Enter' && !event.shiftKey) {
+    if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault()
       event.currentTarget.dispatchEvent(
-        new Event('submit', { cancelable: true, bubbles: true })
+        new Event("submit", { cancelable: true, bubbles: true }),
       )
     }
   }
@@ -44,26 +36,19 @@ export const Message: React.FC<MessageProps> = (props) => {
   const handleEdit = async (): Promise<void> => {
     const newMessage = textareaReference.current?.value ?? message.value
     if (
-      typeof newMessage === 'string' &&
+      typeof newMessage === "string" &&
       newMessage.length > 0 &&
       newMessage !== message.value
     ) {
       try {
         await authentication.api.put(`/messages/${message.id}`, {
-          value: newMessage
+          value: newMessage,
         })
       } catch {}
     }
     handleEditMode()
   }
 
-  const handleEditSubmit: React.FormEventHandler<HTMLFormElement> = async (
-    event
-  ) => {
-    event.preventDefault()
-    await handleEdit()
-  }
-
   const handleEditMode = (): void => {
     setIsEditing((oldIsEditing) => {
       return !oldIsEditing
@@ -72,102 +57,68 @@ export const Message: React.FC<MessageProps> = (props) => {
 
   return (
     <div
-      className='group flex w-full 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='mr-4 flex h-12 w-12 flex-shrink-0 items-center justify-center'>
+          <div className="h-10 w-10 drop-shadow-md">
-            <div className='h-10 w-10 drop-shadow-md'>
+            <Image
-              <Image
+              quality={100}
-                quality={100}
+              className="rounded-full"
-                className='rounded-full'
+              src={
-                src={
+                message.member.user.logo == null
-                  message.member.user.logo == null
+                  ? "/images/data/user-default.png"
-                    ? '/images/data/user-default.png'
+                  : message.member.user.logo
-                    : message.member.user.logo
+              }
-                }
+              alt={"Users's profil picture"}
-                alt={"Users's profil picture"}
+              width={50}
-                width={50}
+              height={50}
-                height={50}
+              draggable={false}
-                draggable={false}
+            />
-              />
-            </div>
           </div>
-        </a>
+        </div>
       </Link>
-      <div className='relative w-full whitespace-pre-wrap break-words break-all'>
+      <div className="relative w-full whitespace-pre-wrap break-words break-all">
-        <div className='flex w-max items-center'>
+        <div className="flex w-max items-center">
           <Link href={`/application/users/${message.member.user.id}`}>
-            <a>
+            <span
-              <span
+              data-cy="message-member-user-name"
-                data-cy='message-member-user-name'
+              className="font-bold text-gray-900 dark:text-gray-200"
-                className='font-bold text-gray-900 dark:text-gray-200'
+            >
-              >
+              {message.member.user.name}
-                {message.member.user.name}
+            </span>
-              </span>
-            </a>
           </Link>
           <span
-            data-cy='message-date'
+            data-cy="message-date"
-            className='ml-4 select-none text-xs text-gray-500 dark:text-gray-200'
+            className="ml-4 select-none text-xs text-gray-500 dark:text-gray-200"
           >
-            {date.format(new Date(message.createdAt), 'DD/MM/YYYY - HH:mm:ss')}
+            {date.format(new Date(message.createdAt), "DD/MM/YYYY - HH:mm:ss")}
           </span>
         </div>
-        {message.member.userId === user.id ? (
+
-          <div className='absolute right-6 -top-8 flex opacity-0 transition-opacity group-hover:opacity-100'>
+        {message.member.userId === user.id && (
-            {message.type === 'text' ? (
+          <MessageOptions
-              <div
+            message={message}
-                className='message-options rounded-l-lg border-l-slate-600'
+            editMode={isEditing ? ":white_check_mark:" : ":pencil2:"}
-                title={t('application:edit')}
+            handleEdit={isEditing ? handleEdit : handleEditMode}
-                onClick={isEditing ? handleEdit : handleEditMode}
+          />
-              >
+        )}
-                <Emoji
+
-                  value={isEditing ? ':white_check_mark:' : ':pencil2:'}
+        {message.type === "text" ? (
-                  size={18}
-                />
-              </div>
-            ) : null}
-            <div
-              className='message-options rounded-r-lg border-r-slate-600'
-              title={t('application:delete')}
-              onClick={handleDeleteMessage}
-            >
-              <Emoji value=':wastebasket:' size={18} />
-            </div>
-          </div>
-        ) : null}
-        {message.type === 'text' ? (
           <>
             {isEditing ? (
-              <form
+              <EditMessage
-                className='flex h-full w-full items-center'
+                message={message}
-                onSubmit={handleEditSubmit}
+                textareaRef={textareaReference}
-                onKeyDown={handleTextareaKeyDown}
+                handleEdit={handleEdit}
-              >
+                handleKeyDown={handleTextareaKeyDown}
-                <TextareaAutosize
+              />
-                  className='scrollbar-firefox-support w-full resize-none bg-transparent p-2 tracking-wide outline-none'
-                  placeholder={t('application:write-a-message')}
-                  wrap='soft'
-                  maxRows={6}
-                  name='message'
-                  defaultValue={message.value}
-                  ref={textareaReference}
-                  autoFocus
-                  onFocus={(event) => {
-                    event.currentTarget.setSelectionRange(
-                      event.currentTarget.value.length,
-                      event.currentTarget.value.length
-                    )
-                  }}
-                />
-              </form>
             ) : (
               <MessageText message={message} />
             )}
           </>
-        ) : message.type === 'file' ? (
+        ) : message.type === "file" ? (
           <MessageFile message={message} />
         ) : (
           <Loader />

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

@@ -1,14 +1,14 @@
 export const FileIcon: React.FC = () => {
   return (
     <svg
-      className='fill-current text-black dark:text-white'
+      className="fill-current text-black dark:text-white"
-      width='21'
+      width="21"
-      height='26'
+      height="26"
-      viewBox='0 0 21 26'
+      viewBox="0 0 21 26"
-      fill='none'
+      fill="none"
-      xmlns='http://www.w3.org/2000/svg'
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <path d='M2.625 0C1.92881 0 1.26113 0.273928 0.768845 0.761522C0.276562 1.24912 0 1.91044 0 2.6V23.4C0 24.0896 0.276562 24.7509 0.768845 25.2385C1.26113 25.7261 1.92881 26 2.625 26H18.375C19.0712 26 19.7389 25.7261 20.2312 25.2385C20.7234 24.7509 21 24.0896 21 23.4V7.8L13.125 0H2.625ZM13.125 9.1H11.8125V2.6L18.375 9.1H13.125Z' />
+      <path d="M2.625 0C1.92881 0 1.26113 0.273928 0.768845 0.761522C0.276562 1.24912 0 1.91044 0 2.6V23.4C0 24.0896 0.276562 24.7509 0.768845 25.2385C1.26113 25.7261 1.92881 26 2.625 26H18.375C19.0712 26 19.7389 25.7261 20.2312 25.2385C20.7234 24.7509 21 24.0896 21 23.4V7.8L13.125 0H2.625ZM13.125 9.1H11.8125V2.6L18.375 9.1H13.125Z" />
     </svg>
   )
 }

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

@@ -1,18 +1,18 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from "react"
-import axios from 'axios'
+import axios from "axios"
-import prettyBytes from 'pretty-bytes'
+import prettyBytes from "pretty-bytes"
-import { DownloadIcon } from '@heroicons/react/solid'
+import { DownloadIcon } from "@heroicons/react/solid"
 
-import { MessageWithMember } from '../../../../../models/Message'
+import type { MessageWithMember } from "../../../../../models/Message"
-import { Loader } from '../../../../design/Loader'
+import { Loader } from "../../../../design/Loader"
-import { FileIcon } from './FileIcon'
+import { FileIcon } from "./FileIcon"
-import { api } from '../../../../../tools/api'
+import { api } from "../../../../../tools/api"
 
 const supportedImageMimetype = [
-  'image/png',
+  "image/png",
-  'image/jpg',
+  "image/jpg",
-  'image/jpeg',
+  "image/jpeg",
-  'image/gif'
+  "image/gif",
 ]
 
 export interface FileData {
@@ -34,8 +34,8 @@ export const MessageFile: React.FC<MessageContentProps> = (props) => {
 
     const fetchData = async (): Promise<void> => {
       const { data } = await api.get(message.value, {
-        responseType: 'blob',
+        responseType: "blob",
-        cancelToken: ourRequest.token
+        cancelToken: ourRequest.token,
       })
       const fileURL = URL.createObjectURL(data)
       setFile({ blob: data, url: fileURL })
@@ -52,27 +52,27 @@ export const MessageFile: React.FC<MessageContentProps> = (props) => {
   }
   if (supportedImageMimetype.includes(message.mimetype)) {
     return (
-      <a href={file.url} target='_blank' rel='noreferrer'>
+      <a href={file.url} target="_blank" rel="noreferrer">
         <img
           data-cy={`message-file-image-${message.id}`}
-          className='max-h-80 sm:max-w-xs'
+          className="max-h-80 sm:max-w-xs"
           src={file.url}
           alt={message.value}
         />
       </a>
     )
   }
-  if (message.mimetype.startsWith('audio/')) {
+  if (message.mimetype.startsWith("audio/")) {
     return (
       <audio controls data-cy={`message-file-audio-${message.id}`}>
         <source src={file.url} type={message.mimetype} />
       </audio>
     )
   }
-  if (message.mimetype.startsWith('video/')) {
+  if (message.mimetype.startsWith("video/")) {
     return (
       <video
-        className='max-h-80 max-w-xs'
+        className="max-h-80 max-w-xs"
         controls
         data-cy={`message-file-video-${message.id}`}
       >
@@ -82,17 +82,17 @@ export const MessageFile: React.FC<MessageContentProps> = (props) => {
   }
   return (
     <a href={file.url} download data-cy={`message-file-download-${message.id}`}>
-      <div className='flex items-center'>
+      <div className="flex items-center">
-        <div className='flex items-center'>
+        <div className="flex items-center">
           <div>
             <FileIcon />
           </div>
-          <div className='ml-4'>
+          <div className="ml-4">
             <p>{file.blob.type}</p>
-            <p className='mt-1'>{prettyBytes(file.blob.size)}</p>
+            <p className="mt-1">{prettyBytes(file.blob.size)}</p>
           </div>
         </div>
-        <DownloadIcon className='ml-4 h-8 w-8' />
+        <DownloadIcon className="ml-4 h-8 w-8" />
       </div>
     </a>
   )

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

@@ -1 +1 @@
-export * from './MessageFile'
+export * from "./MessageFile"

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

@@ -1,16 +1,16 @@
-import { useMemo } from 'react'
+import { useMemo } from "react"
-import ReactMarkdown from 'react-markdown'
+import ReactMarkdown from "react-markdown"
-import gfm from 'remark-gfm'
+import gfm from "remark-gfm"
-import remarkBreaks from 'remark-breaks'
+import remarkBreaks from "remark-breaks"
-import remarkMath from 'remark-math'
+import remarkMath from "remark-math"
-import rehypeKatex from 'rehype-katex'
+import rehypeKatex from "rehype-katex"
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism'
+import { vscDarkPlus } from "react-syntax-highlighter/dist/cjs/styles/prism"
 
-import 'katex/dist/katex.min.css'
+import "katex/dist/katex.min.css"
 
-import { Emoji, emojiPlugin, isStringWithOnlyOneEmoji } from '../../../../Emoji'
+import { Emoji, emojiPlugin, isStringWithOnlyOneEmoji } from "../../../../Emoji"
-import { MessageWithMember } from '../../../../../models/Message'
+import type { MessageWithMember } from "../../../../../models/Message"
 
 export interface MessageContentProps {
   message: MessageWithMember
@@ -35,41 +35,42 @@ export const MessageText: React.FC<MessageContentProps> = (props) => {
 
   return (
     <ReactMarkdown
-      disallowedElements={['table']}
+      disallowedElements={["table"]}
       unwrapDisallowed
       remarkPlugins={[[gfm], [remarkBreaks], [remarkMath]]}
       rehypePlugins={[[emojiPlugin], [rehypeKatex]]}
-      linkTarget='_blank'
+      linkTarget="_blank"
       components={{
         a: (props) => {
           return (
             <a
-              className='text-green-800 hover:underline dark:text-green-400'
+              className="text-green-800 hover:underline dark:text-green-400"
               {...props}
             />
           )
         },
         emoji: (props) => {
-          return <Emoji value={props.value} size={20} tooltip />
+          const { value } = props
+          return <Emoji value={value} size={20} tooltip />
         },
         code: (properties) => {
           const { inline, className, children, ...props } = properties
-          const match = /language-(\w+)/.exec(className ?? '')
+          const match = /language-(\w+)/.exec(className ?? "")
           return !(inline as boolean) && match != null ? (
             <SyntaxHighlighter
               style={vscDarkPlus as any}
               language={match[1]}
-              PreTag='div'
+              PreTag="div"
               {...props}
             >
-              {String(children).replace(/\n$/, '')}
+              {String(children).replace(/\n$/, "")}
             </SyntaxHighlighter>
           ) : (
             <code className={className} {...props}>
               {children}
             </code>
           )
-        }
+        },
       }}
     >
       {message.value}

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

@@ -1 +1 @@
-export * from './MessageText'
+export * from "./MessageText"

components/Application/Messages/Message/index.ts

@@ -1 +1 @@
-export * from './Message'
+export * from "./Message"

components/Application/Messages/Messages.tsx

@@ -1,10 +1,10 @@
-import useTranslation from 'next-translate/useTranslation'
+import useTranslation from "next-translate/useTranslation"
-import InfiniteScroll from 'react-infinite-scroll-component'
+import InfiniteScroll from "react-infinite-scroll-component"
 
-import { Loader } from '../../design/Loader'
+import { Loader } from "../../design/Loader"
-import { Message } from './Message'
+import { Message } from "./Message"
-import { useMessages } from '../../../contexts/Messages'
+import { useMessages } from "../../../contexts/Messages"
-import { Emoji } from '../../Emoji'
+import { Emoji } from "../../Emoji"
 
 export const Messages: React.FC = () => {
   const { t } = useTranslation()
@@ -13,25 +13,25 @@ export const Messages: React.FC = () => {
   if (messages.length === 0) {
     return (
       <div
-        id='messages'
+        id="messages"
-        className='scrollbar-firefox-support mt-8 flex w-full flex-1 flex-col overflow-y-auto text-center text-lg transition-all'
+        className="scrollbar-firefox-support mt-8 flex w-full flex-1 flex-col overflow-y-auto text-center text-lg transition-all"
       >
         <p>
-          {t('application:nothing-here')} <Emoji value=':ghost:' size={20} />
+          {t("application:nothing-here")} <Emoji value=":ghost:" size={20} />
         </p>
-        <p>{t('application:start-chatting-kill-ghost')}</p>
+        <p>{t("application:start-chatting-kill-ghost")}</p>
       </div>
     )
   }
 
   return (
     <div
-      id='messages'
+      id="messages"
-      className='scrollbar-firefox-support flex w-full flex-1 flex-col-reverse overflow-y-auto transition-all'
+      className="scrollbar-firefox-support flex w-full flex-1 flex-col-reverse overflow-y-auto transition-all"
     >
       <InfiniteScroll
-        scrollableTarget='messages'
+        scrollableTarget="messages"
-        className='messages-list !overflow-x-hidden'
+        className="messages-list !overflow-x-hidden"
         dataLength={messages.length}
         next={nextPage}
         inverse

components/Application/Messages/index.ts

@@ -1 +1 @@
-export * from './Messages'
+export * from "./Messages"

components/Application/PopupGuild/PopupGuild.tsx

@@ -1,9 +1,9 @@
-import useTranslation from 'next-translate/useTranslation'
+import useTranslation from "next-translate/useTranslation"
-import { PlusSmIcon, ArrowDownIcon } from '@heroicons/react/solid'
+import { PlusSmIcon, ArrowDownIcon } from "@heroicons/react/solid"
-import classNames from 'clsx'
+import classNames from "clsx"
-import Image from 'next/image'
+import Image from "next/image"
 
-import { PopupGuildCard } from './PopupGuildCard'
+import { PopupGuildCard } from "./PopupGuildCard"
 
 export interface PopupGuildProps {
   className?: string
@@ -18,43 +18,43 @@ export const PopupGuild: React.FC<PopupGuildProps> = (props) => {
     <div
       className={classNames(
         className,
-        'h-full-without-header flex min-w-full flex-wrap items-center justify-center overflow-y-auto p-8'
+        "h-full-without-header flex min-w-full flex-wrap items-center justify-center overflow-y-auto p-8",
       )}
     >
       <PopupGuildCard
         image={
           <Image
             quality={100}
-            src='/images/svg/design/create-guild.svg'
+            src="/images/svg/design/create-guild.svg"
-            alt={t('application:create-a-guild')}
+            alt={t("application:create-a-guild")}
-            draggable='false'
+            draggable="false"
             width={230}
             height={230}
           />
         }
-        description={t('application:create-a-guild-description')}
+        description={t("application:create-a-guild-description")}
         link={{
-          icon: <PlusSmIcon className='mr-2 h-8 w-8' />,
+          icon: <PlusSmIcon className="mr-2 h-8 w-8" />,
-          text: t('application:create-a-guild'),
+          text: t("application:create-a-guild"),
-          href: '/application/guilds/create'
+          href: "/application/guilds/create",
         }}
       />
       <PopupGuildCard
         image={
           <Image
             quality={100}
-            src='/images/svg/design/join-guild.svg'
+            src="/images/svg/design/join-guild.svg"
-            alt={t('application:join-a-guild')}
+            alt={t("application:join-a-guild")}
-            draggable='false'
+            draggable="false"
             width={200}
             height={200}
           />
         }
-        description={t('application:join-a-guild-description')}
+        description={t("application:join-a-guild-description")}
         link={{
-          icon: <ArrowDownIcon className='mr-2 h-6 w-6' />,
+          icon: <ArrowDownIcon className="mr-2 h-6 w-6" />,
-          text: t('application:join-a-guild'),
+          text: t("application:join-a-guild"),
-          href: '/application/guilds/join'
+          href: "/application/guilds/join",
         }}
       />
     </div>

components/Application/PopupGuild/PopupGuildCard.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
+import React from "react"
-import Link from 'next/link'
+import Link from "next/link"
 
 export interface PopupGuildCardProps {
   image: JSX.Element
@@ -15,19 +15,20 @@ export const PopupGuildCard: React.FC<PopupGuildCardProps> = (props) => {
   const { image, description, link } = props
 
   return (
-    <div className='m-8 h-96 w-80 rounded-2xl bg-gray-800'>
+    <div className="m-8 h-96 w-80 rounded-2xl bg-gray-800">
-      <div className='flex h-1/2 w-full items-center justify-center'>
+      <div className="flex h-1/2 w-full items-center justify-center">
         {image}
       </div>
-      <div className='mt-2 flex h-1/2 w-full flex-col justify-between rounded-b-2xl bg-gray-700 shadow-sm'>
+      <div className="mt-2 flex h-1/2 w-full flex-col justify-between rounded-b-2xl bg-gray-700 shadow-sm">
-        <p className='mt-6 px-8 text-center text-sm text-gray-200'>
+        <p className="mt-6 px-8 text-center text-sm text-gray-200">
           {description}
         </p>
-        <Link href={link.href}>
+        <Link
-          <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'>
+          href={link.href}
-            {link.icon}
+          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.text}
+        >
-          </a>
+          {link.icon}
+          {link.text}
         </Link>
       </div>
     </div>

components/Application/PopupGuild/index.ts

@@ -1 +1 @@
-export * from './PopupGuild'
+export * from "./PopupGuild"

components/Application/SendMessage/SendMessage.tsx

@@ -1,11 +1,12 @@
-import { useState, useRef } from 'react'
+import { useState, useRef } from "react"
-import useTranslation from 'next-translate/useTranslation'
+import useTranslation from "next-translate/useTranslation"
-import TextareaAutosize from 'react-textarea-autosize'
+import TextareaAutosize from "react-textarea-autosize"
-import classNames from 'clsx'
+import classNames from "clsx"
 
-import { GuildsChannelsPath } from '..'
+import type { GuildsChannelsPath } from ".."
-import { useAuthentication } from '../../../tools/authentication'
+import { useAuthentication } from "../../../tools/authentication"
-import { EmojiPicker, EmojiPickerOnClick } from '../../Emoji'
+import type { EmojiPickerOnClick } from "../../Emoji"
+import { EmojiPicker } from "../../Emoji"
 
 export interface SendMessageProps {
   path: GuildsChannelsPath
@@ -17,59 +18,66 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
   const { authentication } = useAuthentication()
 
   const [isVisibleEmojiPicker, setIsVisibleEmojiPicker] = useState(false)
-  const [message, setMessage] = useState('')
+  const [message, setMessage] = useState("")
   const textareaReference = useRef<HTMLTextAreaElement>(null)
 
   const handleTextareaKeyDown: React.KeyboardEventHandler<HTMLFormElement> = (
-    event
+    event,
   ) => {
-    if (event.key === 'Enter' && !event.shiftKey) {
+    if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault()
       event.currentTarget.dispatchEvent(
-        new Event('submit', { cancelable: true, bubbles: true })
+        new Event("submit", { cancelable: true, bubbles: true }),
       )
     }
   }
 
   const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (
-    event
+    event,
   ) => {
     event.preventDefault()
-    if (typeof message === 'string' && message.length > 0) {
+    if (typeof message === "string" && message.length > 0) {
       await authentication.api.post(`/channels/${path.channelId}/messages`, {
-        value: message
+        value: message,
       })
-      setMessage('')
+      setMessage("")
     }
   }
 
   const handleTextareaChange: React.ChangeEventHandler<HTMLTextAreaElement> = (
-    event
+    event,
   ) => {
     setMessage(event.target.value)
   }
 
   const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = async (
-    event
+    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)
+      formData.append("file", file)
       await authentication.api.post(
         `/channels/${path.channelId}/messages/uploads`,
-        formData
+        formData,
+        {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+        },
       )
     }
   }
 
   const handleVisibleEmojiPicker = (): void => {
-    setIsVisibleEmojiPicker((isVisible) => !isVisible)
+    setIsVisibleEmojiPicker((isVisible) => {
+      return !isVisible
+    })
   }
 
   const handleEmojiPicker: EmojiPickerOnClick = (emoji) => {
-    const emojiColons = emoji.colons ?? ''
+    const emojiColons = emoji.colons ?? ""
     setMessage((oldMessage) => {
       return oldMessage + emojiColons
     })
@@ -78,51 +86,51 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
   }
 
   return (
-    <div className='relative p-6 pb-4'>
+    <div className="relative p-6 pb-4">
       <div
         className={classNames(
-          'absolute bottom-24 right-20 z-50 w-fit transition-all duration-100',
+          "absolute bottom-24 right-20 z-50 w-fit transition-all duration-100",
           {
-            'invisible translate-y-5 opacity-0': !isVisibleEmojiPicker
+            "invisible translate-y-5 opacity-0": !isVisibleEmojiPicker,
-          }
+          },
         )}
       >
         <EmojiPicker onClick={handleEmojiPicker} />
       </div>
-      <div className='flex h-full w-full rounded-lg bg-gray-200 py-1 text-gray-600 dark:bg-gray-800 dark:text-gray-200'>
+      <div className="flex h-full w-full rounded-lg bg-gray-200 py-1 text-gray-600 dark:bg-gray-800 dark:text-gray-200">
         <form
-          className='flex h-full w-full items-center'
+          className="flex h-full w-full items-center"
           onSubmit={handleSubmit}
           onKeyDown={handleTextareaKeyDown}
         >
           <TextareaAutosize
-            className='scrollbar-firefox-support my-2 w-full resize-none bg-transparent p-2 px-6 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')}
+            placeholder={t("application:write-a-message")}
-            wrap='soft'
+            wrap="soft"
             maxRows={6}
-            name='message'
+            name="message"
             onChange={handleTextareaChange}
             value={message}
             ref={textareaReference}
           />
         </form>
-        <div className='flex h-full items-center justify-around pr-6'>
+        <div className="flex h-full items-center justify-around pr-6">
           <button
-            className='flex h-full w-full items-center justify-center p-1 text-2xl transition hover:-translate-y-1'
+            className="flex h-full w-full items-center justify-center p-1 text-2xl transition hover:-translate-y-1"
             onClick={handleVisibleEmojiPicker}
           >
             🙂
           </button>
-          <button className='relative flex h-full w-full cursor-pointer items-center justify-center p-1 text-green-800 transition hover:-translate-y-1 dark:text-green-400'>
+          <button className="relative flex h-full w-full cursor-pointer items-center justify-center p-1 text-green-800 transition hover:-translate-y-1 dark:text-green-400">
             <input
-              type='file'
+              type="file"
-              className='absolute h-full w-full cursor-pointer opacity-0'
+              className="absolute h-full w-full cursor-pointer opacity-0"
               onChange={handleFileChange}
             />
-            <svg width='25' height='25' viewBox='0 0 22 22'>
+            <svg width="25" height="25" viewBox="0 0 22 22">
               <path
-                d='M11 0C4.925 0 0 4.925 0 11C0 17.075 4.925 22 11 22C17.075 22 22 17.075 22 11C22 4.925 17.075 0 11 0ZM12 15C12 15.2652 11.8946 15.5196 11.7071 15.7071C11.5196 15.8946 11.2652 16 11 16C10.7348 16 10.4804 15.8946 10.2929 15.7071C10.1054 15.5196 10 15.2652 10 15V12H7C6.73478 12 6.48043 11.8946 6.29289 11.7071C6.10536 11.5196 6 11.2652 6 11C6 10.7348 6.10536 10.4804 6.29289 10.2929C6.48043 10.1054 6.73478 10 7 10H10V7C10 6.73478 10.1054 6.48043 10.2929 6.29289C10.4804 6.10536 10.7348 6 11 6C11.2652 6 11.5196 6.10536 11.7071 6.29289C11.8946 6.48043 12 6.73478 12 7V10H15C15.2652 10 15.5196 10.1054 15.7071 10.2929C15.8946 10.4804 16 10.7348 16 11C16 11.2652 15.8946 11.5196 15.7071 11.7071C15.5196 11.8946 15.2652 12 15 12H12V15Z'
+                d="M11 0C4.925 0 0 4.925 0 11C0 17.075 4.925 22 11 22C17.075 22 22 17.075 22 11C22 4.925 17.075 0 11 0ZM12 15C12 15.2652 11.8946 15.5196 11.7071 15.7071C11.5196 15.8946 11.2652 16 11 16C10.7348 16 10.4804 15.8946 10.2929 15.7071C10.1054 15.5196 10 15.2652 10 15V12H7C6.73478 12 6.48043 11.8946 6.29289 11.7071C6.10536 11.5196 6 11.2652 6 11C6 10.7348 6.10536 10.4804 6.29289 10.2929C6.48043 10.1054 6.73478 10 7 10H10V7C10 6.73478 10.1054 6.48043 10.2929 6.29289C10.4804 6.10536 10.7348 6 11 6C11.2652 6 11.5196 6.10536 11.7071 6.29289C11.8946 6.48043 12 6.73478 12 7V10H15C15.2652 10 15.5196 10.1054 15.7071 10.2929C15.8946 10.4804 16 10.7348 16 11C16 11.2652 15.8946 11.5196 15.7071 11.7071C15.5196 11.8946 15.2652 12 15 12H12V15Z"
-                fill='currentColor'
+                fill="currentColor"
               />
             </svg>
           </button>

components/Application/SendMessage/index.ts

@@ -1 +1 @@
-export * from './SendMessage'
+export * from "./SendMessage"

components/Application/Sidebar/Sidebar.tsx

@@ -1,8 +1,8 @@
-import classNames from 'clsx'
+import classNames from "clsx"
 
-import { ApplicationProps } from '..'
+import type { ApplicationProps } from ".."
 
-export type DirectionSidebar = 'left' | 'right'
+export type DirectionSidebar = "left" | "right"
 
 export interface SidebarProps {
   direction: DirectionSidebar
@@ -12,24 +12,24 @@ export interface SidebarProps {
 }
 
 export const Sidebar: React.FC<React.PropsWithChildren<SidebarProps>> = (
-  props
+  props,
 ) => {
   const { direction, visible, children, path, isMobile } = props
 
   return (
     <nav
       className={classNames(
-        'h-full-without-header visible z-50 flex bg-gray-200 drop-shadow-2xl transition-all dark:bg-gray-800',
+        "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',
+            direction === "right",
-          'w-72': direction === 'right' && visible,
+          "w-72": direction === "right" && visible,
-          'invisible w-0 opacity-0': !visible,
+          "invisible w-0 opacity-0": !visible,
-          'w-80': direction === 'left' && visible,
+          "w-80": direction === "left" && visible,
-          'max-w-max': typeof path !== 'string' && direction === 'left',
+          "max-w-max": typeof path !== "string" && direction === "left",
-          'top-0 right-0': direction === 'right' && isMobile,
+          "right-0 top-0": direction === "right" && isMobile,
-          absolute: isMobile
+          absolute: isMobile,
-        }
+        },
       )}
     >
       {children}

components/Application/Sidebar/index.ts

@@ -1 +1 @@
-export * from './Sidebar'
+export * from "./Sidebar"

components/Application/UserProfile/UserProfile.tsx

@@ -1,9 +1,9 @@
-import Image from 'next/image'
+import Image from "next/image"
-import date from 'date-and-time'
+import date from "date-and-time"
-import useTranslation from 'next-translate/useTranslation'
+import useTranslation from "next-translate/useTranslation"
 
-import { UserPublic } from '../../../models/User'
+import type { UserPublic } from "../../../models/User"
-import { Guild } from '../../../models/Guild'
+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='relative flex h-full flex-col items-center justify-center'>
+      <div className="transition">
-        <div className='transition'>
+        <div className="max-w-[1000px] px-12">
-          <div className='max-w-[1000px] px-12'>
+          <div className="flex items-center justify-between">
-            <div className='flex items-center justify-between'>
+            <div className="flex w-max flex-col items-center gap-7 md:flex-row">
-              <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">
-                <div className='relative flex items-center justify-center overflow-hidden rounded-full shadow-lg transition-all'>
+                <Image
-                  <Image
+                  quality={100}
-                    quality={100}
+                  className="rounded-full"
-                    className='rounded-full'
+                  src={
-                    src={
+                    user.logo != null
-                      user.logo != null
+                      ? user.logo
-                        ? user.logo
+                      : "/images/data/user-default.png"
-                        : '/images/data/user-default.png'
+                  }
-                    }
+                  alt="Profil Picture"
-                    alt='Profil Picture'
+                  draggable="false"
-                    draggable='false'
+                  height={125}
-                    height={125}
+                  width={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="my-2 text-left">
-                  <div className='mb-2 flex items-center'>
+                  {user.email != null && (
-                    <p
+                    <p className="font-bold">
-                      className='space text-dark text-3xl font-bold tracking-wide dark:text-white'
+                      Email:{" "}
-                      data-cy='user-name'
+                      <a
-                    >
+                        href={`mailto:${user.email}`}
-                      {user.name}
+                        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'
+                  {user.website != null && (
-                      data-cy='user-createdAt'
+                    <p className="font-bold">
-                    >
+                      {t("application:website")}:{" "}
-                      {date.format(new Date(user.createdAt), 'DD/MM/YYYY')}
+                      <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.status != null && (
-                    {user.email != null && (
+                    <p className="flex font-bold">
-                      <p className='font-bold'>
+                      {t("application:status")}:{" "}
-                        Email:{' '}
+                      <span className="ml-2 font-normal tracking-wide">
-                        <a
+                        {user.status}
-                          href={`mailto:${user.email}`}
+                      </span>
-                          target='_blank'
+                    </p>
-                          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>
                 </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>
-
+    </div>
-      <style jsx global>{`
-        #application-page-content {
-          overflow-x: hidden;
-        }
-      `}</style>
-    </>
   )
 }

components/Application/UserProfile/index.ts

@@ -1 +1 @@
-export * from './UserProfile'
+export * from "./UserProfile"

components/Application/UserSettings/UserSettings.tsx

@@ -1,26 +1,27 @@
-import Image from 'next/image'
+import Image from "next/image"
-import useTranslation from 'next-translate/useTranslation'
+import useTranslation from "next-translate/useTranslation"
-import { useState, useMemo } from 'react'
+import { useState, useMemo } from "react"
-import { Form, useForm } from 'react-component-form'
+import { Form, useForm } from "react-component-form"
-import { EyeIcon, PhotographIcon } from '@heroicons/react/solid'
+import { EyeIcon, PhotographIcon } from "@heroicons/react/solid"
-import { Type } from '@sinclair/typebox'
+import { Type } from "@sinclair/typebox"
-import axios from 'axios'
+import axios from "axios"
-import Link from 'next/link'
+import Link from "next/link"
-import type { HandleUseFormCallback } from 'react-component-form'
+import type { HandleUseFormCallback } from "react-component-form"
 
-import { Input } from '../../design/Input'
+import { Input } from "../../design/Input"
-import { Checkbox } from '../../design/Checkbox'
+import { Checkbox } from "../../design/Checkbox"
-import { Textarea } from '../../design/Textarea'
+import { Textarea } from "../../design/Textarea"
-import { SocialMediaButton } from '../../design/SocialMediaButton'
+import { SocialMediaButton } from "../../design/SocialMediaButton"
-import { SwitchTheme } from '../../Header/SwitchTheme'
+import { SwitchTheme } from "../../Header/SwitchTheme"
-import { Language } from '../../Header/Language'
+import { Language } from "../../Header/Language"
-import { useAuthentication } from '../../../tools/authentication'
+import { useAuthentication } from "../../../tools/authentication"
-import { Button } from '../../design/Button'
+import { Button } from "../../design/Button"
-import { FormState } from '../../design/FormState'
+import { FormState } from "../../design/FormState"
-import { userSchema } from '../../../models/User'
+import { userSchema } from "../../../models/User"
-import { userSettingsSchema } from '../../../models/UserSettings'
+import { userSettingsSchema } from "../../../models/UserSettings"
-import { ProviderOAuth, providers } from '../../../models/OAuth'
+import type { ProviderOAuth } from "../../../models/OAuth"
-import { useFormTranslation } from '../../../hooks/useFormTranslation'
+import { providers } from "../../../models/OAuth"
+import { useFormTranslation } from "../../../hooks/useFormTranslation"
 
 const schema = {
   name: userSchema.name,
@@ -29,7 +30,7 @@ const schema = {
   website: Type.Optional(userSchema.website),
   biography: Type.Optional(userSchema.biography),
   isPublicGuilds: userSettingsSchema.isPublicGuilds,
-  isPublicEmail: userSettingsSchema.isPublicEmail
+  isPublicEmail: userSettingsSchema.isPublicEmail,
 }
 
 export const UserSettings: React.FC = () => {
@@ -42,7 +43,7 @@ export const UserSettings: React.FC = () => {
     website: user.website,
     biography: user.biography,
     isPublicGuilds: user.settings.isPublicGuilds,
-    isPublicEmail: user.settings.isPublicEmail
+    isPublicEmail: user.settings.isPublicEmail,
   })
 
   const {
@@ -51,12 +52,14 @@ export const UserSettings: React.FC = () => {
     setFetchState,
     message,
     setMessage,
-    errors
+    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: HandleUseFormCallback<typeof schema> = async (formData) => {
@@ -65,19 +68,19 @@ export const UserSettings: React.FC = () => {
       const userSettings = { isPublicEmail, isPublicGuilds }
       const { data: userCurrentData } = await authentication.api.put(
         `/users/current?redirectURI=${window.location.origin}/authentication/signin`,
-        userData
+        userData,
       )
       setInputValues(formData as unknown as any)
       const hasEmailChanged = user.email !== userCurrentData.user.email
       if (hasEmailChanged) {
         return {
-          type: 'success',
+          type: "success",
-          value: 'application:success-email-changed'
+          message: "application:success-email-changed",
         }
       }
       const { data: userCurrentSettings } = await authentication.api.put(
-        '/users/current/settings',
+        "/users/current/settings",
-        userSettings
+        userSettings,
       )
       setUser((oldUser) => {
         return {
@@ -85,36 +88,36 @@ export const UserSettings: React.FC = () => {
           ...userCurrentData,
           settings: {
             ...oldUser.settings,
-            ...userCurrentSettings.settings
+            ...userCurrentSettings.settings,
-          }
+          },
         }
       })
       return {
-        type: 'success',
+        type: "success",
-        value: 'application:saved-information'
+        message: "application:saved-information",
       }
     } catch (error) {
       if (axios.isAxiosError(error) && error.response?.status === 400) {
         const message = error.response.data.message as string
-        if (message.endsWith('already taken.')) {
+        if (message.endsWith("already taken.")) {
           return {
-            type: 'error',
+            type: "error",
-            value: 'authentication:already-used'
+            message: "authentication:already-used",
           }
-        } else if (message.endsWith('email to sign in.')) {
+        } else if (message.endsWith("email to sign in.")) {
           return {
-            type: 'error',
+            type: "error",
-            value: 'authentication:email-required-to-sign-in'
+            message: "authentication:email-required-to-sign-in",
           }
         }
         return {
-          type: 'error',
+          type: "error",
-          value: 'errors:server-error'
+          message: "errors:server-error",
         }
       }
       return {
-        type: 'error',
+        type: "error",
-        value: 'errors:server-error'
+        message: "errors:server-error",
       }
     }
   }
@@ -125,90 +128,95 @@ export const UserSettings: React.FC = () => {
     setInputValues((oldInputValues) => {
       return {
         ...oldInputValues,
-        [event.target.name]: event.target.value
+        [event.target.name]: event.target.value,
       }
     })
   }
 
   const onChangeCheckbox: React.ChangeEventHandler<HTMLInputElement> = (
-    event
+    event,
   ) => {
     setInputValues((oldInputValues) => {
       return {
         ...oldInputValues,
-        [event.target.name]: event.target.checked
+        [event.target.name]: event.target.checked,
       }
     })
   }
 
   const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = async (
-    event
+    event,
   ) => {
-    setFetchState('loading')
+    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)
+      formData.append("logo", file)
       try {
         const { data } = await authentication.api.put(
           `/users/current/logo`,
-          formData
+          formData,
+          {
+            headers: {
+              "Content-Type": "multipart/form-data",
+            },
+          },
         )
         setUser((oldUser) => {
           return {
             ...oldUser,
-            logo: data.user.logo
+            logo: data.user.logo,
           }
         })
-        setFetchState('idle')
+        setFetchState("idle")
       } catch (error) {
-        setFetchState('error')
+        setFetchState("error")
-        setMessage('errors:server-error')
+        setMessage("errors:server-error")
       }
     }
   }
 
   const handleSignout = async (): Promise<void> => {
-    setFetchState('loading')
+    setFetchState("loading")
     await authentication.signoutServerSide()
   }
 
   const handleSignoutAllDevices = async (): Promise<void> => {
-    setFetchState('loading')
+    setFetchState("loading")
     await authentication.signoutAllDevicesServerSide()
   }
 
   const handleDeletionProvider = (
-    provider: ProviderOAuth
+    provider: ProviderOAuth,
   ): (() => Promise<void>) => {
     return async () => {
       try {
-        setFetchState('loading')
+        setFetchState("loading")
         await authentication.api.delete(`/users/oauth2/${provider}`)
         setUser((oldUser) => {
           return {
             ...oldUser,
-            strategies: oldUser.strategies.filter(
+            strategies: oldUser.strategies.filter((strategy) => {
-              (strategy) => strategy !== provider
+              return strategy !== provider
-            )
+            }),
           }
         })
-        setMessage('application:success-deleted-provider')
+        setMessage("application:success-deleted-provider")
       } catch (error) {
-        setFetchState('error')
+        setFetchState("error")
-        setMessage('errors:server-error')
+        setMessage("errors:server-error")
       }
     }
   }
 
   const handleAddProvider = (
-    provider: ProviderOAuth
+    provider: ProviderOAuth,
   ): (() => Promise<void>) => {
     return async () => {
-      const redirect = window.location.href.replace(location.search, '')
+      const redirect = window.location.href.replace(location.search, "")
       const { data: url } = await authentication.api.get(
-        `/users/oauth2/${provider.toLowerCase()}/add-strategy?redirectURI=${redirect}`
+        `/users/oauth2/${provider.toLowerCase()}/add-strategy?redirectURI=${redirect}`,
       )
       window.location.href = url
     }
@@ -217,117 +225,116 @@ export const UserSettings: React.FC = () => {
   return (
     <Form
       onSubmit={handleUseForm(onSubmit)}
-      className='my-auto flex flex-col items-center justify-center py-12 lg:min-w-[875px]'
+      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'>
+      <div className="flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row">
-        <div className=' flex w-full flex-wrap items-center justify-center px-6 sm:w-max'>
+        <div className=" flex w-full flex-wrap items-center justify-center px-6 sm:w-max">
-          <div className='relative'>
+          <div className="relative">
-            <div className='absolute z-50 h-full w-full'>
+            <div className="absolute z-50 h-full w-full">
-              <button className='relative flex h-full w-full items-center justify-center transition hover:scale-110'>
+              <button className="relative flex h-full w-full items-center justify-center transition hover:scale-110">
                 <input
-                  type='file'
+                  type="file"
-                  className='absolute h-full w-full cursor-pointer opacity-0'
+                  className="absolute h-full w-full cursor-pointer opacity-0"
                   onChange={handleFileChange}
                 />
-                <PhotographIcon color='white' className='h-8 w-8' />
+                <PhotographIcon color="white" className="h-8 w-8" />
               </button>
             </div>
-            <div className='flex items-center justify-center rounded-full bg-black shadow-xl'>
+            <div className="flex items-center justify-center rounded-full bg-black shadow-xl">
               <Image
                 quality={100}
-                className='rounded-full opacity-50'
+                className="rounded-full opacity-50"
                 src={
                   user.logo != null
                     ? user.logo
-                    : '/images/data/user-default.png'
+                    : "/images/data/user-default.png"
                 }
-                alt='Profil Picture'
+                alt="Profil Picture"
-                draggable='false'
+                draggable="false"
                 height={125}
                 width={125}
               />
             </div>
           </div>
-          <div className='mx-12 flex flex-col'>
+          <div className="mx-12 flex flex-col">
             <Input
-              name='name'
+              name="name"
-              label={t('common:name')}
+              label={t("common:name")}
-              placeholder={t('common:name')}
+              placeholder={t("common:name")}
-              className='!mt-0'
+              className="!mt-0"
               onChange={onChange}
-              value={inputValues.name ?? ''}
+              value={inputValues.name ?? ""}
               error={getFirstErrorTranslation(errors.name)}
             />
             <Input
-              name='status'
+              name="status"
-              label={t('application:status')}
+              label={t("application:status")}
-              placeholder={t('application:status')}
+              placeholder={t("application:status")}
-              className='!mt-4'
+              className="!mt-4"
               onChange={onChange}
-              value={inputValues.status ?? ''}
+              value={inputValues.status ?? ""}
               error={getFirstErrorTranslation(errors.status)}
             />
           </div>
         </div>
       </div>
-      <div className='mt-12 flex w-full flex-col items-center justify-between sm:w-fit lg:flex-row'>
+      <div className="mt-12 flex w-full flex-col items-center justify-between sm:w-fit lg:flex-row">
-        <div className='w-4/5 pr-0 sm:w-[450px] lg:border-r-[1px] lg:border-neutral-700 lg:pr-12'>
+        <div className="w-4/5 pr-0 sm:w-[450px] lg:border-r-[1px] lg:border-neutral-700 lg:pr-12">
           <Input
-            name='email'
+            name="email"
-            label='Email'
+            label="Email"
-            placeholder='Email'
+            placeholder="Email"
             onChange={onChange}
-            value={inputValues.email ?? ''}
+            value={inputValues.email ?? ""}
             error={getFirstErrorTranslation(errors.email)}
           />
           <Checkbox
-            name='isPublicEmail'
+            name="isPublicEmail"
-            label={t('application:label-checkbox-email')}
+            label={t("application:label-checkbox-email")}
-            id='checkbox-email-visibility'
+            id="checkbox-email-visibility"
             onChange={onChangeCheckbox}
             checked={inputValues.isPublicEmail}
           />
           <Input
-            name='website'
+            name="website"
-            label={t('application:website')}
+            label={t("application:website")}
-            placeholder={t('application:website')}
+            placeholder={t("application:website")}
             onChange={onChange}
-            value={inputValues.website ?? ''}
+            value={inputValues.website ?? ""}
             error={getFirstErrorTranslation(errors.website)}
           />
           <Textarea
-            name='biography'
+            name="biography"
-            label={t('application:biography')}
+            label={t("application:biography")}
-            placeholder={t('application:biography')}
+            placeholder={t("application:biography")}
-            id='textarea-biography'
+            id="textarea-biography"
             onChange={onChange}
-            value={inputValues.biography ?? ''}
+            value={inputValues.biography ?? ""}
           />
         </div>
-        <div className='flex h-full w-4/5 flex-col items-center justify-between pr-0 sm:w-[415px] lg:pl-12'>
+        <div className="flex h-full w-4/5 flex-col items-center justify-between pr-0 sm:w-[415px] lg:pl-12">
-          <div className='flex w-full items-center pt-10 lg:pt-0'>
+          <div className="flex w-full items-center pt-10 lg:pt-0">
-            <Language className='!top-12' />
+            <Language className="!top-12" />
-            <div className='ml-auto flex'>
+            <div className="ml-auto flex">
               <SwitchTheme />
-              <Link href={`/application/users/${user.id}`}>
+              <Link
-                <a
+                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'
+                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'
+                title="Preview Public Profile"
-                >
+              >
-                  <EyeIcon
+                <EyeIcon
-                    height={20}
+                  height={20}
-                    className='opacity-50 transition-opacity group-hover:opacity-100'
+                  className="opacity-50 transition-opacity group-hover:opacity-100"
-                  />
+                />
-                </a>
               </Link>
             </div>
           </div>
 
-          <div className='mt-14 flex w-full flex-col gap-4'>
+          <div className="mt-14 flex w-full flex-col gap-4">
             {!hasAllProviders ? (
-              <div className='flex w-full flex-col gap-4'>
+              <div className="flex w-full flex-col gap-4">
-                <h3 className='text-center'>
+                <h3 className="text-center">
-                  {t('application:signin-with-an-account')}
+                  {t("application:signin-with-an-account")}
                 </h3>
                 {providers.map((provider, index) => {
                   if (!user.strategies.includes(provider)) {
@@ -335,7 +342,7 @@ export const UserSettings: React.FC = () => {
                       <SocialMediaButton
                         key={index}
                         socialMedia={provider}
-                        className='w-full justify-center'
+                        className="w-full justify-center"
                         onClick={handleAddProvider(provider)}
                       />
                     )
@@ -345,9 +352,9 @@ export const UserSettings: React.FC = () => {
               </div>
             ) : null}
             {user.strategies.length !== 1 && (
-              <div className='mt-4 flex w-full flex-col gap-4'>
+              <div className="mt-4 flex w-full flex-col gap-4">
-                <h3 className='text-center'>
+                <h3 className="text-center">
-                  {t('application:signout-with-an-account')}
+                  {t("application:signout-with-an-account")}
                 </h3>
                 {providers.map((provider, index) => {
                   if (user.strategies.includes(provider)) {
@@ -355,7 +362,7 @@ export const UserSettings: React.FC = () => {
                       <SocialMediaButton
                         key={index}
                         socialMedia={provider}
-                        className='w-full justify-center'
+                        className="w-full justify-center"
                         onClick={handleDeletionProvider(provider)}
                       />
                     )
@@ -368,16 +375,16 @@ export const UserSettings: React.FC = () => {
         </div>
       </div>
 
-      <div className='mt-12 flex flex-col items-center justify-center sm:w-fit'>
+      <div className="mt-12 flex flex-col items-center justify-center sm:w-fit">
-        <div className='space-x-6'>
+        <div className="space-x-6">
-          <Button type='submit'>{t('application:save')}</Button>
+          <Button type="submit">{t("application:save")}</Button>
-          <Button type='button' color='red' onClick={handleSignout}>
+          <Button type="button" color="red" onClick={handleSignout}>
-            {t('application:signout')}
+            {t("application:signout")}
           </Button>
         </div>
-        <div className='mt-4'>
+        <div className="mt-4">
-          <Button type='button' color='red' onClick={handleSignoutAllDevices}>
+          <Button type="button" color="red" onClick={handleSignoutAllDevices}>
-            {t('application:signout-all-devices')}
+            {t("application:signout-all-devices")}
           </Button>
         </div>
         <FormState

components/Application/UserSettings/index.ts

@@ -1 +1 @@
-export * from './UserSettings'
+export * from "./UserSettings"

components/Application/index.ts

@@ -1 +1 @@
-export * from './Application'
+export * from "./Application"

components/Authentication/Authentication.tsx

@@ -1,28 +1,26 @@
-import { useMemo } from 'react'
+import { useMemo } from "react"
-import { useRouter } from 'next/router'
+import { useRouter } from "next/router"
-import Link from 'next/link'
+import Link from "next/link"
-import useTranslation from 'next-translate/useTranslation'
+import useTranslation from "next-translate/useTranslation"
-import { useTheme } from 'next-themes'
+import { useTheme } from "next-themes"
-import axios from 'axios'
+import axios from "axios"
-import { useForm } from 'react-component-form'
+import { useForm } from "react-component-form"
-import type { HandleUseFormCallback } from 'react-component-form'
+import type { HandleUseFormCallback } from "react-component-form"
 
-import { Main } from '../design/Main'
+import { Main } from "../design/Main"
-import { Input } from '../design/Input'
+import { Input } from "../design/Input"
-import { Button } from '../design/Button'
+import { Button } from "../design/Button"
-import { FormState } from '../design/FormState'
+import { FormState } from "../design/FormState"
-import { AuthenticationForm } from '.'
+import { AuthenticationForm } from "."
-import { userSchema } from '../../models/User'
+import { userSchema } from "../../models/User"
-import { api } from '../../tools/api'
+import { api } from "../../tools/api"
-import {
+import type { Tokens } from "../../tools/authentication"
-  Tokens,
+import { Authentication as AuthenticationClass } from "../../tools/authentication"
-  Authentication as AuthenticationClass
+import { AuthenticationSocialMedia } from "./AuthenticationSocialMedia"
-} from '../../tools/authentication'
+import { useFormTranslation } from "../../hooks/useFormTranslation"
-import { AuthenticationSocialMedia } from './AuthenticationSocialMedia'
-import { useFormTranslation } from '../../hooks/useFormTranslation'
 
 export interface AuthenticationProps {
-  mode: 'signup' | 'signin'
+  mode: "signup" | "signin"
 }
 
 export const Authentication: React.FC<AuthenticationProps> = (props) => {
@@ -34,9 +32,9 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
 
   const schema = useMemo(() => {
     return {
-      ...(mode === 'signup' && { name: userSchema.name }),
+      ...(mode === "signup" && { name: userSchema.name }),
       email: userSchema.email,
-      password: userSchema.password
+      password: userSchema.password,
     }
   }, [mode])
 
@@ -45,55 +43,55 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
 
   const onSubmit: HandleUseFormCallback<typeof schema> = async (
     formData,
-    formElement
+    formElement,
   ) => {
-    if (mode === 'signup') {
+    if (mode === "signup") {
       try {
         await api.post(
           `/users/signup?redirectURI=${window.location.origin}/authentication/signin`,
-          { ...formData, language: lang, theme }
+          { ...formData, language: lang, theme },
         )
         formElement.reset()
         return {
-          type: 'success',
+          type: "success",
-          value: 'authentication:success-signup'
+          message: "authentication:success-signup",
         }
       } catch (error) {
         if (axios.isAxiosError(error) && error.response?.status === 400) {
           const message = error.response.data.message as string
-          if (message.endsWith('already taken.')) {
+          if (message.endsWith("already taken.")) {
             return {
-              type: 'error',
+              type: "error",
-              value: 'authentication:already-used'
+              message: "authentication:already-used",
             }
           }
           return {
-            type: 'error',
+            type: "error",
-            value: 'errors:server-error'
+            message: "errors:server-error",
           }
         }
         return {
-          type: 'error',
+          type: "error",
-          value: 'errors:server-error'
+          message: "errors:server-error",
         }
       }
     } else {
       try {
-        const { data } = await api.post<Tokens>('/users/signin', formData)
+        const { data } = await api.post<Tokens>("/users/signin", formData)
         const authentication = new AuthenticationClass(data, true)
         authentication.signin()
-        await router.push('/application')
+        await router.push("/application")
         return null
       } catch (error) {
         if (axios.isAxiosError(error) && error.response?.status === 400) {
           return {
-            type: 'error',
+            type: "error",
-            value: 'authentication:wrong-credentials'
+            message: "authentication:wrong-credentials",
           }
         }
         return {
-          type: 'error',
+          type: "error",
-          value: 'errors:server-error'
+          message: "errors:server-error",
         }
       }
     }
@@ -102,55 +100,53 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
   return (
     <Main>
       <AuthenticationSocialMedia />
-      <div className='pt-8 text-center font-paragraph text-lg'>
+      <div className="pt-8 text-center font-paragraph text-lg">
-        {t('authentication:or')}
+        {t("authentication:or")}
       </div>
       <AuthenticationForm onSubmit={handleUseForm(onSubmit)}>
-        {mode === 'signup' && (
+        {mode === "signup" && (
           <Input
-            type='text'
+            type="text"
-            placeholder={t('common:name')}
+            placeholder={t("common:name")}
-            name='name'
+            name="name"
-            label={t('common:name')}
+            label={t("common:name")}
             error={getFirstErrorTranslation(errors.name)}
           />
         )}
         <Input
-          type='email'
+          type="email"
-          placeholder='Email'
+          placeholder="Email"
-          name='email'
+          name="email"
-          label='Email'
+          label="Email"
           error={getFirstErrorTranslation(errors.email)}
         />
         <Input
-          type='password'
+          type="password"
-          placeholder={t('authentication:password')}
+          placeholder={t("authentication:password")}
-          name='password'
+          name="password"
-          label={t('authentication:password')}
+          label={t("authentication:password")}
-          showForgotPassword={mode === 'signin'}
+          showForgotPassword={mode === "signin"}
           error={getFirstErrorTranslation(errors.password)}
         />
-        <Button data-cy='submit' className='mt-6 w-full' type='submit'>
+        <Button data-cy="submit" className="mt-6 w-full" type="submit">
-          {t('authentication:submit')}
+          {t("authentication:submit")}
         </Button>
-        <p className='mt-3 font-headline text-sm text-green-800 hover:underline dark:text-green-400'>
+        <p className="mt-3 font-headline text-sm text-green-800 hover:underline dark:text-green-400">
           <Link
             href={
-              mode === 'signup'
+              mode === "signup"
-                ? '/authentication/signin'
+                ? "/authentication/signin"
-                : '/authentication/signup'
+                : "/authentication/signup"
             }
           >
-            <a>
+            {mode === "signup"
-              {mode === 'signup'
+              ? t("authentication:already-have-an-account")
-                ? t('authentication:already-have-an-account')
+              : t("authentication:dont-have-an-account")}
-                : t('authentication:dont-have-an-account')}
-            </a>
           </Link>
         </p>
       </AuthenticationForm>
       <FormState
-        id='message'
+        id="message"
         state={fetchState}
         message={message != null ? t(message) : undefined}
       />

components/Authentication/AuthenticationForm.tsx

@@ -1,12 +1,13 @@
-import classNames from 'clsx'
+import classNames from "clsx"
-import { Form, FormProps } from 'react-component-form'
+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
 
   return (
     <Form
-      className={classNames('w-4/6 max-w-xs', className)}
+      className={classNames("w-4/6 max-w-xs", className)}
       noValidate
       {...rest}
     >

components/Authentication/AuthenticationSocialMedia.tsx

@@ -1,21 +1,22 @@
-import { useEffect } from 'react'
+import { useEffect } from "react"
-import { useRouter } from 'next/router'
+import { useRouter } from "next/router"
 
-import { api } from '../../tools/api'
+import { api } from "../../tools/api"
-import { Authentication, isTokens } from '../../tools/authentication'
+import { Authentication, isTokens } from "../../tools/authentication"
-import { SocialMediaButton, SocialMedia } from '../design/SocialMediaButton'
+import type { SocialMedia } from "../design/SocialMediaButton"
-import { providers } from '../../models/OAuth'
+import { SocialMediaButton } from "../design/SocialMediaButton"
+import { providers } from "../../models/OAuth"
 
 export const AuthenticationSocialMedia: React.FC = () => {
   const router = useRouter()
 
   const handleAuthentication = (
-    socialMedia: SocialMedia
+    socialMedia: SocialMedia,
   ): (() => Promise<void>) => {
     return async () => {
-      const redirect = window.location.href.replace(location.search, '')
+      const redirect = window.location.href.replace(location.search, "")
       const { data: url } = await api.get(
-        `/users/oauth2/${socialMedia.toLowerCase()}/signin?redirectURI=${redirect}`
+        `/users/oauth2/${socialMedia.toLowerCase()}/signin?redirectURI=${redirect}`,
       )
       window.location.href = url
     }
@@ -26,13 +27,13 @@ export const AuthenticationSocialMedia: React.FC = () => {
     if (isTokens(data)) {
       const authentication = new Authentication(data, true)
       authentication.signin()
-      router.push('/application').catch(() => {})
+      router.push("/application").catch(() => {})
     }
   }, [router])
 
   return (
-    <div className='flex flex-col sm:w-full sm:items-center'>
+    <div className="flex flex-col sm:w-full sm:items-center">
-      <div className='flex flex-col items-center justify-center space-y-6 sm:w-4/6 sm:flex-row sm:space-x-6 sm:space-y-0'>
+      <div className="flex flex-col items-center justify-center space-y-6 sm:w-4/6 sm:flex-row sm:space-x-6 sm:space-y-0">
         {providers.map((provider, index) => {
           return (
             <SocialMediaButton

components/Authentication/index.ts

@@ -1,2 +1,2 @@
-export * from './Authentication'
+export * from "./Authentication"
-export * from './AuthenticationForm'
+export * from "./AuthenticationForm"

components/Emoji/Emoji.tsx

@@ -1,6 +1,6 @@
-import { Emoji as EmojiMart } from 'emoji-mart'
+import { Emoji as EmojiMart } from "emoji-mart"
 
-import { EMOJI_SET } from './emojiPlugin'
+import { EMOJI_SET } from "./emojiPlugin"
 
 export interface EmojiProps {
   value: string

components/Emoji/EmojiPicker/EmojiPicker.tsx

@@ -1,12 +1,13 @@
-import 'emoji-mart/css/emoji-mart.css'
+import "emoji-mart/css/emoji-mart.css"
-import { EmojiData, Picker } from 'emoji-mart'
+import type { EmojiData } from "emoji-mart"
-import { useTheme } from 'next-themes'
+import { Picker } from "emoji-mart"
+import { useTheme } from "next-themes"
 
-import { EMOJI_SET } from '../emojiPlugin'
+import { EMOJI_SET } from "../emojiPlugin"
 
 export type EmojiPickerOnClick = (
   emoji: EmojiData,
-  event: React.MouseEvent<HTMLElement, MouseEvent>
+  event: React.MouseEvent<HTMLElement, MouseEvent>,
 ) => void
 
 export interface EmojiPickerProps {
@@ -19,7 +20,7 @@ export const EmojiPicker: React.FC<EmojiPickerProps> = (props) => {
   return (
     <Picker
       set={EMOJI_SET}
-      theme={theme as 'light' | 'dark' | 'auto'}
+      theme={theme as "light" | "dark" | "auto"}
       onClick={props.onClick}
       showPreview={false}
       showSkinTones={false}

components/Emoji/EmojiPicker/index.ts

@@ -1 +1 @@
-export * from './EmojiPicker'
+export * from "./EmojiPicker"

components/Emoji/emojiPlugin.ts

@@ -1,21 +1,21 @@
-import { visit } from 'unist-util-visit'
+import { visit } from "unist-util-visit"
-import { Plugin, Transformer } from 'unified'
+import type { Plugin, Transformer } from "unified"
-import { Literal, Parent } from 'unist'
+import type { Literal, Parent } from "unist"
-import type { ElementContent } from 'hast'
+import type { ElementContent } from "hast"
-import type { EmojiSet } from 'emoji-mart'
+import type { EmojiSet } from "emoji-mart"
 
-import { emojiRegex } from './isStringWithOnlyOneEmoji'
+import { emojiRegex } from "./isStringWithOnlyOneEmoji"
 
-export const EMOJI_SET: EmojiSet = 'twitter'
+export const EMOJI_SET: EmojiSet = "twitter"
 
 const extractText = (
   string: string,
   start: number,
-  end: number
+  end: number,
 ): ElementContent => {
   return {
-    type: 'text',
+    type: "text",
-    value: string.slice(start, end)
+    value: string.slice(start, end),
   }
 }
 
@@ -23,9 +23,9 @@ export const emojiPlugin: Plugin<[], Literal<string>> = () => {
   const transformer: Transformer<Literal<string>> = (tree) => {
     visit<Literal<string>, string>(
       tree,
-      'text',
+      "text",
       (node, position, parent: Parent<ElementContent> | null) => {
-        if (typeof node.value !== 'string') {
+        if (typeof node.value !== "string") {
           return
         }
         position = position ?? 0
@@ -38,15 +38,15 @@ export const emojiPlugin: Plugin<[], Literal<string>> = () => {
             definition.push(extractText(node.value, lastIndex, match.index))
           }
           definition.push({
-            type: 'element',
+            type: "element",
-            tagName: 'emoji',
+            tagName: "emoji",
             properties: { value },
-            children: []
+            children: [],
           })
           lastIndex = match.index + value.length
           if (lastIndex !== node.value.length) {
             definition.push(
-              extractText(node.value, lastIndex, node.value.length)
+              extractText(node.value, lastIndex, node.value.length),
             )
           }
           if (parent != null) {
@@ -56,7 +56,7 @@ export const emojiPlugin: Plugin<[], Literal<string>> = () => {
             parent.children = parent.children.concat(last)
           }
         }
-      }
+      },
     )
   }
   return transformer

components/Emoji/index.ts

@@ -1,4 +1,4 @@
-export * from './Emoji'
+export * from "./Emoji"
-export * from './EmojiPicker'
+export * from "./EmojiPicker"
-export * from './emojiPlugin'
+export * from "./emojiPlugin"
-export * from './isStringWithOnlyOneEmoji'
+export * from "./isStringWithOnlyOneEmoji"

components/ErrorPage.tsx

@@ -1,53 +1,45 @@
-import useTranslation from 'next-translate/useTranslation'
+import useTranslation from "next-translate/useTranslation"
-import Link from 'next/link'
+import Link from "next/link"
 
-export interface ErrorPageProps {
+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 } = props
+  const { message, statusCode, version } = props
   const { t } = useTranslation()
 
   return (
     <>
-      <h1 className='my-6 text-4xl font-semibold'>
+      <div className="flex h-screen flex-col pt-0">
-        {t('errors:error')}{' '}
+        <Header />
-        <span
+        <main className="flex min-w-full flex-1 flex-col items-center justify-center">
-          className='text-green-800 dark:text-green-400'
+          <h1 className="my-6 text-4xl font-semibold">
-          data-cy='status-code'
+            {t("errors:error")}{" "}
-        >
+            <span
-          {statusCode}
+              className="text-green-800 dark:text-green-400"
-        </span>
+              data-cy="status-code"
-      </h1>
+            >
-      <p className='text-center text-lg'>
+              {statusCode}
-        {message}{' '}
+            </span>
-        <Link href='/'>
+          </h1>
-          <a className='text-green-800 hover:underline dark:text-green-400'>
+          <p className="text-center text-lg">
-            {t('errors:return-to-home-page')}
+            {message}{" "}
-          </a>
+            <Link
-        </Link>
+              href="/"
-      </p>
+              className="text-green-800 hover:underline dark:text-green-400"
-
+            >
-      <style jsx global>
+              {t("errors:return-to-home-page")}
-        {`
+            </Link>
-          main {
+          </p>
-            display: flex;
+        </main>
-            flex-direction: column;
+        <Footer version={version} />
-            justify-content: center;
+      </div>
-            align-items: center;
-            min-width: 100vw;
-            flex: 1;
-          }
-          #__next {
-            display: flex;
-            flex-direction: column;
-            padding-top: 0;
-            height: 100vh;
-          }
-        `}
-      </style>
     </>
   )
 }

components/Footer/Footer.tsx

@@ -1,8 +1,8 @@
-import Link from 'next/link'
+import Link from "next/link"
-import useTranslation from 'next-translate/useTranslation'
+import useTranslation from "next-translate/useTranslation"
 
-import { API_VERSION } from '../../tools/api'
+import { API_VERSION } from "../../tools/api"
-import { VersionLink } from './VersionLink'
+import { VersionLink } from "./VersionLink"
 
 export interface FooterProps {
   version: string
@@ -13,18 +13,19 @@ export const Footer: React.FC<FooterProps> = (props) => {
   const { version } = 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'>
+    <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='/'>
+        <Link
-          <a className='text-green-800 hover:underline dark:text-green-400'>
+          href="/"
-            Thream
+          className="text-green-800 hover:underline dark:text-green-400"
-          </a>
+        >
-        </Link>{' '}
+          Thream
-        | {t('common:all-rights-reserved')}
+        </Link>{" "}
+        | {t("common:all-rights-reserved")}
       </p>
-      <p className='mt-1'>
+      <p className="mt-1">
-        <VersionLink repository='website' version={version} /> |{' '}
+        <VersionLink repository="website" version={version} /> |{" "}
-        <VersionLink repository='api' version={API_VERSION} />
+        <VersionLink repository="api" version={API_VERSION} />
       </p>
     </footer>
   )

components/Footer/VersionLink.tsx

@@ -1,6 +1,6 @@
 export interface VersionLinkProps {
   version: string
-  repository: 'website' | 'api'
+  repository: "website" | "api"
 }
 
 export const VersionLink: React.FC<VersionLinkProps> = (props) => {
@@ -9,10 +9,10 @@ export const VersionLink: React.FC<VersionLinkProps> = (props) => {
   return (
     <a
       data-cy={`version-link-${repository}`}
-      className='text-green-800 hover:underline dark:text-green-400'
+      className="text-green-800 hover:underline dark:text-green-400"
       href={`https://github.com/Thream/${repository}/releases/tag/v${version}`}
-      target='_blank'
+      target="_blank"
-      rel='noopener noreferrer'
+      rel="noopener noreferrer"
     >
       {repository} v{version}
     </a>

components/Footer/index.ts

@@ -1 +1 @@
-export * from './Footer'
+export * from "./Footer"

components/Head.tsx

@@ -1,5 +1,5 @@
-import NextHead from 'next/head'
+import NextHead from "next/head"
-import useTranslation from 'next-translate/useTranslation'
+import useTranslation from "next-translate/useTranslation"
 
 interface HeadProps {
   title?: string
@@ -12,43 +12,37 @@ export const Head: React.FC<HeadProps> = (props) => {
   const { t } = useTranslation()
 
   const {
-    title = 'Thream',
+    title = "Thream",
-    image = 'https://thream.divlo.fr/images/icons/128x128.png',
+    image = "https://thream.theoludwig.fr/images/icon-128x128.png",
-    description = t('common:description'),
+    description = t("common:description"),
-    url = 'https://thream.divlo.fr/'
+    url = "https://thream.theoludwig.fr/",
   } = props
 
   return (
     <NextHead>
       <title>{title}</title>
-      <link rel='icon' type='image/png' href={image} />
+      <link rel="icon" type="image/png" href={image} />
 
       {/* Meta Tag */}
-      <meta name='viewport' content='width=device-width, initial-scale=1.0' />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <meta name='description' content={description} />
+      <meta name="description" content={description} />
-      <meta name='Language' content='fr, en' />
+      <meta name="Language" content="fr-FR, en-US" />
-      <meta name='theme-color' content='#27B05E' />
+      <meta name="theme-color" content="#27B05E" />
 
       {/* Open Graph Metadata */}
-      <meta property='og:title' content={title} />
+      <meta property="og:title" content={title} />
-      <meta property='og:type' content='website' />
+      <meta property="og:type" content="website" />
-      <meta property='og:url' content={url} />
+      <meta property="og:url" content={url} />
-      <meta property='og:image' content={image} />
+      <meta property="og:image" content={image} />
-      <meta property='og:description' content={description} />
+      <meta property="og:description" content={description} />
-      <meta property='og:locale' content='fr_FR, en_US' />
+      <meta property="og:locale" content="fr-FR, en-US" />
-      <meta property='og:site_name' content={title} />
+      <meta property="og:site_name" content={title} />
 
       {/* Twitter card Metadata */}
-      <meta name='twitter:card' content='summary' />
+      <meta name="twitter:card" content="summary" />
-      <meta name='twitter:description' content={description} />
+      <meta name="twitter:description" content={description} />
-      <meta name='twitter:title' content={title} />
+      <meta name="twitter:title" content={title} />
-      <meta name='twitter:image' content={image} />
+      <meta name="twitter:image" content={image} />
-
-      {/* PWA Data */}
-      <link rel='manifest' href='/manifest.json' />
-      <meta name='apple-mobile-web-app-capable' content='yes' />
-      <meta name='mobile-web-app-capable' content='yes' />
-      <link rel='apple-touch-icon' href={image} />
     </NextHead>
   )
 }

components/Header/Header.tsx

@@ -1,30 +1,29 @@
-import Link from 'next/link'
+import Link from "next/link"
-import Image from 'next/image'
+import Image from "next/image"
 
-import { Language } from './Language'
+import { Language } from "./Language"
-import { SwitchTheme } from './SwitchTheme'
+import { SwitchTheme } from "./SwitchTheme"
 
 export const Header: React.FC = () => {
   return (
-    <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'>
+    <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'>
+      <div className="container flex justify-between">
-        <Link href='/'>
+        <Link href="/">
-          <a>
+          <div className="flex items-center justify-center">
-            <div className='flex items-center justify-center'>
+            <Image
-              <Image
+              priority
-                quality={100}
+              quality={100}
-                width={60}
+              width={60}
-                height={60}
+              height={60}
-                src='/images/icons/Thream.png'
+              src="/images/Thream.png"
-                alt='Thream'
+              alt="Thream"
-              />
+            />
-              <span className='ml-1 hidden font-headline font-medium text-green-800 dark:text-green-400 xs:block'>
+            <span className="ml-1 hidden font-headline font-medium text-green-800 dark:text-green-400 xs:block">
-                Thream
+              Thream
-              </span>
+            </span>
-            </div>
+          </div>
-          </a>
         </Link>
-        <div className='flex justify-between'>
+        <div className="flex justify-between">
           <Language />
           <SwitchTheme />
         </div>

components/Header/Language/Arrow.tsx

@@ -1,15 +1,15 @@
 export const Arrow: React.FC = () => {
   return (
     <svg
-      width='12'
+      width="12"
-      height='8'
+      height="8"
-      viewBox='0 0 12 8'
+      viewBox="0 0 12 8"
-      fill='none'
+      fill="none"
-      xmlns='http://www.w3.org/2000/svg'
+      xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        className='fill-current text-black dark:text-white'
+        className="fill-current text-black dark:text-white"
-        d='M9.8024 0.292969L5.61855 4.58597L1.43469 0.292969L0.0566406 1.70697L5.61855 7.41397L11.1805 1.70697L9.8024 0.292969Z'
+        d="M9.8024 0.292969L5.61855 4.58597L1.43469 0.292969L0.0566406 1.70697L5.61855 7.41397L11.1805 1.70697L9.8024 0.292969Z"
       />
     </svg>
   )

components/Header/Language/Language.tsx

@@ -1,12 +1,12 @@
-import { useCallback, useState, useRef } from 'react'
+import { useCallback, useState, useRef } from "react"
-import useTranslation from 'next-translate/useTranslation'
+import useTranslation from "next-translate/useTranslation"
-import setLanguage from 'next-translate/setLanguage'
+import setLanguage from "next-translate/setLanguage"
-import classNames from 'clsx'
+import classNames from "clsx"
 
-import i18n from '../../../i18n.json'
+import i18n from "../../../i18n.json"
-import { Arrow } from './Arrow'
+import { Arrow } from "./Arrow"
-import { LanguageFlag } from './LanguageFlag'
+import { LanguageFlag } from "./LanguageFlag"
-import { useClickOutsideAlerter } from '../../../hooks/useClickOutsideAlerter'
+import { useClickOutsideAlerter } from "../../../hooks/useClickOutsideAlerter"
 
 export interface LanguageProps {
   className?: string
@@ -19,10 +19,14 @@ export const Language: React.FC<LanguageProps> = (props) => {
   const languageClickRef = useRef<HTMLDivElement | null>(null)
 
   const handleHiddenMenu = useCallback(() => {
-    setHiddenMenu((oldHiddenMenu) => !oldHiddenMenu)
+    setHiddenMenu((oldHiddenMenu) => {
+      return !oldHiddenMenu
+    })
   }, [])
 
-  useClickOutsideAlerter(languageClickRef, () => setHiddenMenu(true))
+  useClickOutsideAlerter(languageClickRef, () => {
+    return setHiddenMenu(true)
+  })
 
   const handleLanguage = async (language: string): Promise<void> => {
     await setLanguage(language)
@@ -31,12 +35,12 @@ export const Language: React.FC<LanguageProps> = (props) => {
 
   return (
     <div
-      className='relative flex cursor-pointer flex-col items-center justify-center'
+      className="relative flex cursor-pointer flex-col items-center justify-center"
       ref={languageClickRef}
     >
       <div
-        data-cy='language-click'
+        data-cy="language-click"
-        className='mr-5 flex items-center'
+        className="mr-5 flex items-center"
         onClick={handleHiddenMenu}
       >
         <LanguageFlag language={currentLanguage} />
@@ -44,11 +48,11 @@ export const Language: React.FC<LanguageProps> = (props) => {
       </div>
 
       <ul
-        data-cy='languages-list'
+        data-cy="languages-list"
         className={classNames(
           className,
-          'absolute top-16 z-10 mr-4 flex w-24 list-none flex-col items-center justify-center rounded-lg bg-white p-0 shadow-lightFlag dark:bg-black dark:shadow-darkFlag',
+          "absolute top-16 z-10 mr-4 flex w-24 list-none flex-col items-center justify-center rounded-lg bg-white p-0 shadow-lightFlag dark:bg-black dark:shadow-darkFlag",
-          { hidden: hiddenMenu }
+          { hidden: hiddenMenu },
         )}
       >
         {i18n.locales.map((language, index) => {
@@ -58,8 +62,10 @@ export const Language: React.FC<LanguageProps> = (props) => {
           return (
             <li
               key={index}
-              className='flex h-12 w-full items-center justify-center pl-2 hover:bg-[#4f545c] hover:bg-opacity-20'
+              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/Language/LanguageFlag.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from "next/image"
 
 export interface LanguageFlagProps {
   language: string
@@ -16,7 +16,7 @@ export const LanguageFlag: React.FC<LanguageFlagProps> = (props) => {
         src={`/images/svg/languages/${language}.svg`}
         alt={language}
       />
-      <p data-cy='language-flag-text' className='mx-2 text-base'>
+      <p data-cy="language-flag-text" className="mx-2 text-base">
         {language.toUpperCase()}
       </p>
     </>

components/Header/Language/index.ts

@@ -1 +1 @@
-export * from './Language'
+export * from "./Language"

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>
-    </>
-  )
-}