Added comments explaining each function in UserPreferences and Locati…

…onGetter

src/components/LocationGetter.jsx

@@ -2,13 +2,20 @@ import React from "react"
 import { useState, useEffect, useRef } from 'react'
 import './UserPreferences.css'
 
+/**
+ * Asks the user for their current location. Obtains the user's location if they allow it and returns it.
+ * @component
+ */
+
 const LocationGetter = () => {
 
     const [location, setLocation] = useState({
         loaded: false,
         coordinates: {lat: "", lng: ""} 
     });
 
+
+
     const onSuccess = location => {
         setLocation({
             loaded: true,

src/components/UserPreferences.jsx

@@ -4,6 +4,11 @@ import './UserPreferences.css'
 
 let preference_list = [];
 
+/**
+ * The User Preferences component of the application. A dropdown list consisting of types and animals and their attributes.
+ * The user can click on them to filter what the website shows so they only see the pets they're looking for.
+ * @component
+ */
 const UserPreferences = (props) => {
 
   const [open, setOpen] = useState(false);
@@ -13,7 +18,12 @@ const UserPreferences = (props) => {
     "Barnyard", "Good with Children", "Good with Dogs", "Good with Cats", "House Trained", "Special Needs"];
   const [checked, setChecked] = useState([]);
 
-  // Add/Remove checked item from list
+   /**
+   * Adds or removes a checked or unchecked item to and from the list of checked items.
+   *
+   * @param {Object} event - The list of user preferences.
+   * @function
+   */
   const handleCheck = (event) => {
     var updatedList = [...checked];
     if (event.target.checked) {
@@ -24,22 +34,32 @@ const UserPreferences = (props) => {
     setChecked(updatedList);
   };
 
-  // Return classes based on whether item is checked
+  /**
+   * Returns items based on whether or not the item is checked
+   * @param {Object} item - The item in the checklist.
+   * @function
+   */
   const isChecked = (item) =>
     checked.includes(item) ? "checked-item" : "not-checked-item";
 
-  // Generate string of checked items
+  // Generates a string of checked items
   var checkedItems = checked.length
     ? checked.reduce((total, item) => {
       return total + ", " + item;
     })
     : "";
 
+   /**
+   * Submits a list of all checked items. Function fires when the user clicks on "Submit Preferences"
+   * @function
+   */
   const handleSubmit = () => {
-    //console.log("The handle submit function is being used");
     props.onSubmit(preference_list);
   };
-
+ /**
+   * Opens and closes the User Preferences menu when the user clicks on it.
+   * @function
+   */
   function handleClick() {
     if (display == 'none') {
       setDisplay('block')
@@ -50,6 +70,10 @@ const UserPreferences = (props) => {
 
   let menuRef = useRef();
 
+   /**
+   * Unused function that closes the menu when the user clicks outside of it. Doesn't really work for some reason.
+   * @function
+   */
   useEffect(() => {
     let handler = (e) => {
       if (!menuRef.current.contains(e.target)) {
@@ -89,6 +113,11 @@ const UserPreferences = (props) => {
   );
 }
 
+  /**
+   * The submission button for the User Preferences menu. Sets the preferences that the user selects.
+   *
+   * @param {Object} props - List of checked items.
+   */
 
 function Element(props) {
   return (
@@ -97,6 +126,12 @@ function Element(props) {
     </div>
   )}
 
+  /**
+   * Changes the list of preferences to only contain the checked items the user selected.
+   *
+   * @param {Array} pref_list - The list of user preferences.
+   * @function
+   */
 const pref_changer = (new_preferences) => {
   preference_list = new_preferences.split(", ");
   for (var i = 0; i < preference_list.length; i++) {