Will-Frontend

package.json

@@ -19,7 +19,7 @@
     "glob": "^11.0.0",
     "lru-cache": "^11.0.1",
     "postcss-resolve-url": "^0.0.1",
-    "react": "^19.0.0",
+    "react": "^18.3.1",
     "react-cookie": "^7.2.2",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.2",

src/App.tsx

@@ -4,12 +4,12 @@ import "./style/App.css";
 import Home from "./shared/pages/Home.tsx";
 import PageNotFound from "./shared/pages/404.tsx";
 import MainNavigation from "./shared/components/Navigation/MainNavigation.tsx";
-import Jobs from "./opportunities/pages/Jobs.js";
+import Jobs from "./opportunities/pages/Jobs.tsx";
 import Departments from "./staff/pages/Departments.tsx";
 import StaffPage from "./staff/pages/Staff.tsx";
 import Department from "./staff/pages/Department.tsx";
 import CreatePost from "./staff/pages/CreatePost.tsx";
-import IndividualPost from "./opportunities/pages/IndividualPost.js";
+import IndividualPost from "./opportunities/pages/IndividualPost.tsx";
 import ProfilePage from "./shared/pages/Profile.tsx";
 import LoginRedirection from "./auth/Login.tsx";
 import LogoutRedirection from "./auth/Logout.tsx";

src/opportunities/components/FiltersField.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import SmallTextButton from "./SmallTextButton.tsx";
+import SearchBar from "./SearchBar.tsx";
+import GroupedComponents from "../../shared/components/UIElements/GroupedComponents";
+import HorizontalIconButton from "./HorizontalIconButton.tsx";
+import { PiSlidersHorizontal } from "react-icons/pi";
+import { MdCancel } from "react-icons/md";
+import PropTypes from "prop-types";
+
+const FiltersField = ({ resetFilters, deleteFilter, filters, setPopUpMenu }) => {
+
+  return (
+    <div>
+      <hr />
+      <div className="px-3 max-h-20 flex">
+        <div className="flex gap-2 w-full">
+          <SearchBar />
+
+          <SmallTextButton className="" onClick={setPopUpMenu} special={true}>
+            <PiSlidersHorizontal className="pr-1"/>
+            Change Filters
+            <PiSlidersHorizontal className="pl-1"/>
+          </SmallTextButton>
+
+          {/* Fix rendering with new filters = [ [],[],[] ]*/}
+          <GroupedComponents gap={2}>
+            {filters[1].map((filter) => {
+              return(
+                <HorizontalIconButton
+                  onClick={deleteFilter}
+                  icon={<MdCancel />}
+                  key={filter}
+                  special={false}
+                >
+                  {filter}
+                </HorizontalIconButton>
+              )
+            })}
+          </GroupedComponents>
+        </div>
+
+        <SmallTextButton className="flex flex-right" onClick={resetFilters} special={true}>
+          Reset
+        </SmallTextButton>
+      </div>
+      <hr />
+    </div>
+  );
+};
+
+FiltersField.propTypes = {
+  resetFilters: PropTypes.func.isRequired,
+  deleteFilter: PropTypes.func.isRequired,
+  filters: PropTypes.arrayOf(PropTypes.array),
+  setPopUpMenu: PropTypes.func.isRequired,
+};
+
+export default FiltersField;

src/opportunities/components/HorizontalIconButton.js → src/opportunities/components/HorizontalIconButton.tsx

@@ -1,4 +1,5 @@
-import React, { Children } from "react";
+import React from "react";
+import PropTypes from "prop-types";
 
 const HorizontalIconButton = ({ children, onClick, icon, special }) => {
   return (
@@ -20,4 +21,11 @@ const HorizontalIconButton = ({ children, onClick, icon, special }) => {
   );
 };
 
+HorizontalIconButton.propTypes = {
+  children: PropTypes.node,
+  onClick: PropTypes.func.isRequired,
+  icon: PropTypes.node,
+  special: PropTypes.bool,
+}
+
 export default HorizontalIconButton;