Merge branch 'sprint-4-backup-backup' into Tu-Dev

README.md

@@ -60,4 +60,4 @@ AZURE_SQL_PASSWORD=<your password>
 
 ![Building and Running the App](src/assets/build-instructions.png)
 
-Cat icons created by  [Freepik](https://www.flaticon.com/authors/freepik) from [www.flaticon.com](https://www.flaticon.com/)
+Cat icons created by  [Freepik](https://www.flaticon.com/authors/freepik) from [www.flaticon.com](https://www.flaticon.com/)

src/App.css

@@ -167,7 +167,19 @@ footer{
   }
 }
 
-
+.learn-more{
+  background-color: black;
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+  border-radius: 20px;
+}
 
 
 

src/App.jsx

@@ -9,12 +9,22 @@ import UserPreferences from './components/UserPreferences'
 import LocationGetter from './components/LocationGetter'
 library.add(faThumbsUp, faThumbsDown);
 
-
+/**
+ * The main App component of the application. Displays current pet with details and a like or dislike button.
+ * 
+ *
+ * @component
+ * @returns {JSX.Element} The rendered App component.
+ */
 function App() {
 
 
   const [modal, setModal] = useState(false);
 
+  /**
+   * Toggles whether the modal is displayed or not
+   * @function
+   */
   const toggleModal = () => {
     setModal(!modal);
   };
@@ -33,7 +43,11 @@ function App() {
   const location = LocationGetter();
 
 
-
+  /**
+   * A React hook that takes the users' preferences and fetches pets from PetFinder to display
+   * 
+   * @memberof module:React
+   */
   useEffect(() => {
     // temp user prefs
     let userPrefs = ['Dog', 'Cat', 'Small & Furry', 'Scales, Fins & Other', 'Barnyard', 'good_with_children', 'house_trained'];
@@ -52,7 +66,11 @@ function App() {
     console.log(`User Email: ${userEmail}`)
   }
 
-
+  /**
+   * A React hook that fetches the user data and stores it in sessionStorage
+   * 
+   * @memberof module:React
+   */    
   useEffect(() => {
       const fetchUserData = async () => {
       try {
@@ -70,7 +88,15 @@ function App() {
   fetchUserData();
   }, []);
 
-  //update user data
+  /**
+   * Asynchronously handles the like action for the current pet.
+   * Adds the current pet to the user preferences with a preference of 'like'.
+   * Then moves to the next pet.
+   *
+   * @async
+   * @function handleLike
+   * @return {Promise} Resolves when the like action has been handled.
+   */
   const handleLike = async () => {
     // Get the petID from the current pet
     const petID = pets[currentPetIndex].id;
@@ -96,6 +122,11 @@ function App() {
     }
   }
 
+  /**
+   * Handles the process of getting the next pet.
+   * Displays the next pet on the page or displays the first pet on the next page.
+   * @function nextPet
+   */
   const nextPet = () => {
     if (currentPetIndex < pets.length - 1) {
       console.log(currentPetIndex)
@@ -107,6 +138,13 @@ function App() {
     }
   };
 
+  /**
+   * Handles the dislike action for the current pet.
+   * Adds the current pet to the user preferences with a preference of 'dislike'.
+   * Then moves to the next pet.
+   *
+   * @function handleDislike
+   */
   const handleDislike = () => {
     setUserPreferences([...userPreferences, { id: pets[currentPetIndex].id, preference: 'dislike' }])
     nextPet();
@@ -116,16 +154,24 @@ function App() {
   //   setUserPreferences([...userPreferences, { id: pets[currentPetIndex].id, preference: 'like' }])
   //   nextPet();
   // }
-
-  //console log userPreferences
+  /**
+   * A React hook that takes logs the users preferences on change
+   * 
+   * @memberof module:React
+   */    
   useEffect(() => {
     console.log(userPreferences)
 
 
 
   }, [userPreferences]) //only runs when userPreferences changes, console log userPreferences
 
-
+  /**
+   * Fetches the user's pet preferences from the server and updates the state.
+   *
+   * @param {Array} pref_list - The list of user preferences.
+   * @function getPreferences
+   */
   const getPreferences = (pref_list) =>{
     let prefs = prefsToInt(pref_list);
     //
@@ -137,6 +183,13 @@ function App() {
 
 
 
+  /**
+   * Decodes HTML entities in a string.
+   *
+   * @param {string} str - The string with HTML entities.
+   * @function decodeHtmlEntity
+   * @returns {string} The decoded string.
+   */
   function decodeHtmlEntity(str) {
     let textArea = document.createElement('textarea');
     textArea.innerHTML = str;
@@ -201,7 +254,7 @@ function App() {
                   <p><strong>City: {pets[currentPetIndex].contact.address.city}</strong></p>
                   <p><strong>State: {pets[currentPetIndex].contact.address.state}</strong></p>
                   <p><strong>Published At: {pets[currentPetIndex].published_at}</strong></p>
-                  <a href={pets[currentPetIndex].url} target="_blank" rel="noopener noreferrer">
+                  <a href={pets[currentPetIndex].url} target="_blank" rel="noopener noreferrer" className="learn-more">
                   Learn More
                   </a>
                   <div>

src/components/AccountComponents/Account.jsx

@@ -7,10 +7,6 @@ import bcrypt from 'bcryptjs';
 import {render} from 'react-dom';
 
 
-
-
-
-
 /**
  * Account component for the account page that shows the user information.
  * @component

src/components/LikesComponents/Likes.jsx

@@ -4,10 +4,34 @@ import './Likes.css'
 import Button from 'react-bootstrap/Button';
 import Card from 'react-bootstrap/Card';
 
+
+/**
+ * The Likes page, renders all of the users likes.
+ * 
+ *
+ * @component
+ * @returns {JSX.Element} The rendered Likes component.
+ */
 function Likes(){
     const [likes, setLikes] = useState([])
 
+
+      /**
+     * A React hook that fetches the users' likes from the database
+     * It then separates the likes by hyphens and appends it to the URL for the query to the PetFinder API
+     * @async
+     * @memberof module:React
+     */
     useEffect(() => {
+
+        /**
+         * A React hook that fetches the users' likes from the database
+         * It then separates the likes by hyphens and appends it to the URL for the query to the PetFinder API
+         * Then sets the usersLikes to be displayed
+         * @async
+         * @function fetchLikes
+         * @memberof module:React
+         */
         const fetchLikes = async () => {
             const email = sessionStorage.getItem("userinfo");
             console.log('email: ', email)
@@ -33,7 +57,13 @@ function Likes(){
         fetchLikes();
     }, []);
 
-
+    /**
+   * Decodes HTML entities in a string.
+   *
+   * @param {string} str - The string with HTML entities.
+   * @function decodeHtmlEntity
+   * @returns {string} The decoded string.
+   */
     function decodeHtmlEntity(str) {
         let textArea = document.createElement('textarea');
         textArea.innerHTML = str;

utils/db/database.js

@@ -197,6 +197,16 @@ export default class Database {
     }
   }
 
+
+/**
+ * Updates the likes for a specific user in the database.
+ *
+ * @param {string} id - The ID of the user.
+ * @param {string} data - The new petID to add to the user's likes.
+ * @async
+ * @function updateLikes
+ * @returns {Promise<number>} The number of rows affected by the update.
+ */
   async updateLikes(id, data) {
     await this.connect();
     console.log(`id: ${id}`)
@@ -219,6 +229,14 @@ export default class Database {
     return result.rowsAffected[0];
   }
 
+  /**
+   * Retrieves the likes for a specific user by email from the database.
+   *
+   * @param {string} email - The email of the user.
+   * @async
+   * @function getUserLikesByEmail
+   * @returns {Promise<string>} The likes of the user.
+   */
   async getUserLikesByEmail(email){
     await this.connect();
     const request = this.poolconnection.request();

utils/db/userRouts.js

@@ -207,6 +207,13 @@ router.get('/salt/:email', async (req, res) => {
   }
 });
 
+/**
+ * Route serving user likes based on email.
+ * @param {string} req.params.email - The email of the user.
+ * @returns {Object} 200 - An array of user likes
+ * @returns {Error}  404 - User not found
+ * @returns {Error}  500 - Server error
+ */
 router.get('/likes/:email', async (req, res) => {
   try{
     // Get the user with the specified email
@@ -270,6 +277,14 @@ router.put('/id/:id', async (req, res) => {
   }
 });
 
+/**
+ * Route serving user likes update based on user ID and pet ID.
+ * @param {string} req.params.userID - The ID of the user.
+ * @param {string} req.params.petID - The ID of the pet.
+ * @returns {Object} 200 - An object containing the number of rows affected
+ * @returns {Error}  404 - User or pet not found
+ * @returns {Error}  500 - Server error
+ */
 router.put('/liked/:userID/:petID', async (req, res) => {
   try {
     // Update the user with the specified ID

utils/petfinder/Petfinder.js

@@ -81,9 +81,11 @@ export async function getPets(page = 1, prefs = 255) {
 }
 
 /**
- * @function fetchLikedPetDetails gets the user's liked pets for display on their likes page
- * @param {String} petIds string of liked pet IDs
- * @returns {Array} an array of the user's liked pets
+ * Fetches the details of liked pets from the Petfinder API.
+ * @param {Array<string>} petIds - The IDs of the pets.
+ * @async
+ * @function fetchLikedPetDetails
+ * @returns {Promise<Array<Object>>} An array of pet details.
  */
 export const fetchLikedPetDetails = async (petIds) => {
     const petDetails = await Promise.all(petIds.map(async (petId) => {

utils/petfinder/petfinderRouts.js

@@ -11,7 +11,12 @@ router.get("/preferences/:page/:prefs", async (req, res) => {
         res.status(500).send("Petfinder API error");
     }
 });
-
+/**
+ * Route serving pet details based on pet IDs.
+ * @param {string} req.params.petIds - The IDs of the pets, separated by '-'.
+ * @returns {Object} 200 - An array of pet details
+ * @returns {Error}  500 - Petfinder API error
+ */
 router.get("/liked/:petIds", async (req, res) => {
     try {
         const petIds = req.params.petIds.split('-');