Merge branch 'sprint-1' of https://github.com/cse110-fa22-group29/cse110-fa22-group29 into sprint-1

index.html

@@ -73,10 +73,10 @@
         Restaurant:
         <input type="text" id="restaurant" name="restaurant" required>
       </label>
-      <label for="tags">
+      <label for="tag-form">
         Tags:
-        <input type="text" id="tags" name="tags" required>
-        <div id="tag-container">
+        <input type="text" id="tag-form" name="tag-form" required>
+        <div class='tag-container' id="tag-container-form">
 
         </div>
         <button type="button" id="tagAdd">Add Tag</button>

package.json

@@ -2,9 +2,9 @@
   "name": "food-journal",
   "version": "1.0.0",
   "scripts": {
-    "test": "mocha --recursive **/*.test.js",
+    "test": "mocha --recursive './{,!(node_modules)/**}/*.test.js'",
     "lint": "eslint **/*.js",
-    "fix-style": "eslint --fix **/*.js"
+    "fix-style": "eslint --fix '**/*.js'"
   },
   "devDependencies": {
     "eslint": "^8.27.0",

source/assets/scripts/ReviewCard.js

@@ -102,6 +102,7 @@ class ReviewCard extends HTMLElement {
    *                          "mealName": "string",
    *                          "restaurant": "string",
    *                          "rating": number
+   *                          "tags": string array
    *                        }
    */
   set data(data) {
@@ -138,10 +139,21 @@ class ReviewCard extends HTMLElement {
     div.append(span1);
     div.append(img2);
 
+    //added tags
+    let tagContainer = document.createElement('div')
+    tagContainer.setAttribute('class', 'tag-container');
+    for (let i = 0; i < data['tags'].length; i++) {
+      let newTag = document.createElement('p');
+      newTag.setAttribute('class','tag');
+      newTag.innerHTML = data['tags'][i]
+      tagContainer.append(newTag)
+    }
+
     articleEl.append(img1)
     articleEl.append(pMeal)
     articleEl.append(pRestaurant)
     articleEl.append(div)
+    articleEl.append(tagContainer)
 
 
   }

source/assets/scripts/localStorage.js

@@ -0,0 +1,22 @@
+//
+//module.exports = {getReviewsFromStorage, saveReviewsToStorage};
+
+/**
+ * @returns {Array<Object>} An array of reviews found in localStorage
+ */
+export function getReviewsFromStorage() {
+	let result = JSON.parse(localStorage.getItem('reviews'))
+	if (result) {
+		return result;
+	}
+	return new Array(0);
+}
+
+/**
+ * Takes in an array of reviews, converts it to a string, and then
+ * saves that string to 'reviews' in localStorage
+ * @param {Array<Object>} reviews An array of reviews
+ */
+export function saveReviewsToStorage(reviews) {
+	localStorage.setItem('reviews', JSON.stringify(reviews));
+}

source/assets/scripts/localStorage.test.js

@@ -0,0 +1,49 @@
+const {getReviewsFromStorage, saveReviewsToStorage} = require("./localStorage");
+const {environment} = require("./testenv");
+const assert = require("assert");
+const {describe, it, beforeEach} = require("mocha");
+
+beforeEach(() => {
+	window = environment();
+	localStorage = window.localStorage;
+});
+
+describe("test app localStorage interaction", () => {
+	it("get after init", () => {
+		assert.deepEqual(getReviewsFromStorage(), []);
+	});
+	it("store one then get", () => {
+		let reviews = [{
+			"imgSrc": "sample src",
+			"imgAlt": "sample alt",
+			"mealName": "sample name",
+			"restaurant": "sample restaurant",
+			"rating": 5,
+			"tags": ["tag 1", "tag  2", "tag 3"]
+		}];
+
+		saveReviewsToStorage(reviews);
+		assert.deepEqual(getReviewsFromStorage(), reviews);
+	});
+	it("repeated store one more and get", () => {
+		saveReviewsToStorage(reviews);
+		assert.deepEqual(getReviewsFromStorage(), reviews);
+
+		for(let i = 0; i < 1000; i++){
+			reviews = getReviewsFromStorage();
+			
+			reviews.push(
+				{
+					"imgSrc": `sample src ${i}`,
+					"imgAlt": `sample alt ${i}`,
+					"mealName": `sample name ${i}`,
+					"restaurant": `sample restaurant ${i}`,
+					"rating": i,
+					"tags": [`tag ${3*i}`, `tag ${3*i + 1}`, `tag ${3*i + 2}`]
+				}
+			)
+			saveReviewsToStorage(reviews);
+			assert.deepEqual(getReviewsFromStorage(), reviews);
+		}
+	});
+});

source/assets/scripts/main.js

@@ -1,4 +1,5 @@
 // main.js
+import {getReviewsFromStorage, saveReviewsToStorage} from './localStorage.js';
 
 // Run the init() function when the page has loaded
 window.addEventListener('DOMContentLoaded', init);
@@ -12,17 +13,6 @@ function init() {
   initFormHandler();
 }
 
-/**
- * @returns {Array<Object>} An array of reviews found in localStorage
- */
-function getReviewsFromStorage() {
-  let result = JSON.parse(localStorage.getItem('reviews'))
-  if (result) {
-    return result;
-  }
-  return new Array(0);
-}
-
 /**
  * @param {Array<Object>} reviews An array of reviews
  */
@@ -36,28 +26,21 @@ function addReviewsToDocument(reviews) {
 
 }
 
-/**
- * Takes in an array of reviews, converts it to a string, and then
- * saves that string to 'reviews' in localStorage
- * @param {Array<Object>} reviews An array of reviews
- */
-function saveReviewsToStorage(reviews) {
-  localStorage.setItem('reviews', JSON.stringify(reviews));
-}
-
 /**
  * Adds the necesarry event handlers to <form> and the clear storage
  * <button>.
  */
 function initFormHandler() {
-  let tagContainer = document.getElementById('tag-container');
+  //accessing form components
+  let tagContainer = document.getElementById('tag-container-form');
   let theForm = document.querySelector('form')
   let submitButt = document.querySelector('button[type="submit"]')
+  
   submitButt.addEventListener('click', function(){
-    let deleteTags = document.querySelectorAll('.tag')
-    for(let i = 0; i < deleteTags.length; i ++) {
-      tagContainer.removeChild(deleteTags[i]);
-    }
+    /*
+    *  User submits the form for their review.
+    *  We create reviewCard and put in storage
+    */
     let formData = new FormData(theForm);
     let reviewObject = {}
     for (let [key, value] of formData) {
@@ -65,7 +48,14 @@ function initFormHandler() {
       console.log(`${value}`)
       reviewObject[`${key}`] = `${value}`
     }
-    //console.log(reviewObject)
+    reviewObject['tags'] = []
+
+    let deleteTags = document.querySelectorAll('.tag')
+    for(let i = 0; i < deleteTags.length; i ++) {
+      reviewObject['tags'].push(deleteTags[i].innerHTML);
+      tagContainer.removeChild(deleteTags[i]);
+    }
+    
 
     let newReview = document.createElement('review-card')
     newReview.data = reviewObject
@@ -97,10 +87,9 @@ function initFormHandler() {
      
   });
 
-  //allowing for tags selection/creation for user's review card
   let tagAddButton = document.getElementById('tagAdd');
   tagAddButton.addEventListener('click', ()=> {
-    let tagField = document.getElementById('tags');
+    let tagField = document.getElementById('tag-form');
     if (tagField.value.length > 0) {
       let p = document.createElement('p');
       p.innerHTML = tagField.value;

source/assets/scripts/testenv.js

@@ -0,0 +1,28 @@
+module.exports = {environment};
+
+function environment () {
+	const localStorageMock = (function () {
+		let store = {};
+		return {
+			getItem(key) {
+				return store[key];
+			},
+			setItem(key, value) {
+				store[key] = value;
+			},
+			clear() {
+				store = {};
+			},
+			removeItem(key) {
+				delete store[key];
+			},
+			getAll() {
+				return store;
+			},
+		};
+	})();
+
+	let window = {};
+	Object.defineProperty(window, "localStorage", { value: localStorageMock });
+	return window;
+}

source/reviews.json

@@ -4,13 +4,16 @@
       "imgAlt": "tacos pic",
       "mealName": "Birria Tacos",
       "restaurant": "Mike's Red Tacos",
-      "rating": 5
+      "rating": 5,
+      "tags": ["delicious", "#worthit","omg"]
    },
    {
       "imgSrc": "https://www.redwormcomposting.com/images/worm-burrito.JPG",
       "imgAlt": "wolftown pic",
       "mealName": "Carnitas Burrito",
       "restaurant": "Wolftown UCSD",
-      "rating": 0
+      "rating": 0,
+      "tags": ["gross", "why","no"]
+
    }
 ]

static/ReviewCard.css

@@ -47,6 +47,11 @@
     row-gap: 10px;
     width: 100%;
   }
+
+  .tag-container {
+    display: flex;
+    flex-flow: row wrap;
+  }
   .tag {
   background-color: grey;
   border-radius: 7px;
@@ -66,14 +71,14 @@
   color: white;
   cursor: pointer;
 }
-.tag:hover::before{
+.tag:hover::before {
   color: red;
 }
-  .danger {
+.danger {
   background-color: rgb(254, 171, 171);
   border-color: red;
-  }
+}
 
-  .hidden {
+.hidden {
   display: none;
-  }
+}