Bug fixes (#26)

* added loader

* fixed popup hook

Author: Dinoxh

my-app/src/model.js

@@ -8,28 +8,23 @@ export const model = {
     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(searchResults){
         this.currentSearch = searchResults;
     },
 
-    // sets the course array - for example after loading all courses from the DB
     setCourses(courses){
         this.courses = courses;
     },
 
-    // add a single course
     async addCourse(course) {
         try {
             await addCourse(course);

my-app/src/pages/App.jsx

@@ -1,45 +1,40 @@
-
-import React from 'react';
-import { SidebarPresenter } from "../presenters/SidebarPresenter.jsx"
-import { SearchbarPresenter } from "../presenters/SearchbarPresenter.jsx"
+import React, { useState } from 'react';
+import { SidebarPresenter } from "../presenters/SidebarPresenter.jsx";
+import { SearchbarPresenter } from "../presenters/SearchbarPresenter.jsx";
 import { ListViewPresenter } from '../presenters/ListViewPresenter.jsx';
+import CourseView from '../views/CourseView.jsx';
+import {model} from '/src/model.js';
+
+function App() {
+	const [isPopupOpen, setIsPopupOpen] = useState(false);
 
-function App(props) {
 	return (
 		<div className="flex h-screen w-screen">
-
-			<div className="flex-auto w-40%  h-full bg-gradient-to-t from-[#4f3646] to-[#6747c0]">
-				<SidebarPresenter model={props.model}/>
+			<div className="flex-auto w-40% h-full bg-gradient-to-t from-[#4f3646] to-[#6747c0]">
+				<SidebarPresenter model={model} />
 			</div>
-
 			<div className="w-3/4 h-full flex flex-col">
 				<div className="bg-blue-400 text-white">
-					<SearchbarPresenter model={props.model} />
+					<SearchbarPresenter model={model} />
 				</div>
-
 				<div className="flex-auto border overflow-auto bg-[#121212]">
-					<ListViewPresenter model={props.model} />
+					<ListViewPresenter model={model} />
 				</div>
-				
 				<button
 					onClick={() => setIsPopupOpen(true)}
 					className="px-4 py-2 bg-blue-500 text-white"
 				>
 					open
 				</button>
-
-				{/* Popup only overlays the black container */}
 				{isPopupOpen && (
 					<div
 						className="fixed inset-0 bg-transparent flex justify-end"
 						onClick={() => setIsPopupOpen(false)}
 					>
-						{/* Wider modal container */}
 						<div
 							className="bg-indigo-400/70 backdrop-blur-sm h-full w-3/4 flex flex-col overflow-auto"
 							onClick={(e) => e.stopPropagation()}
 						>
-							{/* Container for CourseView which fills available space */}
 							<div className="flex-1">
 								<CourseView />
 							</div>
@@ -57,4 +52,4 @@ function App(props) {
 	);
 }
 
-export default App;
+export default App;

my-app/src/views/ListView.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { Quantum } from 'ldrs/react';
 import 'ldrs/react/Quantum.css';
-import FavouritesDropdown from './Components/FavouriteDropdown.jsx';
 
 function ListView(props) {
     const coursesToDisplay = props.searchResults.length > 0 ? props.searchResults : props.courses;

my-app/src/views/SidebarView.jsx

@@ -1,4 +1,3 @@
-// src/views/SidebarView.jsx
 import React from 'react';
 import UploadField from "./Components/SideBarComponents/UploadField.jsx";
 import ToggleField from "./Components/SideBarComponents/ToggleField.jsx";

my-app/src/views/TestAllCoursesView.jsx

@@ -1,4 +1,3 @@
-// dummy view, that returns text and a component state based counter.
 export function TestAllCoursesView(props) {
 
   return (