fix: update dependencies to latest + fix upload of files

.devcontainer/Dockerfile

@@ -1 +1 @@
-FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:18
+FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:20

.devcontainer/devcontainer.json

@@ -6,7 +6,8 @@
   "customizations": {
     "vscode": {
       "settings": {
-        "remote.autoForwardPorts": false
+        "remote.autoForwardPorts": false,
+        "remote.localPortHost": "allInterfaces"
       },
       "extensions": [
         "editorconfig.editorconfig",
@@ -19,7 +20,5 @@
       ]
     }
   },
-  "forwardPorts": [3000],
-  "postAttachCommand": ["npm", "install"],
   "remoteUser": "node"
 }

.devcontainer/docker-compose.yml

@@ -6,3 +6,4 @@ services:
     volumes:
       - '..:/workspace:cached'
     command: 'sleep infinity'
+    network_mode: 'host'

.eslintrc.json

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

.github/workflows/build.yml

@@ -15,7 +15,7 @@ jobs:
       - name: 'Setup Node.js'
         uses: 'actions/setup-node@v3.6.0'
         with:
-          node-version: '18.x'
+          node-version: '20.x'
           cache: 'npm'
 
       - name: 'Install dependencies'

.github/workflows/lint.yml

@@ -15,7 +15,7 @@ jobs:
       - name: 'Setup Node.js'
         uses: 'actions/setup-node@v3.6.0'
         with:
-          node-version: '18.x'
+          node-version: '20.x'
           cache: 'npm'
 
       - name: 'Install dependencies'
@@ -35,8 +35,3 @@ jobs:
 
       - name: 'lint:prettier'
         run: 'npm run lint:prettier'
-
-      - name: 'lint:dotenv'
-        uses: 'dotenv-linter/action-dotenv-linter@v2'
-        with:
-          github_token: ${{ secrets.github_token }}

.github/workflows/release.yml

@@ -23,7 +23,7 @@ jobs:
       - name: 'Setup Node.js'
         uses: 'actions/setup-node@v3.6.0'
         with:
-          node-version: '18.x'
+          node-version: '20.x'
           cache: 'npm'
 
       - name: 'Install dependencies'
@@ -35,10 +35,3 @@ jobs:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
           GIT_COMMITTER_NAME: ${{ secrets.GIT_NAME }}
           GIT_COMMITTER_EMAIL: ${{ secrets.GIT_EMAIL }}
-
-      - name: 'Deploy to Vercel'
-        run: 'npm run deploy -- --token="${VERCEL_TOKEN}" --prod'
-        env:
-          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
-          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
-          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}

.github/workflows/test.yml

@@ -15,7 +15,7 @@ jobs:
       - name: 'Setup Node.js'
         uses: 'actions/setup-node@v3.6.0'
         with:
-          node-version: '18.x'
+          node-version: '20.x'
           cache: 'npm'
 
       - name: 'Install dependencies'
@@ -32,7 +32,7 @@ jobs:
       - name: 'Setup Node.js'
         uses: 'actions/setup-node@v3.6.0'
         with:
-          node-version: '18.x'
+          node-version: '20.x'
           cache: 'npm'
 
       - name: 'Install dependencies'

.gitignore

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

CONTRIBUTING.md

@@ -47,6 +47,6 @@ Feel free to contribute to **Thream** and add new languages, we would appreciate
 
 To add a new language:
 
-- `npm install`
+- `npm clean-install`
 - `npm run generate`
 - Start editing JSON files with the translation in `locales/{{locale}}` (e.g: `locales/en`)

Dockerfile

@@ -1,15 +1,16 @@
-FROM node:18.16.1 AS builder-dependencies
+FROM node:20.5.0 AS builder-dependencies
 WORKDIR /usr/src/application
+COPY ./.npmrc ./
 COPY ./package*.json ./
-RUN npm install
+RUN npm clean-install
 
-FROM node:18.16.1 AS builder
+FROM node:20.5.0 AS builder
 WORKDIR /usr/src/application
 COPY --from=builder-dependencies /usr/src/application/node_modules ./node_modules
 COPY ./ ./
 RUN npm run build
 
-FROM gcr.io/distroless/nodejs18-debian11:latest AS runner
+FROM gcr.io/distroless/nodejs20-debian11:latest AS runner
 WORKDIR /usr/src/application
 ENV NODE_ENV=production
 ENV NEXT_TELEMETRY_DISABLED=1

README.md

