chore(release): 1.1.1 [skip ci]

closes #18

.devcontainer/docker-compose.yml

@@ -1,5 +1,3 @@
-version: '3.0'
-
 services:
   workspace:
     build:

.eslintignore

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

.eslintrc.json

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

.github/workflows/analyze.yml

@@ -16,7 +16,7 @@ jobs:
         language: ['javascript']
 
     steps:
-      - uses: 'actions/checkout@v2.3.4'
+      - uses: 'actions/checkout@v3.0.0'
 
       - name: 'Initialize CodeQL'
         uses: 'github/codeql-action/init@v1'

.github/workflows/build.yml

@@ -10,10 +10,10 @@ jobs:
   build:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v2'
+      - uses: 'actions/checkout@v3.0.0'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.4.1'
+        uses: 'actions/setup-node@v3.0.0'
         with:
           node-version: '16.x'
           cache: 'npm'

.github/workflows/lint.yml

@@ -10,10 +10,10 @@ jobs:
   lint:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v2'
+      - uses: 'actions/checkout@v3.0.0'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.4.1'
+        uses: 'actions/setup-node@v3.0.0'
         with:
           node-version: '16.x'
           cache: 'npm'

.github/workflows/release.yml

@@ -8,7 +8,7 @@ jobs:
   release:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v2.3.4'
+      - uses: 'actions/checkout@v3.0.0'
         with:
           fetch-depth: 0
           persist-credentials: false

.github/workflows/test.yml

@@ -10,10 +10,10 @@ jobs:
   test-unit:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v2.3.4'
+      - uses: 'actions/checkout@v3.0.0'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.4.1'
+        uses: 'actions/setup-node@v3.0.0'
         with:
           node-version: '16.x'
           cache: 'npm'
@@ -27,10 +27,10 @@ jobs:
   test-lighthouse:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v2.3.4'
+      - uses: 'actions/checkout@v3.0.0'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.4.0'
+        uses: 'actions/setup-node@v3.0.0'
         with:
           node-version: '16.x'
           cache: 'npm'
@@ -52,10 +52,10 @@ jobs:
   test-e2e:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v2.3.4'
+      - uses: 'actions/checkout@v3.0.0'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.4.0'
+        uses: 'actions/setup-node@v3.0.0'
         with:
           node-version: '16.x'
           cache: 'npm'

.lintstagedrc.json

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

.markdownlint-cli2.jsonc

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

.markdownlint.json

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

.npmrc

@@ -1 +1,2 @@
 save-exact=true
+legacy-peer-deps=true

Dockerfile

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

README.md

@@ -18,7 +18,7 @@
 
 Thream's website to stay close with your friends and communities.
 
