Set up for url handling

Author: daDevBoat

my-app/src/index.jsx

@@ -1,44 +1,46 @@
-import { configure, makeAutoObservable } from "mobx";
-import { createHashRouter, RouterProvider } from "react-router-dom";
-import { createRoot } from "react-dom/client";
-import { connectToFirebase } from "../firebase";
-import { model } from "./model";
-import App from "./pages/App.jsx";
-import "./styles.css";
-
-import SharedView from "./pages/SharedView.jsx";
-import { JsonToDatabase } from "./presenters/Tests/JsonToDatabase";
-import { AllCoursesPresenter } from "./presenters/Tests/AllCoursesPresenter.jsx";
-
-configure({ enforceActions: "never" });
-
-const reactiveModel = makeAutoObservable(model);
-connectToFirebase(reactiveModel);
-
-export function makeRouter(reactiveModel) {
-  return createHashRouter([
-    {
-      path: "/",
-      element: <App model={reactiveModel} />,
-    },
-    {
-      path: "/share",
-      //element: <SharedView />,
-      element: <SharedView model={reactiveModel} />,
-    },
-    {
-      path: "/button",
-      element: <JsonToDatabase model={reactiveModel} />,
-    },
-    {
-      path: "/all",
-      element: <AllCoursesPresenter model={reactiveModel} />,
-    },
-  ]);
-}
-
-createRoot(document.getElementById("root")).render(
-  <RouterProvider router={makeRouter(reactiveModel)} />
-);
-
-window.myModel = reactiveModel;
+import { configure, makeAutoObservable } from "mobx";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { createRoot } from "react-dom/client";
+import { connectToFirebase } from "../firebase";
+import { model } from "./model";
+import App from "./pages/App.jsx";
+import "./styles.css";
+
+import SharedView from "./pages/SharedView.jsx";
+import { JsonToDatabase } from "./presenters/Tests/JsonToDatabase";
+import { AllCoursesPresenter } from "./presenters/Tests/AllCoursesPresenter.jsx";
+
+
+configure({ enforceActions: "never" });
+
+const reactiveModel = makeAutoObservable(model);
+connectToFirebase(reactiveModel);
+
+export function makeRouter(reactiveModel) {
+  return createBrowserRouter([
+    {
+      path: "/",
+      element: <App model={reactiveModel} />,
+    },
+    {
+      path: "/share",
+      //element: <SharedView />,
+      element: <SharedView model={reactiveModel} />,
+    },
+    {
+      path: "/button",
+      element: <JsonToDatabase model={reactiveModel} />,
+    },
+    {
+      path: "/all",
+      element: <AllCoursesPresenter model={reactiveModel} />,
+    }, 
+    
+  ]);
+}
+
+createRoot(document.getElementById("root")).render(
+  <RouterProvider router={makeRouter(reactiveModel)} />
+);
+
+window.myModel = reactiveModel;

my-app/src/presenters/ListViewPresenter.jsx

@@ -124,8 +124,6 @@ const ListViewPresenter = observer(({ model }) => {
         reviewPresenter={reviewPresenter}/>
 
 
-
-
     return <ListView
         // courses={model.courses}
         // searchResults={model.currentSearch}

my-app/src/presenters/PrerequisitePresenter.jsx

@@ -23,7 +23,7 @@ export const PrerequisitePresenter = observer((props) => {
     let codeCounter = 0;
     let hover_popup = document.createElement("div");
     hover_popup.setAttribute("id", "course_popup");
-    hover_popup.style.fontSize = 0.75 + "rem";
+    hover_popup.style.fontSize = 1 + "rem";
     hover_popup.style.pointerEvents = "none";
     hover_popup.style.position = "absolute";
     hover_popup.style.backgroundColor = "white";
@@ -111,9 +111,9 @@ export const PrerequisitePresenter = observer((props) => {
         const popupHeight = pos.height + 20;
         hover_popup.style.minWidth = popupWidth + "px";
         hover_popup.style.minHeight = popupHeight + "px";
-        hover_popup.style.maxWidth = pos.width * 3 + "px";
+        hover_popup.style.maxWidth = pos.width * 2 + "px";
 
-        hover_popup.style.fontSize = window.getComputedStyle(document.querySelector(`[data-id="${node.id}"]`)).fontSize;
+        //hover_popup.style.fontSize = window.getComputedStyle(document.querySelector(`[data-id="${node.id}"]`)).fontSize;
         hover_popup.style.display = "flex";
 
 

my-app/src/styles.css

@@ -29,4 +29,16 @@
     height: 36px;
     left: 36px;
     top: 36px;
-}
+}
+
+/* Hide scrollbars everywhere but allow scrolling */
+html, body {
+    overflow: auto;
+    scrollbar-width: none;        /* Firefox */
+    -ms-overflow-style: none;     /* Internet Explorer 10+ */
+  }
+  
+  html::-webkit-scrollbar,
+  body::-webkit-scrollbar {
+    display: none;                /* Chrome, Safari, Edge */
+  }

my-app/src/views/ListView.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { DotPulse, Quantum } from 'ldrs/react';
 import 'ldrs/react/Quantum.css';
 import InfiniteScroll from 'react-infinite-scroll-component';
+import { useNavigate, Link } from 'react-router-dom';
 
 function ListView(props) {
     const [displayedCourses, setDisplayedCourses] = useState([]);
@@ -10,7 +11,8 @@ function ListView(props) {
     const [isLoading, setIsLoading] = useState(true);
     const [sortBy, setSortBy] = useState('relevance');
     const [sortDirection, setSortDirection] = useState('asc');
-   
+    const navigate = useNavigate();
+
     const toggleReadMore = (courseCode) => {
         setReadMore(prevState => ({
             ...prevState,
@@ -30,7 +32,6 @@ function ListView(props) {
         let ret_string = "";
         if (periods) {
             let keys = Object.keys(periods);
-            console.log(periods["P1"])
             for (let key of keys) {
                 if (periods[key]) {
                     ret_string += key + " | ";
@@ -42,9 +43,9 @@ function ListView(props) {
         }
     };
 
-    const handlePeriods2 = (course) => {
-        return "Test";
-    }
+    const handleClickBackArrow = (course_name) => {
+        navigate(course_name);
+    };
 
 
     useEffect(() => {
@@ -157,10 +158,12 @@ function ListView(props) {
                         initialScrollY={0}
                     >
                         {displayedCourses.map(course => (
+                            <Link to={'/?' + course.code}>
                             <div
                                 onClick={() => {
                                     props.setSelectedCourse(course);
                                     props.setIsPopupOpen(true);
+                                    //handleClickBackArrow(course.code);
                                 }}
                                 key={course.code}
                                 className="p-5 mb-3 hover:bg-blue-100 flex items-center border border-b-black border-solid w-full rounded-lg cursor-pointer"
@@ -243,6 +246,7 @@ function ListView(props) {
                                     </div>
                                 </div>
                             </div>
+                            </Link>
                         ))}
                     </InfiniteScroll>
                 </div>