⬆️(dependencies) update js dependencies

.circleci/config.yml

@@ -211,7 +211,7 @@ jobs:
   # ---- mail jobs ----
   build-mails:
     docker:
-      - image: cimg/node:16.15
+      - image: cimg/node:18.18
         auth:
           username: $DOCKER_HUB_USER
           password: $DOCKER_HUB_PASSWORD
@@ -242,7 +242,7 @@ jobs:
   # ---- frontend admin jobs ----
   build-front-admin:
     docker:
-      - image: cimg/node:16.15
+      - image: cimg/node:18.18
         auth:
           username: $DOCKER_HUB_USER
           password: $DOCKER_HUB_PASSWORD
@@ -274,7 +274,7 @@ jobs:
 
   lint-front-admin:
     docker:
-      - image: cimg/node:16.15
+      - image: cimg/node:18.18
         auth:
           username: $DOCKER_HUB_USER
           password: $DOCKER_HUB_PASSWORD
@@ -292,7 +292,7 @@ jobs:
 
   test-front-admin:
     docker:
-      - image: cimg/node:16.15
+      - image: cimg/node:18.18
         auth:
           username: $DOCKER_HUB_USER
           password: $DOCKER_HUB_PASSWORD
@@ -486,7 +486,7 @@ jobs:
   # ---- DockerHub publication job ----
   hub:
     docker:
-      - image: cimg/base:2022.05
+      - image: cimg/base:2023.10
     working_directory: ~/joanie
     steps:
       # Checkout repository sources
@@ -496,7 +496,7 @@ jobs:
       - <<: *generate-version-file
       # Activate docker-in-docker
       - setup_remote_docker:
-          version: 20.10.7
+          version: 20.10.23
       - run:
           name: Build production image
           command: docker build -t joanie:${CIRCLE_SHA1} --target production .

docker-compose.yml

@@ -83,7 +83,7 @@ services:
     working_dir: /app
 
   mail-generator:
-    image: node:16.15
+    image: node:18.18
     user: "${DOCKER_USER:-1000}"
     environment:
       HOME: /tmp
@@ -92,7 +92,7 @@ services:
     working_dir: /app/src/mail
 
   admin-dev:
-    image: node:16.15
+    image: node:18.18
     user: "${DOCKER_USER:-1000}"
     environment:
       HOME: /tmp

renovate.json

@@ -18,8 +18,7 @@
         "npm"
       ],
       "matchPackageNames": [
-        "node",
-        "typescript"
+        "node"
       ]
     }
   ]

src/frontend/admin/package.json

@@ -21,80 +21,80 @@
     "@faker-js/faker": "8.2.0",
     "@fontsource/roboto": "5.0.8",
     "@hookform/resolvers": "3.3.2",
-    "@mui/icons-material": "5.14.13",
-    "@mui/lab": "5.0.0-alpha.148",
-    "@mui/material": "5.14.13",
-    "@mui/x-data-grid": "6.16.2",
-    "@mui/x-date-pickers": "6.16.2",
-    "@tanstack/react-query": "4.36.1",
-    "@tanstack/react-query-devtools": "4.36.1",
+    "@mui/icons-material": "5.14.15",
+    "@mui/lab": "5.0.0-alpha.150",
+    "@mui/material": "5.14.15",
+    "@mui/x-data-grid": "6.17.0",
+    "@mui/x-date-pickers": "6.17.0",
+    "@tanstack/react-query": "5.4.3",
+    "@tanstack/react-query-devtools": "5.4.3",
     "@uiw/react-markdown-preview": "4.1.16",
-    "@uiw/react-md-editor": "3.23.6",
+    "@uiw/react-md-editor": "3.24.1",
     "babel-plugin-transform-remove-imports": "1.7.0",
     "classnames": "2.3.2",
     "date-fns": "2.30.0",
     "js-cookie": "3.0.5",
-    "next": "13.5.5",
+    "msw": "1.3.2",
+    "next": "14.0.0",
     "notistack": "3.0.1",
     "object-to-formdata": "4.5.1",
     "query-string": "8.1.0",
     "react": "18.2.0",
     "react-beautiful-dnd": "13.1.1",
     "react-dom": "18.2.0",
     "react-hook-form": "7.47.0",
-    "react-intl": "6.5.0",
+    "react-intl": "6.5.1",
     "react-transition-group": "4.4.5",