@@ -1,4 +1,4 @@
-<h1 align="center"><a href="https://thream.divlo.fr/">Thream/website</a></h1>
+<h1 align="center"><a href="https://thream.theoludwig.fr/">Thream/website</a></h1>
 
 <p align="center">
   <a href="./CONTRIBUTING.md"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat" /></a>
@@ -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.7](https://github.com/Thream/api/releases/tag/v1.2.7).
+It uses [Thream/api](https://github.com/Thream/api) [v1.2.8](https://github.com/Thream/api/releases/tag/v1.2.8).
 
 ## ⚙️ Getting Started
 
@@ -40,7 +40,7 @@ cd website
 cp .env.example .env
 
 # Install
-npm install
+npm clean-install
 ```
 
 You will need to configure the environment variables by creating an `.env` file at

components/Application/GuildSettings/GuildSettings.tsx

@@ -87,7 +87,11 @@ export const GuildSettings: React.FC = () => {
       const formData = new FormData()
       formData.append('icon', file)
       try {
-        await authentication.api.put(`/guilds/${guild.id}/icon`, formData)
+        await authentication.api.put(`/guilds/${guild.id}/icon`, formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          }
+        })
         setFetchState('idle')
       } catch (error) {
         setFetchState('error')

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

@@ -50,7 +50,8 @@ export const MessageText: React.FC<MessageContentProps> = (props) => {
           )
         },
         emoji: (props) => {
-          return <Emoji value={props.value} size={20} tooltip />
+          const { value } = props
+          return <Emoji value={value} size={20} tooltip />
         },
         code: (properties) => {
           const { inline, className, children, ...props } = properties

components/Application/SendMessage/SendMessage.tsx

@@ -60,7 +60,12 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
       formData.append('file', file)
       await authentication.api.post(
         `/channels/${path.channelId}/messages/uploads`,
-        formData
+        formData,
+        {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          }
+        }
       )
     }
   }

components/Application/UserSettings/UserSettings.tsx

@@ -156,7 +156,12 @@ export const UserSettings: React.FC = () => {
       try {
         const { data } = await authentication.api.put(
           `/users/current/logo`,
-          formData
+          formData,
+          {
+            headers: {
+              'Content-Type': 'multipart/form-data'
+            }
+          }
         )
         setUser((oldUser) => {
           return {

components/Head.tsx

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

components/Header/Header.tsx

@@ -15,7 +15,7 @@ export const Header: React.FC = () => {
               quality={100}
               width={60}
               height={60}
-              src='/images/icons/Thream.png'
+              src='/images/Thream.png'
               alt='Thream'
             />
             <span className='ml-1 hidden font-headline font-medium text-green-800 dark:text-green-400 xs:block'>

components/design/Loader/Loader.tsx

@@ -7,10 +7,10 @@ export interface LoaderProps {
 }
 
 export const Loader: React.FC<LoaderProps> = (props) => {
-  const { width = 50, height = 50 } = props
+  const { width = 50, height = 50, className } = props
 
   return (
-    <div className={props.className}>
+    <div className={className}>
       <div
         data-cy='progress-spinner'
         className='relative mx-auto my-0 before:block before:pt-[100%] before:content-none'

cypress.config.ts

@@ -29,7 +29,7 @@ export default defineConfig({
           server = getLocal({ cors: true })
           await server.start(API_DEFAULT_PORT)
           for (const handler of handlers) {
-            const { isFile = false } = handler.response
+            const { isFile = false, statusCode, body } = handler.response
             let requestBuilder = server.forGet(handler.url)
             switch (handler.method) {
               case 'GET':
@@ -47,14 +47,11 @@ export default defineConfig({
             }
             if (isFile) {
               await requestBuilder.thenFromFile(
-                handler.response.statusCode,
+                statusCode,
-                path.join(UPLOADS_FIXTURES_DIRECTORY, ...handler.response.body)
+                path.join(UPLOADS_FIXTURES_DIRECTORY, ...body)
               )
             } else {
-              await requestBuilder.thenJson(
+              await requestBuilder.thenJson(statusCode, body)
-                handler.response.statusCode,
-                handler.response.body
-              )
             }
           }
 

cypress/support/component-index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

docker-compose.yml

@@ -2,10 +2,10 @@ services:
   thream-website:
     container_name: ${COMPOSE_PROJECT_NAME}
     image: 'thream-website'
+    restart: 'unless-stopped'
     build:
       context: './'
-    ports:
+    network_mode: 'host'
-      - '${PORT-3000}:${PORT-3000}'
     environment:
       PORT: ${PORT-3000}
     env_file: '.env'

next.config.js

@@ -1,7 +1,3 @@
-const nextPWA = require('next-pwa')({
-  disable: process.env.NODE_ENV !== 'production',
-  dest: 'public'
-})
 const nextTranslate = require('next-translate-plugin')
 
 /** @type {import("next").NextConfig} */
@@ -10,11 +6,11 @@ const nextConfig = {
   output: 'standalone',
   images: {
     domains: [
-      'api.thream.divlo.fr',
+      'api.thream.theoludwig.fr',
-      'file-uploads-api.thream.divlo.fr',
+      'file-uploads-api.theoludwig.fr',
       ...(process.env.NODE_ENV !== 'production' ? ['127.0.0.1'] : [])
     ]
   }
 }
 
-module.exports = nextTranslate(nextPWA(nextConfig))
+module.exports = nextTranslate(nextConfig)

package.json

@@ -18,33 +18,31 @@
     "lint:commit": "commitlint",
     "lint:editorconfig": "editorconfig-checker",
     "lint:markdown": "markdownlint-cli2",
-    "lint:eslint": "eslint . --ignore-path .gitignore",
+    "lint:eslint": "eslint . --max-warnings 0 --report-unused-disable-directives --ignore-path .gitignore",
-    "lint:prettier": "prettier . --check --ignore-path .gitignore",
+    "lint:prettier": "prettier . --check",
     "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: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",
-    "deploy": "vercel",
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@fontsource/montserrat": "5.0.3",
+    "@fontsource/montserrat": "5.0.5",
-    "@fontsource/roboto": "5.0.3",
+    "@fontsource/roboto": "5.0.5",
     "@heroicons/react": "1.0.6",
-    "@sinclair/typebox": "0.29.0",
+    "@sinclair/typebox": "0.29.6",
-    "@thream/socketio-jwt": "3.1.1",
+    "@thream/socketio-jwt": "3.1.2",
     "axios": "1.4.0",
-    "clsx": "1.2.1",
+    "clsx": "2.0.0",
     "date-and-time": "3.0.2",
     "emoji-mart": "3.0.1",
     "katex": "0.16.8",
     "next": "13.4.7",
-    "next-pwa": "5.6.0",
     "next-themes": "0.2.1",
     "next-translate": "2.4.4",
-    "pretty-bytes": "6.1.0",
+    "pretty-bytes": "6.1.1",
     "react": "18.2.0",
     "react-component-form": "4.1.1",
     "react-dom": "18.2.0",
@@ -53,60 +51,59 @@
     "react-responsive": "9.0.2",
     "react-swipeable": "7.0.1",
     "react-syntax-highlighter": "15.5.0",
-    "react-textarea-autosize": "8.5.1",
+    "react-textarea-autosize": "8.5.2",
     "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.32.1",
+    "sharp": "0.32.4",
     "socket.io-client": "4.7.1",
     "unified": "10.1.2",
     "unist-util-visit": "4.1.2",
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.6.6",
+    "@commitlint/cli": "17.6.7",
-    "@commitlint/config-conventional": "17.6.6",
+    "@commitlint/config-conventional": "17.6.7",
     "@saithodev/semantic-release-backmerge": "3.2.0",
     "@semantic-release/git": "10.0.1",
     "@tsconfig/strictest": "2.0.1",
     "@types/emoji-mart": "3.0.9",
     "@types/hast": "2.3.4",
-    "@types/katex": "0.16.0",
+    "@types/katex": "0.16.1",
-    "@types/node": "20.3.3",
+    "@types/node": "20.4.4",
-    "@types/react": "18.2.14",
+    "@types/react": "18.2.15",
     "@types/react-responsive": "8.0.5",
     "@types/react-syntax-highlighter": "15.5.7",
     "@types/unist": "2.0.6",
-    "@typescript-eslint/eslint-plugin": "5.60.1",
+    "@typescript-eslint/eslint-plugin": "6.1.0",
-    "@typescript-eslint/parser": "5.60.1",
+    "@typescript-eslint/parser": "6.1.0",
     "autoprefixer": "10.4.14",
-    "cypress": "12.16.0",
+    "cypress": "12.17.2",
     "editorconfig-checker": "5.1.1",
-    "eslint": "8.44.0",
+    "eslint": "8.45.0",
-    "eslint-config-conventions": "10.0.0",
+    "eslint-config-conventions": "11.0.1",
     "eslint-config-next": "13.4.7",
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-prettier": "5.0.0",
     "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-unicorn": "47.0.0",
+    "eslint-plugin-unicorn": "48.0.0",
     "html-w3c-validator": "1.4.0",
     "husky": "8.0.3",
     "lint-staged": "13.2.3",
     "markdownlint-cli2": "0.8.1",
     "markdownlint-rule-relative-links": "2.1.0",
-    "mockttp": "3.7.5",
+    "mockttp": "3.9.1",
     "next-translate-plugin": "2.4.4",
     "plop": "3.1.2",
-    "postcss": "8.4.24",
+    "postcss": "8.4.27",
-    "prettier": "2.8.8",
+    "prettier": "3.0.0",
-    "prettier-plugin-tailwindcss": "0.3.0",
+    "prettier-plugin-tailwindcss": "0.4.1",
-    "semantic-release": "21.0.6",
+    "semantic-release": "21.0.7",
     "start-server-and-test": "2.0.0",
-    "tailwindcss": "3.3.2",
+    "tailwindcss": "3.3.3",
-    "typescript": "5.0.4",
+    "typescript": "5.1.6"
-    "vercel": "31.0.1"
   }
 }

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

@@ -64,7 +64,7 @@ export const getServerSideProps = authenticationFromServerSide({
   fetchData: async (context, api) => {
     const channelId = Number(context?.params?.['channelId'])
     const guildId = Number(context?.params?.['guildId'])
-    if (isNaN(channelId) || isNaN(guildId)) {
+    if (Number.isNaN(channelId) || Number.isNaN(guildId)) {
       return {
         notFound: true
       }

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

@@ -59,7 +59,7 @@ export const getServerSideProps = authenticationFromServerSide({
   fetchData: async (context, api) => {
     const channelId = Number(context?.params?.['channelId'])
     const guildId = Number(context?.params?.['guildId'])
-    if (isNaN(channelId) || isNaN(guildId)) {
+    if (Number.isNaN(channelId) || Number.isNaN(guildId)) {
       return {
         notFound: true
       }

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

@@ -45,7 +45,7 @@ export const getServerSideProps = authenticationFromServerSide({
   shouldBeAuthenticated: true,
   fetchData: async (context, api) => {
     const guildId = Number(context?.params?.['guildId'])
-    if (isNaN(guildId)) {
+    if (Number.isNaN(guildId)) {
       return {
         notFound: true
       }

pages/application/[guildId]/settings.tsx

@@ -42,7 +42,7 @@ export const getServerSideProps = authenticationFromServerSide({
   shouldBeAuthenticated: true,
   fetchData: async (context, api) => {
     const guildId = Number(context?.params?.['guildId'])
-    if (isNaN(guildId)) {
+    if (Number.isNaN(guildId)) {
       return {
         notFound: true
       }

pages/application/users/[userId]/index.tsx

@@ -36,7 +36,7 @@ export const getServerSideProps = authenticationFromServerSide({
   shouldBeAuthenticated: true,
   fetchData: async (context, api) => {
     const userId = Number(context?.params?.['userId'])
-    if (isNaN(userId)) {
+    if (Number.isNaN(userId)) {
       return {
         notFound: true
       }

public/manifest.json

@@ -1,51 +0,0 @@
-{
-  "name": "Thream",
-  "short_name": "Thream",
-  "theme_color": "#27B05E",
-  "background_color": "#262B3F",
-  "start_url": "/",
-  "display": "standalone",
-  "icons": [
-    {
-      "src": "images/icons/72x72.png",
-      "sizes": "72x72",
-      "type": "image/png"
-    },
-    {
-      "src": "images/icons/96x96.png",
-      "sizes": "96x96",
-      "type": "image/png"
-    },
-    {
-      "src": "images/icons/128x128.png",
-      "sizes": "128x128",
-      "type": "image/png"
-    },
-    {
-      "src": "images/icons/144x144.png",
-      "sizes": "144x144",
-      "type": "image/png"
-    },
-    {
-      "src": "images/icons/152x152.png",
-      "sizes": "152x152",
-      "type": "image/png"
-    },
-    {
-      "src": "images/icons/192x192.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "maskable"
-    },
-    {
-      "src": "images/icons/384x384.png",
-      "sizes": "384x384",
-      "type": "image/png"
-    },
-    {
-      "src": "images/icons/512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ]
-}

tools/api.ts

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

vercel.json

@@ -1,6 +0,0 @@
-{
-  "$schema": "https://openapi.vercel.sh/vercel.json",
-  "github": {
-    "enabled": false
-  }
-}