modified: src/opportunities/components/FiltersField.tsx

WBroadwell · WBroadwell · commit e72fc7b4c48c · 2025-03-13T15:36:41.000-04:00
modified:   src/opportunities/components/Posts.tsx
	modified:   src/opportunities/pages/Jobs.tsx
diff --git a/src/opportunities/components/FiltersField.tsx b/src/opportunities/components/FiltersField.tsx
@@ -7,7 +7,7 @@ import { PiSlidersHorizontal } from "react-icons/pi";
 import { MdCancel } from "react-icons/md";
 import PropTypes from "prop-types";
 
-const FiltersField = ({ clearFilters, deleteFilter, filters, setPopUpMenu }) => {
+const FiltersField = ({ resetFilters, deleteFilter, filters, setPopUpMenu }) => {
   
   return (
     <div>
@@ -17,9 +17,9 @@ const FiltersField = ({ clearFilters, deleteFilter, filters, setPopUpMenu }) =>
           <SearchBar />
 
           <SmallTextButton className="" onClick={setPopUpMenu} special={true}>
-            <PiSlidersHorizontal />
-            All Filters
-            <PiSlidersHorizontal />
+            <PiSlidersHorizontal className="pr-1"/>
+            Change Filters
+            <PiSlidersHorizontal className="pl-1"/>
           </SmallTextButton>
 
           {/* Fix rendering with new filters = [ [],[],[] ]*/}
@@ -39,8 +39,8 @@ const FiltersField = ({ clearFilters, deleteFilter, filters, setPopUpMenu }) =>
           </GroupedComponents>
         </div>
 
-        <SmallTextButton className="flex flex-right" onClick={clearFilters} special={true}>
-          Clear
+        <SmallTextButton className="flex flex-right" onClick={resetFilters} special={true}>
+          Reset
         </SmallTextButton>
       </div>
       <hr />
@@ -49,7 +49,7 @@ const FiltersField = ({ clearFilters, deleteFilter, filters, setPopUpMenu }) =>
 };
 
 FiltersField.propTypes = {
-  clearFilters: PropTypes.func.isRequired,
+  resetFilters: PropTypes.func.isRequired,
   deleteFilter: PropTypes.func.isRequired,
   filters: PropTypes.arrayOf(PropTypes.array),
   setPopUpMenu: PropTypes.func.isRequired,
diff --git a/src/opportunities/components/Posts.tsx b/src/opportunities/components/Posts.tsx
@@ -9,11 +9,14 @@ import CheckBox from "../../staff/components/Checkbox.tsx";
 import PropTypes from "prop-types";
 import Input from "../../staff/components/Input";
 
-const PopUpMenu = ( {setFunction, validYears, clear, add} ) => {
+const PopUpMenu = ( {setFunction, validYears, clear, add, reset} ) => {
   const checkboxes = [["Semester",["Summer","Fall","Spring"],"semesters"],
                 ["Eligible Years",validYears,"years"],
-                ["Credits", [1,2,3,4],"credits"]]
-
+                ["Credits", ["1","2","3","4"],"credits"]]
+  const majors = [["ARCH", "LGHT", "BMED", "CHME", "CIVL", "ECSE", "ENGR", "ENVE", "ECSI", "ISYE"],
+                  ["MANE", "MTLE", "ARTS", "COMM", "IHSS", "INQR", "LANG", "LITR", "PHIL"],
+                  ["STDO", "WRIT", "COGS", "ECON", "GSAS", "PSYC", "ITWS", "MGMT", "ASTR"],
+                  ["BCBP", "BIOL", "CHEM", "CSCI", "ISCI", "ERTH", "MATH", "MATP", "PHYS"]]
   const {
     register,
     handleSubmit,
@@ -24,18 +27,20 @@ const PopUpMenu = ( {setFunction, validYears, clear, add} ) => {
       years: [],
       credits: [],
       hourlyPay: 0,
+      majors: []
     },
   });
 
   interface FormData {
     semesters: string[],
     years: string[],
     credits: string[],
-    hourlyPay: string
+    hourlyPay: string,
+    majors: string[]
   }
 
   function submitHandler(data: FormData) {
-    const { semesters, years, credits, hourlyPay } = data;
+    const { semesters, years, credits, hourlyPay, majors} = data;
     clear();
     add(semesters)
     add(years)
@@ -45,7 +50,7 @@ const PopUpMenu = ( {setFunction, validYears, clear, add} ) => {
     } else {
       add([hourlyPay])
     }
-
+    add(majors)
     setFunction()
   };
 
@@ -62,44 +67,67 @@ const PopUpMenu = ( {setFunction, validYears, clear, add} ) => {
                     onSubmit={handleSubmit((data) => {
                       submitHandler(data);
                     })}
-                    className="form-container" // Form container for vertical layout
-                  >
-                    <section className="flex justify-center">
-                      { checkboxes.map((filter) => (
-                          <div className="w-1/3" key={filter[2]}>
-                            <CheckBox
-                              errors={errors}
-                              errorMessage={filter[2] + " checkbox failed"}
-                              label={filter[0]}
-                              options={filter[1]}
-                              formHook={{ ...register(filter[2], {}) }}
-                              name={filter[2]}
-                              type="checkbox"
-                            />
-                          </div>
-                        )) }
-                    </section>
-                    <section className="flex justify-center">
-                      <Input
-                      errors={errors}
-                      label="Minimum Hourly Pay"
-                      name={"hourlyPay"}
-                      errorMessage={"Hourly pay must be at least 0"}
-                      formHook={{ ...register("hourlyPay", {}) }}
-                      type="number"
-                      options={[]}
-                      placeHolder="Enter minimum hourly pay"
-                      />
+                    className="form-container" 
+                  > <section className="flex flex-col max-h-96 overflow-y-auto"> {/* Added max-height and overflow-y-auto */}
+                      <section className="flex justify-center">
+                        { checkboxes.map((filter) => (
+                            <div className="w-1/3" key={filter[2]}>
+                              <CheckBox
+                                errors={errors}
+                                errorMessage={filter[2] + " checkbox failed"}
+                                label={filter[0]}
+                                options={filter[1]}
+                                formHook={{ ...register(filter[2], {}) }}
+                                name={filter[2]}
+                                type="checkbox"
+                              />
+                            </div>
+                          )) }
+                      </section>
+                      <section className="flex justify-center">
+                        <Input
+                        errors={errors}
+                        label="Minimum Hourly Pay"
+                        name={"hourlyPay"}
+                        errorMessage={"Hourly pay must be at least 0"}
+                        formHook={{ ...register("hourlyPay", {}) }}
+                        type="number"
+                        options={[]}
+                        placeHolder="Enter minimum hourly pay"
+                        />
+                      </section>
+                      
+                      <section className="pt-7 flex flex-col justify-center">
+                        <h1 className="font-semibold text-lg text-center">Majors</h1>
+                        <section className="flex justify-center">
+                          { majors.map((list, index) => (
+                              <div className="w-1/4 pl-7 pr-7" key={"majors" + index}>
+                                <CheckBox
+                                  errors={errors}
+                                  errorMessage={"majors" + index + " checkbox failed"}
+                                  options={list}
+                                  formHook={{ ...register("majors", {}) }}
+                                  name={"majors" + index}
+                                  type="checkbox"
+                                />
+                              </div>
+                            )) }
+                      </section>
+                      </section>
                     </section>
                     
                     <section className="flex flex-row justify-center">
-                      <div className="w-1/2 flex justify-center">
+                      <div className="w-1/3 flex justify-center">
                         <button type="button" onClick={setFunction} className="btn btn-primary border-black text-gray-700 bg-white w-1/2 hover:text-gray-900 hover:bg-gray-200 hover:border-black focus:text-gray-900 focus:bg-gray-100 focus:border-black">Cancel</button>
                       </div>
-                      <div className="w-1/2 flex justify-center">
+                      <div className="w-1/3 flex justify-center">
+                        <button type="button" onClick={() => {reset(); setFunction();}} className="btn btn-primary border-black text-gray-700 bg-white w-1/2 hover:text-gray-900 hover:bg-gray-200 hover:border-black focus:text-gray-900 focus:bg-gray-100 focus:border-black">Reset</button>
+                      </div>
+                      <div className="w-1/3 flex justify-center">
                         <input type="submit" value="Search" className="btn btn-primary bg-blue-700 text-gray-100 w-1/2 hover:bg-blue-800 focus:bg-blue-800" />
                       </div>
                     </section>
+
                   </form>
                 </section>
             </div>
@@ -115,16 +143,25 @@ PopUpMenu.propTypes = {
   validYears: PropTypes.arrayOf(PropTypes.string),
   clear: PropTypes.func.isRequired,
   add: PropTypes.func.isRequired,
+  reset: PropTypes.func.isRequired
 };
 
 const Posts = ( {years} ) => {
   const [popUpMenu, setPopUpMenu] = React.useState(false);
 
+  const date = new Date();
+  const month = date.getMonth();
+  const currSem = (0 <= month && month <= 5) ? "Spring" : (5 < month && month <= 8) ? "Summer" : "Fall";
+  const currYr = date.getFullYear();
+
   const reducer = (state, action) => {
     switch (action.type) {
       case "CLEAR_FILTERS":
         state.filters = [[],[]];
         return { ...state };
+      case "RESET_FILTERS":
+        state.filters = [[[currSem],[currYr],[],[],[]],[currSem, currYr]];
+        return { ...state };
       case "REMOVE_FILTER":
         if (action.filter) {
           state.filters[1] = state.filters[1].filter((item) => item !== action.filter);
@@ -158,7 +195,7 @@ const Posts = ( {years} ) => {
   };
 
   const [jobState, dispatch] = useReducer(reducer, {
-    filters: [[],[]],
+    filters: [[[currSem],[currYr],[],[],[]],[currSem, currYr]],
     activeId: "",
     jobs: [],
   });
@@ -167,6 +204,10 @@ const Posts = ( {years} ) => {
     dispatch({ type: "CLEAR_FILTERS"});
   }, []);
 
+  const resetFilters = useCallback(() => {
+    dispatch({ type: "RESET_FILTERS"});
+  }, []);
+
   const removeFilter = useCallback((name) => {
     dispatch({ type: "REMOVE_FILTER", filter: name });
   }, []);
@@ -198,11 +239,11 @@ const Posts = ( {years} ) => {
     fetchOpportunities();
   }, []);
 
-
+  console.log()
   return (
     <section>
-      <FiltersField clearFilters={clearFilters} deleteFilter={removeFilter} filters={jobState.filters} setPopUpMenu={()=>setPopUpMenu(!popUpMenu)} />
-      {popUpMenu && <PopUpMenu setFunction={() => setPopUpMenu(!popUpMenu)} validYears={years} clear={clearFilters} add={addFilter}/>}
+      <FiltersField resetFilters={resetFilters} deleteFilter={removeFilter} filters={jobState.filters} setPopUpMenu={()=>setPopUpMenu(!popUpMenu)} />
+      {popUpMenu && <PopUpMenu setFunction={() => setPopUpMenu(!popUpMenu)} validYears={years} clear={clearFilters} add={addFilter} reset={resetFilters}/>}
       <PostsField
         activeId={jobState.activeId}
         setActive={setActiveId}
diff --git a/src/opportunities/pages/Jobs.tsx b/src/opportunities/pages/Jobs.tsx
@@ -19,6 +19,7 @@ const Jobs = () => {
     }
   }
   fetchYears()
+  
   const [pages, switchPage] = usePageNavigation(["Search", "Saved"], "Search");
 
   return loading === false && years != null ? (

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@ const Jobs = () => {`
`19`	`19`	`}`
`20`	`20`	`}`
`21`	`21`	`fetchYears()`
	`22`	`+`
`22`	`23`	`const [pages, switchPage] = usePageNavigation(["Search", "Saved"], "Search");`
`23`	`24`
`24`	`25`	`return loading === false && years != null ? (`