build(deps): update latest

.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

@@ -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 })

components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.tsx

@@ -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}`)

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

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>

package.json

@@ -7,8 +7,8 @@
     "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,85 @@
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@fontsource/montserrat": "4.5.7",
+    "@fontsource/montserrat": "4.5.10",
     "@fontsource/roboto": "4.5.5",
     "@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.3.1",
     "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",
+    "next": "12.1.6",
+    "next-pwa": "5.5.2",
+    "next-themes": "0.2.0",
+    "next-translate": "1.4.0",
     "pretty-bytes": "6.0.0",
-    "react": "17.0.2",
+    "react": "18.1.0",
     "react-component-form": "3.0.1",
-    "react-dom": "17.0.2",
+    "react-dom": "18.1.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-swipeable": "7.0.0",
     "react-textarea-autosize": "8.3.3",
     "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.4",
+    "socket.io-client": "4.5.0",
     "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": "16.2.4",
+    "@commitlint/config-conventional": "16.2.4",
     "@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.2.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": "17.0.32",
+    "@types/react": "18.0.9",
     "@types/react-responsive": "8.0.5",
     "@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.23.0",
+    "@typescript-eslint/parser": "5.23.0",
+    "autoprefixer": "10.4.7",
+    "cypress": "9.6.1",
     "editorconfig-checker": "4.0.2",
-    "eslint": "8.12.0",
+    "eslint": "8.15.0",
     "eslint-config-conventions": "2.0.0",
-    "eslint-config-next": "12.1.4",
+    "eslint-config-next": "12.1.6",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-prettier": "4.0.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": "12.4.1",
     "markdownlint-cli": "0.31.1",
     "mockttp": "2.7.0",
     "next-secure-headers": "2.2.0",
-    "plop": "3.0.5",
-    "postcss": "8.4.12",
+    "plop": "3.1.0",
+    "postcss": "8.4.13",
     "prettier": "2.6.2",
-    "prettier-plugin-tailwindcss": "0.1.8",
+    "prettier-plugin-tailwindcss": "0.1.10",
     "semantic-release": "19.0.2",
     "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.0.24",
+    "typescript": "4.6.4",
+    "vercel": "24.2.1"
   }
 }

tools/authentication/AuthenticationContext.tsx

@@ -17,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)