-It uses [Thream/api](https://github.com/Thream/api) [v1.0.1](https://github.com/Thream/api/releases/tag/v1.0.1).
+It uses [Thream/api](https://github.com/Thream/api) [v1.1.0](https://github.com/Thream/api/releases/tag/v1.1.0).
 
 ## ⚙️ Getting Started
 
@@ -56,7 +56,7 @@ npm run dev
 
 ```sh
 # Setup and run all the services for you
-docker-compose up --build
+docker compose up --build
 ```
 
 #### Services started

components/Application/Application.tsx

@@ -40,7 +40,9 @@ export interface ApplicationProps {
   title: string
 }
 
-export const Application: React.FC<ApplicationProps> = (props) => {
+export const Application: React.FC<
+  React.PropsWithChildren<ApplicationProps>
+> = (props) => {
   const { children, path, guildLeftSidebar, title } = props
 
   const { user } = useAuthentication()
@@ -110,7 +112,7 @@ export const Application: React.FC<ApplicationProps> = (props) => {
   const swipeableHandlers = useSwipeable({
     trackMouse: false,
     trackTouch: true,
-    preventDefaultTouchmoveEvent: true,
+    preventScrollOnSwipe: true,
     onSwipedRight: () => {
       if (visibleSidebars.right) {
         return setVisibleSidebars({ ...visibleSidebars, right: false })
@@ -215,7 +217,7 @@ export const Application: React.FC<ApplicationProps> = (props) => {
           id='application-page-content'
           onClick={handleCloseSidebars}
           className={classNames(
-            'h-full-without-header 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':
                 isMobile && (visibleSidebars.left || visibleSidebars.right)

components/Application/ChannelSettings/ChannelSettings.tsx

@@ -2,6 +2,7 @@ import { useRouter } from 'next/router'
 import { useState } from 'react'
 import { Form } from 'react-component-form'
 import useTranslation from 'next-translate/useTranslation'
+import classNames from 'classnames'
 import axios from 'axios'
 
 import { HandleSubmitCallback, useForm } from '../../../hooks/useForm'
@@ -15,6 +16,7 @@ import {
   channelSchema,
   ChannelWithDefaultChannelId
 } from '../../../models/Channel'
+import { ConfirmPopup } from '../ConfirmPopup'
 
 export interface ChannelSettingsProps {
   channel: Channel
@@ -32,6 +34,12 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
     name: channel.name
   })
 
+  const [confirmation, setConfirmation] = useState(false)
+
+  const handleConfirmation = (): void => {
+    return setConfirmation(!confirmation)
+  }
+
   const {
     fetchState,
     message,
@@ -91,6 +99,7 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
   }
 
   return (
+    <>
       <Form
         onSubmit={handleSubmit(onSubmit)}
         className='my-auto flex flex-col items-center justify-center py-12'
@@ -120,7 +129,7 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
             <Button
               type='button'
               color='red'
-            onClick={handleDelete}
+              onClick={handleConfirmation}
               data-cy='button-delete-channel-settings'
             >
               {t('application:delete')}
@@ -129,5 +138,21 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
           <FormState state={fetchState} message={message} />
         </div>
       </Form>
+      <div
+        className={classNames(
+          'pointer-events-none invisible absolute z-50 flex h-full w-full items-center justify-center bg-black bg-opacity-90 opacity-0 backdrop-blur-md transition-all',
+          { 'pointer-events-auto !visible !opacity-100': confirmation }
+        )}
+      >
+        <ConfirmPopup
+          className={classNames('relative top-8 transition-all', {
+            '!top-0': confirmation
+          })}
+          handleYes={handleDelete}
+          handleNo={handleConfirmation}
+          title={`${t('application:delete-the-channel')} ?`}
+        />
+      </div>
+    </>
   )
 }

components/Application/Channels/Channel.tsx

@@ -3,10 +3,10 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { CogIcon } from '@heroicons/react/solid'
 
-import { GuildsChannelsPath } from '../../Application'
+import { GuildsChannelsPath } from '../Application'
-import { Channel as ChannelType } from '../../../../models/Channel'
+import { 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

components/Application/Channels/Channel/index.ts

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

components/Application/ConfirmGuildJoin/index.ts

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

components/Application/ConfirmPopup/ConfirmPopup.tsx

@@ -5,15 +5,14 @@ import classNames from 'classnames'
 
 import { Loader } from '../../design/Loader'
 
-export interface ConfirmGuildJoinProps {
+export interface ConfirmPopupProps {
   className?: string
+  title: string
   handleYes: () => void | Promise<void>
   handleNo: () => void | Promise<void>
 }
 
-export const ConfirmGuildJoin: React.FC<ConfirmGuildJoinProps> = ({
+export const ConfirmPopup: React.FC<ConfirmPopupProps> = ({ ...props }) => {
-  ...props
-}) => {
   const { t } = useTranslation()
   const [isLoading, setIsLoading] = useState(false)
 
@@ -25,9 +24,12 @@ export const ConfirmGuildJoin: React.FC<ConfirmGuildJoinProps> = ({
   return (
     <div className={props.className}>
       <Loader
-        className={classNames('absolute scale-0 transition', {
+        className={classNames(
+          'absolute top-1/2 left-1/2 scale-0 transition-all',
+          {
             'scale-100': isLoading
-        })}
+          }
+        )}
       />
       <div
         className={classNames(
@@ -40,24 +42,24 @@ export const ConfirmGuildJoin: React.FC<ConfirmGuildJoinProps> = ({
         <Image
           quality={100}
           src='/images/svg/design/join-guild.svg'
-          alt='Join Guild Illustration'
+          alt='Illustration'
           height={150}
           width={150}
         />
         <div className='mt-8 flex flex-col'>
-          <h1 className='mb-6 text-center text-xl'>
+          <h1 className='mb-6 text-center text-xl'>{props.title}</h1>
-            {t('application:join-the-guild')} ?
-          </h1>
           <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'
               onClick={handleYesLoading}
+              data-cy='confirm-popup-yes-button'
             >
               {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'
               onClick={props.handleNo}
+              data-cy='confirm-popup-no-button'
             >
               {t('common:no')}
             </button>

components/Application/ConfirmPopup/index.ts

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

components/Application/GuildSettings/GuildSettings.tsx

@@ -5,6 +5,7 @@ import { Type } from '@sinclair/typebox'
 import { PhotographIcon } from '@heroicons/react/solid'
 import { Form } from 'react-component-form'
 import useTranslation from 'next-translate/useTranslation'
+import classNames from 'classnames'
 
 import { HandleSubmitCallback, useForm } from '../../../hooks/useForm'
 import { guildSchema } from '../../../models/Guild'
@@ -14,6 +15,7 @@ import { Textarea } from '../../design/Textarea'
 import { Input } from '../../design/Input'
 import { Button } from '../../design/Button'
 import { useAuthentication } from '../../../tools/authentication'
+import { ConfirmPopup } from '../ConfirmPopup'
 
 export const GuildSettings: React.FC = () => {
   const { t } = useTranslation()
@@ -26,6 +28,12 @@ export const GuildSettings: React.FC = () => {
     description: guild.description
   })
 
+  const [confirmation, setConfirmation] = useState(false)
+
+  const handleConfirmation = (): void => {
+    return setConfirmation(!confirmation)
+  }
+
   const {
     fetchState,
     message,
@@ -109,6 +117,7 @@ export const GuildSettings: React.FC = () => {
   }
 
   return (
+    <>
       <Form
         onSubmit={handleSubmit(onSubmit)}
         className='my-auto flex flex-col items-center justify-center py-12'
@@ -177,7 +186,7 @@ export const GuildSettings: React.FC = () => {
                 <Button
                   type='button'
                   color='red'
-                onClick={handleDelete}
+                  onClick={handleConfirmation}
                   data-cy='button-delete-guild-settings'
                 >
                   {t('application:delete')}
@@ -199,5 +208,21 @@ export const GuildSettings: React.FC = () => {
           />
         </div>
       </Form>
+      <div
+        className={classNames(
+          'pointer-events-none invisible absolute z-50 flex h-full w-full items-center justify-center bg-black bg-opacity-90 opacity-0 backdrop-blur-md transition-all',
+          { 'pointer-events-auto !visible !opacity-100': confirmation }
+        )}
+      >
+        <ConfirmPopup
+          className={classNames('relative top-8 transition-all', {
+            '!top-0': confirmation
+          })}
+          handleYes={handleDelete}
+          handleNo={handleConfirmation}
+          title={`${t('application:delete-the-guild')} ?`}
+        />
+      </div>
+    </>
   )
 }

components/Application/Guilds/Guild.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image'
 
-import { GuildWithDefaultChannelId } from '../../../../models/Guild'
+import { GuildWithDefaultChannelId } from '../../../models/Guild'
-import { IconLink } from '../../../design/IconLink'
+import { IconLink } from '../../design/IconLink'
 
 export interface GuildProps {
   guild: GuildWithDefaultChannelId

components/Application/Guilds/Guild/Guild.test.tsx

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

components/Application/Guilds/Guild/index.ts

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

components/Application/JoinGuildsPublic/GuildPublic.tsx

@@ -5,13 +5,13 @@ import useTranslation from 'next-translate/useTranslation'
 import classNames from 'classnames'
 import axios from 'axios'
 
-import { Emoji } from '../../../Emoji'
+import { Emoji } from '../../Emoji'
-import { ConfirmGuildJoin } from '../../ConfirmGuildJoin'
+import { ConfirmPopup } from '../ConfirmPopup'
 import {
   GuildPublic as GuildPublicType,
   GuildWithDefaultChannelId
-} from '../../../../models/Guild'
+} from '../../../models/Guild'
-import { useAuthentication } from '../../../../tools/authentication'
+import { useAuthentication } from '../../../tools/authentication'
 
 export interface GuildPublicProps {
   guild: GuildPublicType
@@ -40,7 +40,7 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
       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}`)
@@ -91,7 +91,8 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
           {guild.membersCount} {t('application:members')}
         </p>
       </div>
-      <ConfirmGuildJoin
+      <ConfirmPopup
+        title={`${t('application:join-the-guild')} ?`}
         className={classNames(
           'w-ful h-ful translate-x- absolute top-1/2 left-full flex h-full w-full -translate-y-1/2 flex-col items-center justify-center rounded-2xl transition-all',
           {

components/Application/JoinGuildsPublic/GuildPublic/index.ts

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

components/Application/JoinGuildsPublic/JoinGuildsPublic.tsx

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

components/Application/Members/Member.tsx

@@ -1,7 +1,8 @@
 import Image from 'next/image'
 import Link from 'next/link'
 
-import { MemberWithPublicUser } from '../../../../models/Member'
+import { MemberWithPublicUser } from '../../../models/Member'
+import { Emoji } from '../../Emoji'
 
 export interface MemberProps {
   member: MemberWithPublicUser
@@ -29,8 +30,13 @@ export const Member: React.FC<MemberProps> = (props) => {
             />
           </div>
           <div className='ml-5'>
-            <p data-cy='member-user-name' className='truncate font-bold'>
+            <p data-cy='member-user-name' className='flex truncate font-bold'>
               {member.user.name}
+              {member.isOwner && (
+                <span className='ml-4'>
+                  <Emoji value=':crown:' size={18} />
+                </span>
+              )}
             </p>
             {member.user.status != null && member.user.status}
           </div>

components/Application/Members/Member/Member.test.tsx

@@ -1,11 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Member } from './Member'
-import { memberExampleComplete } from '../../../../cypress/fixtures/members/member'
-
-describe('<Member />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<Member member={memberExampleComplete} />)
-    expect(baseElement).toBeTruthy()
-  })
-})

components/Application/Members/Member/index.ts

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

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

@@ -4,6 +4,8 @@ import gfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
 import remarkMath from 'remark-math'
 import rehypeKatex from 'rehype-katex'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism'
 
 import 'katex/dist/katex.min.css'
 
@@ -39,8 +41,34 @@ export const MessageText: React.FC<MessageContentProps> = (props) => {
       rehypePlugins={[[emojiPlugin], [rehypeKatex]]}
       linkTarget='_blank'
       components={{
+        a: (props) => {
+          return (
+            <a
+              className='text-green-800 hover:underline dark:text-green-400'
+              {...props}
+            />
+          )
+        },
         emoji: (props) => {
           return <Emoji value={props.value} size={20} />
+        },
+        code: (properties) => {
+          const { inline, className, children, ...props } = properties
+          const match = /language-(\w+)/.exec(className ?? '')
+          return !(inline as boolean) && match != null ? (
+            <SyntaxHighlighter
+              style={vscDarkPlus as any}
+              language={match[1]}
+              PreTag='div'
+              {...props}
+            >
+              {String(children).replace(/\n$/, '')}
+            </SyntaxHighlighter>
+          ) : (
+            <code className={className} {...props}>
+              {children}
+            </code>
+          )
         }
       }}
     >

components/Application/PopupGuild/PopupGuild.test.tsx

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

components/Application/PopupGuild/PopupGuild.tsx

@@ -3,7 +3,8 @@ import { PlusSmIcon, ArrowDownIcon } from '@heroicons/react/solid'
 import classNames from 'classnames'
 import Image from 'next/image'
 
-import { PopupGuildCard } from './PopupGuildCard/PopupGuildCard'
+import { PopupGuildCard } from './PopupGuildCard'
+
 export interface PopupGuildProps {
   className?: string
 }

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

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

components/Application/PopupGuild/PopupGuildCard/index.ts

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

components/Application/Sidebar/Sidebar.test.tsx

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

components/Application/Sidebar/Sidebar.tsx

@@ -11,7 +11,9 @@ export interface SidebarProps {
   isMobile: boolean
 }
 
-export const Sidebar: React.FC<SidebarProps> = (props) => {
+export const Sidebar: React.FC<React.PropsWithChildren<SidebarProps>> = (
+  props
+) => {
   const { direction, visible, children, path, isMobile } = props
 
   return (

components/Application/UserProfile/UserProfile.test.tsx

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

components/Application/UserProfile/UserProfile.tsx

@@ -71,6 +71,8 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
                       <p className='font-bold'>
                         {t('application:website')}:{' '}
                         <a
+                          target='_blank'
+                          rel='noreferrer'
                           href={user.website}
                           className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-2px] after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
                         >

components/Authentication/Authentication.tsx

@@ -72,7 +72,7 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
     } else {
       try {
         const { data } = await api.post<Tokens>('/users/signin', formData)
-        const authentication = new AuthenticationClass(data)
+        const authentication = new AuthenticationClass(data, true)
         authentication.signin()
         await router.push('/application')
         return null

components/Authentication/AuthenticationSocialMedia.tsx

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

components/Emoji/isStringWithOnlyOneEmoji.test.ts

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

components/ErrorPage/ErrorPage.test.tsx

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

components/ErrorPage/index.ts

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

components/Footer/Footer.test.tsx

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

components/Footer/VersionLink.tsx

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

components/Header/Language/Language.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useState, useRef } from 'react'
 import useTranslation from 'next-translate/useTranslation'
 import setLanguage from 'next-translate/setLanguage'
 import classNames from 'classnames'
@@ -15,31 +15,37 @@ export const Language: React.FC<LanguageProps> = (props) => {
   const { className } = props
   const { lang: currentLanguage } = useTranslation()
   const [hiddenMenu, setHiddenMenu] = useState(true)
+  const languageClickRef = useRef<HTMLDivElement | null>(null)
 
   const handleHiddenMenu = useCallback(() => {
-    setHiddenMenu(!hiddenMenu)
+    setHiddenMenu((oldHiddenMenu) => !oldHiddenMenu)
-  }, [hiddenMenu])
+  }, [])
 
   useEffect(() => {
-    if (!hiddenMenu) {
+    const handleClickEvent = (event: MouseEvent): void => {
-      window.document.addEventListener('click', handleHiddenMenu)
+      if (languageClickRef.current == null || event.target == null) {
-    } else {
+        return
-      window.document.removeEventListener('click', handleHiddenMenu)
+      }
+      if (!languageClickRef.current.contains(event.target as Node)) {
+        setHiddenMenu(true)
+      }
     }
 
+    window.document.addEventListener('click', handleClickEvent)
+
     return () => {
-      window.document.removeEventListener('click', handleHiddenMenu)
+      return window.removeEventListener('click', handleClickEvent)
     }
-  }, [hiddenMenu, handleHiddenMenu])
+  }, [])
 
   const handleLanguage = async (language: string): Promise<void> => {
     await setLanguage(language)
-    handleHiddenMenu()
   }
 
   return (
     <div className='relative flex cursor-pointer flex-col items-center justify-center'>
       <div
+        ref={languageClickRef}
         data-cy='language-click'
         className='mr-5 flex items-center'
         onClick={handleHiddenMenu}

components/ScrollableBody.tsx

@@ -1,4 +1,6 @@
-export const ScrollableBody: React.FC = (props) => {
+export const ScrollableBody: React.FC<React.PropsWithChildren<{}>> = (
+  props
+) => {
   const { children } = props
 
   return (

components/ScrollableBody/ScrollableBody.test.tsx

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

components/ScrollableBody/index.ts

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

components/design/Button/Button.test.tsx

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

components/design/Checkbox/Checkbox.test.tsx

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

components/design/Divider/Divider.test.tsx

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

components/design/FormState/FormState.test.tsx

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

components/design/FormState/FormState.tsx

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

components/design/IconButton/IconButton.test.tsx

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

components/design/IconLink/IconLink.test.tsx

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

components/design/IconLink/IconLink.tsx

@@ -8,7 +8,9 @@ export interface IconLinkProps {
   className?: string
 }
 
-export const IconLink: React.FC<IconLinkProps> = (props) => {
+export const IconLink: React.FC<React.PropsWithChildren<IconLinkProps>> = (
+  props
+) => {
   const { children, selected, href, title, className } = props
 
   return (

components/design/Input/Input.test.tsx

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

components/design/Input/Input.tsx

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

components/design/Loader/Loader.test.tsx

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

components/design/Loader/Loader.tsx

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

components/design/Main/Main.test.tsx

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

components/design/Main/Main.tsx

@@ -4,7 +4,7 @@ export interface MainProps {
   className?: string
 }
 
-export const Main: React.FC<MainProps> = (props) => {
+export const Main: React.FC<React.PropsWithChildren<MainProps>> = (props) => {
   const { children, className } = props
 
   return (

components/design/SocialMediaButton/SocialMediaButton.test.tsx

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

components/design/SocialMediaButton/SocialMediaButton.tsx

@@ -54,7 +54,6 @@ export const SocialMediaButton: React.FC<SocialMediaButtonProps> = (props) => {
   return (
     <>
       <button
-        data-testid='social-media-button'
         {...rest}
         className={classNames(className, 'button', givenClassName)}
       >

components/design/Textarea/Textarea.test.tsx

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

contexts/Channels.tsx

@@ -6,6 +6,7 @@ import { useAuthentication } from '../tools/authentication'
 import { Channel, ChannelWithDefaultChannelId } from '../models/Channel'
 import { GuildsChannelsPath } from '../components/Application'
 import { handleSocketData, SocketData } from '../tools/handleSocketData'
+import { CacheKey, CHANNELS_CACHE_KEY } from '../tools/cache'
 
 export interface Channels {
   channels: Channel[]
@@ -20,11 +21,15 @@ export interface ChannelsProviderProps {
   path: GuildsChannelsPath
 }
 
-export const ChannelsProvider: React.FC<ChannelsProviderProps> = (props) => {
+export const ChannelsProvider: React.FC<
+  React.PropsWithChildren<ChannelsProviderProps>
+> = (props) => {
   const { path, children } = props
   const router = useRouter()
   const { authentication } = useAuthentication()
 
+  const cacheKey: CacheKey = `${path.guildId}-${CHANNELS_CACHE_KEY}`
+
   const {
     items: channels,
     hasMore,
@@ -33,14 +38,15 @@ export const ChannelsProvider: React.FC<ChannelsProviderProps> = (props) => {
     setItems
   } = usePagination<Channel>({
     api: authentication.api,
-    url: `/guilds/${path.guildId}/channels`
+    url: `/guilds/${path.guildId}/channels`,
+    cacheKey
   })
 
   useEffect(() => {
-    authentication.socket.on(
+    authentication?.socket?.on(
       'channels',
       async (data: SocketData<ChannelWithDefaultChannelId>) => {
-        handleSocketData({ data, setItems })
+        handleSocketData({ data, setItems, cacheKey })
         if (data.action === 'delete') {
           await router.push(
             `/application/${path.guildId}/${data.item.defaultChannelId}`
@@ -50,9 +56,9 @@ export const ChannelsProvider: React.FC<ChannelsProviderProps> = (props) => {
     )
 
     return () => {
-      authentication.socket.off('channels')
+      authentication?.socket?.off('channels')
     }
-  }, [authentication.socket, path.guildId, router, setItems])
+  }, [authentication.socket, path.guildId, router, setItems, cacheKey])
 
   useEffect(() => {
     resetPagination()

contexts/GuildMember.tsx

@@ -27,7 +27,9 @@ const GuildMemberContext = createContext<GuildMemberResult>(
   defaultGuildMemberContext
 )
 
-export const GuildMemberProvider: React.FC<GuildMemberProps> = (props) => {
+export const GuildMemberProvider: React.FC<
+  React.PropsWithChildren<GuildMemberProps>
+> = (props) => {
   const { path, children } = props
   const router = useRouter()
   const [guildMember, setGuildMember] = useState(props.guildMember)
@@ -45,7 +47,7 @@ export const GuildMemberProvider: React.FC<GuildMemberProps> = (props) => {
   }, [path, authentication.api])
 
   useEffect(() => {
-    authentication.socket.on(
+    authentication?.socket?.on(
       'guilds',
       async (data: SocketData<GuildWithDefaultChannelId>) => {
         if (data.item.id === path.guildId) {
@@ -70,7 +72,7 @@ export const GuildMemberProvider: React.FC<GuildMemberProps> = (props) => {
     )
 
     return () => {
-      authentication.socket.off('guilds')
+      authentication?.socket?.off('guilds')
     }
   }, [authentication.socket, path.guildId, router])
 

contexts/Guilds.tsx

@@ -4,6 +4,7 @@ import { NextPage, usePagination } from '../hooks/usePagination'
 import { useAuthentication } from '../tools/authentication'
 import { GuildWithDefaultChannelId } from '../models/Guild'
 import { handleSocketData, SocketData } from '../tools/handleSocketData'
+import { GUILDS_CACHE_KEY } from '../tools/cache'
 
 export interface Guilds {
   guilds: GuildWithDefaultChannelId[]
@@ -14,7 +15,9 @@ export interface Guilds {
 const defaultGuildsContext = {} as any
 const GuildsContext = createContext<Guilds>(defaultGuildsContext)
 
-export const GuildsProvider: React.FC = (props) => {
+export const GuildsProvider: React.FC<React.PropsWithChildren<{}>> = (
+  props
+) => {
   const { children } = props
 
   const { authentication } = useAuthentication()
@@ -27,19 +30,20 @@ export const GuildsProvider: React.FC = (props) => {
     setItems
   } = usePagination<GuildWithDefaultChannelId>({
     api: authentication.api,
-    url: '/guilds'
+    url: '/guilds',
+    cacheKey: GUILDS_CACHE_KEY
   })
 
   useEffect(() => {
-    authentication.socket.on(
+    authentication?.socket?.on(
       'guilds',
       (data: SocketData<GuildWithDefaultChannelId>) => {
-        handleSocketData({ data, setItems })
+        handleSocketData({ data, setItems, cacheKey: GUILDS_CACHE_KEY })
       }
     )
 
     return () => {
-      authentication.socket.off('guilds')
+      authentication?.socket?.off('guilds')
     }
   }, [authentication.socket, setItems])
 

contexts/Members.tsx

@@ -6,6 +6,7 @@ import { MemberWithPublicUser } from '../models/Member'
 import { GuildsChannelsPath } from '../components/Application'
 import { handleSocketData, SocketData } from '../tools/handleSocketData'
 import { User } from '../models/User'
+import { CacheKey, MEMBERS_CACHE_KEY } from '../tools/cache'
 
 export interface Members {
   members: MemberWithPublicUser[]
@@ -20,11 +21,15 @@ export interface MembersProviderProps {
   path: GuildsChannelsPath
 }
 
-export const MembersProviders: React.FC<MembersProviderProps> = (props) => {
+export const MembersProviders: React.FC<
+  React.PropsWithChildren<MembersProviderProps>
+> = (props) => {
   const { children, path } = props
 
   const { authentication } = useAuthentication()
 
+  const cacheKey: CacheKey = `${path.guildId}-${MEMBERS_CACHE_KEY}`
+
   const {
     items: members,
     hasMore,
@@ -33,18 +38,19 @@ export const MembersProviders: React.FC<MembersProviderProps> = (props) => {
     setItems
   } = usePagination<MemberWithPublicUser>({
     api: authentication.api,
-    url: `/guilds/${path.guildId}/members`
+    url: `/guilds/${path.guildId}/members`,
+    cacheKey
   })
 
   useEffect(() => {
-    authentication.socket.on(
+    authentication?.socket?.on(
       'members',
       (data: SocketData<MemberWithPublicUser>) => {
-        handleSocketData({ data, setItems })
+        handleSocketData({ data, setItems, cacheKey })
       }
     )
 
-    authentication.socket.on('users', (data: SocketData<User>) => {
+    authentication?.socket?.on('users', (data: SocketData<User>) => {
       setItems((oldItems) => {
         const newItems = [...oldItems]
         switch (data.action) {
@@ -63,10 +69,10 @@ export const MembersProviders: React.FC<MembersProviderProps> = (props) => {
     })
 
     return () => {
-      authentication.socket.off('members')
+      authentication?.socket?.off('members')
-      authentication.socket.off('users')
+      authentication?.socket?.off('users')
     }
-  }, [authentication.socket, setItems])
+  }, [authentication.socket, setItems, cacheKey])
 
   useEffect(() => {
     resetPagination()

contexts/Messages.tsx

@@ -5,6 +5,7 @@ import { useAuthentication } from '../tools/authentication'
 import { MessageWithMember } from '../models/Message'
 import { GuildsChannelsPath } from '../components/Application'
 import { handleSocketData, SocketData } from '../tools/handleSocketData'
+import { CacheKey, MESSAGES_CACHE_KEY } from '../tools/cache'
 
 export interface Messages {
   messages: MessageWithMember[]
@@ -19,9 +20,13 @@ export interface MessagesProviderProps {
   path: GuildsChannelsPath
 }
 
-export const MessagesProvider: React.FC<MessagesProviderProps> = (props) => {
+export const MessagesProvider: React.FC<
+  React.PropsWithChildren<MessagesProviderProps>
+> = (props) => {
   const { path, children } = props
-  const { authentication } = useAuthentication()
+  const { authentication, user } = useAuthentication()
+
+  const cacheKey: CacheKey = `${path.channelId}-${MESSAGES_CACHE_KEY}`
 
   const {
     items: messages,
@@ -32,11 +37,12 @@ export const MessagesProvider: React.FC<MessagesProviderProps> = (props) => {
   } = usePagination<MessageWithMember>({
     api: authentication.api,
     url: `/channels/${path.channelId}/messages`,
-    inverse: true
+    inverse: true,
+    cacheKey
   })
 
   useEffect(() => {
-    authentication.socket.on(
+    authentication?.socket?.on(
       'messages',
       (data: SocketData<MessageWithMember>) => {
         if (data.item.channelId === path.channelId) {
@@ -46,8 +52,11 @@ export const MessagesProvider: React.FC<MessagesProviderProps> = (props) => {
           const isAtBottom =
             messagesDiv.scrollHeight - messagesDiv.scrollTop <=
             messagesDiv.clientHeight
-          handleSocketData({ data, setItems })
+          handleSocketData({ data, setItems, cacheKey })
-          if (data.action === 'create' && isAtBottom) {
+          if (
+            data.action === 'create' &&
+            (isAtBottom || data.item.member.userId === user.id)
+          ) {
             messagesDiv.scrollTo(0, messagesDiv.scrollHeight)
           }
         }
@@ -55,9 +64,9 @@ export const MessagesProvider: React.FC<MessagesProviderProps> = (props) => {
     )
 
     return () => {
-      authentication.socket.off('messages')
+      authentication?.socket?.off('messages')
     }
-  }, [authentication.socket, setItems, path])
+  }, [authentication.socket, setItems, path, user.id, cacheKey])
 
   useEffect(() => {
     resetPagination()

cypress.config.ts

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

cypress.json

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

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

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

cypress/component/components/Footer.cy.tsx

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 import type { ErrorObject } from 'ajv'
 
-import { getErrorTranslationKey } from './getErrorTranslationKey'
+import { getErrorTranslationKey } from '../../../../hooks/useForm/getErrorTranslationKey'
 
 const errorObject: ErrorObject = {
   instancePath: '/path',
@@ -16,7 +16,7 @@ describe('hooks/useForm/getErrorTranslationKey', () => {
         ...errorObject,
         keyword: 'unknownkeyword'
       })
-    ).toEqual('errors:invalid')
+    ).equal('errors:invalid')
   })
 
   it('returns `errors:invalid` with format != email', () => {
@@ -26,7 +26,7 @@ describe('hooks/useForm/getErrorTranslationKey', () => {
         keyword: 'format',
         params: { format: 'email' }
       })
-    ).toEqual('errors:email')
+    ).equal('errors:email')
   })
 
   it('returns `errors:email` with format = email', () => {
@@ -36,7 +36,7 @@ describe('hooks/useForm/getErrorTranslationKey', () => {
         keyword: 'format',
         params: { format: 'email' }
       })
-    ).toEqual('errors:email')
+    ).equal('errors:email')
   })
 
   it('returns `errors:required` with minLength and limit = 1', () => {
@@ -46,7 +46,7 @@ describe('hooks/useForm/getErrorTranslationKey', () => {
         keyword: 'minLength',
         params: { limit: 1 }
       })
-    ).toEqual('errors:required')
+    ).equal('errors:required')
   })
 
   it('returns `errors:minLength` with minLength and limit > 1', () => {
@@ -56,7 +56,7 @@ describe('hooks/useForm/getErrorTranslationKey', () => {
         keyword: 'minLength',
         params: { limit: 5 }
       })
-    ).toEqual('errors:minLength')
+    ).equal('errors:minLength')
   })
 
   it('returns `errors:maxLength` with maxLength', () => {
@@ -66,6 +66,6 @@ describe('hooks/useForm/getErrorTranslationKey', () => {
         keyword: 'maxLength',
         params: { limit: 5 }
       })
-    ).toEqual('errors:maxLength')
+    ).equal('errors:maxLength')
   })
 })

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

@@ -1,6 +1,6 @@
 import { Type } from '@sinclair/typebox'
 
-import { handleCheckboxBoolean } from './handleCheckboxBoolean'
+import { handleCheckboxBoolean } from '../../../../hooks/useForm/handleCheckboxBoolean'
 
 const schema = Type.Object({
   myBoolean: Type.Boolean(),
@@ -14,7 +14,7 @@ describe('hooks/useForm/handleCheckboxBoolean', () => {
       myString: 'on'
     }
     const result = handleCheckboxBoolean(object, schema)
-    expect(result).toEqual({
+    expect(result).deep.equal({
       myBoolean: true,
       myString: 'on'
     })

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

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

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

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

cypress/e2e/common/Header.cy.ts

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

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

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

cypress/e2e/pages/400.cy.ts

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

cypress/e2e/pages/500.cy.ts

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

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

@@ -41,9 +41,8 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
       getGuildsHandler
     ]).setCookie('refreshToken', 'refresh-token')
     cy.intercept(`${API_URL}${getGuildsHandler.url}*`).as('getGuildsHandler')
-    cy.intercept(`/_next/*`).as('nextStaticAndImages')
     cy.visit(`/application/${guildExample.id}/${channelExample.id}`)
-    cy.wait(['@getGuildsHandler', '@nextStaticAndImages']).then(() => {
+    cy.wait(['@getGuildsHandler']).then(() => {
       cy.get('[data-cy=application-title]').should(
         'have.text',
         `# ${channelExample.name}`
@@ -74,9 +73,8 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
       getGuildsHandler
     ]).setCookie('refreshToken', 'refresh-token')
     cy.intercept(`${API_URL}${getGuildsHandler.url}*`).as('getGuildsHandler')
-    cy.intercept(`/_next/*`).as('nextStaticAndImages')
     cy.visit(`/application/${guildExample.id}/${channelExample.id}`)
-    cy.wait(['@getGuildsHandler', '@nextStaticAndImages']).then(() => {
+    cy.wait(['@getGuildsHandler']).then(() => {
       cy.get('[data-cy=application-title]').should(
         'have.text',
         `# ${channelExample.name}`
@@ -103,10 +101,8 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
     cy.intercept(`${API_URL}${getChannelsWithGuildIdHandler.url}*`).as(
       'getChannelsWithGuildIdHandler'
     )
-    cy.intercept(`/_next/*`).as('nextStaticAndImages')
     cy.visit(`/application/${guildExample.id}/${channelExample.id}`)
-    cy.wait(['@getChannelsWithGuildIdHandler', '@nextStaticAndImages']).then(
+    cy.wait(['@getChannelsWithGuildIdHandler']).then(() => {
-      () => {
       cy.get('.channels-list').children().should('have.length', 2)
       cy.get('.channels-list [data-cy=channel-name]:first').should(
         'have.text',
@@ -116,8 +112,7 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
         'have.text',
         `# ${channelExample2.name}`
       )
-      }
+    })
-    )
   })
 
   it('should succeeds and display the messages correctly', () => {
@@ -146,11 +141,9 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
     cy.intercept(`${API_URL}${getMessagesUploadsDownloadHandler.url}`).as(
       'getMessagesUploadsDownloadHandler'
     )
-    cy.intercept(`/_next/*`).as('nextStaticAndImages')
     cy.visit(`/application/${guildExample.id}/${channelExample.id}`)
     cy.wait([
       '@getMessagesWithChannelIdHandler',
-      '@nextStaticAndImages',
       '@getMessagesUploadsImageHandler',
       '@getMessagesUploadsAudioHandler',
       '@getMessagesUploadsVideoHandler',
@@ -226,10 +219,8 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
     cy.intercept(`${API_URL}${getMembersWithGuildIdHandler.url}*`).as(
       'getMembersWithGuildIdHandler'
     )
-    cy.intercept(`/_next/*`).as('nextStaticAndImages')
     cy.visit(`/application/${guildExample.id}/${channelExample.id}`)
-    cy.wait(['@getMembersWithGuildIdHandler', '@nextStaticAndImages']).then(
+    cy.wait(['@getMembersWithGuildIdHandler']).then(() => {
-      () => {
       cy.get('.members-list').should('not.be.visible')
       cy.get('[data-cy=icon-button-right-sidebar-members]').click()
       cy.get('.members-list').should('be.visible')
@@ -239,8 +230,7 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
         'have.text',
         memberExampleComplete.user.name
       )
-      }
+    })
-    )
   })
 
   it('should redirect the user to `/404` if `guildId` or `channelId` are not numbers', () => {
@@ -277,3 +267,5 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
       .should('eq', '/404')
   })
 })
+
+export {}

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

@@ -57,6 +57,7 @@ describe('Pages > /application/[guildId]/[channelId]/settings', () => {
     )
     cy.visit(`/application/${guildExample.id}/${channelExample.id}/settings`)
     cy.get('[data-cy=button-delete-channel-settings]').click()
+    cy.get('[data-cy=confirm-popup-yes-button]').click()
     cy.wait('@deleteChannelWithChannelIdHandler').then(() => {
       cy.location('pathname').should(
         'eq',
@@ -131,3 +132,5 @@ describe('Pages > /application/[guildId]/[channelId]/settings', () => {
       .should('eq', '/404')
   })
 })
+
+export {}

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

@@ -72,3 +72,5 @@ describe('Pages > /application/[guildId]/channels/create', () => {
       .should('eq', '/404')
   })
 })
+
+export {}

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

@@ -69,6 +69,7 @@ describe('Pages > /application/[guildId]/settings', () => {
     )
     cy.visit(`/application/${guildExample.id}/settings`)
     cy.get('[data-cy=button-delete-guild-settings]').click()
+    cy.get('[data-cy=confirm-popup-yes-button]').click()
     cy.wait('@deleteGuildWithGuildIdHandler').then((interception) => {
       expect(interception.response).to.not.be.eql(undefined)
       if (interception.response !== undefined) {
@@ -101,3 +102,5 @@ describe('Pages > /application/[guildId]/settings', () => {
       .should('eq', '/404')
   })
 })
+
+export {}

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

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

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

@@ -20,9 +20,8 @@ describe('Pages > /application/guilds/join', () => {
     cy.intercept(`${API_URL}${getGuildsPublicHandler.url}*`).as(
       'getGuildsPublicHandler'
     )
-    cy.intercept(`/_next/*`).as('nextStaticAndImages')
     cy.visit('/application/guilds/join')
-    cy.wait(['@getGuildsPublicHandler', '@nextStaticAndImages']).then(() => {
+    cy.wait(['@getGuildsPublicHandler']).then(() => {
       cy.get('[data-cy=application-title]').should('have.text', 'Join a Guild')
       cy.get('.guilds-public-list').children().should('have.length', 2)
       cy.get('.guilds-public-list [data-cy=guild-name]:first').should(
@@ -45,8 +44,7 @@ describe('Pages > /application/guilds/join', () => {
     cy.intercept(`${API_URL}${getGuildsPublicHandler.url}*`).as(
       'getGuildsPublicHandler'
     )
-    cy.intercept(`/_next/*`).as('nextStaticAndImages')
+    cy.wait(['@getGuildsPublicHandler']).then(() => {
-    cy.wait(['@getGuildsPublicHandler', '@nextStaticAndImages']).then(() => {
       cy.get('[data-cy=search-guild-input]').type(guildExample2.name)
       cy.get('.guilds-public-list').children().should('have.length', 1)
       cy.get('.guilds-public-list [data-cy=guild-name]:first').should(
@@ -77,6 +75,8 @@ describe('Pages > /application/guilds/join', () => {
     )
     cy.visit('/application/guilds/join')
     cy.get('.guilds-public-list').children().should('have.length', 1)
-    cy.get('[data-testid=progress-spinner]').should('be.visible')
+    cy.get('[data-cy=progress-spinner]').should('be.visible')
   })
 })
+
+export {}

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

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

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

@@ -33,3 +33,5 @@ describe('Pages > /application/users/[userId]', () => {
       .should('eq', '/404')
   })
 })
+
+export {}

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

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

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

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

cypress/e2e/pages/authentication/signin.cy.ts

@@ -53,3 +53,5 @@ describe('Pages > /authentication/signin', () => {
     cy.get('#error-password').should('not.exist')
   })
 })
+
+export {}