Skip to content

Commit ea9693a

Browse files
daDevBoatkexanaDinoxhLSKprSailet03
authored
Prereq oaktree (#117)
* sidebar component add * tailwind workin, beggining page building * structure * fixed app * Main design layout * initial sidebar * courseView init * the course page initial tests * Make it run on my comuter * Tree without database integration * fixes * npm update * add to page * Biiiiig Refactoring * Broken version of prereq tree * Fixed not rendering anything. Still broken * Working v1 * handling #prereqs * Test * removed commented out code * More info expands now * More info expands now * More info expands now * Start coding on line 135 in PrereqTreePresenter Mr. PO * Prereqs colored and expands more info * added css styling * Fixed copy bug * Crash fix in PrerequisitePresenter.jsx * merge fix * Prereq tree compression, error handling, debuging, database update * Added null support (hopefully) * Bug fixes * Desplays periods * Bug finally fixed (hopefully) * Check if course exists before doing pop up * Set up for url handling --------- Co-authored-by: kexana <deotsts@gmail.com> Co-authored-by: Sami Al Saati <sami.alsaati@hotmail.com> Co-authored-by: Kacper Lisik <lisik@kth.se> Co-authored-by: Elias Tosteberg <elias.tosteberg@gmail.com> Co-authored-by: Sailet03 <52610280+Sailet03@users.noreply.github.com>
1 parent 12d45a2 commit ea9693a

File tree

4 files changed

+71
-61
lines changed

4 files changed

+71
-61
lines changed

‎my-app/src/index.jsx‎

Lines changed: 46 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,46 @@
1-
import { configure, makeAutoObservable } from "mobx";
2-
import { createHashRouter, RouterProvider } from "react-router-dom";
3-
import { createRoot } from "react-dom/client";
4-
import { connectToFirebase } from "../firebase";
5-
import { model } from "./model";
6-
import App from "./pages/App.jsx";
7-
import "./styles.css";
8-
9-
import SharedView from "./pages/SharedView.jsx";
10-
import { JsonToDatabase } from "./presenters/Tests/JsonToDatabase";
11-
import { AllCoursesPresenter } from "./presenters/Tests/AllCoursesPresenter.jsx";
12-
13-
configure({ enforceActions: "never" });
14-
15-
const reactiveModel = makeAutoObservable(model);
16-
connectToFirebase(reactiveModel);
17-
18-
export function makeRouter(reactiveModel) {
19-
return createHashRouter([
20-
{
21-
path: "/",
22-
element: <App model={reactiveModel} />,
23-
},
24-
{
25-
path: "/share",
26-
//element: <SharedView />,
27-
element: <SharedView model={reactiveModel} />,
28-
},
29-
{
30-
path: "/button",
31-
element: <JsonToDatabase model={reactiveModel} />,
32-
},
33-
{
34-
path: "/all",
35-
element: <AllCoursesPresenter model={reactiveModel} />,
36-
},
37-
]);
38-
}
39-
40-
createRoot(document.getElementById("root")).render(
41-
<RouterProvider router={makeRouter(reactiveModel)} />
42-
);
43-
44-
window.myModel = reactiveModel;
1+
import { configure, makeAutoObservable } from "mobx";
2+
import { createBrowserRouter, RouterProvider } from "react-router-dom";
3+
import { createRoot } from "react-dom/client";
4+
import { connectToFirebase } from "../firebase";
5+
import { model } from "./model";
6+
import App from "./pages/App.jsx";
7+
import "./styles.css";
8+
9+
import SharedView from "./pages/SharedView.jsx";
10+
import { JsonToDatabase } from "./presenters/Tests/JsonToDatabase";
11+
import { AllCoursesPresenter } from "./presenters/Tests/AllCoursesPresenter.jsx";
12+
13+
14+
configure({ enforceActions: "never" });
15+
16+
const reactiveModel = makeAutoObservable(model);
17+
connectToFirebase(reactiveModel);
18+
19+
export function makeRouter(reactiveModel) {
20+
return createBrowserRouter([
21+
{
22+
path: "/",
23+
element: <App model={reactiveModel} />,
24+
},
25+
{
26+
path: "/share",
27+
//element: <SharedView />,
28+
element: <SharedView model={reactiveModel} />,
29+
},
30+
{
31+
path: "/button",
32+
element: <JsonToDatabase model={reactiveModel} />,
33+
},
34+
{
35+
path: "/all",
36+
element: <AllCoursesPresenter model={reactiveModel} />,
37+
},
38+
39+
]);
40+
}
41+
42+
createRoot(document.getElementById("root")).render(
43+
<RouterProvider router={makeRouter(reactiveModel)} />
44+
);
45+
46+
window.myModel = reactiveModel;

‎my-app/src/presenters/PrerequisitePresenter.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const PrerequisitePresenter = observer((props) => {
2323
let codeCounter = 0;
2424
let hover_popup = document.createElement("div");
2525
hover_popup.setAttribute("id", "course_popup");
26-
hover_popup.style.fontSize = 0.75 + "rem";
26+
hover_popup.style.fontSize = 1 + "rem";
2727
hover_popup.style.pointerEvents = "none";
2828
hover_popup.style.position = "absolute";
2929
hover_popup.style.backgroundColor = "white";
@@ -111,9 +111,9 @@ export const PrerequisitePresenter = observer((props) => {
111111
const popupHeight = pos.height + 20;
112112
hover_popup.style.minWidth = popupWidth + "px";
113113
hover_popup.style.minHeight = popupHeight + "px";
114-
hover_popup.style.maxWidth = pos.width * 3 + "px";
114+
hover_popup.style.maxWidth = pos.width * 2 + "px";
115115

116-
hover_popup.style.fontSize = window.getComputedStyle(document.querySelector(`[data-id="${node.id}"]`)).fontSize;
116+
//hover_popup.style.fontSize = window.getComputedStyle(document.querySelector(`[data-id="${node.id}"]`)).fontSize;
117117
hover_popup.style.display = "flex";
118118

119119

‎my-app/src/styles.css‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,20 @@
2626
.bm-burger-button {
2727
position: absolute;
2828
width: 36px;
29-
height: 30px;
30-
left: 20px;
31-
top: 20px;
29+
height: 36px;
30+
left: 36px;
31+
top: 36px;
3232
}
3333

34-
35-
.bm-menu-wrap {
36-
position: fixed;
37-
height: 100%;
38-
z-index: 10;
39-
}
34+
/* Hide scrollbars everywhere but allow scrolling */
35+
html, body {
36+
overflow: auto;
37+
scrollbar-width: none; /* Firefox */
38+
-ms-overflow-style: none; /* Internet Explorer 10+ */
39+
}
40+
41+
html::-webkit-scrollbar,
42+
body::-webkit-scrollbar {
43+
display: none; /* Chrome, Safari, Edge */
44+
}
4045

‎my-app/src/views/ListView.jsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useCallback } from 'react';
22
import { DotPulse, Quantum } from 'ldrs/react';
33
import 'ldrs/react/Quantum.css';
44
import InfiniteScroll from 'react-infinite-scroll-component';
5+
import { useNavigate, Link } from 'react-router-dom';
56

67
function ListView(props) {
78
const [displayedCourses, setDisplayedCourses] = useState([]);
@@ -10,7 +11,8 @@ function ListView(props) {
1011
const [isLoading, setIsLoading] = useState(true);
1112
const [sortBy, setSortBy] = useState('relevance');
1213
const [sortDirection, setSortDirection] = useState('asc');
13-
14+
const navigate = useNavigate();
15+
1416
const toggleReadMore = (courseCode) => {
1517
setReadMore(prevState => ({
1618
...prevState,
@@ -30,7 +32,6 @@ function ListView(props) {
3032
let ret_string = "";
3133
if (periods) {
3234
let keys = Object.keys(periods);
33-
// console.log(periods["P1"])
3435
for (let key of keys) {
3536
if (periods[key]) {
3637
ret_string += key + " | ";
@@ -42,9 +43,9 @@ function ListView(props) {
4243
}
4344
};
4445

45-
const handlePeriods2 = (course) => {
46-
return "Test";
47-
}
46+
const handleClickBackArrow = (course_name) => {
47+
navigate(course_name);
48+
};
4849

4950

5051
useEffect(() => {
@@ -157,6 +158,7 @@ function ListView(props) {
157158
initialScrollY={0}
158159
>
159160
{displayedCourses.map(course => (
161+
<Link to={'/?' + course.code}>
160162
<div
161163
onClick={() => {
162164
props.setSelectedCourse(course);
@@ -243,6 +245,7 @@ function ListView(props) {
243245
</div>
244246
</div>
245247
</div>
248+
</Link>
246249
))}
247250
</InfiniteScroll>
248251
</div>

0 commit comments

Comments
 (0)