chore: upgrade project stack

.eslintrc.json

@@ -2,7 +2,7 @@
   "extends": "next/core-web-vitals",
   "rules": {
     "react-hooks/exhaustive-deps": "off",
-    "no-console": ["error", { "allow": ["warn", "error", "info"] }],
+    "no-console": "off",
     "react/no-unescaped-entities": "off"
   }
 }

.github/workflows/check.yml

@@ -5,5 +5,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
       - name: Check dependencies and build
         run: yarn && yarn build

docker-compose.yml

@@ -1,8 +1,6 @@
-version: "3.6"
-
 services:
   postgres:
-    image: postgres:12
+    image: postgres:14
     restart: always
     environment:
       POSTGRES_USER: training-platform
@@ -22,4 +20,4 @@ services:
 
 volumes:
   postgresql:
-  postgresql_data:
+  postgresql_data:

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

package.json

@@ -2,18 +2,20 @@
   "name": "with-typescript",
   "version": "1.0.0",
   "scripts": {
-    "dev": "nodemon server.js & yarn ts:watch",
+    "dev": "ts-node server.ts",
     "ts": "tsc --noEmit --incremental",
     "ts:watch": "yarn ts --watch",
-    "build": "next build && tsc --project tsconfig.server.json",
+    "build": "next build",
     "start": "NODE_ENV=production node dist/server.js",
     "type-check": "tsc",
     "export": "ts-node -T scripts/export.ts",
     "create-admin-user": "ts-node -T scripts/createAdminUser.ts",
-    "prepare": "husky install",
     "lint": "next lint",
     "vercel-build": "cp -R ../courses ./ && prisma generate && prisma migrate deploy && next build"
   },
+  "engines": {
+    "node": ">=20"
+  },
   "dependencies": {
     "@chakra-ui/icons": "^1.0.13",
     "@chakra-ui/react": "^1.6.3",
@@ -23,9 +25,9 @@
     "@hookform/resolvers": "^2.9.6",
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@next-auth/prisma-adapter": "^0.4.4-canary.64",
+    "@next-auth/prisma-adapter": "^1.0.7",
     "@next/mdx": "^10.2.3",
-    "@prisma/client": "^2.24.0",
+    "@prisma/client": "^5.16.1",
     "@react-hook/throttle": "^2.2.0",
     "@react-hook/window-size": "^3.0.7",
     "@sentry/cli": "^1.68.0",
@@ -41,15 +43,16 @@
     "framer-motion": "^4",
     "lz-string": "^1.5.0",
     "mermaid": "^8.12.0",
-    "next": "11.1.2",
-    "next-auth": "^3.29.0",
+    "next": "14.2.4",
+    "next-auth": "^4.24.7",
     "next-mdx-remote": "^3.0.2",
     "next-remove-imports": "^1.0.6",
+    "nodemailer": "^6.9.14",
     "nodemon": "^2.0.12",
     "prettier": "^2.3.2",
     "prism-react-renderer": "^1.2.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-full-screen": "^1.0.2",
     "react-hook-form": "^7.33.1",
     "react-icons": "4.2.0",
@@ -66,16 +69,15 @@
   "devDependencies": {
     "@types/node": "^12.12.21",
     "@types/prismjs": "^1.16.5",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "babel-plugin-superjson-next": "^0.4.0",
     "eslint": "7.32.0",
     "eslint-config-next": "12.2.5",
-    "husky": "^8.0.0",
-    "prisma": "^2.30.2",
+    "prisma": "^5.16.1",
     "puppeteer": "^10.0.0",
-    "ts-node": "^10.0.0",
-    "typescript": "^4.3.2"
+    "ts-node": "^10.9.2",
+    "typescript": "^4.9.5"
   },
   "license": "MIT"
 }

prisma/migrations/20240705132740_update_auth/migration.sql

