Migrate Next to version 15 and eslint to version 9 (#138)

* Add Yarn configuration, update Next.js and React versions, and refactor cookie handling

* Update package dependencies and ESLint configuration, refactor hooks and components for improved functionality

* Update every non-breaking package

* Modify imported shadcn-ui compoponents

* Update react-day-picker to version 9.3.0 and enhance badge and calendar components with new variants

* Update ESLint configuration, add launch options for next and add types to pdf download

* Separate utility functions, so the pdf generation can run on the client

* Remove eslint config from root project and fix errors in frontend

* Add new eslint config file to backend as well

* Enable corepack and yarn v4 in github analysis action

* Fix import and conditional useCallback

* Update React from rc to stable version

* Update react icons

* Fix react icon import

* Generate prisma client in build github actions

* Update JSX import

* Update Next minor version

* Update Buffer to Uint8Array in images, and prisma to v6

* Refactor image handling to return Buffer instead of Uint8Array and update controller methods to specify return types

* Remove prisma dependency from frontend

- I don't know why it was there
- Please don't check git blame, it was not me, I promise

* Add new docker compose files

- one container for running only the db
- and another for running the entire backend locally

* Fix image loading

- If a user or an application period had no pfp/background set, it would call the backend in an endless loop
- Now it fetches the images using useFetch with the cacheBuster, so the images still automatically reload upon uploading
- Also set a padding on the badges to make the look nicer

* Fix minor errors

- Footer was not at the end of page
- Fix eslint not used variable errors
- Center the footer

* Fix eslint errors

.github/workflows/analysis.yml

@@ -23,6 +23,12 @@ jobs:
         with:
           node-version: 20
 
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Use Yarn v4
+        run: corepack prepare [email protected] --activate
+
       - name: Install dependencies
         run: yarn install
 
@@ -41,6 +47,12 @@ jobs:
         with:
           node-version: 20
 
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Use Yarn v4
+        run: corepack prepare [email protected] --activate
+
       - name: Install dependencies
         run: yarn install
 
@@ -62,8 +74,18 @@ jobs:
         with:
           node-version: 20
 
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Use Yarn v4
+        run: corepack prepare [email protected] --activate
+
       - name: Install dependencies
         run: yarn install
 
+      - name: Generate Prisma Client
+        working-directory: apps/backend
+        run: yarn prisma generate
+
       - name: Build
         run: yarn build:backend

.vscode/launch.json

@@ -11,6 +11,48 @@
       "outputCapture": "std",
       "type": "node",
       "restart": true
+    },
+    {
+      "name": "Next.js: debug server-side",
+      "cwd": "${workspaceFolder}/apps/frontend",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "yarn dev"
+    },
+    {
+      "name": "Next.js: debug client-side",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    },
+    {
+      "name": "Next.js: debug client-side (Firefox)",
+      "type": "firefox",
+      "request": "launch",
+      "url": "http://localhost:3000",
+      "reAttach": true,
+      "pathMappings": [
+        {
+          "url": "webpack://_N_E",
+          "path": "${workspaceFolder}/apps/frontend"
+        }
+      ]
+    },
+    {
+      "name": "Next.js: debug full stack",
+      "cwd": "${workspaceFolder}/apps/frontend",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceFolder}/apps/frontend/node_modules/.bin/next",
+      "runtimeArgs": ["--inspect"],
+      "skipFiles": ["<node_internals>/**"],
+      "serverReadyAction": {
+        "action": "debugWithEdge",
+        "killOnServerStop": true,
+        "pattern": "- Local:.+(https?://.+)",
+        "uriFormat": "%s",
+        "webRoot": "${workspaceFolder}/apps/frontend"
+      }
     }
   ]
 }

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -1,7 +1,9 @@
 # SCHBody💪
+
 by Kir-Dev
 
 A Schönherz Kollégium konditermének weboldala és adminisztrációs rendszere.
+
 - Ha hibát találsz, kérlek nyiss egy issue-t!
 - Ha részt akarsz venni a fejlesztésben, vedd fel a kapcsolatot velünk és nyiss egy pull requestet!
 
@@ -10,7 +12,7 @@ A Schönherz Kollégium konditermének weboldala és adminisztrációs rendszere
 ### Prerequisites
 
 - Node.js 20
-- Yarn 1.22
+- Yarn 4.5.1
 
 ### Installation
 
