chore(release): 1.1.0 [skip ci]

closes #18

.devcontainer/docker-compose.yml

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

.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'
@@ -41,9 +41,6 @@ jobs:
       - name: 'Build'
         run: 'npm run build'
 
-      - name: 'html-w3c-validator'
-        run: 'npm run test:html-w3c-validator'
-
       - name: 'Lighthouse'
         run: 'npm run test:lighthouse'
         env:
@@ -52,10 +49,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'

.html-w3c-validatorrc.json

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

.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.15.0 AS dependencies
 WORKDIR /usr/src/app
 COPY ./package*.json ./
 RUN npm install
 
-FROM node:16.14.2 AS builder
+FROM node:16.15.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.15.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.0](https://github.com/Thream/api/releases/tag/v1.0.0).
+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 })
@@ -121,6 +123,7 @@ export const Application: React.FC<ApplicationProps> = (props) => {
       })
     },
     onSwipedLeft: () => {
+      if (isGuildsChannelsPath(path)) {
         if (visibleSidebars.left) {
           return setVisibleSidebars({ ...visibleSidebars, left: false })
         }
@@ -129,6 +132,7 @@ export const Application: React.FC<ApplicationProps> = (props) => {
           right: true
         })
       }
+    }
   })
 
   useEffect(() => {
@@ -213,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,8 @@ 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'
 import { FormState } from '../../design/FormState'
@@ -14,6 +16,7 @@ import {
   channelSchema,
   ChannelWithDefaultChannelId
 } from '../../../models/Channel'
+import { ConfirmPopup } from '../ConfirmPopup'
 
 export interface ChannelSettingsProps {
   channel: Channel
@@ -31,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,
@@ -81,11 +90,16 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
       await router.push(`/application/${guild.id}/${data.defaultChannelId}`)
     } catch (error) {
       setFetchState('error')
+      if (axios.isAxiosError(error) && error.response?.status === 400) {
+        setMessageTranslationKey('application:delete-channel-only-one')
+      } else {
         setMessageTranslationKey('errors:server-error')
       }
     }
+  }
 
   return (
+    <>
       <Form
         onSubmit={handleSubmit(onSubmit)}
         className='my-auto flex flex-col items-center justify-center py-12'
@@ -115,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')}
@@ -124,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/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> = ({
-  ...props
-}) => {
+export const ConfirmPopup: React.FC<ConfirmPopupProps> = ({ ...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'>
-            {t('application:join-the-guild')} ?
-          </h1>
+          <h1 className='mb-6 text-center text-xl'>{props.title}</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/JoinGuildsPublic/GuildPublic/GuildPublic.tsx

@@ -6,7 +6,7 @@ import classNames from 'classnames'
 import axios from 'axios'
 
 import { Emoji } from '../../../Emoji'
-import { ConfirmGuildJoin } from '../../ConfirmGuildJoin'
+import { ConfirmPopup } from '../../ConfirmPopup'
 import {
   GuildPublic as GuildPublicType,
   GuildWithDefaultChannelId
@@ -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/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/Member.tsx

@@ -2,6 +2,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 
 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/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'
 
@@ -41,6 +43,24 @@ export const MessageText: React.FC<MessageContentProps> = (props) => {
       components={{
         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/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.tsx

@@ -16,11 +16,12 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
   const { t } = useTranslation()
 
   return (
+    <>
       <div className='relative flex h-full flex-col items-center justify-center'>
         <div className='transition'>
           <div className='max-w-[1000px] px-12'>
             <div className='flex items-center justify-between'>
-            <div className='flex w-max items-center'>
+              <div className='flex w-max flex-col items-center gap-7 md:flex-row'>
                 <div className='relative flex items-center justify-center overflow-hidden rounded-full shadow-lg transition-all'>
                   <Image
                     quality={100}
@@ -70,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'
                         >
@@ -89,11 +92,20 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
                 </div>
               </div>
             </div>
-          <div className='mt-7'>
-            {user.biography != null && <p>{user.biography}</p>}
-          </div>
+            {user.biography != null && (
+              <div className='mt-7 text-center'>
+                <p>{user.biography}</p>
+              </div>
+            )}
           </div>
         </div>
       </div>
+
+      <style jsx global>{`
+        #application-page-content {
+          overflow-x: hidden;
+        }
+      `}</style>
+    </>
   )
 }

components/Application/UserSettings/UserSettings.tsx

@@ -84,7 +84,10 @@ export const UserSettings: React.FC = () => {
         return {
           ...oldUser,
           ...userCurrentData,
-          settings: userCurrentSettings.settings
+          settings: {
+            ...oldUser.settings,
+            ...userCurrentSettings.settings
+          }
         }
       })
       return {

components/Head.tsx

@@ -13,7 +13,7 @@ export const Head: React.FC<HeadProps> = (props) => {
 
   const {
     title = 'Thream',
-    image = '/images/icons/96x96.png',
+    image = 'https://thream.divlo.fr/images/icons/128x128.png',
     description = t('common:description'),
     url = 'https://thream.divlo.fr/'
   } = props
@@ -42,7 +42,7 @@ export const Head: React.FC<HeadProps> = (props) => {
       <meta name='twitter:card' content='summary' />
       <meta name='twitter:description' content={description} />
       <meta name='twitter:title' content={title} />
-      <meta name='twitter:image:src' content={image} />
+      <meta name='twitter:image' content={image} />
 
       {/* PWA Data */}
       <link rel='manifest' href='/manifest.json' />

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)
-  }, [hiddenMenu])
+    setHiddenMenu((oldHiddenMenu) => !oldHiddenMenu)
+  }, [])
 
   useEffect(() => {
-    if (!hiddenMenu) {
-      window.document.addEventListener('click', handleHiddenMenu)
-    } else {
-      window.document.removeEventListener('click', handleHiddenMenu)
+    const handleClickEvent = (event: MouseEvent): void => {
+      if (languageClickRef.current == null || event.target == null) {
+        return
+      }
+      if (!languageClickRef.current.contains(event.target as Node)) {
+        setHiddenMenu(true)
+      }
     }
 
+    window.document.addEventListener('click', handleClickEvent)
+
     return () => {
-      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/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/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/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 (

contexts/Channels.tsx

@@ -20,7 +20,9 @@ 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()

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)

contexts/Guilds.tsx

@@ -14,7 +14,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()

contexts/Members.tsx

@@ -20,7 +20,9 @@ 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()

contexts/Messages.tsx

@@ -19,9 +19,11 @@ 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 {
     items: messages,
@@ -47,7 +49,10 @@ export const MessagesProvider: React.FC<MessagesProviderProps> = (props) => {
             messagesDiv.scrollHeight - messagesDiv.scrollTop <=
             messagesDiv.clientHeight
           handleSocketData({ data, setItems })
-          if (data.action === 'create' && isAtBottom) {
+          if (
+            data.action === 'create' &&
+            (isAtBottom || data.item.member.userId === user.id)
+          ) {
             messagesDiv.scrollTo(0, messagesDiv.scrollHeight)
           }
         }
@@ -57,7 +62,7 @@ export const MessagesProvider: React.FC<MessagesProviderProps> = (props) => {
     return () => {
       authentication.socket.off('messages')
     }
-  }, [authentication.socket, setItems, path])
+  }, [authentication.socket, setItems, path, user.id])
 
   useEffect(() => {
     resetPagination()

cypress/integration/pages/application/[guildId]/[channelId]/index.spec.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', () => {

cypress/integration/pages/application/[guildId]/[channelId]/settings.spec.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',

cypress/integration/pages/application/[guildId]/settings.spec.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) {

cypress/integration/pages/application/guilds/join.spec.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', '@nextStaticAndImages']).then(() => {
+    cy.wait(['@getGuildsPublicHandler']).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(

docker-compose.yml

@@ -1,4 +1,3 @@
-version: '3.0'
 services:
   thream-website:
     container_name: ${COMPOSE_PROJECT_NAME}

generators/component/Component.tsx.hbs

@@ -4,7 +4,7 @@ export interface {{ properCase name }}Props {
   className?: string
 }
 
-export const {{ properCase name }}: React.FC<{{ properCase name }}Props> = (props) => {
+export const {{ properCase name }}: React.FC<React.PropsWithChildren{{ properCase name }}Props>> = (props) => {
   const { children, className } = props
 
   return <main className={classNames(className, '')}>{children}</main>

locales/en/application.json

@@ -2,10 +2,16 @@
   "website": "Website",
   "create": "Create",
   "status": "Status",
+  "create-a-channel": "Create a channel",
+  "delete-channel-only-one": "The guild should have at least one channel. You can't delete the only channel of the guild.",
   "create-a-guild": "Create a Guild",
   "create-a-guild-description": "Create your own guild and manage everything.",
+  "user-settings": "User settings",
+  "guild-settings": "Guild settings",
   "join-a-guild": "Join a Guild",
   "join-the-guild": "Join the guild",
+  "delete-the-guild": "Delete the guild",
+  "delete-the-channel": "Delete the channel",
   "join-a-guild-description": "Talk, collaborate, share and have fun with your friends by joining an already existing guild!",
   "members": "member(s)",
   "search": "Search",

locales/fr/application.json

@@ -2,10 +2,16 @@
   "website": "Site web",
   "create": "Créer",
   "status": "Statut",
+  "create-a-channel": "Créer un channel",
+  "delete-channel-only-one": "La guilde doit avoir au moins un channel. Vous ne pouvez pas supprimer le seul channel de la guilde.",
   "create-a-guild": "Créer une Guilde",
   "create-a-guild-description": "Créez votre propre guilde et gérez tout.",
+  "user-settings": "Paramètres utilisateur",
+  "guild-settings": "Paramètres de la guilde",
   "join-a-guild": "Rejoindre une Guilde",
   "join-the-guild": "Rejoindre la guilde",
+  "delete-the-guild": "Supprimer la guilde",
+  "delete-the-channel": "Supprimer le channel",
   "join-a-guild-description": "Discutez, collaborez, partagez et amusez-vous avec vos amis en rejoignant une guilde déjà existante!",
   "members": "membre(s)",
   "search": "Rechercher",

locales/fr/common.json

@@ -4,6 +4,6 @@
   "all-rights-reserved": "Tous droits réservés",
   "description": "Restez proche de vos amis et de vos communautés, parlez, collaborez, partagez et amusez-vous.",
   "name": "Nom",
-  "yes": "Yes",
+  "yes": "Oui",
   "no": "Non"
 }

package.json

@@ -1,14 +1,14 @@
 {
   "name": "@thream/website",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "repository": {
     "type": "git",
     "url": "https://github.com/Thream/website"
   },
   "engines": {
-    "node": ">=14.0.0",
-    "npm": ">=7.0.0"
+    "node": ">=16.0.0",
+    "npm": ">=8.0.0"
   },
   "scripts": {
     "dev": "next dev",
@@ -23,7 +23,6 @@
     "lint:prettier": "prettier \".\" --check",
     "lint:staged": "lint-staged",
     "test:unit": "jest",
-    "test:html-w3c-validator": "start-server-and-test \"start\" \"http://localhost:3000\" \"html-w3c-validator\"",
     "test:lighthouse": "lhci autorun",
     "test:e2e": "start-server-and-test \"start\" \"http://localhost:3000\" \"cypress run\"",
     "test:e2e:dev": "start-server-and-test \"dev\" \"http://localhost:3000\" \"cypress open\"",
@@ -32,86 +31,87 @@
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@fontsource/montserrat": "4.5.7",
-    "@fontsource/roboto": "4.5.5",
+    "@fontsource/montserrat": "4.5.11",
+    "@fontsource/roboto": "4.5.7",
     "@heroicons/react": "1.0.6",
-    "@sinclair/typebox": "0.23.4",
+    "@sinclair/typebox": "0.23.5",
     "ajv": "8.11.0",
     "ajv-formats": "2.1.1",
     "axios": "0.26.1",
     "classnames": "2.3.1",
-    "date-and-time": "2.3.0",
+    "date-and-time": "2.4.0",
     "emoji-mart": "3.0.1",
-    "katex": "0.15.3",
-    "next": "12.1.4",
-    "next-pwa": "5.4.7",
-    "next-themes": "0.1.1",
-    "next-translate": "1.3.5",
+    "katex": "0.16.0",
+    "next": "12.2.0",
+    "next-pwa": "5.5.4",
+    "next-themes": "0.2.0",
+    "next-translate": "1.4.0",
     "pretty-bytes": "6.0.0",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-component-form": "3.0.1",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-infinite-scroll-component": "6.1.0",
-    "react-markdown": "8.0.2",
+    "react-markdown": "8.0.3",
     "react-responsive": "8.2.0",
-    "react-swipeable": "6.2.1",
-    "react-textarea-autosize": "8.3.3",
+    "react-swipeable": "7.0.0",
+    "react-syntax-highlighter": "15.5.0",
+    "react-textarea-autosize": "8.3.4",
     "read-pkg": "7.1.0",
     "rehype-katex": "6.0.2",
     "remark-breaks": "3.0.2",
     "remark-gfm": "3.0.1",
     "remark-math": "5.1.1",
-    "sharp": "0.30.3",
-    "socket.io-client": "4.4.1",
+    "sharp": "0.30.7",
+    "socket.io-client": "4.5.1",
     "unified": "10.1.2",
     "unist-util-visit": "4.1.0",
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "16.2.3",
-    "@commitlint/config-conventional": "16.2.1",
+    "@commitlint/cli": "17.0.3",
+    "@commitlint/config-conventional": "17.0.3",
     "@lhci/cli": "0.9.0",
     "@saithodev/semantic-release-backmerge": "2.1.2",
     "@semantic-release/git": "10.0.1",
     "@testing-library/jest-dom": "5.16.4",
-    "@testing-library/react": "12.1.4",
+    "@testing-library/react": "13.3.0",
     "@types/emoji-mart": "3.0.9",
     "@types/hast": "2.3.4",
-    "@types/jest": "27.4.1",
+    "@types/jest": "27.5.1",
     "@types/katex": "0.14.0",
-    "@types/node": "17.0.23",
-    "@types/react": "17.0.43",
+    "@types/node": "18.0.0",
+    "@types/react": "18.0.14",
     "@types/react-responsive": "8.0.5",
+    "@types/react-syntax-highlighter": "15.5.2",
     "@types/unist": "2.0.6",
-    "@typescript-eslint/eslint-plugin": "5.18.0",
-    "@typescript-eslint/parser": "5.18.0",
-    "autoprefixer": "10.4.4",
-    "cypress": "9.5.3",
+    "@typescript-eslint/eslint-plugin": "5.30.0",
+    "@typescript-eslint/parser": "5.30.0",
+    "autoprefixer": "10.4.7",
+    "cypress": "9.6.1",
     "editorconfig-checker": "4.0.2",
-    "eslint": "8.12.0",
+    "eslint": "8.18.0",
     "eslint-config-conventions": "2.0.0",
-    "eslint-config-next": "12.1.4",
+    "eslint-config-next": "12.2.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-prettier": "4.1.0",
     "eslint-plugin-promise": "6.0.0",
     "eslint-plugin-unicorn": "42.0.0",
-    "html-w3c-validator": "1.2.0",
-    "husky": "7.0.4",
+    "husky": "8.0.1",
     "jest": "27.5.1",
-    "lint-staged": "12.3.7",
+    "lint-staged": "13.0.3",
     "markdownlint-cli": "0.31.1",
     "mockttp": "2.7.0",
     "next-secure-headers": "2.2.0",
-    "plop": "3.0.5",
-    "postcss": "8.4.12",
-    "prettier": "2.6.2",
-    "prettier-plugin-tailwindcss": "0.1.8",
-    "semantic-release": "19.0.2",
+    "plop": "3.1.1",
+    "postcss": "8.4.14",
+    "prettier": "2.7.1",
+    "prettier-plugin-tailwindcss": "0.1.11",
+    "semantic-release": "19.0.3",
     "serve": "13.0.2",
     "start-server-and-test": "1.14.0",
-    "tailwindcss": "3.0.23",
-    "typescript": "4.6.3",
-    "vercel": "24.0.1"
+    "tailwindcss": "3.1.4",
+    "typescript": "4.7.4",
+    "vercel": "25.2.1"
   }
 }

pages/application/[guildId]/[channelId]/index.tsx

@@ -43,7 +43,7 @@ const ChannelPage: NextPage<ChannelPageProps> = (props) => {
           <MembersProviders path={path}>
             <ChannelsProvider path={path}>
               <MessagesProvider path={path}>
-                <Head title='Thream | Application' />
+                <Head title={`Thream | ${selectedChannel.name}`} />
                 <Application
                   path={path}
                   guildLeftSidebar={<GuildLeftSidebar path={path} />}

pages/application/[guildId]/[channelId]/settings.tsx

@@ -40,7 +40,7 @@ const ChannelSettingsPage: NextPage<ChannelSettingsPageProps> = (props) => {
         <GuildMemberProvider guildMember={guildMember} path={path}>
           <MembersProviders path={path}>
             <ChannelsProvider path={path}>
-              <Head title='Thream | Application' />
+              <Head title={`Thream | ${selectedChannel.name}`} />
               <Application
                 path={path}
                 guildLeftSidebar={<GuildLeftSidebar path={path} />}

pages/application/[guildId]/channels/create.tsx

@@ -1,4 +1,5 @@
 import { NextPage } from 'next'
+import useTranslation from 'next-translate/useTranslation'
 
 import { Head } from '../../../../components/Head'
 import { Application } from '../../../../components/Application'
@@ -21,6 +22,7 @@ export interface CreateChannelPageProps extends PagePropsWithAuthentication {
 
 const CreateChannelPage: NextPage<CreateChannelPageProps> = (props) => {
   const { guildId, authentication, guildMember } = props
+  const { t } = useTranslation()
 
   const path = { guildId }
 
@@ -29,10 +31,10 @@ const CreateChannelPage: NextPage<CreateChannelPageProps> = (props) => {
       <GuildsProvider>
         <GuildMemberProvider guildMember={guildMember} path={path}>
           <Head
-            title={`Thream | Crée un channel`}
-            description={'Crée un nouveau channel'}
+            title={`Thream | ${t('application:create-a-channel')}`}
+            description={t('application:create-a-channel')}
           />
-          <Application path={path} title={'Crée un channel'}>
+          <Application path={path} title={t('application:create-a-channel')}>
             <CreateChannel />
           </Application>
         </GuildMemberProvider>

pages/application/[guildId]/settings.tsx

@@ -1,4 +1,5 @@
 import { NextPage } from 'next'
+import useTranslation from 'next-translate/useTranslation'
 
 import { Head } from '../../../components/Head'
 import { Application } from '../../../components/Application'
@@ -18,6 +19,7 @@ export interface GuildSettingsPageProps extends PagePropsWithAuthentication {
 
 const GuildSettingsPage: NextPage<GuildSettingsPageProps> = (props) => {
   const { guildId, authentication, guildMember } = props
+  const { t } = useTranslation()
 
   const path = { guildId }
 
@@ -25,8 +27,8 @@ const GuildSettingsPage: NextPage<GuildSettingsPageProps> = (props) => {
     <AuthenticationProvider authentication={authentication}>
       <GuildsProvider>
         <GuildMemberProvider guildMember={guildMember} path={path}>
-          <Head title='Thream | Guild settings' />
-          <Application path={path} title='Guild settings'>
+          <Head title={`Thream | ${t('application:guild-settings')}`} />
+          <Application path={path} title={t('application:guild-settings')}>
             <GuildSettings />
           </Application>
         </GuildMemberProvider>

pages/application/users/settings.tsx

@@ -1,4 +1,5 @@
 import { NextPage } from 'next'
+import useTranslation from 'next-translate/useTranslation'
 
 import { Head } from '../../../components/Head'
 import { Application } from '../../../components/Application'
@@ -11,11 +12,16 @@ import { UserSettings } from '../../../components/Application/UserSettings'
 import { GuildsProvider } from '../../../contexts/Guilds'
 
 const UserSettingsPage: NextPage<PagePropsWithAuthentication> = (props) => {
+  const { t } = useTranslation()
+
   return (
     <AuthenticationProvider authentication={props.authentication}>
       <GuildsProvider>
-        <Head title='Thream | Settings' />
-        <Application path={`/application/users/settings`} title='Settings'>
+        <Head title={`Thream | ${t('application:user-settings')}`} />
+        <Application
+          path='/application/users/settings'
+          title={t('application:user-settings')}
+        >
           <UserSettings />
         </Application>
       </GuildsProvider>

tools/api.ts

@@ -1,6 +1,6 @@
 import axios from 'axios'
 
-export const API_VERSION = '1.0.0'
+export const API_VERSION = '1.1.0'
 
 export const API_DEFAULT_PORT = 8080
 

tools/authentication/AuthenticationContext.tsx

@@ -5,7 +5,6 @@ import useTranslation from 'next-translate/useTranslation'
 
 import { Authentication, PagePropsWithAuthentication } from '.'
 import { UserCurrent } from '../../models/User'
-import { Language, Theme } from '../../models/UserSettings'
 
 export interface AuthenticationValue {
   authentication: Authentication
@@ -18,9 +17,9 @@ const AuthenticationContext = createContext<AuthenticationValue>(
   defaultAuthenticationContext
 )
 
-export const AuthenticationProvider: React.FC<PagePropsWithAuthentication> = (
-  props
-) => {
+export const AuthenticationProvider: React.FC<
+  React.PropsWithChildren<PagePropsWithAuthentication>
+> = (props) => {
   const { lang } = useTranslation()
   const { theme, setTheme } = useTheme()
   const [user, setUser] = useState<UserCurrent>(props.authentication.user)
@@ -41,14 +40,13 @@ export const AuthenticationProvider: React.FC<PagePropsWithAuthentication> = (
   useEffect(() => {
     authentication.api
       .put('/users/current/settings', { theme, language: lang })
-      .then(() => {
+      .then(({ data: userCurrentSettings }) => {
         setUser((oldUser) => {
           return {
             ...oldUser,
             settings: {
               ...oldUser.settings,
-              theme: theme as Theme,
-              language: lang as Language
+              ...userCurrentSettings.settings
             }
           }
         })