Document functions

src/app/jobsite1/page.js

@@ -11,12 +11,9 @@ export default function Home() {
   const [sortByDate, setSortByDate] = useState(false);
   const [filterValues, setFilterValues] = useState({});
 
-  const onChangeFilter = values => {
-    setFilterValues(values);
-  };
   return (
     <div className="flex flex-col lg:flex-row">
-      <Filter onChangeFilter={onChangeFilter} setPage={setPage} />
+      <Filter onChangeFilter={setFilterValues} setPage={setPage} />
       <div className="flex-1 p-6 flex flex-col">
         <div className="mb-1 relative">
           <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500" />

src/app/jobsite2/page.js

@@ -17,19 +17,30 @@ export default function Home() {
   const [sortByDate, setSortByDate] = useState(false);
   const [filterValues, setFilterValues] = useState({});
 
+  /**
+   * Scroll to top.
+   */
   const scrollToTop = id => {
     document.getElementById(id).scrollTo({
       top: 0,
       behavior: 'smooth',
     });
   };
 
+  /**
+   * Set filter values, set page to 1, and scroll to top when filter value is changed.
+   *  @param {object} values - selected options as an object, keys as categories, values as selected options
+   */
   const onChangeFilter = values => {
     setFilterValues(values);
     setPage(1);
     scrollToTop('joblists');
   };
 
+  /**
+   * Set page number, and scroll to top when page is changed.
+   *  @param {int} pageNum - selected page number
+   */
   const onClickPage = pageNum => {
     setPage(pageNum);
     scrollToTop('joblists');

src/components/jobsite1/Filter.jsx

@@ -15,30 +15,50 @@ const toggleFilters = () => {
 
 export default function Filter({ onChangeFilter, setPage }) {
   const [isLargeScreen, setIsLargeScreen] = useState(true);
+
+  // State for managing the selected jobtypes. The initial state sets all jobtyps to false.
   const [jobTypes, setJobTypes] = useState(
     Object.keys(JOBTYPES).reduce((acc, province) => {
       acc[province] = false;
       return acc;
     }, {})
   );
+  // State for managing the selected locations. The initial state sets all locations to false.
   const [locations, setLocations] = useState(
     Object.keys(PROVINCES).reduce((acc, province) => {
       acc[province] = false;
       return acc;
     }, {})
   );
 
+  /**
+   * Handle changes to the job type selection.
+   * This function toggles the boolean value of a job type in the state.
+   *
+   * @param {Object} event - The event object from the change event.
+   * @param {Object} event.target - The target element that triggered the event.
+   */
   const handleJobTypeChange = event => {
     const { id } = event.target;
     setJobTypes(prevState => ({ ...prevState, [id]: !prevState[id] }));
   };
 
+  /**
+   * Handle changes to the location selection.
+   * This function toggles the boolean value of a location in the state.
+   *
+   * @param {Object} event - The event object from the change event.
+   * @param {Object} event.target - The target element that triggered the event.
+   */
   const handleLocationChange = event => {
     const { id } = event.target;
     setLocations(prevState => ({ ...prevState, [id]: !prevState[id] }));
   };
 
-  const getCheckedValues = () => {
+  /**
+   * Retrieve selected job types and locations, then triggers filter change.
+   */
+  const onClickConfirmFilter = () => {
     const selectedJobTypes = Object.keys(jobTypes).filter(key => jobTypes[key]);
     const selectedLocations = Object.keys(locations).filter(
       key => locations[key]
@@ -102,7 +122,7 @@ export default function Filter({ onChangeFilter, setPage }) {
             </div>
           </div>
           <div className="flex justify-end">
-            <Button onClick={getCheckedValues}>Confirm</Button>
+            <Button onClick={onClickConfirmFilter}>Confirm</Button>
           </div>
         </div>
       </div>

src/components/jobsite2/searchBar.jsx

@@ -14,6 +14,10 @@ import React, { useState } from 'react';
 export default function SearchBar({ onChangeFilter }) {
   const [selectedValue, setSelectedValue] = useState({});
 
+  /**
+   * Change to the location selection.
+   * @param {string} value - selected location
+   */
   const handleLocationChange = value => {
     const updatedValue = {
       ...selectedValue,
@@ -23,6 +27,10 @@ export default function SearchBar({ onChangeFilter }) {
     onChangeFilter(updatedValue);
   };
 
+  /**
+   * Change to the job type selection.
+   * @param {string} value - selected job type
+   */
   const handleJobTypeChange = value => {
     const updatedValue = {
       ...selectedValue,