chore(release): 1.3.5 [skip ci]

.devcontainer/devcontainer.json

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

.github/PULL_REQUEST_TEMPLATE.md

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

.github/workflows/analyze.yml

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

.github/workflows/build.yml

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

.github/workflows/lint.yml

@@ -10,16 +10,16 @@ jobs:
   lint:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.3.0'
+      - uses: 'actions/checkout@v3.5.2'
 
-      - name: 'Use Node.js'
+      - name: 'Setup Node.js'
         uses: 'actions/setup-node@v3.6.0'
         with:
           node-version: '18.x'
           cache: 'npm'
 
-      - name: 'Install'
-        run: 'npm install'
+      - name: 'Install dependencies'
+        run: 'npm clean-install'
 
       - name: 'lint:commit'
         run: 'npm run lint:commit -- --to "${{ github.sha }}"'

.github/workflows/release.yml

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

.github/workflows/test.yml

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

.lighthouserc.json

@@ -1,31 +0,0 @@
-{
-  "ci": {
-    "collect": {
-      "startServerCommand": "npm run start",
-      "startServerReadyPattern": "ready on",
-      "startServerReadyTimeout": 20000,
-      "url": [
-        "http://127.0.0.1:3000/",
-        "http://127.0.0.1:3000/authentication/forgot-password",
-        "http://127.0.0.1:3000/authentication/reset-password",
-        "http://127.0.0.1:3000/authentication/signin",
-        "http://127.0.0.1:3000/authentication/signup"
-      ],
-      "numberOfRuns": 1
-    },
-    "assert": {
-      "preset": "lighthouse:recommended",
-      "assertions": {
-        "image-size-responsive": "warning",
-        "unsized-images": "warning",
-        "csp-xss": "warning",
-        "non-composited-animations": "warning",
-        "unused-javascript": "warning"
-      }
-    },
-    "upload": {
-      "target": "temporary-public-storage"
-    },
-    "server": {}
-  }
-}

.markdownlint-cli2.jsonc

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

.markdownlint.json

@@ -1,7 +0,0 @@
-{
-  "default": true,
-  "relative-links": true,
-  "extends": "markdownlint/style/prettier",
-  "MD033": false,
-  "MD041": false
-}

.vscode/settings.json

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

CODE_OF_CONDUCT.md

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

CONTRIBUTING.md

@@ -30,31 +30,7 @@ If you're adding new features to **Thream/website**, please include tests.
 
 ## Commits
 
