Prereq oaktree bug fix and added periods in listview (#108)

* 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

---------

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>

Author: 5 people

my-app/src/presenters/PrerequisitePresenter.jsx

@@ -459,8 +459,7 @@ export const PrerequisitePresenter = observer((props) => {
         let key = Object.keys(prereqs);
         if (prereqs[key] === true) {
             return true;
-        }
-        else {
+        } else {
             return false;
         }
 

my-app/src/views/ListView.jsx

@@ -26,6 +26,27 @@ function ListView(props) {
         }
     };
 
+    const handlePeriods = (periods) => {
+        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 + " | ";
+                }
+            }
+            return ret_string.slice(0, -2);
+        } else {
+            return;
+        }
+    };
+
+    const handlePeriods2 = (course) => {
+        return "Test";
+    }
+
+
     useEffect(() => {
         setIsLoading(true);
         const initialCourses = props.sortedCourses.slice(0, 10);
@@ -145,8 +166,11 @@ function ListView(props) {
                                 className="p-5 mb-3 hover:bg-blue-100 flex items-center border border-b-black border-solid w-full rounded-lg cursor-pointer"
                             >
                                 <div>
+                                    <div className="codeNameContainer" style={{ display: 'flex' }}>
                                     <p className="font-bold text-[#000061]">{course.code}</p>
-                                    <p className="font-bold">{course.name}</p>
+                                    <p className="font-bold text-[#000061]" style={{color: "GrayText", opacity: 0.5, marginLeft: "0.5em"}}>{handlePeriods(course?.periods)}</p>
+                                    </div>
+                                    <p className="font-bold">{course.name} </p>
                                     <p
                                         className="text-gray-600"
                                         dangerouslySetInnerHTML={{