.devcontainer/compose.yaml

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

.devcontainer/devcontainer.json

@@ -1,6 +1,6 @@
 {
   "name": "@thream/website",
-  "dockerComposeFile": "./compose.yaml",
+  "dockerComposeFile": "./docker-compose.yml",
   "service": "workspace",
   "workspaceFolder": "/workspace",
   "customizations": {

.devcontainer/docker-compose.yml

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

.dockerignore

@@ -1,4 +1,5 @@
+.*
+!.npmrc
 build
-.next
 coverage
 node_modules

.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/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@v4.0.0"
+      - uses: 'actions/checkout@v3.5.3'
 
-      - name: "Initialize CodeQL"
+      - name: 'Initialize CodeQL'
-        uses: "github/codeql-action/init@v2"
+        uses: 'github/codeql-action/init@v2'
         with:
           languages: ${{ matrix.language }}
 
-      - name: "Perform CodeQL Analysis"
+      - name: 'Perform CodeQL Analysis'
-        uses: "github/codeql-action/analyze@v2"
+        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@v4.0.0"
+      - uses: 'actions/checkout@v3.5.3'
 
-      - name: "Setup Node.js"
+      - name: 'Setup Node.js'
-        uses: "actions/setup-node@v3.8.1"
+        uses: 'actions/setup-node@v3.6.0'
         with:
-          node-version: "20.x"
+          node-version: '20.x'
-          cache: "npm"
+          cache: 'npm'
 
-      - name: "Install dependencies"
+      - name: 'Install dependencies'
-        run: "npm clean-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,30 +8,30 @@ on:
 
 jobs:
   lint:
-    runs-on: "ubuntu-latest"
+    runs-on: 'ubuntu-latest'
     steps:
-      - uses: "actions/checkout@v4.0.0"
+      - uses: 'actions/checkout@v3.5.3'
 
-      - name: "Setup Node.js"
+      - name: 'Setup Node.js'
-        uses: "actions/setup-node@v3.8.1"
+        uses: 'actions/setup-node@v3.6.0'
         with:
-          node-version: "20.x"
+          node-version: '20.x'
-          cache: "npm"
+          cache: 'npm'
 
-      - name: "Install dependencies"
+      - name: 'Install dependencies'
-        run: "npm clean-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:eslint"
+      - name: 'lint:eslint'
-        run: "npm run lint:eslint"
+        run: 'npm run lint:eslint'
 
-      - name: "lint:prettier"
+      - name: 'lint:prettier'
-        run: "npm run lint:prettier"
+        run: 'npm run lint:prettier'

.github/workflows/release.yml

@@ -1,4 +1,4 @@
-name: "Release"
+name: 'Release'
 
 on:
   push:
@@ -6,31 +6,31 @@ on:
 
 jobs:
   release:
-    runs-on: "ubuntu-latest"
+    runs-on: 'ubuntu-latest'
     steps:
-      - uses: "actions/checkout@v4.0.0"
+      - uses: 'actions/checkout@v3.5.3'
         with:
           fetch-depth: 0
           persist-credentials: false
 
-      - name: "Import GPG key"
+      - name: 'Import GPG key'
-        uses: "crazy-max/ghaction-import-gpg@v6.0.0"
+        uses: 'crazy-max/ghaction-import-gpg@v5.3.0'
         with:
           gpg_private_key: ${{ secrets.GPG_PRIVATE_KEY }}
           git_user_signingkey: true
           git_commit_gpgsign: true
 
-      - name: "Setup Node.js"
+      - name: 'Setup Node.js'
-        uses: "actions/setup-node@v3.8.1"
+        uses: 'actions/setup-node@v3.6.0'
         with:
-          node-version: "20.x"
+          node-version: '20.x'
-          cache: "npm"
+          cache: 'npm'
 
-      - name: "Install dependencies"
+      - name: 'Install dependencies'
-        run: "npm clean-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 }}

.github/workflows/test.yml

@@ -1,4 +1,4 @@
-name: "Test"
+name: 'Test'
 
 on:
   push:
@@ -8,41 +8,41 @@ on:
 
 jobs:
   test-unit:
-    runs-on: "ubuntu-latest"
+    runs-on: 'ubuntu-latest'
     steps:
-      - uses: "actions/checkout@v4.0.0"
+      - uses: 'actions/checkout@v3.5.3'
 
-      - name: "Setup Node.js"
+      - name: 'Setup Node.js'
-        uses: "actions/setup-node@v3.8.1"
+        uses: 'actions/setup-node@v3.6.0'
         with:
-          node-version: "20.x"
+          node-version: '20.x'
-          cache: "npm"
+          cache: 'npm'
 
-      - name: "Install dependencies"
+      - name: 'Install dependencies'
-        run: "npm clean-install"
+        run: 'npm clean-install'
 
-      - name: "Unit Test"
+      - name: 'Unit Test'
-        run: "npm run test:unit"
+        run: 'npm run test:unit'
 
   test-e2e:
-    runs-on: "ubuntu-latest"
+    runs-on: 'ubuntu-latest'
     steps:
-      - uses: "actions/checkout@v4.0.0"
+      - uses: 'actions/checkout@v3.5.3'
 
-      - name: "Setup Node.js"
+      - name: 'Setup Node.js'
-        uses: "actions/setup-node@v3.8.1"
+        uses: 'actions/setup-node@v3.6.0'
         with:
-          node-version: "20.x"
+          node-version: '20.x'
-          cache: "npm"
+          cache: 'npm'
 
-      - name: "Install dependencies"
+      - name: 'Install dependencies'
-        run: "npm clean-install"
+        run: 'npm clean-install'
 
-      - name: "Build"
+      - name: 'Build'
-        run: "npm run build"
+        run: 'npm run build'
 
-      - name: "html-w3c-validator"
+      - name: 'html-w3c-validator'
-        run: "npm run test:html-w3c-validator"
+        run: 'npm run test:html-w3c-validator'
 
-      - name: "End To End (e2e) Test"
+      - name: 'End To End (e2e) Test'
-        run: "npm run test:e2e"
+        run: 'npm run test:e2e'

.prettierrc.json

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

.vscode/settings.json

@@ -5,7 +5,7 @@
   "editor.bracketPairColorization.enabled": true,
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit"
+    "source.fixAll": true
   },
   "eslint.options": {
     "ignorePath": ".gitignore"

Dockerfile

@@ -1,19 +1,18 @@
-FROM node:20.9.0 AS builder-dependencies
+FROM node:20.5.0 AS builder-dependencies
 WORKDIR /usr/src/application
 COPY ./.npmrc ./
 COPY ./package*.json ./
 RUN npm clean-install
 
-FROM node:20.9.0 AS builder
+FROM node:20.5.0 AS builder
 WORKDIR /usr/src/application
 COPY --from=builder-dependencies /usr/src/application/node_modules ./node_modules
 COPY ./ ./
 RUN npm run build
 
-FROM gcr.io/distroless/nodejs20-debian12:latest AS runner
+FROM gcr.io/distroless/nodejs20-debian11:latest AS runner
 WORKDIR /usr/src/application
 ENV NODE_ENV=production
-ENV HOSTNAME=0.0.0.0
 ENV NEXT_TELEMETRY_DISABLED=1
 COPY --from=builder /usr/src/application/.next/standalone ./
 COPY --from=builder /usr/src/application/.next/static ./.next/static

README.md

@@ -1,9 +1,5 @@
 <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>
   <a href="./LICENSE"><img src="https://img.shields.io/badge/licence-MIT-blue.svg" alt="Licence MIT"/></a>
@@ -22,7 +18,7 @@
 
 Thream's website to stay close with your friends and communities.
 
-It uses [Thream/api](https://github.com/Thream/api) [v1.2.10](https://github.com/Thream/api/releases/tag/v1.2.10).
+It uses [Thream/api](https://github.com/Thream/api) [v1.2.8](https://github.com/Thream/api/releases/tag/v1.2.8).
 
 ## ⚙️ Getting Started
 

components/Application/Application.tsx

@@ -1,18 +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 type { DirectionSidebar } from "./Sidebar"
+import type { DirectionSidebar } from './Sidebar'
-import { Sidebar } from "./Sidebar"
+import { Sidebar } from './Sidebar'
-import { IconButton } from "../design/IconButton"
+import { IconButton } from '../design/IconButton'
-import { IconLink } from "../design/IconLink"
+import { IconLink } from '../design/IconLink'
-import { Guilds } from "./Guilds/Guilds"
+import { Guilds } from './Guilds/Guilds'
-import { Divider } from "../design/Divider"
+import { Divider } from '../design/Divider'
-import { Members } from "./Members"
+import { Members } from './Members'
-import { useAuthentication } from "../../tools/authentication"
+import { useAuthentication } from '../../tools/authentication'
 
 export interface ChannelsPath {
   channelId: number
@@ -27,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
@@ -51,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
         })
       }
     }
@@ -105,7 +105,7 @@ export const Application: React.FC<
     if (isMobile && (visibleSidebars.left || visibleSidebars.right)) {
       return setVisibleSidebars({
         left: false,
-        right: false,
+        right: false
       })
     }
   }