-    "sass": "1.69.3",
-    "typescript": "<5",
+    "sass": "1.69.5",
+    "typescript": "5.2.2",
     "use-debounce": "9.0.4",
     "yup": "1.3.2"
   },
   "devDependencies": {
-    "@babel/core": "7.23.0",
+    "@babel/core": "7.23.2",
     "@formatjs/cli": "6.2.1",
     "@jest/globals": "29.7.0",
     "@testing-library/jest-dom": "6.1.4",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.5.1",
-    "@types/jest": "29.5.5",
-    "@types/js-cookie": "3.0.4",
-    "@types/node": "18.18.5",
-    "@types/react": "18.2.28",
-    "@types/react-beautiful-dnd": "13.1.5",
-    "@types/react-dom": "18.2.13",
+    "@types/jest": "29.5.6",
+    "@types/js-cookie": "3.0.5",
+    "@types/node": "20.8.9",
+    "@types/react": "18.2.33",
+    "@types/react-beautiful-dnd": "13.1.6",
+    "@types/react-dom": "18.2.14",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.8.0",
-    "@typescript-eslint/parser": "6.8.0",
+    "@typescript-eslint/eslint-plugin": "6.9.0",
+    "@typescript-eslint/parser": "6.9.0",
     "@uiw/react-markdown-preview": "4.1.16",
-    "@uiw/react-md-editor": "3.23.6",
+    "@uiw/react-md-editor": "3.24.1",
     "babel-loader": "9.1.3",
     "babel-plugin-transform-remove-imports": "1.7.0",
-    "eslint": "8.51.0",
+    "eslint": "8.52.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "17.1.0",
-    "eslint-config-next": "13.5.5",
+    "eslint-config-next": "14.0.0",
     "eslint-config-prettier": "9.0.0",
-    "eslint-import-resolver-webpack": "0.13.7",
+    "eslint-import-resolver-webpack": "0.13.8",
     "eslint-plugin-compat": "4.2.0",
     "eslint-plugin-formatjs": "4.11.0",
-    "eslint-plugin-import": "2.28.1",
-    "eslint-plugin-jest": "27.4.2",
+    "eslint-plugin-import": "2.29.0",
+    "eslint-plugin-jest": "27.6.0",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-prettier": "5.0.1",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "msw": "1.3.2",
     "next-remove-imports": "1.0.12",
     "next-router-mock": "0.9.10",
     "node-fetch": "3.3.2",
     "prettier": "3.0.3",
     "whatwg-fetch": "3.6.19"
   },
   "resolutions": {
-    "@types/react": "18.2.28",
-    "@types/react-dom": "18.2.13"
+    "@types/react": "18.2.33",
+    "@types/react-dom": "18.2.14"
   },
   "msw": {
     "workerDirectory": "public"

src/frontend/admin/src/components/presentational/table/usePaginatedTableResource.ts

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { GridPaginationModel } from "@mui/x-data-grid";
 import { useDebouncedCallback } from "use-debounce";
+import { keepPreviousData } from "@tanstack/react-query";
 import { Resource, useResources } from "@/hooks/useResources";
 import { Maybe } from "@/types/utils";
 import { DEFAULT_PAGE_SIZE, DEFAULT_SEARCH_DEBOUNCE } from "@/utils/constants";
@@ -25,7 +26,7 @@ export const usePaginatedTableResource = <T extends Resource>({
       query,
       page: currentPage + 1,
     },
-    { keepPreviousData: true },
+    { placeholderData: keepPreviousData },
   );
 
   const debouncedSetQuery = useDebouncedCallback((term: string) => {

src/frontend/admin/src/components/testing/TestingWrapper.tsx

@@ -10,7 +10,7 @@ import { REACT_QUERY_SETTINGS } from "@/utils/settings";
 const client = new QueryClient({
   defaultOptions: {
     queries: {
-      cacheTime: REACT_QUERY_SETTINGS.cacheTime,
+      gcTime: REACT_QUERY_SETTINGS.cacheTime,
       staleTime: REACT_QUERY_SETTINGS.staleTimes.session,
       ...REACT_QUERY_SETTINGS.queries,
     },

src/frontend/admin/src/hooks/useAllLanguages/useAllLanguages.tsx

@@ -2,13 +2,14 @@ import { useQuery } from "@tanstack/react-query";
 import { CoursesRunsRepository } from "@/services/repositories/courses-runs/CoursesRunsRepository";
 
 export const useAllLanguages = () => {
-  const languages = useQuery(
-    ["allLanguages"],
-    async () => {
+  const languages = useQuery({
+    queryKey: ["allLanguages"],
+    staleTime: Infinity,
+    gcTime: Infinity,
+    queryFn: async () => {
       return CoursesRunsRepository.getAllLanguages();
     },
-    { staleTime: Infinity, cacheTime: Infinity },
-  );
+  });
 
   return languages?.data ?? undefined;
 };

src/frontend/admin/src/hooks/useCourses/useCourses.tsx

@@ -130,13 +130,14 @@ export const useCourses = (
 export const useCourse = useResource(props);
 
 export const useAllCourseAccesses = (): SelectOption[] | undefined => {
-  const accesses = useQuery(
-    ["allCourseAccesses"],
-    async () => {
+  const accesses = useQuery({
+    queryKey: ["allCourseAccesses"],
+    queryFn: async () => {
       return CourseRepository.getAvailableAccesses();
     },
-    { staleTime: Infinity, cacheTime: Infinity },
-  );
+    staleTime: Infinity,
+    gcTime: Infinity,
+  });
 
   return accesses?.data ?? undefined;
 };

src/frontend/admin/src/hooks/useOrganizations/useOrganizations.tsx

@@ -141,13 +141,14 @@ export const useOrganizations = (
 export const useOrganization = useResource(props);
 
 export const useAllOrganizationAccesses = (): SelectOption[] | undefined => {
-  const accesses = useQuery(
-    ["allOrganizationAccesses"],
-    async () => {
+  const accesses = useQuery({
+    queryKey: ["allOrganizationAccesses"],
+    queryFn: async () => {
       return OrganizationRepository.getAvailableAccesses();
     },
-    { staleTime: Infinity, cacheTime: Infinity },
-  );
+    staleTime: Infinity,
+    gcTime: Infinity,
+  });
 
   return accesses?.data ?? undefined;
 };