Skip to content

Commit fff11a6

Browse files
jklugejkluge
authored
Cleanup & Lint (#143)
* className missing * Docs and refactoring * Small Fix for the Prerequisite Tree * Aaaand more docs / moving files around * remove access to the model * Lint
1 parent a2c9d7e commit fff11a6

21 files changed

+395
-410
lines changed

‎my-app/src/index.jsx‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,11 @@ import { JsonToDatabase } from "./presenters/Tests/JsonToDatabase";
1111
import { AllCoursesPresenter } from "./presenters/Tests/AllCoursesPresenter.jsx";
1212

1313

14-
configure({ enforceActions: "observed", reactionScheduler: (f) => setTimeout(f, 0),});
14+
/**
15+
* This file contains the bootstrapping, as well as the router used in our webapp.
16+
*/
1517

18+
configure({ enforceActions: "observed", reactionScheduler: (f) => setTimeout(f, 0),});
1619
const reactiveModel = makeAutoObservable(model);
1720
connectToFirebase(reactiveModel);
1821

@@ -27,20 +30,21 @@ export function makeRouter(reactiveModel) {
2730
//element: <SharedView />,
2831
element: <SharedView model={reactiveModel} />,
2932
},
30-
{
31-
path: "/button",
32-
element: <JsonToDatabase model={reactiveModel} />,
33-
},
34-
{
35-
path: "/all",
36-
element: <AllCoursesPresenter model={reactiveModel} />,
37-
},
33+
// Testcases, which are disabled for deployment:
34+
// {
35+
// path: "/button",
36+
// element: <JsonToDatabase model={reactiveModel} />,
37+
// },
38+
// {
39+
// path: "/all",
40+
// element: <AllCoursesPresenter model={reactiveModel} />,
41+
// },
3842

3943
]);
4044
}
4145

4246
createRoot(document.getElementById("root")).render(
4347
<RouterProvider router={makeRouter(reactiveModel)} />
4448
);
45-
46-
window.myModel = reactiveModel;
49+
// give user access for debugging purpose
50+
// window.myModel = reactiveModel;

‎my-app/src/pages/App.jsx‎

Lines changed: 40 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,71 @@
1-
import React, { useState } from 'react';
2-
import { SidebarPresenter } from '../presenters/SidebarPresenter.jsx';
3-
import { SearchbarPresenter } from '../presenters/SearchbarPresenter.jsx';
4-
import { ListViewPresenter } from '../presenters/ListViewPresenter.jsx';
1+
import React, { useState } from "react";
2+
import { SidebarPresenter } from "../presenters/SidebarPresenter.jsx";
3+
import { SearchbarPresenter } from "../presenters/SearchbarPresenter.jsx";
4+
import { ListViewPresenter } from "../presenters/ListViewPresenter.jsx";
55
import { FilterPresenter } from "../presenters/FilterPresenter.jsx";
6-
import { slide as Menu } from 'react-burger-menu';
7-
8-
6+
import { slide as Menu } from "react-burger-menu";
97

8+
/**
9+
* Contains the root of our one-page app.
10+
* All root elements (Menu, Sidebar, Filter, List, Searchbar) are initialized here.
11+
*
12+
* @param {object} model The reactive model used in the application
13+
* @returns
14+
*/
1015
function App({ model }) {
1116
const [sidebarIsOpen, setSidebarIsOpen] = useState(model.sidebarIsOpen);
1217

1318
return (
14-
/* The sidebar styling(under the menu)*/
19+
/* The sidebar styling(under the menu)*/
1520
<div className=" flex h-screen w-screen bg-gradient-to-t from-[#4f3646] to-[#6747c0] overflow-hidden">
16-
{ /* If sidebar is open, set length to 400px, else it should not be visible */}
17-
<div className={`${sidebarIsOpen ? 'w-[400px] min-w-[300px]' : 'w-[50px]'}`}>
21+
{/* If sidebar is open, set length to 400px, else it should not be visible */}
22+
<div
23+
className={`${sidebarIsOpen ? "w-[400px] min-w-[300px]" : "w-[50px]"}`}
24+
>
1825
<Menu
19-
width={window.innerWidth<700?'100%':Math.max(window.innerWidth * 0.26, 300)}
26+
width={
27+
window.innerWidth < 700
28+
? "100%"
29+
: Math.max(window.innerWidth * 0.26, 300)
30+
}
2031
isOpen={sidebarIsOpen}
2132
onStateChange={(state) => setSidebarIsOpen(state.isOpen)}
22-
className="bg-gradient-to-t from-[#4f3646] to-[#6747c0] z-0 "
33+
className="bg-gradient-to-t from-[#4f3646] to-[#6747c0] z-0 "
2334
noOverlay
2435
styles={{
2536
bmMenuWrap: {
26-
zIndex: '10'
37+
zIndex: "10",
2738
},
2839
bmBurgerButton: {
29-
position: 'absolute',
30-
top: '20px',
31-
left: '8px',
32-
width: '36px',
33-
height: '30px',
34-
zIndex: '20'
40+
position: "absolute",
41+
top: "20px",
42+
left: "8px",
43+
width: "36px",
44+
height: "30px",
45+
zIndex: "20",
3546
},
3647
}}
37-
customBurgerIcon={ <img src="https://img.icons8.com/ios-filled/50/ffffff/menu-2.png" /> }
48+
customBurgerIcon={
49+
<img src="https://img.icons8.com/ios-filled/50/ffffff/menu-2.png" />
50+
}
3851
>
39-
<SidebarPresenter model={model}/>
52+
<SidebarPresenter model={model} />
4053
</Menu>
4154
</div>
4255

43-
44-
4556
<div className="flex-1 h-full flex flex-col ">
46-
47-
4857
<div className="flex items-center bg-gradient-to-t from-[#6246a8] to-[#6747c0] text-white">
49-
<SearchbarPresenter model={model}/>
58+
<SearchbarPresenter model={model} />
5059
</div>
5160

52-
53-
<div
54-
className="flex sm:flex-auto h-screen w-screen sm:w-full bg-gradient-to-t from-[#4f3646] to-[#6747c0] overflow-hidden">
55-
<ListViewPresenter model={model}/>
61+
<div className="flex sm:flex-auto h-screen w-screen sm:w-full bg-gradient-to-t from-[#4f3646] to-[#6747c0] overflow-hidden">
62+
<ListViewPresenter model={model} />
5663
</div>
5764

58-
<FilterPresenter model={model}/>
65+
<FilterPresenter model={model} />
5966
</div>
60-
</div>)
67+
</div>
68+
);
6169
}
6270

