Responsive filtering solid (#142)

kexana · boldizsarbenedek · web-flow · commit a2c9d7eab0ef · 2025-05-14T15:31:35.000+03:00
* applied filters into the search function using flags in the model, will have to refine more in the filters, but this is great for the demo * wrote departments filter option * added check to make sure to not recommend courses the client has taken before * initial state good * departments go to model * trying to add filtering out courses with NULL fields as an implementable filter option, merging with main start as per teams request * merging into brain? * some ?. properties check, because skill issue * more course?. things * finished the noNull feature, essentially fixed typos * null course checkbox * null check linked * Null field toggle works * nice and beutiful * removed the explicit null string checks, hopefully doesnt break, also wrote logic for Period filtering * period filter * a bit polishing, touching on the period presenter since i thought its broken, but it was the database dropping all course.period data >:( * fixed some filters logic (level filter, period filter), added descriptions to most filters tooltips, fixed About us button, touched Tab title to current working title, fixed some other things * visually persistent filters * now fixed * once again * unlocking departments and locations * wip * filters enabled by clicking on them * My side merge with Dean's side * departments half functional * rebase to main * rebase to main * Refactoring transcript scraper (#126) * Reworked UploadTranscriptPresenter into a source file, now SidebarPresenter calls it, allows us to upgrade it so that the transcript scraper function has access to a flattened out model (course list with only id, and name fields needed) * reworked LocalStorage so that it stores object array instead of strings, object structure is {id (str),name(str),is_in_DB(bool)} * fixed couple errors relating to the new LocaleStorage finished courses, also touched on the departments so that its trucated by tailwind instead of just 25 characters * fixed a lot of typos (deparmen != department) * trying to add hover over tooltips such that it displayes name of course * inbetween * removing the console.logs because theyre dumb and we should remove them before committing to main especially, added some comments, will add more * department percistency done only SU and Education Office broken * even more documentation, added descriptions and cleared up toolTips on the sidebar * departments should be working * nothing really * work on upload bahaviour * fix of animated gif * fixed upload * merge main --------- Co-authored-by: benedekboldizsar <bb.boldizsarbenedek@gmail.com>
diff --git a/my-app/package-lock.json b/my-app/package-lock.json
diff --git a/my-app/package.json b/my-app/package.json
@@ -19,6 +19,7 @@
     "firebase": "^11.5.0",
     "fuse.js": "^7.1.0",
     "ldrs": "^1.1.6",
+    "lint": "^0.8.19",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "mobx": "^6.13.7",
diff --git a/my-app/src/presenters/FilterPresenter.jsx b/my-app/src/presenters/FilterPresenter.jsx
@@ -50,8 +50,6 @@ const FilterPresenter = observer(({ model }) => {
         model.filteredCourses = filteredCourses;
     }, [filteredCourses]);
 
-
-
     /*  functions declared here are generally things the main function of this observer takes and runs if the given filters are enabled,
      *  this is determined through model.filterOptions.apply*Insert filter name* flags.
      *  This presenter should be changed such that it uses side-effects instead model.filtersChange flag, since
@@ -414,7 +412,6 @@ const FilterPresenter = observer(({ model }) => {
     }
 
     /* function that should run every single time the model changes (see note below) */
-
     /*  the problem is that unless using sideeffects, the run() not being async and/or it setting the filterschange = false very early can mean
      *  that 0 courses will get put into the model.filtered courses (which is the list of courses getting passed to search, and then listview)
      *  therefore TODO: rework it to stop using this dumb flags we started before learning anything about react,observers,js
diff --git a/my-app/src/presenters/SidebarPresenter.jsx b/my-app/src/presenters/SidebarPresenter.jsx
@@ -16,7 +16,7 @@ const SidebarPresenter = observer(({ model }) => {
     
     useEffect(() => {
         model.setFiltersChange();
-    },[]);
+    },[model]);
 
     function handleLanguageFilterChange(param) {
         if (param === "English") {
@@ -219,9 +219,9 @@ const SidebarPresenter = observer(({ model }) => {
     const handleFileChange = (event) => {
         const  truncatedCourses = model.courses.map(({ id, name }) => ({ id, name }));
         const file = event.target.files[0];
-        //document.getElementById('PDF-Scraper-Error').style.visibility = "visible";
+        document.getElementById('PDF-Scraper-Error').style.visibility = "visible";
         transcriptScraperFunction(file, setErrorMessage, setErrorVisibility, reApplyFilter, truncatedCourses);
-        //document.getElementById('PDF-Scraper-Input').value = '';
+        document.getElementById('PDF-Scraper-Input').value = '';
         setFileInputValue('');
 
         
diff --git a/my-app/src/views/Components/SideBarComponents/ButtonGroupField.jsx b/my-app/src/views/Components/SideBarComponents/ButtonGroupField.jsx
@@ -31,7 +31,7 @@ export default function ButtonGroupField(props) {
   };
   return (
     <div className="my-1">
-        <div className="flex flex-col sm:inline-flex sm:flex-row rounded-lg shadow-2xs 
+        <div className="flex sm:inline-flex rounded-lg shadow-2xs 
       w-full items-center font-medium text-white bg-[#aba8e0]">
           {props.items.map((item, index) => (
             <button
diff --git a/my-app/src/views/Components/SideBarComponents/CollapsibleCheckboxes.jsx b/my-app/src/views/Components/SideBarComponents/CollapsibleCheckboxes.jsx
@@ -3,7 +3,6 @@ import FilterEnableCheckbox from "./FilterEnableCheckbox";
 import Tooltip from "./ToolTip";
 
 const CollapsibleCheckboxes = (props) => {
-  const [expandedLabel, setExpandedLabel] = useState(props?.initialValues?.map(i => i?.label));
   const [expanded, setExpanded] = useState([]);
   const [filterEnabled, setFilterEnabled] = useState(props.filterEnable);
   const [checkedSubItems, setCheckedSubItems] = useState({});
@@ -83,7 +82,7 @@ const CollapsibleCheckboxes = (props) => {
       setInitalLoad(false);
       setExpanded(tempExpanded);
     }
-  }, [rows]);
+  }, [rows, initalLoad, props?.initialValues]);
   
 
 
diff --git a/my-app/src/views/Components/SideBarComponents/CourseTranscriptList.jsx b/my-app/src/views/Components/SideBarComponents/CourseTranscriptList.jsx
@@ -1,7 +1,6 @@
-import { useState, useRef, forwardRef } from "react";
-import Tooltip from "./ToolTip";
+import { useState, forwardRef } from "react";
 
-export default function CourseTranscriptList(props) {
+const CourseTranscriptList = forwardRef((props,ref) => {
     let local = [];
     if (localStorage.getItem("completedCourses"))
         local = JSON.parse(localStorage.getItem("completedCourses"));
@@ -31,14 +30,11 @@ export default function CourseTranscriptList(props) {
         localStorage.setItem("completedCourses", JSON.stringify(newitems));
         window.dispatchEvent(new Event("completedCourses changed"));
         props.reApplyFilter();
-        if (props.checkboxRef && props.checkboxRef.current) {
-            props.checkboxRef.current.click();
-        }
+        ref.current.click();
     };
 
 
     //=====================================
-    const tooltipRef = useRef(null);
 
     const tooltipClasses = [
         "absolute",
@@ -80,25 +76,25 @@ export default function CourseTranscriptList(props) {
                 <div
                     className="absolute inset-0 mt-30 pointer-events-none bg-gradient-to-b from-transparent to-[#553d65] z-100"
                 ></div>
-                <div className="grid grid-cols-3 w-full max-[1200px]:grid-cols-2 max-[700px]:grid-cols-1 gap-1 sm:gap-2 overflow-y-auto overflow-x-hidden max-h-[180px] pb-10" style={{
+                <div className="grid grid-cols-3 w-full max-[1200px]:grid-cols-2 gap-1 sm:gap-2 overflow-y-auto overflow-x-hidden max-h-[180px] pb-10" style={{
                     scrollbarWidth: "thin",
                     scrollbarColor: "#888 #f1f1f1",
                 }}>
                     {items.map((item, index) => (
                         <div
                             key={index}
-                            className="flex items-center bg-[#aba8e0] px-3 py-1 rounded-md shadow-md text-sm min-w-18 relative"
+                            className="flex items-center bg-[#aba8e0] px-3 py-1 rounded-md shadow-md text-sm min-w-18"
                         >
                             <div className="relative">
                                 <span className="flex-auto mr-2 peer">{item?.id}</span>
 
                                 <div className={tooltipClasses}>
-                                    {item?.name + (item?.is_in_DB ? "" : " (Course discontinued)")}
+                                    {item?.name}
                                 </div>
                             </div>
                             <button
                                 onClick={() => removeItem(index)}
-                                className="text-violet-600 hover:text-red-700 font-bold text-sm hover:bg-red-300 rounded-md absolute right-2 top-1/2 -translate-y-1/2"
+                                className="text-violet-600 hover:text-red-700 font-bold text-sm hover:bg-red-300 rounded-md"
                             >
                                 <svg
                                     xmlns="http://www.w3.org/2000/svg"
@@ -120,4 +116,6 @@ export default function CourseTranscriptList(props) {
             </div>
         </div>
     );
-}
+});
+
+export default CourseTranscriptList;
diff --git a/my-app/src/views/Components/SideBarComponents/MultipleChoiceButtons.jsx b/my-app/src/views/Components/SideBarComponents/MultipleChoiceButtons.jsx
@@ -11,7 +11,7 @@ export default function MultipleChoiceButtons(props) {
 
     useEffect(() => {
         setFilterEnabled(props.filterEnable);
-    })
+    },[props.filterEnable])
 
     const handleClick = (index) => {
         setSelectedItems((prev) => {
@@ -36,17 +36,18 @@ export default function MultipleChoiceButtons(props) {
             return "default-button-class"; // Fallback class for invalid index
         }
 
-        const baseClasses = `flex-auto py-1 px-4 inline-flex items-center gap-x-2 text-sm
-      font-medium focus:z-10 border border-gray-200 shadow-2xs hover:bg-[#8785ac]
-      focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none pl-8`;
+        const baseClasses = `flex-auto py-1 px-4 inline-flex items-center text-sm
+          font-medium focus:z-10 border border-gray-200 shadow-2xs hover:bg-[#8785ac]
+          focus:outline-hidden sm:pl-7 pl-4 text-center`;
         const activeClass = selectedItems[index] ? "bg-violet-500" : "bg-transparent";
         const roundedClasses =
             index === 0
-                ? "rounded-l-lg"
-                : index === props.items.length - 1
-                    ? "rounded-r-lg"
-                    : "border-l-0";
-        return `${baseClasses} ${activeClass} ${roundedClasses}`;
+            ? "rounded-l-lg"
+            : index === props.items.length - 1
+                ? "rounded-r-lg"
+                : "border-l-0 ";
+        const mobileClasses = "w-full sm:w-auto"; // Adjust for mobile
+        return `${baseClasses} ${activeClass} ${roundedClasses} ${mobileClasses}`;
     };
 
     return (
@@ -74,7 +75,7 @@ export default function MultipleChoiceButtons(props) {
             }}>
 
                 <div className="my-1">
-                    <div className="flex flex-col sm:inline-flex sm:flex-row rounded-lg shadow-2xs 
+                    <div className="flex  sm:inline-flex rounded-lg shadow-2xs 
       w-full items-center font-medium text-white bg-[#aba8e0]">
                         {props.items.map((item, index) => (
                             <button
diff --git a/my-app/src/views/Components/SideBarComponents/SliderField.jsx b/my-app/src/views/Components/SideBarComponents/SliderField.jsx
@@ -1,15 +1,16 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, useMemo } from "react";
 import FilterEnableCheckbox from "./FilterEnableCheckbox";
 import Tooltip from "./ToolTip";
 
 export default function UploadField(props) {
     let paramFieldType = "slider";
 
-    const values = [
+
+    const values = useMemo(() => [
         1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5,
         6, 7, 7.5, 8, 8.5, 9, 10, 11, 12, 13.5,
         14, 15, 20, 22.5, 30, 45
-    ];
+    ], []);
 
     const [minIndex, setMinIndex] = useState(0);
     const [maxIndex, setMaxIndex] = useState(values.length - 1);
@@ -19,14 +20,15 @@ export default function UploadField(props) {
 
     useEffect(() => {
         for (let i = 0; i < values.length; i++) {
-            if (values[i] === props.initialValues[0]) {
+            if (values[i] === props?.initialValues[0]) {
                 setMinIndex(i);
             }
-            if (values[i] === props.initialValues[1]) {
+            if (values[i] === props?.initialValues[1]) {
                 setMaxIndex(i);
             }
         }
-    }, []); // Empty dependency array ensures this runs only once
+    }, [props?.initialValues, values]); // Empty dependency array ensures this runs only once
+
 
 
     const handleDrag = (e, thumbType) => {
@@ -110,7 +112,7 @@ export default function UploadField(props) {
                                 window.addEventListener("mousemove", move);
                                 window.addEventListener("mouseup", up);
                             }}
-                            onTouchStart={(e) => {
+                            onTouchStart={() => {
                                 const move = (ev) => handleDrag(ev, "min");
                                 const end = () => {
                                     window.removeEventListener("touchmove", move);
@@ -139,7 +141,7 @@ export default function UploadField(props) {
                                 window.addEventListener("mousemove", move);
                                 window.addEventListener("mouseup", up);
                             }}
-                            onTouchStart={(e) => {
+                            onTouchStart={() => {
                                 const move = (ev) => handleDrag(ev, "max");
                                 const end = () => {
                                     window.removeEventListener("touchmove", move);
diff --git a/my-app/src/views/Components/SideBarComponents/ToggleField.jsx b/my-app/src/views/Components/SideBarComponents/ToggleField.jsx
@@ -7,7 +7,9 @@ export default function ToggleField(props) {
     let paramFieldType = "toggle";
 
     const [filterEnabled, setFilterEnabled] = useState(props.filterEnable);
-    const [prop1Set, setprop1Set] = useState((props.initialValues=="both") || (props.initialValues==String(props.fields[0]).charAt(0).toLowerCase() + String(props.fields[0]).slice(1)));
+    //eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [prop1Set, setprop1Set] = useState((props.initialValues == "both") || (props.initialValues == String(props.fields[0]).charAt(0).toLowerCase() + String(props.fields[0]).slice(1)));
+    //eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [prop2Set, setprop2Set] = useState((props.initialValues=="both") || (props.initialValues==String(props.fields[1]).charAt(0).toLowerCase() + String(props.fields[1]).slice(1)));
 
     const checkboxRef = useRef(null);
@@ -36,7 +38,7 @@ export default function ToggleField(props) {
                         checkboxRef.current.click();
                     }
             }}>
-                <div className="flex flex-col sm:flex-row md:flex-row rounded-lg shadow-2xs w-full items-center
+                <div className="flex sm:flex-row rounded-lg shadow-2xs w-full items-center
              font-medium text-white bg-[#aba8e0] ">
                     <label className="flex-auto py-3 px-4 inline-flex gap-x-2 -mt-px -ms-px 
                 first:rounded-t-md last:rounded-b-md sm:first:rounded-s-md sm:mt-0 sm:first:ms-0 s
diff --git a/my-app/src/views/Components/SideBarComponents/UploadField.jsx b/my-app/src/views/Components/SideBarComponents/UploadField.jsx
@@ -4,6 +4,7 @@ import FilterEnableCheckbox from "./FilterEnableCheckbox";
 //import * as scraper from '../../../../src/scripts/transcript-scraper/transcript-scraper.js';
 import ButtonGroupField from './ButtonGroupField';
 import ToolTip from './ToolTip';
+import UploadGif from "../../../assets/upload.gif";
 
 export default function UploadField(props) {
 
@@ -27,8 +28,7 @@ export default function UploadField(props) {
         setIsDragging(false);
         if (event.dataTransfer.files.length > 0) {
             props.handleFileChange({ target: { files: event.dataTransfer.files } });
-            setfileUploaded(localStorage.getItem("completedCourses") != undefined);
-            console.log(localStorage.getItem("completedCourses") != undefined);
+            setfileUploaded(true);
         }
     };
 
@@ -39,20 +39,20 @@ export default function UploadField(props) {
                     <h3>{String(props.filterName).charAt(0).toUpperCase() + String(props.filterName).slice(1)} scraper</h3>
                 </div>
 
-                <div className={`pt-1 flex-none ${!fileUploaded? "hidden" : ""}`}>
+                <div className={`pt-1 flex-none ${!fileUploaded ? "hidden" : ""}`}>
 
                     <FilterEnableCheckbox
                         ref={checkboxRef}
                         initialValue={filterEnabled}
                         onToggle={() => {
                             setFilterEnabled(!filterEnabled);
                             props.HandleFilterEnable(["transcript", !filterEnabled]);
-                        }} 
+                        }}
                     />
                 </div>
             </div>
             <div></div>
-            <div className={`${(!fileUploaded) ? ("opacity-100") : (filterEnabled? "opacity-100": "opacity-50")}`} onClick={() => {
+            <div className={`${(!fileUploaded) ? ("opacity-100") : (filterEnabled ? "opacity-100" : "opacity-50")}`} onClick={() => {
                 if (!filterEnabled && checkboxRef.current) {
                     checkboxRef.current.click();
                 }
@@ -73,32 +73,34 @@ export default function UploadField(props) {
                             />
                         </div>
                         <div className="flex flex-col items-center justify-center pt-5">
-                            <img src="..\..\..\..\src\assets\upload.gif" alt="Upload GIF" className="object-contain" />
+                            <img src={UploadGif} alt="Upload GIF" className="object-contain" />
                             <p className=" text-sm "><span className="font-semibold">Click to upload</span> or drag and drop</p>
                             <p className="text-xs">National Official Transcript of Records in PDF format</p>
                         </div>
                         <input
-                            id="PDF-Scraper-Input" 
-                            type="file" 
-                            className="hidden" 
+                            id="PDF-Scraper-Input"
+                            type="file"
+                            className="hidden"
                             onChange={(event) => {
                                 props.handleFileChange(event);
                                 setfileUploaded(true);
-                            }}  />
+                            }} />
                     </label>
                 </div>
-                <ButtonGroupField
-                    items={["Weak", "Moderate", "Strong"]}
-                    HandleFilterChange={props.HandleFilterChange}
-                    initialValue={props.initialValue}
-                />
+                <div className={`${(!fileUploaded) ? ("opacity-50 pointer-events-none") : (filterEnabled ? "opacity-100" : "opacity-50")}`}>
+                    <ButtonGroupField
+                        items={["Weak", "Moderate", "Strong"]}
+                        HandleFilterChange={props.HandleFilterChange}
+                        initialValue={props.initialValue}
+                    />
+                </div>
             </div>
             <div className='max-w-70'>
                 <pre id="PDF-Scraper-Error" className={`text-red-500 text-xs text-wrap ${props.errorVisibility}`}>
                     {props.errorMessage}
                 </pre>
             </div>
-            <div className={`${(filterEnabled? "opacity-100": "opacity-50")} ${filterEnabled ? "pointer-events-auto" : "pointer-events-none user-select-none"
+            <div className={`${(filterEnabled ? "opacity-100" : "opacity-50")} ${filterEnabled ? "pointer-events-auto" : "pointer-events-none user-select-none"
                 }`}>
                 <CourseTranscriptList
                     reApplyFilter={props.reApplyFilter}
