Documentation

my-app/src/presenters/PrerequisitePresenter.jsx

@@ -489,7 +489,6 @@ export const PrerequisitePresenter = observer((props) => {
                         courses_taken.push(local[i]?.id)
                     }
                 }
-                //console.log(local);
                 let eligible = generateTree(courses_taken, copy);
                 if (eligible) {
                     root["style"]["backgroundColor"] = "lightgreen";

my-app/src/views/Components/CoursePagePopup.jsx

@@ -2,6 +2,9 @@ import React, { useEffect, useRef, useState } from 'react';
 import RatingComponent from "./RatingComponent.jsx";
 import { model } from "../../model.js";
 
+/**
+ * Handles the popup for a specific course page.
+ */
 
 function CoursePagePopup({
 	favouriteCourses,

my-app/src/views/Components/FavouriteDropdown.jsx

@@ -1,6 +1,9 @@
 import React, { useState } from 'react';
 import { observer } from "mobx-react-lite";
 
+/**
+ * Shows the dropdown menu to see the favourite flagged courses.
+ */
 const FavouritesDropdown = observer((props) => {
     const [copied, setCopied] = useState(false);
 

my-app/src/views/Components/RatingComponent.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import StarComponent from "./StarComponent.jsx";
-
+/**
+ * Component that handles reviews in the form of stars. StarComponent is used for the actual stars.
+ */
 const RatingComponent = ({ value = 0, onChange, readOnly = false, className = "" }) => {
     const handleRating = (starIndex, isLeftHalf) => {
         if (readOnly) return;

my-app/src/views/Components/SideBarComponents/ButtonGroupField.jsx

@@ -1,6 +1,12 @@
 import { useEffect, useState } from "react";
 import ToolTip from './ToolTip';
 
+/**
+ * The ButtonGroupField is used as a selector for the period.
+ * Used by the SidebarView.
+ * @param {*} props 
+ * @returns 
+ */
 export default function ButtonGroupField(props) {
 
   const [activeIndex, setActiveIndex] = useState(0);

my-app/src/views/Components/SideBarComponents/CollapsibleCheckboxes.jsx

@@ -2,6 +2,11 @@ import React, { useState, useRef } from "react";
 import FilterEnableCheckbox from "./FilterEnableCheckbox";
 import Tooltip from "./ToolTip";
 
+/**
+ * Used by the SidebarView for filtering things with checkboxes.
+ * @param {*} props 
+ * @returns 
+ */
 const CollapsibleCheckboxes = (props) => {
   const [expanded, setExpanded] = useState([]);
   const [filterEnabled, setFilterEnabled] = useState(props.filterEnable);

my-app/src/views/Components/SideBarComponents/CourseTranscriptList.jsx

@@ -1,5 +1,8 @@
 import { useState, forwardRef } from "react";
-
+/**
+ * Shows a list of taken courses after uploading a transcript of records. 
+ * Used by the SidebarView.
+ */
 const CourseTranscriptList = forwardRef((props,ref) => {
     let local = [];
     if (localStorage.getItem("completedCourses"))

my-app/src/views/Components/SideBarComponents/DropDownField.jsx

@@ -3,6 +3,12 @@ import { useRef, useEffect } from "react";
 import FilterEnableCheckbox from "./FilterEnableCheckbox";
 import Tooltip from "./ToolTip";
 
+/**
+ * Used for selecting the level of a course. 
+ * See SidebarView for more.
+ * @param {*} props 
+ * @returns 
+ */
 export default function DropDownField(props) {
 
 

my-app/src/views/Components/SideBarComponents/FilterEnableCheckbox.jsx

@@ -1,5 +1,9 @@
 import React, { forwardRef } from "react";
 
+/**
+ * A basic checkbox to enable the filters. 
+ * Used in the SidebarView.
+ */
 const FilterEnableCheckbox = forwardRef(({ initialValue, onToggle }, ref) => {
     return (
         <div className='mr-3'>

my-app/src/views/Components/SideBarComponents/MultipleChoiceButtons.jsx

@@ -3,6 +3,11 @@ import { useRef, useEffect } from "react";
 import FilterEnableCheckbox from "./FilterEnableCheckbox";
 import Tooltip from "./ToolTip";
 
+/**
+ * A multiple choice selector used to select the period in the SidebarView.
+ * @param {} props 
+ * @returns 
+ */
 export default function MultipleChoiceButtons(props) {
     const [filterEnabled, setFilterEnabled] = useState(props.filterEnable);
     const [selectedItems, setSelectedItems] = useState(props.initialValues || []);

my-app/src/views/Components/SideBarComponents/SliderField.jsx

@@ -2,6 +2,12 @@ import React, { useState, useRef, useEffect, useMemo } from "react";
 import FilterEnableCheckbox from "./FilterEnableCheckbox";
 import Tooltip from "./ToolTip";
 
+
+/**
+ * A slider component used to select the credits in the SidebarView.
+ * @param {} props 
+ * @returns 
+ */
 export default function UploadField(props) {
     let paramFieldType = "slider";
 

my-app/src/views/Components/SideBarComponents/ToggleField.jsx

@@ -2,6 +2,11 @@ import React, { useState, useRef } from "react";
 import FilterEnableCheckbox from "./FilterEnableCheckbox";
 import Tooltip from "./ToolTip";
 
+/**
+ * Basic Toggle field used in the SidebarView to select courses in English or Swedish.
+ * @param {} props 
+ * @returns 
+ */
 export default function ToggleField(props) {
 
     let paramFieldType = "toggle";

my-app/src/views/Components/SideBarComponents/UploadField.jsx

@@ -6,6 +6,11 @@ import ButtonGroupField from './ButtonGroupField';
 import ToolTip from './ToolTip';
 import UploadGif from "../../../assets/upload.gif";
 
+
+/**
+ * Shows a field to upload a file with. Used in SearchbarView.
+ * @param {*} props 
+ */
 export default function UploadField(props) {
 
     const [isDragging, setIsDragging] = useState(false);

my-app/src/views/Components/StarComponent.jsx

@@ -1,5 +1,8 @@
 import React from 'react';
 
+/**
+ * Allows to rate things from 0 to 5 stars.
+ */
 const StarComponent = ({ index, rating, onRatingChange, onHover, readOnly = false }) => {
     const handleLeftClick = () => {
         if (!readOnly) onRatingChange(index, true);

my-app/src/views/ListView.jsx

@@ -3,7 +3,6 @@ import { DotPulse, Quantum } from 'ldrs/react';
 import 'ldrs/react/Quantum.css';
 import InfiniteScroll from 'react-infinite-scroll-component';
 
-// Add this helper function at the top of your component
 const highlightText = (text, query) => {
     if (!query || !text) return text;
 
@@ -14,6 +13,11 @@ const highlightText = (text, query) => {
     return text.replace(regex, '<u>$1</u>');
 };
 
+/**
+ * The view displays the courses that match a certain query, filtering etc.
+ * @param {*} props 
+ * @returns 
+ */
 function ListView(props) {
     const [displayedCourses, setDisplayedCourses] = useState([]);
     const [hasMore, setHasMore] = useState(true);

my-app/src/views/PrerequisiteTreeView.jsx

@@ -2,6 +2,10 @@ import React from "react";
 import ReactFlow, { MiniMap, Controls, Background } from "reactflow";
 import "reactflow/dist/style.css";
 
+/**
+ * Displays a ReactFlow window, that is used in the context of a prerequisite tree.
+ * @param {} props 
+ */
 
 // redundent file functionality exist in PrerequisitePresenter.jsx
 

my-app/src/views/ReviewView.jsx

@@ -1,6 +1,11 @@
 import React, { useState, useRef, useEffect } from "react";
 import RatingComponent from "../views/Components/RatingComponent.jsx";
 
+/**
+ * Displays the user an interface to give a review for a specified course. Invoked by the ReviewPresenter.
+ * @param {*} props 
+ * @returns 
+ */
 export function ReviewView(props) {
   const grades = ["A", "B", "C", "D", "E", "F"];
   const difficulties = ["Very Easy", "Easy", "Medium", "Hard", "Very Hard"];

my-app/src/views/SearchbarView.jsx

@@ -3,6 +3,10 @@ import { getAuth, signInWithPopup, signOut, GoogleAuthProvider } from "firebase/
 import project_logo from "../assets/project_icon.png";
 import FavouritesDropdown from "./Components/FavouriteDropdown.jsx";
 
+/**
+ * Displays a searchbar, which accepts user input, e.g. a course id.
+ * @param {*} props 
+ */
 export function SearchbarView(props) {
 //   const [searchQuery, setSearchQuery] = useState("");
   const [user, setUser] = useState(null);

my-app/src/views/SidebarView.jsx

@@ -11,8 +11,7 @@ import MultipleChoiceButtons from './Components/SideBarComponents/MultipleChoice
 /**
  * Represents the sidebar and consists of an upload field, dropdown field, toggle fields, sliders, etc. 
  * It shows the filters and settings for the search. The view is invoked by the SidebarPresenter.
- * @param {*} props 
- * @returns 
+ * @param {*} props
  */
 function SidebarView(props) {
     return (