@@ -0,0 +1,64 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `accessToken` on the `Session` table. All the data in the column will be lost.
+  - You are about to drop the `VerificationRequest` table. If the table is not empty, all the data it contains will be lost.
+
+*/
+-- DropForeignKey
+ALTER TABLE "Account" DROP CONSTRAINT "Account_userId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "Account" DROP CONSTRAINT "account_user_id";
+
+-- DropForeignKey
+ALTER TABLE "Session" DROP CONSTRAINT "Session_userId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "Session" DROP CONSTRAINT "session_user_id";
+
+-- DropForeignKey
+ALTER TABLE "Training" DROP CONSTRAINT "Training_userId_fkey";
+
+-- DropIndex
+DROP INDEX "Session.accessToken_unique";
+
+-- AlterTable
+ALTER TABLE "Session" DROP COLUMN "accessToken";
+
+-- DropTable
+DROP TABLE "VerificationRequest";
+
+-- CreateTable
+CREATE TABLE "verification_tokens" (
+    "identifier" TEXT NOT NULL,
+    "token" TEXT NOT NULL,
+    "expires" TIMESTAMP(3) NOT NULL
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "verification_tokens_token_key" ON "verification_tokens"("token");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "verification_tokens_identifier_token_key" ON "verification_tokens"("identifier", "token");
+
+-- AddForeignKey
+ALTER TABLE "Account" ADD CONSTRAINT "Account_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Session" ADD CONSTRAINT "Session_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Training" ADD CONSTRAINT "Training_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- RenameIndex
+ALTER INDEX "Account.providerId_providerAccountId_unique" RENAME TO "Account_providerId_providerAccountId_key";
+
+-- RenameIndex
+ALTER INDEX "Session.sessionToken_unique" RENAME TO "Session_sessionToken_key";
+
+-- RenameIndex
+ALTER INDEX "Training.slug_unique" RENAME TO "Training_slug_key";
+
+-- RenameIndex
+ALTER INDEX "User.email_unique" RENAME TO "User_email_key";

prisma/schema.prisma

@@ -28,47 +28,44 @@ model Session {
   userId       String
   expires      DateTime
   sessionToken String   @unique
-  accessToken  String   @unique
   createdAt    DateTime @default(now())
   updatedAt    DateTime @updatedAt
   user         User     @relation(fields: [userId], references: [id])
 }
 
 model User {
-  id            String    @id @default(cuid())
+  id            String     @id @default(cuid())
   name          String?
-  email         String?   @unique
+  email         String?    @unique
   emailVerified DateTime?
-  role          String    @default("trainee")
+  role          String     @default("trainee")
   image         String?
-  createdAt     DateTime  @default(now())
-  updatedAt     DateTime  @updatedAt
+  createdAt     DateTime   @default(now())
+  updatedAt     DateTime   @updatedAt
   courses       String[]
   accounts      Account[]
   sessions      Session[]
   trainings     Training[]
 }
 
-model VerificationRequest {
-  id         String   @id @default(cuid())
+model VerificationToken {
   identifier String
   token      String   @unique
   expires    DateTime
-  createdAt  DateTime @default(now())
-  updatedAt  DateTime @updatedAt
 
   @@unique([identifier, token])
+  @@map("verification_tokens")
 }
 
 model Training {
-  id           String   @id @default(cuid())
-  title        String
-  slug         String   @unique
-  description  String
-  isDownloadable     Boolean @default(true)
-  createdAt    DateTime @default(now()) 
-  updatedAt    DateTime @updatedAt
-  userId       String
+  id             String   @id @default(cuid())
+  title          String
+  slug           String   @unique
+  description    String
+  isDownloadable Boolean  @default(true)
+  createdAt      DateTime @default(now())
+  updatedAt      DateTime @updatedAt
+  userId         String
   author         User     @relation(fields: [userId], references: [id])
-  chaptersInfo Json?
+  chaptersInfo   Json?
 }

src/components/ConfirmButton.tsx

@@ -29,6 +29,7 @@ const ConfirmButton = ({
   return (
     <>
       <Popover>
+        {/* @ts-expect-error */}
         <PopoverTrigger>
           {icon ? (
             <IconButton icon={icon} aria-label={label} {...rest} />

src/components/Layout.tsx

@@ -1,9 +1,9 @@
 import { Box, Flex } from "@chakra-ui/react";
-import { useSession } from "next-auth/client";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import React, { ReactNode } from "react";
 import NavBar from "./navigation/NavBar";
+import { useSession } from "next-auth/react";
 
 type LayoutProps = {
   children?: ReactNode;
@@ -14,7 +14,7 @@ const Layout = ({ children, title = "Training Platform" }: LayoutProps) => {
   const router = useRouter();
   const isSlide = router.route === "/[course]/[chapter]";
   const print = router.query.print !== undefined;
-  const [session, _] = useSession();
+  const { data: session } = useSession();
 
   return (
     <Box minH="100vh">

src/components/course/CourseForm.tsx

@@ -7,7 +7,7 @@ import { Box, Button, Center, Stack, Text } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import SwitchField from "../fields/SwitchField";
 import { Training } from "@prisma/client";
-import { useSession } from "next-auth/client";
+import { useSession } from "next-auth/react";
 // import { CopyIcon } from "@chakra-ui/icons";
 import ChapterInfosField from "./ChapterInfosField";
 
@@ -21,7 +21,7 @@ export type ChapterInfo = {
 };
 const CourseForm = ({ course, chaptersCount }: ICourseFormProps) => {
   const router = useRouter();
-  const [session, _] = useSession();
+  const { data: session } = useSession();
 
   const getInitialValues = () => {
     if (course) {

src/components/course/NoCourse.tsx

@@ -1,9 +1,9 @@
 import { Text, Box, SimpleGrid, Stack } from "@chakra-ui/react";
-import { useSession } from "next-auth/client";
+import { useSession } from "next-auth/react";
 import { isStaff } from "src/utils/users";
 
 const NoCourse = () => {
-  const [session, _] = useSession();
+  const { data: session } = useSession();
 
   return (
     <>

src/components/fields/TextField.tsx

@@ -31,6 +31,7 @@ const TextField = ({ name, label, placeholder, disabled }: ITextInputProps) => {
       />
       {hasError && (
         <FormErrorMessage>
+          {/* @ts-expect-error */}
           <p>{errors[name]?.message}</p>
         </FormErrorMessage>
       )}

src/components/homes/ConnectedHome.tsx

@@ -1,11 +1,11 @@
 import { Box, Text, VStack } from "@chakra-ui/react";
-import { useSession } from "next-auth/client";
+import { useSession } from "next-auth/react";
 import { CourseType } from "src/pages";
 import AvailableCourses from "../course/AvailableCourses";
 import NoCourse from "../course/NoCourse";
 
 const ConnectedHome = ({ courses }: { courses: CourseType[] }) => {
-  const [session, _] = useSession();
+  const { data: session } = useSession();
 
   return (
     <Box paddingY={30} width="90vw" maxWidth="container.xl" marginX="auto">

src/components/mdx/MDXProvider.tsx

@@ -114,6 +114,7 @@ export const courseMapComponents = {
 };
 
 const MDXProvider = ({ children, courseMap }: ChildrenProp) => (
+  // @ts-ignore
   <MDXDefaultProvider
     components={{ ...mdComponents, ...(courseMap && courseMapComponents) }}
   >

src/components/mdx/Slides.tsx

@@ -21,6 +21,7 @@ const Slides: React.FC<SlidesProps> = ({ children, title, course }) => {
   const { setTotalSlides, currentMode, currentSlide } = useSlidesContext();
   const { slideWidth, slideHeight } = useSlideRatioStyle();
   const { slides, notes } = getSlidesFromMdxElements(
+    // @ts-expect-error
     children as React.ReactElement[]
   );
   useEffect(() => {

src/components/navigation/UserDropdown.tsx

@@ -8,7 +8,7 @@ import {
   HStack,
   Icon,
 } from "@chakra-ui/react";
-import { signOut, useSession } from "next-auth/client";
+import { signOut, useSession } from "next-auth/react";
 import { FiLogOut } from "react-icons/fi";
 import { BsBook } from "react-icons/bs";
 import { RiUserAddLine } from "react-icons/ri";
@@ -18,7 +18,7 @@ import UserBadge from "../users/UserBadge";
 import { isStaff } from "src/utils/users";
 
 const UserDropdoown = () => {
-  const [session, _] = useSession();
+  const { data: session } = useSession();
   const userName = session?.user?.name || session?.user?.email;
 
   return (