Merge branch 'main' into course-page

Author: Dinoxh

.DS_Store

@@ -0,0 +1,4 @@
+.git
+node_modules
+dist
+.env

.dockerignore

@@ -0,0 +1,24 @@
+name: Docker CI
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    branches: ["main"]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v2
+
+    - name: Build and start services with Docker Compose
+      run: docker compose up -d --build
+
+    - name: Check running containers
+      run: docker ps -a

.github/workflows/docker-image.yml

@@ -0,0 +1,6 @@
+FROM node:18-alpine
+WORKDIR /app
+COPY my-app .
+RUN npm ci
+EXPOSE 5173
+CMD ["npm", "run", "dev"]

Dockerfile

@@ -0,0 +1,15 @@
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile 
+    container_name: my-app
+    ports:
+      - "5173:5173" 
+    volumes:
+      - ./my-app:/app # mount local 'my-app' to /app inside the container
+    environment:
+      - NODE_ENV=development  # set environment variable to development
+    command: npm run dev
+    stdin_open: true  # interactive sessions
+    tty: true  # keep the container running interactively

docker-compose.yml

@@ -1,29 +1,27 @@
-// This model is representing our program logic. 
-// A certain model is bound to a specific session. 
-
 import { addCourse } from "../firebase";
 
 export const model = {
     user: undefined,
     currentCourse: undefined,
-    currentSearch: {},
+    currentSearch: [],
     courses: [],
+    favourites: [],
     isReady: false,
 
     // sets the current user
     setUser(user) {
         if (!this.user)
             this.user = user;
     },
-    
+
     // sets the currently selected course (detail view?) - could be component state
     setCurrentCourse(course){
         this.currentCourse = course;
     },
 
     // keeps track of the current search / the associated promises.
-    setCurrentSearch(search){
-        this.currentSearch = search;
+    setCurrentSearch(searchResults){
+        this.currentSearch = searchResults;
     },
 
     // sets the course array - for example after loading all courses from the DB
@@ -32,21 +30,23 @@ export const model = {
     },
 
     // add a single course
-    // addCourse(course){
-    //     this.courses = [...this.courses, course] // update local copy
-    //     addCourse(course); // update firebase
-    // },
-
     async addCourse(course) {
         try {
             await addCourse(course);
             this.courses = [...this.courses, course];
-            console.log("Course added successfully.");
         } catch (error) {
             console.error("Error adding course:", error);
         }
     },
 
+    addFavourite(course) {
+        this.favourites = [...this.favourites, course];
+    },
+
+    removeFavourite(course) {
+        this.favourites = (this.favourites || []).filter(fav => fav.code !== course.code);
+    },
+
     getCourse(courseID) {
         return this.courses.find(course => course.code === courseID);
     },
@@ -72,6 +72,14 @@ export const model = {
             };
             this.addCourse(course);
         });
-    }
-}
+    },
 
+    searchCourses(query) {
+        const searchResults = this.courses.filter(course =>
+            course.code.toLowerCase() === query.toLowerCase() ||
+            course.name.toLowerCase().includes(query.toLowerCase()) ||
+            course.description.toLowerCase().includes(query.toLowerCase())
+        );
+        this.setCurrentSearch(searchResults);
+    }
+};

my-app/package-lock.json

@@ -7,8 +7,9 @@ import { ListViewPresenter } from '../presenters/ListViewPresenter.jsx';
 function App(props) {
 	return (
 		<div className="flex h-screen w-screen">
-			<div className="flex-auto w-40%  h-full bg-[#49347E]">
-				<SidebarPresenter model={props.model} />
+
+			<div className="flex-auto w-40%  h-full bg-gradient-to-t from-[#4f3646] to-[#6747c0]">
+				<SidebarPresenter model={props.model}/>
 			</div>
 
 			<div className="w-3/4 h-full flex flex-col">

my-app/src/assets/project_icon.png

@@ -2,8 +2,14 @@ import React from 'react';
 import { observer } from "mobx-react-lite";
 import ListView from "../views/ListView.jsx";
 
-const ListViewPresenter = observer((props) => {
-    return <ListView courses={props.model.courses} />;
+const ListViewPresenter = observer(({ model }) => {
+    return <ListView
+        courses={model.courses}
+        searchResults={model.currentSearch}
+        favouriteCourses={model.favourites}
+        addFavourite={model.addFavourite}
+        removeFavourite={model.removeFavourite}
+    />;
 });
 
 export { ListViewPresenter };