From 8b7c5dc748afcd7a8549dea525a4276603d01c7a Mon Sep 17 00:00:00 2001
From: Soohyeun <soohyeunp@gmail.com>
Date: Wed, 22 May 2024 02:15:41 -0700
Subject: [PATCH] Document functions

---
 src/app/jobsite1/page.js              |  5 +----
 src/app/jobsite2/page.js              | 11 +++++++++++
 src/components/jobsite1/Filter.jsx    | 24 ++++++++++++++++++++++--
 src/components/jobsite2/searchBar.jsx |  8 ++++++++
 4 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/app/jobsite1/page.js b/src/app/jobsite1/page.js
index 9e2a0a7..e6f9860 100644
--- a/src/app/jobsite1/page.js
+++ b/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" />
diff --git a/src/app/jobsite2/page.js b/src/app/jobsite2/page.js
index c8c66a4..4df710f 100644
--- a/src/app/jobsite2/page.js
+++ b/src/app/jobsite2/page.js
@@ -17,6 +17,9 @@ 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,
@@ -24,12 +27,20 @@ export default function Home() {
     });
   };
 
+  /**
+   * 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');
diff --git a/src/components/jobsite1/Filter.jsx b/src/components/jobsite1/Filter.jsx
index 0e1ed3d..458991c 100644
--- a/src/components/jobsite1/Filter.jsx
+++ b/src/components/jobsite1/Filter.jsx
@@ -15,12 +15,15 @@ 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;
@@ -28,17 +31,34 @@ export default function Filter({ onChangeFilter, setPage }) {
     }, {})
   );
 
+  /**
+   * 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>
diff --git a/src/components/jobsite2/searchBar.jsx b/src/components/jobsite2/searchBar.jsx
index a50dde9..070fed1 100644
--- a/src/components/jobsite2/searchBar.jsx
+++ b/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,