@@ -120,7 +120,7 @@ export const Application: React.FC<
       }
       setVisibleSidebars({
         ...visibleSidebars,
-        left: true,
+        left: true
       })
     },
     onSwipedLeft: () => {
@@ -130,10 +130,10 @@ export const Application: React.FC<
         }
         setVisibleSidebars({
           ...visibleSidebars,
-          right: true,
+          right: true
         })
       }
-    },
+    }
   })
 
   useEffect(() => {
@@ -146,28 +146,28 @@ 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={() => {
-            return handleToggleSidebars("left")
+            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={() => {
-                return handleToggleSidebars("right")
+                return handleToggleSidebars('right')
               }}
             >
               {!visibleSidebars.right ? <UsersIcon /> : <XIcon />}
@@ -177,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="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">
+          <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"}
@@ -206,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} />
@@ -219,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}
@@ -234,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 type {
   Channel,
-  ChannelWithDefaultChannelId,
+  ChannelWithDefaultChannelId
-} from "../../../models/Channel"
+} from '../../../models/Channel'
-import { channelSchema } 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',
-        message: "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,13 +1,13 @@
-import { memo } from "react"
+import { memo } from 'react'
-import classNames from "clsx"
+import classNames from 'clsx'
-import Link from "next/link"
+import Link from 'next/link'
-import { useRouter } from "next/router"
+import { useRouter } from 'next/router'
-import { CogIcon } from "@heroicons/react/solid"
+import { CogIcon } from '@heroicons/react/solid'
 
-import type { GuildsChannelsPath } from "../Application"
+import type { GuildsChannelsPath } from '../Application'
-import type { 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
@@ -25,24 +25,24 @@ const ChannelMemo: React.FC<ChannelProps> = (props) => {
     <Link
       href={`/application/${path.guildId}/${channel.id}`}
       className={classNames(
-        "group relative mx-3 my-3 flex items-center justify-between overflow-hidden rounded-lg py-2 text-sm transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-600",
+        '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 className="max-[315px] ml-2 mr-4 break-all" data-cy="channel-name">
+      <span className='max-[315px] ml-2 mr-4 break-all' data-cy='channel-name'>
         # {channel.name}
       </span>
       {member.isOwner && (
         <IconButton
           onClick={async () => {
             await router.push(
-              `/application/${channel.guildId}/${channel.id}/settings`,
+              `/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"
+          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"
+          title='Settings'
         >
           <CogIcon height={20} width={20} />
         </IconButton>

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 type { 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
@@ -27,43 +27,43 @@ export const ConfirmPopup: React.FC<ConfirmPopupProps> = ({ ...props }) => {
     <div className={props.className}>
       <Loader
         className={classNames(
-          "absolute left-1/2 top-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,20 +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 type { Channel } from "../../../models/Channel"
+import type { Channel } from '../../../models/Channel'
-import { channelSchema } from "../../../models/Channel"
+import { channelSchema } from '../../../models/Channel'
-import { useGuildMember } from "../../../contexts/GuildMember"
+import { useGuildMember } from '../../../contexts/GuildMember'
-import { useFormTranslation } from "../../../hooks/useFormTranslation"
+import { useFormTranslation } from '../../../hooks/useFormTranslation'
 
 const schema = {
-  name: channelSchema.name,
+  name: channelSchema.name
 }
 
 export const CreateChannel: React.FC = () => {
@@ -31,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',
-        message: "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,22 +1,22 @@
-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 { 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 type { GuildComplete } from "../../../models/Guild"
+import type { GuildComplete } from '../../../models/Guild'
-import { guildSchema } from "../../../models/Guild"
+import { guildSchema } from '../../../models/Guild'
-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 { Textarea } from "../../design/Textarea"
+import { Textarea } from '../../design/Textarea'
-import { useFormTranslation } from "../../../hooks/useFormTranslation"
+import { useFormTranslation } from '../../../hooks/useFormTranslation'
 
 const schema = {
   name: guildSchema.name,
-  description: guildSchema.description,
+  description: guildSchema.description
 }
 
 export const CreateGuild: React.FC = () => {
@@ -33,44 +33,44 @@ export const CreateGuild: React.FC = () => {
       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 channel = data.guild.channels[0]
       if (channel == null) {
-        throw new Error("No channel found")
+        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',
-        message: "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 type { GuildsChannelsPath } from ".."
+import type { GuildsChannelsPath } from '..'
 
 export interface GuildLeftSidebarProps {
   path: GuildsChannelsPath
@@ -17,23 +17,23 @@ 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
-            data-cy="link-add-channel"
+            data-cy='link-add-channel'
           >
-            <IconButton className="h-10 w-10" title="Add a Channel">
+            <IconButton className='h-10 w-10' title='Add a Channel'>
               <PlusIcon />
             </IconButton>
           </Link>
@@ -41,9 +41,9 @@ export const GuildLeftSidebar: React.FC<GuildLeftSidebarProps> = (props) => {
         <Link
           href={`/application/${path.guildId}/settings`}
           passHref
-          data-cy="link-settings-guild"
+          data-cy='link-settings-guild'
         >
-          <IconButton className="h-7 w-7" title="Settings">
+          <IconButton className='h-7 w-7' title='Settings'>
             <CogIcon />
           </IconButton>
         </Link>

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,7 +46,7 @@ export const GuildSettings: React.FC = () => {
     message,
     errors,
     setFetchState,
-    setMessage,
+    setMessage
   } = useForm(schema)
   const { getFirstErrorTranslation } = useFormTranslation()
 
@@ -55,13 +55,13 @@ export const GuildSettings: React.FC = () => {
       await authentication.api.put(`/guilds/${guild.id}`, formData)
       setInputValues(formData as unknown as any)
       return {
-        type: "success",
+        type: 'success',
-        message: "application:saved-information",
+        message: 'application:saved-information'
       }
     } catch (error) {
       return {
-        type: "error",
+        type: 'error',
-        message: "errors:server-error",
+        message: 'errors:server-error'
       }
     }
   }
@@ -72,30 +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 && 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, {
           headers: {
-            "Content-Type": "multipart/form-data",
+            'Content-Type': 'multipart/form-data'
-          },
+          }
         })
-        setFetchState("idle")
+        setFetchState('idle')
       } catch (error) {
-        setFetchState("error")
+        setFetchState('error')
-        setMessage("errors:server-error")
+        setMessage('errors:server-error')
       }
     }
   }
@@ -104,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')
     }
   }
 
@@ -123,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>
@@ -217,17 +217,17 @@ export const GuildSettings: React.FC = () => {
       </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,8 +1,8 @@
-import { memo } from "react"
+import { memo } from 'react'
-import Image from "next/image"
+import Image from 'next/image'
 
-import type { 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
@@ -14,19 +14,19 @@ const GuildMemo: React.FC<GuildProps> = (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}

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

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

@@ -1,7 +1,7 @@
-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 type { MessageProps } from "../Message"
+import type { MessageProps } from '../Message'
 
 export interface EditMessageProps extends MessageProps {
   handleEdit: () => Promise<void>
@@ -15,7 +15,7 @@ export const EditMessage: React.FC<
   const { t } = useTranslation()
 
   const handleEditSubmit: React.FormEventHandler<HTMLFormElement> = async (
-    event,
+    event
   ) => {
     event.preventDefault()
     await handleEdit()
@@ -23,23 +23,23 @@ export const EditMessage: React.FC<
 
   return (
     <form
-      className="flex h-full w-full items-center"
+      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"
+        className='scrollbar-firefox-support w-full resize-none bg-transparent p-2 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'
         defaultValue={message.value}
         ref={textareaRef}
         autoFocus
         onFocus={(event) => {
           event.currentTarget.setSelectionRange(
             event.currentTarget.value.length,
-            event.currentTarget.value.length,
+            event.currentTarget.value.length
           )
         }}
       />

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

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

components/Application/Messages/Message/Message.tsx

@@ -1,15 +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 type { 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 { useAuthentication } from "../../../../tools/authentication"
+import { useAuthentication } from '../../../../tools/authentication'
-import { MessageOptions } from "./MessageOptions"
+import { MessageOptions } from './MessageOptions'
-import { EditMessage } from "./EditMessage"
+import { EditMessage } from './EditMessage'
 
 export interface MessageProps {
   message: MessageWithMember
@@ -23,12 +23,12 @@ export const Message: React.FC<MessageProps> = (props) => {
   const { authentication, user } = useAuthentication()
 
   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 })
       )
     }
   }
@@ -36,13 +36,13 @@ 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 {}
     }
@@ -58,17 +58,17 @@ export const Message: React.FC<MessageProps> = (props) => {
   return (
     <div
       data-cy={`message-${message.id}`}
-      className="group flex w-full p-4 transition hover:bg-gray-200 dark:hover:bg-gray-900"
+      className='group flex w-full p-4 transition hover:bg-gray-200 dark:hover:bg-gray-900'
     >
       <Link href={`/application/users/${message.member.user.id}`}>
-        <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
               quality={100}
-              className="rounded-full"
+              className='rounded-full'
               src={
                 message.member.user.logo == null
-                  ? "/images/data/user-default.png"
+                  ? '/images/data/user-default.png'
                   : message.member.user.logo
               }
               alt={"Users's profil picture"}
@@ -79,33 +79,33 @@ export const Message: React.FC<MessageProps> = (props) => {
           </div>
         </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}`}>
             <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}
             </span>
           </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 && (
           <MessageOptions
             message={message}
-            editMode={isEditing ? ":white_check_mark:" : ":pencil2:"}
+            editMode={isEditing ? ':white_check_mark:' : ':pencil2:'}
             handleEdit={isEditing ? handleEdit : handleEditMode}
           />
         )}
 
-        {message.type === "text" ? (
+        {message.type === 'text' ? (
           <>
             {isEditing ? (
               <EditMessage
@@ -118,7 +118,7 @@ export const Message: React.FC<MessageProps> = (props) => {
               <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 type { 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

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

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

@@ -1 +1 @@
-export * from "./MessageOptions"
+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 type { MessageWithMember } from "../../../../../models/Message"
+import type { MessageWithMember } from '../../../../../models/Message'
 
 export interface MessageContentProps {
   message: MessageWithMember
@@ -35,16 +35,16 @@ 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}
             />
           )
@@ -55,22 +55,22 @@ export const MessageText: React.FC<MessageContentProps> = (props) => {
         },
         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,17 +15,17 @@ 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}
-          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"
+          className='mb-6 flex h-10 w-4/5 items-center justify-center self-center rounded-2xl bg-green-400 font-bold tracking-wide text-white transition duration-200 ease-in-out hover:bg-green-600'
         >
           {link.icon}
           {link.text}

components/Application/PopupGuild/index.ts

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

components/Application/SendMessage/SendMessage.tsx

@@ -1,12 +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 type { GuildsChannelsPath } from ".."
+import type { GuildsChannelsPath } from '..'
-import { useAuthentication } from "../../../tools/authentication"
+import { useAuthentication } from '../../../tools/authentication'
-import type { EmojiPickerOnClick } from "../../Emoji"
+import type { EmojiPickerOnClick } from '../../Emoji'
-import { EmojiPicker } from "../../Emoji"
+import { EmojiPicker } from '../../Emoji'
 
 export interface SendMessageProps {
   path: GuildsChannelsPath
@@ -18,54 +18,54 @@ 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 && 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,
         {
           headers: {
-            "Content-Type": "multipart/form-data",
+            'Content-Type': 'multipart/form-data'
-          },
+          }
-        },
+        }
       )
     }
   }
@@ -77,7 +77,7 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
   }
 
   const handleEmojiPicker: EmojiPickerOnClick = (emoji) => {
-    const emojiColons = emoji.colons ?? ""
+    const emojiColons = emoji.colons ?? ''
     setMessage((oldMessage) => {
       return oldMessage + emojiColons
     })
@@ -86,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 type { 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 right-0 top-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',
-          "right-0 top-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 type { UserPublic } from "../../../models/User"
+import type { UserPublic } from '../../../models/User'
-import type { Guild } from "../../../models/Guild"
+import type { Guild } from '../../../models/Guild'
 
 export interface UserProfileProps {
   className?: string
@@ -16,73 +16,73 @@ 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
                   quality={100}
-                  className="rounded-full"
+                  className='rounded-full'
                   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 className="ml-10 flex flex-col">
+              <div className='ml-10 flex flex-col'>
-                <div className="mb-2 flex items-center">
+                <div className='mb-2 flex items-center'>
                   <p
-                    className="space text-dark text-3xl font-bold tracking-wide dark:text-white"
+                    className='space text-dark text-3xl font-bold tracking-wide dark:text-white'
-                    data-cy="user-name"
+                    data-cy='user-name'
                   >
                     {user.name}
                   </p>
                   <p
-                    className="ml-8 select-none text-sm tracking-widest text-white opacity-40"
+                    className='ml-8 select-none text-sm tracking-widest text-white opacity-40'
-                    data-cy="user-createdAt"
+                    data-cy='user-createdAt'
                   >
-                    {date.format(new Date(user.createdAt), "DD/MM/YYYY")}
+                    {date.format(new Date(user.createdAt), 'DD/MM/YYYY')}
                   </p>
                 </div>
-                <div className="my-2 text-left">
+                <div className='my-2 text-left'>
                   {user.email != null && (
-                    <p className="font-bold">
+                    <p className='font-bold'>
-                      Email:{" "}
+                      Email:{' '}
                       <a
                         href={`mailto:${user.email}`}
-                        target="_blank"
+                        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"
+                        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"
+                        rel='noreferrer'
-                        data-cy="user-email"
+                        data-cy='user-email'
                       >
                         {user.email}
                       </a>
                     </p>
                   )}
                   {user.website != null && (
-                    <p className="font-bold">
+                    <p className='font-bold'>
-                      {t("application:website")}:{" "}
+                      {t('application:website')}:{' '}
                       <a
-                        target="_blank"
+                        target='_blank'
-                        rel="noreferrer"
+                        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"
+                        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>
                   )}
                   {user.status != null && (
-                    <p className="flex font-bold">
+                    <p className='flex font-bold'>
-                      {t("application:status")}:{" "}
+                      {t('application:status')}:{' '}
-                      <span className="ml-2 font-normal tracking-wide">
+                      <span className='ml-2 font-normal tracking-wide'>
                         {user.status}
                       </span>
                     </p>
@@ -92,7 +92,7 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
             </div>
           </div>
           {user.biography != null && (
-            <div className="mt-7 text-center">
+            <div className='mt-7 text-center'>
               <p>{user.biography}</p>
             </div>
           )}

components/Application/UserProfile/index.ts

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

components/Application/UserSettings/UserSettings.tsx

@@ -1,27 +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 type { ProviderOAuth } from "../../../models/OAuth"
+import type { ProviderOAuth } from '../../../models/OAuth'
-import { providers } from "../../../models/OAuth"
+import { providers } from '../../../models/OAuth'
-import { useFormTranslation } from "../../../hooks/useFormTranslation"
+import { useFormTranslation } from '../../../hooks/useFormTranslation'
 
 const schema = {
   name: userSchema.name,
@@ -30,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 = () => {
@@ -43,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 {
@@ -52,7 +52,7 @@ export const UserSettings: React.FC = () => {
     setFetchState,
     message,
     setMessage,
-    errors,
+    errors
   } = useForm(schema)
   const { getFirstErrorTranslation } = useFormTranslation()
 
@@ -68,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',
-          message: "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 {
@@ -88,36 +88,36 @@ export const UserSettings: React.FC = () => {
           ...userCurrentData,
           settings: {
             ...oldUser.settings,
-            ...userCurrentSettings.settings,
+            ...userCurrentSettings.settings
-          },
+          }
         }
       })
       return {
-        type: "success",
+        type: 'success',
-        message: "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',
-            message: "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',
-            message: "authentication:email-required-to-sign-in",
+            message: 'authentication:email-required-to-sign-in'
           }
         }
         return {
-          type: "error",
+          type: 'error',
-          message: "errors:server-error",
+          message: 'errors:server-error'
         }
       }
       return {
-        type: "error",
+        type: 'error',
-        message: "errors:server-error",
+        message: 'errors:server-error'
       }
     }
   }
@@ -128,95 +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 && 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,
           {
             headers: {
-              "Content-Type": "multipart/form-data",
+              '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((strategy) => {
               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
     }
@@ -225,116 +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}`}
-                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
                   height={20}
-                  className="opacity-50 transition-opacity group-hover:opacity-100"
+                  className='opacity-50 transition-opacity group-hover:opacity-100'
                 />
               </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)) {
@@ -342,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)}
                       />
                     )
@@ -352,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)) {
@@ -362,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)}
                       />
                     )
@@ -375,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,26 +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 type { Tokens } from "../../tools/authentication"
+import type { Tokens } from '../../tools/authentication'
-import { Authentication as AuthenticationClass } from "../../tools/authentication"
+import { Authentication as AuthenticationClass } from '../../tools/authentication'
-import { AuthenticationSocialMedia } from "./AuthenticationSocialMedia"
+import { AuthenticationSocialMedia } from './AuthenticationSocialMedia'
-import { useFormTranslation } from "../../hooks/useFormTranslation"
+import { useFormTranslation } from '../../hooks/useFormTranslation'
 
 export interface AuthenticationProps {
-  mode: "signup" | "signin"
+  mode: 'signup' | 'signin'
 }
 
 export const Authentication: React.FC<AuthenticationProps> = (props) => {
@@ -32,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])
 
@@ -43,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',
-          message: "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',
-              message: "authentication:already-used",
+              message: 'authentication:already-used'
             }
           }
           return {
-            type: "error",
+            type: 'error',
-            message: "errors:server-error",
+            message: 'errors:server-error'
           }
         }
         return {
-          type: "error",
+          type: 'error',
-          message: "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',
-            message: "authentication:wrong-credentials",
+            message: 'authentication:wrong-credentials'
           }
         }
         return {
-          type: "error",
+          type: 'error',
-          message: "errors:server-error",
+          message: 'errors:server-error'
         }
       }
     }
@@ -100,53 +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'
             }
           >
-            {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')}
           </Link>
         </p>
       </AuthenticationForm>
       <FormState
-        id="message"
+        id='message'
         state={fetchState}
         message={message != null ? t(message) : undefined}
       />

components/Authentication/AuthenticationForm.tsx

@@ -1,13 +1,13 @@
-import classNames from "clsx"
+import classNames from 'clsx'
-import type { FormProps } from "react-component-form"
+import type { FormProps } from 'react-component-form'
-import { Form } 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,22 +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 type { SocialMedia } from "../design/SocialMediaButton"
+import type { SocialMedia } from '../design/SocialMediaButton'
-import { SocialMediaButton } from "../design/SocialMediaButton"
+import { SocialMediaButton } from '../design/SocialMediaButton'
-import { providers } from "../../models/OAuth"
+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
     }
@@ -27,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,13 +1,13 @@
-import "emoji-mart/css/emoji-mart.css"
+import 'emoji-mart/css/emoji-mart.css'
-import type { EmojiData } from "emoji-mart"
+import type { EmojiData } from 'emoji-mart'
-import { Picker } from "emoji-mart"
+import { Picker } from 'emoji-mart'
-import { useTheme } from "next-themes"
+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 {
@@ -20,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 type { Plugin, Transformer } from "unified"
+import type { Plugin, Transformer } from 'unified'
-import type { 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,9 +1,9 @@
-import useTranslation from "next-translate/useTranslation"
+import useTranslation from 'next-translate/useTranslation'
-import Link from "next/link"
+import Link from 'next/link'
 
-import type { FooterProps } from "./Footer"
+import type { FooterProps } from './Footer'
-import { Footer } from "./Footer"
+import { Footer } from './Footer'
-import { Header } from "./Header"
+import { Header } from './Header'
 
 export interface ErrorPageProps extends FooterProps {
   statusCode: number
@@ -16,25 +16,25 @@ export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
 
   return (
     <>
-      <div className="flex h-screen flex-col pt-0">
+      <div className='flex h-screen flex-col pt-0'>
         <Header />
-        <main className="flex min-w-full flex-1 flex-col items-center justify-center">
+        <main className='flex min-w-full flex-1 flex-col items-center justify-center'>
-          <h1 className="my-6 text-4xl font-semibold">
+          <h1 className='my-6 text-4xl font-semibold'>
-            {t("errors:error")}{" "}
+            {t('errors:error')}{' '}
             <span
-              className="text-green-800 dark:text-green-400"
+              className='text-green-800 dark:text-green-400'
-              data-cy="status-code"
+              data-cy='status-code'
             >
               {statusCode}
             </span>
           </h1>
-          <p className="text-center text-lg">
+          <p className='text-center text-lg'>
-            {message}{" "}
+            {message}{' '}
             <Link
-              href="/"
+              href='/'
-              className="text-green-800 hover:underline dark:text-green-400"
+              className='text-green-800 hover:underline dark:text-green-400'
             >
-              {t("errors:return-to-home-page")}
+              {t('errors:return-to-home-page')}
             </Link>
           </p>
         </main>

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,19 +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="/"
+          href='/'
-          className="text-green-800 hover:underline dark:text-green-400"
+          className='text-green-800 hover:underline dark:text-green-400'
         >
           Thream
-        </Link>{" "}
+        </Link>{' '}
-        | {t("common:all-rights-reserved")}
+        | {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,37 +12,37 @@ export const Head: React.FC<HeadProps> = (props) => {
   const { t } = useTranslation()
 
   const {
-    title = "Thream",
+    title = 'Thream',
-    image = "https://thream.theoludwig.fr/images/icon-128x128.png",
+    image = 'https://thream.theoludwig.fr/images/icon-128x128.png',
-    description = t("common:description"),
+    description = t('common:description'),
-    url = "https://thream.theoludwig.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-FR, en-US" />
+      <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} />
     </NextHead>
   )
 }

components/Header/Header.tsx

@@ -1,29 +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='/'>
-          <div className="flex items-center justify-center">
+          <div className='flex items-center justify-center'>
             <Image
               priority
               quality={100}
               width={60}
               height={60}
-              src="/images/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
             </span>
           </div>
         </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
@@ -35,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} />
@@ -48,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) => {
@@ -62,7 +62,7 @@ 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 () => {
                 return await handleLanguage(language)
               }}

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

@@ -1,6 +1,6 @@
-import { useEffect, useState } from "react"
+import { useEffect, useState } from 'react'
-import classNames from "clsx"
+import classNames from 'clsx'
-import { useTheme } from "next-themes"
+import { useTheme } from 'next-themes'
 
 export const SwitchTheme: React.FC = () => {
   const [mounted, setMounted] = useState(false)
@@ -15,61 +15,61 @@ export const SwitchTheme: React.FC = () => {
   }
 
   const handleClick = (): void => {
-    setTheme(theme === "dark" ? "light" : "dark")
+    setTheme(theme === 'dark' ? 'light' : 'dark')
   }
 
   return (
     <div
-      className="flex items-center"
+      className='flex items-center'
-      data-cy="switch-theme-click"
+      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='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 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"
+            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",
+              '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-100': theme === 'dark',
-                "opacity-0": theme === "light",
+                'opacity-0': theme === 'light'
-              },
+              }
             )}
           >
-            <span className="relative flex h-[10px] w-[10px] items-center justify-center">
+            <span className='relative flex h-[10px] w-[10px] items-center justify-center'>
               🌜
             </span>
           </div>
           <div
-            data-cy="switch-theme-light"
+            data-cy='switch-theme-light'
             className={classNames(
-              "absolute bottom-0 right-[10px] top-0 mb-auto mt-auto h-[10px] w-[10px] leading-[0]",
+              'absolute bottom-0 right-[10px] top-0 mb-auto mt-auto h-[10px] w-[10px] leading-[0]',
               {
-                "opacity-100": theme === "light",
+                'opacity-100': theme === 'light',
-                "opacity-0": theme === "dark",
+                'opacity-0': theme === 'dark'
-              },
+              }
             )}
           >
-            <span className="relative flex h-[10px] w-[10px] items-center justify-center">
+            <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",
+            '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-[27px]': theme === 'dark',
-              "left-0": theme === "light",
+              'left-0': theme === 'light'
-            },
+            }
           )}
-          style={{ border: "1px solid #4d4d4d" }}
+          style={{ border: '1px solid #4d4d4d' }}
         />
         <input
-          data-cy="switch-theme-input"
+          data-cy='switch-theme-input'
-          type="checkbox"
+          type='checkbox'
-          aria-label="Dark mode toggle"
+          aria-label='Dark mode toggle'
-          className="absolute m-[-1px] h-[1px] w-[1px] overflow-hidden border-0 p-0"
+          className='absolute m-[-1px] h-[1px] w-[1px] overflow-hidden border-0 p-0'
           defaultChecked
         />
       </div>

components/Header/index.ts

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

components/design/Button/Button.tsx

@@ -1,18 +1,18 @@
-import { forwardRef } from "react"
+import { forwardRef } from 'react'
-import classNames from "clsx"
+import classNames from 'clsx'
 
 const className =
-  "py-2 px-6 font-paragraph rounded-lg bg-transparent border  hover:text-white dark:hover:text-black fill-current stroke-current transform transition-colors duration-300 ease-in-out focus:outline-none focus:text-white dark:focus:text-black"
+  'py-2 px-6 font-paragraph rounded-lg bg-transparent border  hover:text-white dark:hover:text-black fill-current stroke-current transform transition-colors duration-300 ease-in-out focus:outline-none focus:text-white dark:focus:text-black'
 
 const classNameGreen =
-  "border-green-800 dark:border-green-400 text-green-800 dark:text-green-400 hover:bg-green-800 focus:bg-green-800 dark:focus:bg-green-400 dark:hover:bg-green-400"
+  'border-green-800 dark:border-green-400 text-green-800 dark:text-green-400 hover:bg-green-800 focus:bg-green-800 dark:focus:bg-green-400 dark:hover:bg-green-400'
 
 const classNameRed =
-  "border-red-800 dark:border-red-400 text-red-800 dark:text-red-400 hover:bg-red-800 focus:bg-red-800 dark:focus:bg-red-400 dark:hover:bg-red-400"
+  'border-red-800 dark:border-red-400 text-red-800 dark:text-red-400 hover:bg-red-800 focus:bg-red-800 dark:focus:bg-red-400 dark:hover:bg-red-400'
 
-export type ButtonColor = "green" | "red"
+export type ButtonColor = 'green' | 'red'
 
-export interface ButtonLinkProps extends React.ComponentPropsWithRef<"a"> {
+export interface ButtonLinkProps extends React.ComponentPropsWithRef<'a'> {
   color?: ButtonColor
 }
 
@@ -21,7 +21,7 @@ export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
     const {
       children,
       className: givenClassName,
-      color = "green",
+      color = 'green',
       ...rest
     } = props
 
@@ -31,22 +31,22 @@ export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
         className={classNames(
           className,
           {
-            [classNameGreen]: color === "green",
+            [classNameGreen]: color === 'green',
-            [classNameRed]: color === "red",
+            [classNameRed]: color === 'red'
           },
-          givenClassName,
+          givenClassName
         )}
         {...rest}
       >
         {children}
       </a>
     )
-  },
+  }
 )
 
-ButtonLink.displayName = "ButtonLink"
+ButtonLink.displayName = 'ButtonLink'
 
-export interface ButtonProps extends React.ComponentPropsWithoutRef<"button"> {
+export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
   color?: ButtonColor
 }
 
@@ -54,7 +54,7 @@ export const Button: React.FC<ButtonProps> = (props) => {
   const {
     children,
     className: givenClassName,
-    color = "green",
+    color = 'green',
     ...rest
   } = props
 
@@ -63,10 +63,10 @@ export const Button: React.FC<ButtonProps> = (props) => {
       className={classNames(
         className,
         {
-          [classNameGreen]: color === "green",
+          [classNameGreen]: color === 'green',
-          [classNameRed]: color === "red",
+          [classNameRed]: color === 'red'
         },
-        givenClassName,
+        givenClassName
       )}
       {...rest}
     >

components/design/Button/index.ts

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

components/design/Checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
-import classNames from "clsx"
+import classNames from 'clsx'
 
-export interface CheckboxProps extends React.ComponentPropsWithRef<"input"> {
+export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {
   className?: string
   label: string
 }
@@ -8,15 +8,15 @@ export interface CheckboxProps extends React.ComponentPropsWithRef<"input"> {
 export const Checkbox: React.FC<CheckboxProps> = (props) => {
   const { label, id, className } = props
   return (
-    <div className={classNames("mt-4 flex items-center", className)}>
+    <div className={classNames('mt-4 flex items-center', className)}>
       <input
         {...props}
-        type="checkbox"
+        type='checkbox'
         id={id}
-        className="relative mr-3 min-h-[25px] min-w-[25px] cursor-pointer appearance-none rounded-md bg-gradient-to-t from-[#bcc7d4] to-[#d3dfed] transition-all before:absolute before:left-[59%] before:top-[50%] before:h-[12px] before:w-[2px] before:translate-x-[-59%] before:translate-y-[-50%] before:rotate-[40deg] before:scale-0 before:bg-black before:transition-all after:absolute after:left-[36%] after:top-[62.5%] after:h-[7px] after:w-[2px] after:translate-x-[-35%] after:translate-y-[-62.5%] after:rotate-[-50deg] after:scale-0 after:bg-black after:transition-all after:duration-200 checked:before:scale-100 checked:after:scale-100 dark:from-[#1f2937] dark:to-[#273547] dark:before:bg-white dark:after:bg-white"
+        className='relative mr-3 min-h-[25px] min-w-[25px] cursor-pointer appearance-none rounded-md bg-gradient-to-t from-[#bcc7d4] to-[#d3dfed] transition-all before:absolute before:left-[59%] before:top-[50%] before:h-[12px] before:w-[2px] before:translate-x-[-59%] before:translate-y-[-50%] before:rotate-[40deg] before:scale-0 before:bg-black before:transition-all after:absolute after:left-[36%] after:top-[62.5%] after:h-[7px] after:w-[2px] after:translate-x-[-35%] after:translate-y-[-62.5%] after:rotate-[-50deg] after:scale-0 after:bg-black after:transition-all after:duration-200 checked:before:scale-100 checked:after:scale-100 dark:from-[#1f2937] dark:to-[#273547] dark:before:bg-white dark:after:bg-white'
       />
       <label
-        className="duration-400 cursor-pointer select-none opacity-80 transition hover:opacity-100 "
+        className='duration-400 cursor-pointer select-none opacity-80 transition hover:opacity-100 '
         htmlFor={id}
       >
         {label}

components/design/Checkbox/index.ts

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

components/design/Divider/Divider.tsx

@@ -1,7 +1,7 @@
 export const Divider: React.FC = () => {
   return (
-    <div className="relative mb-3 flex h-[2px] w-full justify-center">
+    <div className='relative mb-3 flex h-[2px] w-full justify-center'>
-      <div className="absolute h-[2px] w-8/12 rounded-full bg-gray-600 dark:bg-white/20"></div>
+      <div className='absolute h-[2px] w-8/12 rounded-full bg-gray-600 dark:bg-white/20'></div>
     </div>
   )
 }

components/design/Divider/index.ts

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

components/design/FormState/FormState.tsx

@@ -1,10 +1,10 @@
-import classNames from "clsx"
+import classNames from 'clsx'
-import useTranslation from "next-translate/useTranslation"
+import useTranslation from 'next-translate/useTranslation'
-import type { FetchState as FormStateType } from "react-component-form"
+import type { FetchState as FormStateType } from 'react-component-form'
 
-import { Loader } from "../Loader"
+import { Loader } from '../Loader'
 
-export interface FormStateProps extends React.ComponentPropsWithoutRef<"div"> {
+export interface FormStateProps extends React.ComponentPropsWithoutRef<'div'> {
   state: FormStateType
   message?: string | null
   id?: string
@@ -14,15 +14,15 @@ export const FormState: React.FC<FormStateProps> = (props) => {
   const { state, message, id, ...rest } = props
   const { t } = useTranslation()
 
-  if (state === "loading") {
+  if (state === 'loading') {
     return (
-      <div data-cy="loader" className="mt-8 flex justify-center">
+      <div data-cy='loader' className='mt-8 flex justify-center'>
         <Loader />
       </div>
     )
   }
 
-  if (state === "idle" || message == null) {
+  if (state === 'idle' || message == null) {
     return null
   }
 
@@ -31,15 +31,15 @@ export const FormState: React.FC<FormStateProps> = (props) => {
       {...rest}
       className={classNames(
         props.className,
-        "mt-6 flex max-w-xl items-center text-center font-medium",
+        'mt-6 flex max-w-xl items-center text-center font-medium',
         {
-          "text-red-800 dark:text-red-400": state === "error",
+          'text-red-800 dark:text-red-400': state === 'error',
-          "text-green-800 dark:text-green-400": state === "success",
+          'text-green-800 dark:text-green-400': state === 'success'
-        },
+        }
       )}
     >
-      <div className="inline bg-cover font-headline" />
+      <div className='inline bg-cover font-headline' />
-      <span id={id} className="pl-2">
+      <span id={id} className='pl-2'>
         <b>{t(`errors:${state}`)}:</b> {message}
       </span>
     </div>

components/design/FormState/index.ts

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

components/design/IconButton/IconButton.tsx

@@ -1,7 +1,7 @@
-import classNames from "clsx"
+import classNames from 'clsx'
 
 export interface IconButtonProps
-  extends React.ComponentPropsWithoutRef<"button"> {}
+  extends React.ComponentPropsWithoutRef<'button'> {}
 
 export const IconButton: React.FC<IconButtonProps> = (props) => {
   const { children, className, ...rest } = props
@@ -9,8 +9,8 @@ export const IconButton: React.FC<IconButtonProps> = (props) => {
   return (
     <button
       className={classNames(
-        "flex items-center justify-center text-center text-green-800 hover:animate-pulse focus:animate-pulse focus:outline-none dark:text-green-400",
+        'flex items-center justify-center text-center text-green-800 hover:animate-pulse focus:animate-pulse focus:outline-none dark:text-green-400',
-        className,
+        className
       )}
       {...rest}
     >

components/design/IconButton/index.ts

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

components/design/IconLink/IconLink.tsx

@@ -1,5 +1,5 @@
-import Link from "next/link"
+import Link from 'next/link'
-import classNames from "clsx"
+import classNames from 'clsx'
 
 export interface IconLinkProps {
   selected?: boolean
@@ -9,27 +9,27 @@ export interface IconLinkProps {
 }
 
 export const IconLink: React.FC<React.PropsWithChildren<IconLinkProps>> = (
-  props,
+  props
 ) => {
   const { children, selected, href, title, className } = props
 
   return (
     <Link
       href={href}
-      className="group relative flex w-full justify-center"
+      className='group relative flex w-full justify-center'
       title={title}
     >
       <div
-        className={classNames("group flex w-full justify-center", className)}
+        className={classNames('group flex w-full justify-center', className)}
       >
         {children}
-        <div className="absolute left-0 flex h-12 w-3 items-center">
+        <div className='absolute left-0 flex h-12 w-3 items-center'>
           <span
             className={classNames(
-              "absolute w-4/12 rounded-r-lg bg-green-700 group-hover:h-5",
+              'absolute w-4/12 rounded-r-lg bg-green-700 group-hover:h-5',
               {
-                "h-full": selected,
+                'h-full': selected
-              },
+              }
             )}
           ></span>
         </div>