-The commit message guidelines respect
-[@commitlint/config-conventional](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional)
-and [Semantic Versioning](https://semver.org/) for releases.
-
-### Types
-
-Types define which kind of changes you made to the project.
-
-| Types    | Description                                                                                                  |
-| -------- | ------------------------------------------------------------------------------------------------------------ |
-| feat     | A new feature.                                                                                               |
-| fix      | A bug fix.                                                                                                   |
-| docs     | Documentation only changes.                                                                                  |
-| style    | Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc).      |
-| refactor | A code change that neither fixes a bug nor adds a feature.                                                   |
-| perf     | A code change that improves performance.                                                                     |
-| test     | Adding missing tests or correcting existing tests.                                                           |
-| build    | Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm).         |
-| ci       | Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs). |
-| chore    | Other changes that don't modify src or test files.                                                           |
-| revert   | Reverts a previous commit.                                                                                   |
-
-### Scopes
-
-Scopes define what part of the code changed.
+The commit message guidelines adheres to [Conventional Commits](https://www.conventionalcommits.org/) and [Semantic Versioning](https://semver.org/) for releases.
 
 ### Examples
 
@@ -67,7 +43,7 @@ git commit -m "docs(readme): update installation process"
 
 [Reference issue](https://github.com/Thream/website/issues/24)
 
-Feel free to contribute to Thream and add new languages, we would appreciate your help!
+Feel free to contribute to **Thream** and add new languages, we would appreciate your help!
 
 To add a new language:
 

Dockerfile

@@ -1,9 +1,9 @@
-FROM node:18.13.0 AS builder-dependencies
+FROM node:18.16.0 AS builder-dependencies
 WORKDIR /usr/src/application
 COPY ./package*.json ./
 RUN npm install
 
-FROM node:18.13.0 AS builder
+FROM node:18.16.0 AS builder
 WORKDIR /usr/src/application
 COPY --from=builder-dependencies /usr/src/application/node_modules ./node_modules
 COPY ./ ./

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.2.4](https://github.com/Thream/api/releases/tag/v1.2.4).
+It uses [Thream/api](https://github.com/Thream/api) [v1.2.6](https://github.com/Thream/api/releases/tag/v1.2.6).
 
 ## ⚙️ Getting Started
 
@@ -61,7 +61,7 @@ docker compose up --build
 
 #### Services started
 
-- website : `http://127.0.0.1:3000`
+- `website`: <http://127.0.0.1:3000>
 
 ## 💡 Contributing
 

components/Application/Application.tsx

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

components/Application/ChannelSettings/ChannelSettings.tsx

@@ -64,7 +64,7 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
     } catch (error) {
       return {
         type: 'error',
-        value: 'errors:server-error'
+        message: 'errors:server-error'
       }
     }
   }

components/Application/Channels/Channel.tsx

@@ -25,7 +25,7 @@ const ChannelMemo: React.FC<ChannelProps> = (props) => {
     <Link
       href={`/application/${path.guildId}/${channel.id}`}
       className={classNames(
-        'group relative my-3 mx-3 flex items-center justify-between overflow-hidden rounded-lg py-2 text-sm transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-600',
+        'group relative mx-3 my-3 flex items-center justify-between overflow-hidden rounded-lg py-2 text-sm transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-600',
         {
           'font-semibold text-green-800 dark:text-green-400': selected
         }

components/Application/ConfirmPopup/ConfirmPopup.tsx

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

components/Application/CreateChannel/CreateChannel.tsx

@@ -38,7 +38,7 @@ export const CreateChannel: React.FC = () => {
     } catch (error) {
       return {
         type: 'error',
-        value: 'errors:server-error'
+        message: 'errors:server-error'
       }
     }
   }

components/Application/CreateGuild/CreateGuild.tsx

@@ -45,7 +45,7 @@ export const CreateGuild: React.FC = () => {
     } catch (error) {
       return {
         type: 'error',
-        value: 'errors:server-error'
+        message: 'errors:server-error'
       }
     }
   }

components/Application/GuildSettings/GuildSettings.tsx

@@ -56,12 +56,12 @@ export const GuildSettings: React.FC = () => {
       setInputValues(formData as unknown as any)
       return {
         type: 'success',
-        value: 'application:saved-information'
+        message: 'application:saved-information'
       }
     } catch (error) {
       return {
         type: 'error',
-        value: 'errors:server-error'
+        message: 'errors:server-error'
       }
     }
   }

components/Application/JoinGuildsPublic/GuildPublic.tsx

@@ -96,7 +96,7 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
       <ConfirmPopup
         title={`${t('application:join-the-guild')} ?`}
         className={classNames(
-          'w-ful h-ful translate-x- absolute top-1/2 left-full flex h-full w-full -translate-y-1/2 flex-col items-center justify-center rounded-2xl transition-all',
+          'w-ful h-ful translate-x- absolute left-full top-1/2 flex h-full w-full -translate-y-1/2 flex-col items-center justify-center rounded-2xl transition-all',
           {
             '!left-0': isConfirmed
           }

components/Application/JoinGuildsPublic/JoinGuildsPublic.tsx

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

components/Application/Members/Member.tsx

@@ -14,7 +14,7 @@ const MemberMemo: React.FC<MemberProps> = (props) => {
 
   return (
     <Link href={`/application/users/${member.user.id}`}>
-      <div className='flex cursor-pointer items-center overflow-hidden py-2 px-6 pr-10 hover:bg-gray-300 dark:hover:bg-gray-900'>
+      <div className='flex cursor-pointer items-center overflow-hidden px-6 py-2 pr-10 hover:bg-gray-300 dark:hover:bg-gray-900'>
         <div className='flex min-w-[50px] rounded-full'>
           <Image
             src={

components/Application/Messages/Message/MessageOptions/MessageOptions.tsx

@@ -22,7 +22,7 @@ export const MessageOptions: React.FC<
   }
 
   return (
-    <div className='absolute right-6 -top-8 flex opacity-0 transition-opacity group-hover:opacity-100'>
+    <div className='absolute -top-8 right-6 flex opacity-0 transition-opacity group-hover:opacity-100'>
       {message.type === 'text' && (
         <div
           className='message-options rounded-l-lg border-l-slate-600'

components/Application/Sidebar/Sidebar.tsx

@@ -21,13 +21,13 @@ export const Sidebar: React.FC<React.PropsWithChildren<SidebarProps>> = (
       className={classNames(
         'h-full-without-header visible z-50 flex bg-gray-200 drop-shadow-2xl transition-all dark:bg-gray-800',
         {
-          'scrollbar-firefox-support top-0 right-0 flex-col space-y-1 overflow-y-auto':
+          'scrollbar-firefox-support right-0 top-0 flex-col space-y-1 overflow-y-auto':
             direction === 'right',
           'w-72': direction === 'right' && visible,
           'invisible w-0 opacity-0': !visible,
           'w-80': direction === 'left' && visible,
           'max-w-max': typeof path !== 'string' && direction === 'left',
-          'top-0 right-0': direction === 'right' && isMobile,
+          'right-0 top-0': direction === 'right' && isMobile,
           absolute: isMobile
         }
       )}

components/Application/UserProfile/UserProfile.tsx

@@ -58,7 +58,7 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
                       <a
                         href={`mailto:${user.email}`}
                         target='_blank'
-                        className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-1px] after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
+                        className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:bottom-[-1px] after:left-0 after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
                         rel='noreferrer'
                         data-cy='user-email'
                       >
@@ -73,7 +73,7 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
                         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'
+                        className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:bottom-[-2px] after:left-0 after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
                       >
                         {user.website}
                       </a>

components/Application/UserSettings/UserSettings.tsx

@@ -75,7 +75,7 @@ export const UserSettings: React.FC = () => {
       if (hasEmailChanged) {
         return {
           type: 'success',
-          value: 'application:success-email-changed'
+          message: 'application:success-email-changed'
         }
       }
       const { data: userCurrentSettings } = await authentication.api.put(
@@ -94,7 +94,7 @@ export const UserSettings: React.FC = () => {
       })
       return {
         type: 'success',
-        value: 'application:saved-information'
+        message: 'application:saved-information'
       }
     } catch (error) {
       if (axios.isAxiosError(error) && error.response?.status === 400) {
@@ -102,22 +102,22 @@ export const UserSettings: React.FC = () => {
         if (message.endsWith('already taken.')) {
           return {
             type: 'error',
-            value: 'authentication:already-used'
+            message: 'authentication:already-used'
           }
         } else if (message.endsWith('email to sign in.')) {
           return {
             type: 'error',
-            value: 'authentication:email-required-to-sign-in'
+            message: 'authentication:email-required-to-sign-in'
           }
         }
         return {
           type: 'error',
-          value: 'errors:server-error'
+          message: 'errors:server-error'
         }
       }
       return {
         type: 'error',
-        value: 'errors:server-error'
+        message: 'errors:server-error'
       }
     }
   }

components/Authentication/Authentication.tsx

@@ -54,7 +54,7 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
         formElement.reset()
         return {
           type: 'success',
-          value: 'authentication:success-signup'
+          message: 'authentication:success-signup'
         }
       } catch (error) {
         if (axios.isAxiosError(error) && error.response?.status === 400) {
@@ -62,17 +62,17 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
           if (message.endsWith('already taken.')) {
             return {
               type: 'error',
-              value: 'authentication:already-used'
+              message: 'authentication:already-used'
             }
           }
           return {
             type: 'error',
-            value: 'errors:server-error'
+            message: 'errors:server-error'
           }
         }
         return {
           type: 'error',
-          value: 'errors:server-error'
+          message: 'errors:server-error'
         }
       }
     } else {
@@ -86,12 +86,12 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
         if (axios.isAxiosError(error) && error.response?.status === 400) {
           return {
             type: 'error',
-            value: 'authentication:wrong-credentials'
+            message: 'authentication:wrong-credentials'
           }
         }
         return {
           type: 'error',
-          value: 'errors:server-error'
+          message: 'errors:server-error'
         }
       }
     }

components/Header/SwitchTheme.tsx

@@ -29,7 +29,7 @@ export const SwitchTheme: React.FC = () => {
           <div
             data-cy='switch-theme-dark'
             className={classNames(
-              'absolute top-0 bottom-0 left-[8px] mt-auto mb-auto h-[10px] w-[14px] leading-[0] transition-opacity duration-[250ms] ease-in-out',
+              'absolute bottom-0 left-[8px] top-0 mb-auto mt-auto h-[10px] w-[14px] leading-[0] transition-opacity duration-[250ms] ease-in-out',
               {
                 'opacity-100': theme === 'dark',
                 'opacity-0': theme === 'light'
@@ -43,7 +43,7 @@ export const SwitchTheme: React.FC = () => {
           <div
             data-cy='switch-theme-light'
             className={classNames(
-              'absolute right-[10px] top-0 bottom-0 mt-auto mb-auto h-[10px] w-[10px] leading-[0]',
+              'absolute bottom-0 right-[10px] top-0 mb-auto mt-auto h-[10px] w-[10px] leading-[0]',
               {
                 'opacity-100': theme === 'light',
                 'opacity-0': theme === 'dark'

components/design/Checkbox/Checkbox.tsx

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

components/design/Input/Input.tsx

@@ -36,7 +36,7 @@ export const Input: React.FC<InputProps> = (props) => {
 
   return (
     <div className='flex flex-col'>
-      <div className={classNames('mt-6 mb-2 flex justify-between', className)}>
+      <div className={classNames('mb-2 mt-6 flex justify-between', className)}>
         <label className='pl-1' htmlFor={name}>
           {label}
         </label>
@@ -66,7 +66,7 @@ export const Input: React.FC<InputProps> = (props) => {
             style={{
               backgroundImage: `url('/images/svg/icons/input/${inputType}.svg')`
             }}
-            className='absolute top-3 right-4 z-10 h-5 w-5 cursor-pointer bg-[#f1f1f1] bg-cover'
+            className='absolute right-4 top-3 z-10 h-5 w-5 cursor-pointer bg-[#f1f1f1] bg-cover'
           />
         )}
         <FormState

components/design/Loader/Loader.tsx

@@ -13,7 +13,7 @@ export const Loader: React.FC<LoaderProps> = (props) => {
     <div className={props.className}>
       <div
         data-cy='progress-spinner'
-        className='relative my-0 mx-auto before:block before:pt-[100%] before:content-none'
+        className='relative mx-auto my-0 before:block before:pt-[100%] before:content-none'
         style={{ width: `${width}px`, height: `${height}px` }}
       >
         <svg className={styles['progressSpinnerSvg']} viewBox='25 25 50 50'>

components/design/Textarea/Textarea.tsx

@@ -10,7 +10,7 @@ export const Textarea: React.FC<TextareaProps> = (props) => {
 
   return (
     <div className='flex flex-col'>
-      <div className='mt-6 mb-2 flex justify-between'>
+      <div className='mb-2 mt-6 flex justify-between'>
         <label className='pl-1' htmlFor={id}>
           {label}
         </label>

contexts/Guilds.tsx

@@ -17,9 +17,7 @@ export interface Guilds {
 const defaultGuildsContext = {} as any
 const GuildsContext = createContext<Guilds>(defaultGuildsContext)
 
-export const GuildsProvider: React.FC<React.PropsWithChildren<{}>> = (
-  props
-) => {
+export const GuildsProvider: React.FC<React.PropsWithChildren> = (props) => {
   const { children } = props
 
   const { authentication } = useAuthentication()

cypress.config.ts

@@ -5,7 +5,7 @@ import { getLocal } from 'mockttp'
 import type { Mockttp } from 'mockttp'
 
 import { API_DEFAULT_PORT } from './tools/api'
-import type { Handlers, Method } from './cypress/fixtures/handler'
+import type { Handlers } from './cypress/fixtures/handler'
 
 const UPLOADS_FIXTURES_DIRECTORY = path.join(
   process.cwd(),
@@ -26,25 +26,38 @@ export default defineConfig({
     setupNodeEvents(on, config) {
       on('task', {
         async startMockServer(handlers: Handlers): Promise<null> {
-          server = getLocal({
-            cors: true
-          })
+          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>
+            let requestBuilder = server.forGet(handler.url)
+            switch (handler.method) {
+              case 'GET':
+                requestBuilder = server.forGet(handler.url)
+                break
+              case 'POST':
+                requestBuilder = server.forPost(handler.url)
+                break
+              case 'PUT':
+                requestBuilder = server.forPut(handler.url)
+                break
+              case 'DELETE':
+                requestBuilder = server.forDelete(handler.url)
+                break
+            }
             if (isFile) {
-              await server[method](handler.url).thenFromFile(
+              await requestBuilder.thenFromFile(
                 handler.response.statusCode,
                 path.join(UPLOADS_FIXTURES_DIRECTORY, ...handler.response.body)
               )
             } else {
-              await server[method](handler.url).thenJson(
+              await requestBuilder.thenJson(
                 handler.response.statusCode,
                 handler.response.body
               )
             }
           }
+
           return null
         },
 

docker-compose.yml

@@ -8,4 +8,4 @@ services:
       - '${PORT-3000}:${PORT-3000}'
     environment:
       PORT: ${PORT-3000}
-    env_file: './.env'
+    env_file: '.env'

next.config.js

@@ -2,7 +2,7 @@ const nextPWA = require('next-pwa')({
   disable: process.env.NODE_ENV !== 'production',
   dest: 'public'
 })
-const nextTranslate = require('next-translate')
+const nextTranslate = require('next-translate-plugin')
 
 /** @type {import("next").NextConfig} */
 const nextConfig = {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thream/website",
-  "version": "1.3.2",
+  "version": "1.3.5",
   "private": true,
   "repository": {
     "type": "git",
@@ -14,17 +14,15 @@
     "dev": "next dev",
     "start": "next start",
     "build": "next build",
-    "export": "next export",
     "generate": "plop",
     "lint:commit": "commitlint",
     "lint:editorconfig": "editorconfig-checker",
     "lint:markdown": "markdownlint-cli2",
-    "lint:eslint": "eslint \"**/*.{js,jsx,ts,tsx}\" --ignore-path \".gitignore\"",
+    "lint:eslint": "eslint \".\" --ignore-path \".gitignore\"",
     "lint:prettier": "prettier \".\" --check --ignore-path \".gitignore\"",
     "lint:staged": "lint-staged",
     "test:unit": "cypress run --component",
     "test:html-w3c-validator": "start-server-and-test \"start\" \"http://127.0.0.1:3000\" \"html-w3c-validator\"",
-    "test:lighthouse": "lhci autorun",
     "test:e2e": "start-server-and-test \"start\" \"http://127.0.0.1:3000\" \"cypress run\"",
     "test:dev": "start-server-and-test \"dev\" \"http://127.0.0.1:3000\" \"cypress open\"",
     "release": "semantic-release",
@@ -32,82 +30,83 @@
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@fontsource/montserrat": "4.5.13",
+    "@fontsource/montserrat": "4.5.14",
     "@fontsource/roboto": "4.5.8",
     "@heroicons/react": "1.0.6",
-    "@sinclair/typebox": "0.25.20",
-    "axios": "1.2.1",
+    "@sinclair/typebox": "0.28.10",
+    "@thream/socketio-jwt": "3.1.0",
+    "axios": "1.4.0",
     "clsx": "1.2.1",
-    "date-and-time": "2.4.1",
+    "date-and-time": "3.0.0",
     "emoji-mart": "3.0.1",
-    "katex": "0.16.4",
-    "next": "13.1.1",
+    "katex": "0.16.7",
+    "next": "13.2.4",
     "next-pwa": "5.6.0",
     "next-themes": "0.2.1",
-    "next-translate": "1.6.0",
-    "pretty-bytes": "6.0.0",
+    "next-translate": "2.0.5",
+    "pretty-bytes": "6.1.0",
     "react": "18.2.0",
-    "react-component-form": "3.1.2",
+    "react-component-form": "4.1.0",
     "react-dom": "18.2.0",
     "react-infinite-scroll-component": "6.1.0",
-    "react-markdown": "8.0.4",
+    "react-markdown": "8.0.7",
     "react-responsive": "9.0.2",
     "react-swipeable": "7.0.0",
     "react-syntax-highlighter": "15.5.0",
-    "react-textarea-autosize": "8.4.0",
-    "read-pkg": "7.1.0",
-    "rehype-katex": "6.0.2",
-    "remark-breaks": "3.0.2",
+    "react-textarea-autosize": "8.4.1",
+    "read-pkg": "8.0.0",
+    "rehype-katex": "6.0.3",
+    "remark-breaks": "3.0.3",
     "remark-gfm": "3.0.1",
     "remark-math": "5.1.1",
-    "sharp": "0.31.3",
-    "socket.io-client": "4.5.4",
+    "sharp": "0.32.1",
+    "socket.io-client": "4.6.1",
     "unified": "10.1.2",
-    "unist-util-visit": "4.1.1",
+    "unist-util-visit": "4.1.2",
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.4.1",
-    "@commitlint/config-conventional": "17.4.0",
-    "@lhci/cli": "0.10.0",
-    "@saithodev/semantic-release-backmerge": "2.1.2",
+    "@commitlint/cli": "17.6.3",
+    "@commitlint/config-conventional": "17.6.3",
+    "@saithodev/semantic-release-backmerge": "3.2.0",
     "@semantic-release/git": "10.0.1",
-    "@tsconfig/strictest": "1.0.2",
+    "@tsconfig/strictest": "2.0.1",
     "@types/emoji-mart": "3.0.9",
     "@types/hast": "2.3.4",
     "@types/katex": "0.16.0",
-    "@types/node": "18.11.18",
-    "@types/react": "18.0.26",
+    "@types/node": "20.1.4",
+    "@types/react": "18.2.6",
     "@types/react-responsive": "8.0.5",
     "@types/react-syntax-highlighter": "15.5.6",
     "@types/unist": "2.0.6",
-    "@typescript-eslint/eslint-plugin": "5.48.1",
-    "@typescript-eslint/parser": "5.48.1",
-    "autoprefixer": "10.4.13",
-    "cypress": "12.3.0",
-    "editorconfig-checker": "4.0.2",
-    "eslint": "8.31.0",
-    "eslint-config-conventions": "6.0.0",
-    "eslint-config-next": "13.1.1",
-    "eslint-config-prettier": "8.6.0",
-    "eslint-plugin-import": "2.26.0",
+    "@typescript-eslint/eslint-plugin": "5.59.5",
+    "@typescript-eslint/parser": "5.59.5",
+    "autoprefixer": "10.4.14",
+    "cypress": "12.12.0",
+    "editorconfig-checker": "5.0.1",
+    "eslint": "8.40.0",
+    "eslint-config-conventions": "9.0.0",
+    "eslint-config-next": "13.2.4",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-import": "2.27.5",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-unicorn": "45.0.2",
-    "html-w3c-validator": "1.2.2",
+    "eslint-plugin-unicorn": "47.0.0",
+    "html-w3c-validator": "1.3.0",
     "husky": "8.0.3",
-    "lint-staged": "13.1.0",
-    "markdownlint-cli2": "0.6.0",
-    "markdownlint-rule-relative-links": "1.1.1",
-    "mockttp": "2.7.0",
-    "plop": "3.1.1",
-    "postcss": "8.4.21",
-    "prettier": "2.8.2",
-    "prettier-plugin-tailwindcss": "0.2.1",
-    "semantic-release": "19.0.5",
-    "start-server-and-test": "1.15.2",
-    "tailwindcss": "3.2.4",
-    "typescript": "4.9.4",
-    "vercel": "28.11.0"
+    "lint-staged": "13.2.2",
+    "markdownlint-cli2": "0.7.1",
+    "markdownlint-rule-relative-links": "1.2.0",
+    "mockttp": "3.7.4",
+    "next-translate-plugin": "2.0.5",
+    "plop": "3.1.2",
+    "postcss": "8.4.23",
+    "prettier": "2.8.8",
+    "prettier-plugin-tailwindcss": "0.2.8",
+    "semantic-release": "21.0.2",
+    "start-server-and-test": "2.0.0",
+    "tailwindcss": "3.3.2",
+    "typescript": "5.0.4",
+    "vercel": "29.3.0"
   }
 }

pages/authentication/forgot-password.tsx

@@ -42,18 +42,18 @@ const ForgotPassword: NextPage<FooterProps> = (props) => {
       formElement.reset()
       return {
         type: 'success',
-        value: 'authentication:success-forgot-password'
+        message: 'authentication:success-forgot-password'
       }
     } catch (error) {
       if (axios.isAxiosError(error) && error.response?.status === 400) {
         return {
           type: 'error',
-          value: 'errors:invalid-email'
+          message: 'errors:invalid-email'
         }
       }
       return {
         type: 'error',
-        value: 'errors:server-error'
+        message: 'errors:server-error'
       }
     }
   }

pages/authentication/reset-password.tsx

@@ -43,12 +43,12 @@ const ResetPassword: NextPage<FooterProps> = (props) => {
       if (axios.isAxiosError(error) && error.response?.status === 400) {
         return {
           type: 'error',
-          value: 'errors:invalid'
+          message: 'errors:invalid'
         }
       }
       return {
         type: 'error',
-        value: 'errors:server-error'
+        message: 'errors:server-error'
       }
     }
   }

tools/api.ts

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

tools/authentication/Authentication.ts

@@ -2,6 +2,7 @@ import type { AxiosInstance } from 'axios'
 import axios from 'axios'
 import type { Socket } from 'socket.io-client'
 import { io } from 'socket.io-client'
+import { isUnauthorizedError } from '@thream/socketio-jwt'
 
 import { API_URL } from '../api'
 import { cookies } from '../cookies'
@@ -30,7 +31,7 @@ export class Authentication {
         )
       })
       this.socket.on('connect_error', (error) => {
-        if (error.message.startsWith('Unauthorized')) {
+        if (isUnauthorizedError(error)) {
           fetchRefreshToken(this.tokens.refreshToken)
             .then(({ accessToken }) => {
               this.setAccessToken(accessToken)
@@ -58,10 +59,7 @@ export class Authentication {
           )
           this.setAccessToken(accessToken)
         }
-        config.headers = config.headers == null ? {} : config.headers
-        config.headers[
-          'Authorization'
-        ] = `${this.tokens.type} ${this.tokens.accessToken}`
+        config.headers.Authorization = `${this.tokens.type} ${this.tokens.accessToken}`
         return config
       },
       async (error) => {

tsconfig.json

@@ -3,19 +3,22 @@
   "compilerOptions": {
     "target": "ESNext",
     "module": "ESNext",
-    "moduleResolution": "node",
-    "allowJs": true,
-    "jsx": "preserve",
-    "sourceMap": true,
-    "removeComments": true,
-    "noEmit": true,
-    "types": ["cypress"],
     "lib": ["dom", "dom.iterable", "ESNext"],
+    "allowJs": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    },
+    "types": ["cypress"],
+    "noEmit": true,
+    "moduleResolution": "node",
     "resolveJsonModule": true,
-    "isolatedModules": true,
+    "jsx": "preserve",
     "incremental": true,
-    "exactOptionalPropertyTypes": false
+    "exactOptionalPropertyTypes": false,
+    "verbatimModuleSyntax": false,
+    "isolatedModules": true
   },
-  "exclude": ["dist", ".next", "out", "next.config.js"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
 }