minor fix

Lab7/README.txt

@@ -23,8 +23,8 @@ Make sure you have the following installed:
 
 2. Access the services:
 
-   - Your backend service will be available at [http://localhost:8080](http://localhost:8080)
-   - Including Swagger to test the API at [here](http://localhost:8080/swagger-ui/index.html#/)
+   - Your backend service will be available at [http://localhost:3000](http://localhost:3000)
+   - Including Swagger to test the API at [here](http://localhost:3000/docs/)
    - Your database service will be available at [mysql://localhost:3306](mysql://localhost:3306)
    - Your frontend service will be available at [http://localhost:5173](http://localhost:5173)
 

Lab7/backend/Dockerfile

@@ -1,7 +1,61 @@
-FROM oven/bun:alpine
-WORKDIR /home/bun/app
-COPY package.json bun.lockb ./
-RUN bun install
-COPY . .
-EXPOSE 3000
-CMD ["bun", "run", "start"]
+###################
+# BUILD FOR LOCAL DEVELOPMENT
+###################
+
+FROM node:latest As development
+
+# Create app directory
+WORKDIR /usr/src/app
+
+# Copy application dependency manifests to the container image.
+# A wildcard is used to ensure copying both package.json AND package-lock.json (when available).
+# Copying this first prevents re-running npm install on every code change.
+COPY --chown=node:node package*.json ./
+
+# Install app dependencies using the `npm install` command instead of `npm install`
+RUN npm install
+
+# Bundle app source
+COPY --chown=node:node . .
+
+# Use the node user from the image (instead of the root user)
+USER node
+
+###################
+# BUILD FOR PRODUCTION
+###################
+
+FROM node:latest As build
+
+WORKDIR /usr/src/app
+
+COPY --chown=node:node package*.json ./
+
+# In order to run `npm run build` we need access to the Nest CLI which is a dev dependency. In the previous development stage we ran `npm install` which installed all dependencies, so we can copy over the node_modules directory from the development image
+COPY --chown=node:node --from=development /usr/src/app/node_modules ./node_modules
+
+COPY --chown=node:node . .
+
+# Run the build command which creates the production bundle
+RUN npm run build
+
+# Set NODE_ENV environment variable
+ENV NODE_ENV production
+
+# Running `npm install` removes the existing node_modules directory and passing in --only=production ensures that only the production dependencies are installed. This ensures that the node_modules directory is as optimized as possible
+RUN npm install --only=production && npm cache clean --force
+
+USER node
+
+###################
+# PRODUCTION
+###################
+
+FROM node:latest As production
+
+# Copy the bundled code from the build stage to the production image
+COPY --chown=node:node --from=build /usr/src/app/node_modules ./node_modules
+COPY --chown=node:node --from=build /usr/src/app/dist ./dist
+
+# Start the server using the production build
+CMD [ "node", "dist/main.js" ]

Lab7/backend/src/courses-programs/course-program.entity.ts

@@ -1,9 +1,7 @@
 import {
   Entity,
-  PrimaryGeneratedColumn,
   Column,
   ManyToOne,
-  JoinColumn,
   Index,
   Unique,
   PrimaryColumn
@@ -14,7 +12,6 @@ import { Program } from '../programs/program.entity';
 @Entity('course_program')
 @Unique('Key', ['courseId', 'programId'])
 @Index('FK_CourseProgram_Program', ['programId'])
-@Entity()
 export class CourseProgram {
   @PrimaryColumn({ type: 'varchar', length: 255, name: 'course_id'})
   courseId: string;
@@ -29,8 +26,8 @@ export class CourseProgram {
   courseTypeId: number;
 
   @ManyToOne(() => Course, (course) => course.coursePrograms, { onDelete: 'CASCADE', onUpdate: 'CASCADE' })
-  course: Course;
+  course: Course = null;
 
   @ManyToOne(() => Program, (program) => program.coursePrograms, { onDelete: 'CASCADE', onUpdate: 'CASCADE' })
-  program: Program;
+  program: Program = null;
 }

Lab7/backend/src/courses/course.entity.ts

@@ -2,7 +2,7 @@ import { Entity, Column, PrimaryColumn, OneToMany } from 'typeorm';
 import { CourseProgram } from '../courses-programs/course-program.entity';
 import { ApiProperty } from '@nestjs/swagger';
 
-@Entity()
+@Entity("course")
 export class Course {
   @PrimaryColumn({ type: 'varchar', length: 255 })
   @ApiProperty({

Lab7/docker-compose.yml

@@ -1,17 +1,4 @@
 services:
-  # database:
-  #   image: postgres:16.3-alpine3.20
-  #   container_name: database
-  #   environment:
-  #     POSTGRES_DB: university
-  #     POSTGRES_USER: admin
-  #     POSTGRES_PASSWORD: 12345
-
-  #   ports:
-  #     - "5432:5432"
-  #   volumes:
-  #     - ./database/init.sql:/docker-entrypoint-initdb.d/init.sql
-  #     - ./database/sample.sql:/docker-entrypoint-initdb.d/sample.sql
   database:
     image: mysql:latest
     container_name: database
@@ -26,16 +13,15 @@ services:
       - ./database/init.sql:/docker-entrypoint-initdb.d/init.sql
       - ./database/sample.sql:/docker-entrypoint-initdb.d/sample.sql
 
-  server:
-    restart: always
-    build:
-      context: ./backend
-      dockerfile: Dockerfile
-    container_name: backend
-    ports:
-      - "3000:3000"
-    depends_on:
-      - database
+  # server:
+  #   build:
+  #     context: ./backend
+  #     dockerfile: Dockerfile
+  #   container_name: backend
+  #   ports:
+  #     - "3000:3000"
+  #   # depends_on:
+  #   #   - database
 
   app:
     build:

Lab7/frontend/Dockerfile

@@ -4,4 +4,4 @@ COPY package.json bun.lockb ./
 RUN bun install
 COPY . .
 EXPOSE 5173
-CMD ["bun", "start", "dev"]
+CMD ["bun", "run", "dev"]

Lab7/frontend/src/App.tsx

@@ -1,7 +1,7 @@
 import './App.css'
 import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
-import Course from './src/pages/Course';
-import Home from './src/pages/Home';
+import Course from "./pages/Course";
+import Home from './pages/Home';
 function App() {
 
   return (

Lab7/frontend/src/pages/Course.tsx

@@ -2,14 +2,15 @@ import { useEffect, useState } from "react";
 import Course from "../models/Course";
 import CourseProgram from "../models/CourseProgram";
 import Program from "../models/Program";
-import CoureService from "../service/CoureService";
+import CourseService from "../service/CourseService";
 import ProgramService from "../service/ProgramService";
 import CourseProgramService from "../service/CourseProgramService";
 
 const CoursePage: React.FC = () => {
   const [courses, setCourses] = useState<Course[]>([]);
   const [isAdvanceToggled, setisAdvanceToggled] = useState(false);
   const [error, setError] = useState<boolean>(false);
+  const [page, setPage] = useState<number>(1);
 
   useEffect(() => {
     const handleKeyDown = (event: any) => {
@@ -24,7 +25,7 @@ const CoursePage: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    CoureService.get()
+    CourseService.get()
       .then((c) => {
         setCourses(c);
       })
@@ -33,6 +34,28 @@ const CoursePage: React.FC = () => {
         setError(true);
       });
   }, []);
+  const loadMoreCourse = () => {
+    setPage(page + 1)
+    CourseService
+      .get(page, 20)
+      .then((c) => {
+        setCourses([...courses, ...c]);
+      })
+      .catch((err) => {
+        console.error(err);
+        setError(true);
+      });
+  }
+  const LoadMoreCourseComponent: React.FC = () => {
+    return(
+      <button
+          className="w-full bg-blue-500 text-white font-bold p-2 rounded-md shadow-md hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-white"
+          onClick={() => loadMoreCourse()}
+        >
+          Load more courses!
+        </button>
+    )
+  }
   const CourseElement: React.FC<{ course: Course }> = ({ course }) => {
     const [translate, setTranslate] = useState<boolean>(false);
     return (
@@ -100,6 +123,9 @@ const CoursePage: React.FC = () => {
           {courses.map((course) => (
             <CourseElement key={course.id} course={course} />
           ))}
+          <div className="w-full">
+            <LoadMoreCourseComponent />
+          </div>
           <div className="w-full">
             <AddCourseButton />
           </div>
@@ -117,7 +143,7 @@ const EditCourseButton: React.FC<{ course: Course }> = ({ course }) => {
   const [showModal, setShowModal] = useState(false);
   const editCourse = () => {
     alert("Updating course...");
-    CoureService.update(newCourse)
+    CourseService.update(newCourse)
       .then(() => {
         alert("Course updated successfully!");
         window.location.reload();
@@ -292,7 +318,7 @@ const EditCourseButton: React.FC<{ course: Course }> = ({ course }) => {
 };
 const DeleteCourseButton: React.FC<{ course: Course }> = ({ course }) => {
   const deleteCourse = () => {
-    CoureService.remove(course.id)
+    CourseService.remove(course.id)
       .then(() => {
         alert("Course deleted successfully!");
         window.location.reload();
@@ -335,7 +361,7 @@ const AddCourseButton: React.FC = () => {
   });
   const [showModal, setShowModal] = useState(false);
   const addCourse = () => {
-    CoureService.post(course!)
+    CourseService.post(course!)
       .then(() => {
         alert("Course added successfully!");
       })
@@ -585,4 +611,6 @@ const AddCourseButton: React.FC = () => {
     </div>
   );
 };
+
+
 export default CoursePage;