6371
export default App;

‎my-app/src/pages/SharedView.jsx‎

Lines changed: 25 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,39 @@
1-
/*import React, { useEffect } from "react";
2-
import { model } from "../model";
3-
41
/**
5-
* Reads favs from URL hash query string and populates model.favourites
6-
7-
function SharedView() {
8-
useEffect(() => {
9-
const processFavouritesFromURL = () => {
10-
const hash = window.location.hash;
11-
const queryString = hash.includes("?") ? hash.split("?")[1] : "";
12-
const params = new URLSearchParams(queryString);
13-
const favCodes = (params.get("favs") || "").split(",").filter(Boolean);
14-
15-
console.log("Parsed fav codes:", favCodes);
16-
17-
if (!model.courses || model.courses.length === 0) {
18-
console.warn("Courses not yet loaded, waiting...");
19-
return;
20-
}
21-
22-
console.log("Courses loaded. Processing shared favourites.");
23-
24-
const favCourses = favCodes
25-
.map(code => model.getCourse(code))
26-
.filter(course => course !== undefined);
27-
28-
model.favourites = favCourses;
29-
30-
console.log("Updated model.favourites:", favCourses);
31-
};
32-
33-
const interval = setInterval(() => {
34-
if (model.courses && model.courses.length > 0) {
35-
processFavouritesFromURL();
36-
clearInterval(interval); // Stop polling once done
37-
}
38-
}, 200); // Poll every 200ms until courses are ready
39-
40-
return () => clearInterval(interval);
41-
}, []);
42-
43-
return (
44-
<div className="text-center text-xl p-6 text-white">
45-
<p>This is a shared view of someone's favourite courses.</p>
46-
<p>Click the <b>Favourites</b> button to see the list!</p>
47-
</div>
48-
);
49-
}
50-
51-
export default SharedView;
52-
*/
2+
* The SharedView processes a URL containing a favourite selection
3+
* and starts the main app with the given parameters.
4+
*/
535

546
import React, { useEffect } from "react";
55-
import MainAppLayout from "./App.jsx"; // or wherever it's defined
7+
import App from "./App.jsx";
568

579
function SharedView({ model }) {
58-
useEffect(() => {
59-
const processFavouritesFromURL = () => {
60-
const hash = window.location.hash;
61-
const queryString = hash.includes("?") ? hash.split("?")[1] : "";
62-
const params = new URLSearchParams(queryString);
63-
const favCodes = (params.get("favs") || "").split(",").filter(Boolean);
10+
useEffect(() => {
11+
const processFavouritesFromURL = () => {
12+
const hash = window.location.hash;
13+
const queryString = hash.includes("?") ? hash.split("?")[1] : "";
14+
const params = new URLSearchParams(queryString);
15+
const favCodes = (params.get("favs") || "").split(",").filter(Boolean);
6416

65-
if (!model.courses || model.courses.length === 0) return;
17+
if (!model.courses || model.courses.length === 0) return;
6618

67-
const favCourses = favCodes
68-
.map(code => model.getCourse(code))
69-
.filter(Boolean);
19+
const favCourses = favCodes
20+
.map((code) => model.getCourse(code))
21+
.filter(Boolean);
7022

71-
model.favourites = favCourses;
72-
};
23+
model.favourites = favCourses;
24+
};
7325

74-
const interval = setInterval(() => {
75-
if (model.courses && model.courses.length > 0) {
76-
processFavouritesFromURL();
77-
clearInterval(interval);
78-
}
79-
}, 200);
26+
const interval = setInterval(() => {
27+
if (model.courses && model.courses.length > 0) {
28+
processFavouritesFromURL();
29+
clearInterval(interval);
30+
}
31+
}, 200);
8032

81-
return () => clearInterval(interval);
82-
}, [model]);
33+
return () => clearInterval(interval);
34+
}, [model]);
8335

84-
return <MainAppLayout model={model} />;
36+
return <App model={model} />;
8537
}
8638

8739
export default SharedView;

0 commit comments

Comments
 (0)