@@ -81,6 +83,3 @@ yarn build:backend
 ```
 
 ## Happy Coding!
-
-
-

apps/backend/docker-compose-db.yaml

@@ -0,0 +1,17 @@
+name: schbody-dev-db
+
+services:
+  postgres:
+    image: postgres:13.10
+    restart: always
+    environment:
+      POSTGRES_USER: ${POSTGRES_USER}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+      POSTGRES_DB: ${POSTGRES_DB}
+    ports:
+      - '5432:5432'
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+
+volumes:
+  postgres_data: {}

apps/backend/docker-compose-dev.yaml

@@ -0,0 +1,26 @@
+name: schbody
+
+services:
+  app:
+    build:
+      context: .
+    ports:
+      - '${BACKEND_PORT}:${BACKEND_PORT}'
+    env_file:
+      - .env
+    restart: always
+    depends_on:
+      - db
+
+  db:
+    image: postgres:13.10
+    env_file:
+      - .env
+    restart: always
+    ports:
+      - '${POSTGRES_PORT}:${POSTGRES_PORT}'
+    volumes:
+      - schbody_db_folder:/var/lib/postgresql/data
+
+volumes:
+  schbody_db_folder:

apps/backend/eslint.config.mjs

@@ -0,0 +1,48 @@
+import { FlatCompat } from '@eslint/eslintrc';
+import js from '@eslint/js';
+import typescriptEslintEslintPlugin from '@typescript-eslint/eslint-plugin';
+import tsParser from '@typescript-eslint/parser';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+const config = [
+  {
+    ignores: ['**/.prettierrc.js'],
+  },
+  ...compat.extends('plugin:@typescript-eslint/recommended', 'nestjs', 'plugin:@next/next/recommended'),
+  {
+    plugins: {
+      '@typescript-eslint': typescriptEslintEslintPlugin,
+    },
+
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+
+      parserOptions: {
+        project: 'tsconfig.json',
+        tsconfigRootDir: __dirname,
+      },
+    },
+
+    rules: {
+      '@typescript-eslint/interface-name-prefix': 'off',
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-empty-function': 'off',
+      '@typescript-eslint/no-extra-semi': 'off',
+      '@typescript-eslint/no-unused-vars': 'error',
+    },
+  },
+];
+
+export default config;

apps/backend/package.json

@@ -12,46 +12,48 @@
     "start:dev": "nest start --watch",
     "start:debug": "nest start --debug --watch",
     "start:prod": "node dist/src/main",
+    "lint": "eslint 'src/**/*.ts'",
     "db:seed": "prisma db seed"
   },
   "prisma": {
     "seed": "ts-node prisma/seed.ts"
   },
   "dependencies": {
-    "@kir-dev/passport-authsch": "^2.0.4",
-    "@nestjs/common": "^10.3.8",
-    "@nestjs/config": "^3.2.3",
-    "@nestjs/core": "^10.3.8",
+    "@kir-dev/passport-authsch": "^2.1.0",
+    "@nestjs/common": "^10.4.7",
+    "@nestjs/config": "^3.3.0",
+    "@nestjs/core": "^10.4.7",
     "@nestjs/jwt": "^10.2.0",
     "@nestjs/passport": "^10.0.3",
-    "@nestjs/platform-express": "^10.3.8",
-    "@nestjs/swagger": "^7.3.1",
-    "@prisma/client": "^5.21.1",
-    "@radix-ui/react-dialog": "^1.1.1",
+    "@nestjs/platform-express": "^10.4.7",
+    "@nestjs/swagger": "^8.0.3",
+    "@prisma/client": "^6.0.1",
+    "@radix-ui/react-dialog": "^1.1.2",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.1",
     "nestjs-prisma": "^0.23.0",
     "passport": "^0.7.0",
     "passport-jwt": "^4.0.1",
     "reflect-metadata": "^0.2.2",
-    "rimraf": "^5.0.5",
+    "rimraf": "^6.0.1",
     "rxjs": "^7.8.1",
     "sharp": "^0.33.5"
   },
   "devDependencies": {
-    "@faker-js/faker": "^9.0.3",
-    "@nestjs/cli": "^10.3.2",
-    "@nestjs/schematics": "^10.1.1",
-    "@types/express": "^4.17.21",
+    "@faker-js/faker": "^9.2.0",
+    "@nestjs/cli": "^10.4.7",
+    "@nestjs/schematics": "^10.2.3",
+    "@types/express": "^5.0.0",
     "@types/multer": "^1.4.12",
-    "@types/node": "^20.12.7",
-    "@typescript-eslint/eslint-plugin": "^7.7.1",
-    "@typescript-eslint/parser": "^7.7.1",
-    "prisma": "^5.21.1",
+    "@types/node": "^20.17.6",
+    "eslint": "^9.14.0",
+    "eslint-config-nestjs": "^0.8.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "prisma": "^6.0.1",
     "source-map-support": "^0.5.21",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
     "tsconfig-paths": "4.2.0",
-    "typescript": "^5.4.5"
+    "typescript": "^5.6.3"
   }
 }

apps/backend/src/application-period/application-period.controller.ts

@@ -51,7 +51,7 @@ export class ApplicationPeriodController {
   }
 
   @Get(':id/pass-bg')
-  async findPassBackground(@Param('id', ParseIntPipe) id: number) {
+  async findPassBackground(@Param('id', ParseIntPipe) id: number): Promise<StreamableFile> {
     return new StreamableFile(await this.applicationPeriodService.findPassBackground(id));
   }
 

apps/backend/src/application-period/application-period.service.ts

@@ -96,8 +96,9 @@ export class ApplicationPeriodService {
   async findPassBackground(periodId: number): Promise<Buffer> {
     try {
       const profilePic = await this.prisma.passBackgroundPicture.findUniqueOrThrow({ where: { periodId } });
-      return profilePic.backgroundImage;
-    } catch (error) {
+      const imageBuffer = Buffer.from(profilePic.backgroundImage.buffer);
+      return imageBuffer;
+    } catch (_error) {
       throw new NotFoundException(`Period with id ${periodId} not found`);
     }
   }
@@ -152,7 +153,7 @@ export class ApplicationPeriodService {
     }
     try {
       await this.createOrUpdatePassBg(periodId, buffer);
-    } catch (error) {
+    } catch (_error) {
       throw new NotFoundException(`Period with id ${periodId} not found`);
     }
   }
@@ -187,7 +188,7 @@ export class ApplicationPeriodService {
           id,
         },
       });
-    } catch (e) {
+    } catch (_e) {
       throw new NotFoundException('Application period not found');
     }
   }