alu/cse110-fa22-group29
1
0
Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2025-10-30 19:46:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

modularize localStorage calls into localStorage.js in preparation for unit testing

Browse Source
This commit is contained in:
Arthur Lu
2022-11-18 07:13:53 +00:00
parent 35f44049a2
commit 6493fbd171
4 changed files with 139 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
source/assets/scripts/CreatePage.js
View File

@@ -1,3 +1,5 @@
import { newReviewToStorage } from "./localStorage.js";
window.addEventListener("DOMContentLoaded", init); window.addEventListener("DOMContentLoaded", init);
function init() { function init() {
@@ -37,23 +39,9 @@ function initFormHandler() {
tagContainer.removeChild(tags[i]); tagContainer.removeChild(tags[i]);
} }
//grabbing the nextID, and putting our review object in storage associated with the ID let nextReviewId = newReviewToStorage(reviewObject);
let nextReviewId = JSON.parse(localStorage.getItem("nextID"));
reviewObject["reviewID"] = nextReviewId;
localStorage.setItem("review"+nextReviewId, JSON.stringify(reviewObject));
sessionStorage.setItem("currID", JSON.stringify(nextReviewId)); sessionStorage.setItem("currID", JSON.stringify(nextReviewId));
//updating our activeIDS list
let tempIdArr = JSON.parse(localStorage.getItem("activeIDS"));
tempIdArr.push(nextReviewId);
localStorage.setItem("activeIDS", JSON.stringify(tempIdArr));
//increment nextID for next review creation
nextReviewId++;
localStorage.setItem("nextID", JSON.stringify(nextReviewId));
window.location.assign('./ReviewDetails.html'); window.location.assign('./ReviewDetails.html');
}); });

147
source/assets/scripts/ReviewDetails.js
View File

@@ -1,5 +1,5 @@
//reviewDetails.js //reviewDetails.js
import {getReviewsFromStorage, saveReviewsToStorage} from "./localStorage.js"; import {deleteReviewFromStorage, getReviewFromStorage, updateReviewToStorage} from "./localStorage.js";
// Run the init() function when the page has loaded // Run the init() function when the page has loaded
window.addEventListener("DOMContentLoaded", init); window.addEventListener("DOMContentLoaded", init);
@@ -12,19 +12,11 @@ function init(){
function setupDelete(){ function setupDelete(){
let deleteBtn = document.getElementById("delete-btn"); let deleteBtn = document.getElementById("delete-btn");
let currID = JSON.parse(sessionStorage.getItem("currID")); let currID = JSON.parse(sessionStorage.getItem("currID"));
let activeIDS = JSON.parse(localStorage.getItem("activeIDS"));
deleteBtn.addEventListener("click", function(){ deleteBtn.addEventListener("click", function(){
if(window.confirm("Are you sure you want to delete this entry?")){ if(window.confirm("Are you sure you want to delete this entry?")){
for (let i in activeIDS) { deleteReviewFromStorage(currID);
if (activeIDS[i] == currID) { sessionStorage.removeItem('currID');
activeIDS.splice(i,1); window.location.assign("./index.html");
localStorage.setItem('activeIDS', JSON.stringify(activeIDS));
sessionStorage.removeItem('currID');
localStorage.removeItem(`review${currID}`);
window.location.assign("./index.html");
break;
}
}
} }
}); });
} }
@@ -32,83 +24,82 @@ function setupDelete(){
function setupUpdate(){ function setupUpdate(){
let updateBtn = document.getElementById("update-btn"); let updateBtn = document.getElementById("update-btn");
let currID = JSON.parse(sessionStorage.getItem("currID")); let currID = JSON.parse(sessionStorage.getItem("currID"));
let currReview = JSON.parse(localStorage.getItem(`review${currID}`)); let currReview = getReviewFromStorage(currID);
let form = document.getElementById("update-food-entry"); let form = document.getElementById("update-food-entry");
updateBtn.addEventListener("click", function(){ updateBtn.addEventListener("click", function(){
//update function //update function
if(currReview){
form.style.display = "block";
let tagContainer = document.getElementById("tag-container-form");
//Set value of each input element to current's values form.style.display = "block";
document.getElementById("mealImg").defaultValue = currReview["mealImg"]; form.classList.remove("hidden");
document.getElementById("imgAlt").defaultValue = currReview["imgAlt"]; let tagContainer = document.getElementById("tag-container-form");
document.getElementById("mealName").defaultValue = currReview["mealName"];
document.getElementById("comments").textContent = currReview["comments"];
document.getElementById("s" + `${currReview["rating"]}`).checked = true;
document.getElementById("restaurant").defaultValue = currReview["restaurant"];
if(currReview["tags"]){ //Set value of each input element to current's values
while (tagContainer.firstChild) { document.getElementById("mealImg").defaultValue = currReview["mealImg"];
tagContainer.removeChild(tagContainer.firstChild); document.getElementById("imgAlt").defaultValue = currReview["imgAlt"];
} document.getElementById("mealName").defaultValue = currReview["mealName"];
for (let i = 0; i < currReview["tags"].length; i++) { document.getElementById("comments").textContent = currReview["comments"];
let newTag = document.createElement("label"); document.getElementById("s" + `${currReview["rating"]}`).checked = true;
newTag.setAttribute("class","tag"); document.getElementById("restaurant").defaultValue = currReview["restaurant"];
newTag.innerHTML = currReview["tags"][i];
newTag.addEventListener("click",()=> { if(currReview["tags"]){
tagContainer.removeChild(newTag); while (tagContainer.firstChild) {
}); tagContainer.removeChild(tagContainer.firstChild);
tagContainer.append(newTag); }
for (let i = 0; i < currReview["tags"].length; i++) {
let newTag = document.createElement("label");
newTag.setAttribute("class","tag");
newTag.innerHTML = currReview["tags"][i];
newTag.addEventListener("click",()=> {
tagContainer.removeChild(newTag);
});
tagContainer.append(newTag);
}
}
//Take formdata values as newData when submit
form.addEventListener("submit", function(){
/*
* User submits the form for their review.
* We create reviewCard and put in storage
*/
let formData = new FormData(form);
let newData = {};
for (let [key, value] of formData) {
console.log(`${key}`);
console.log(`${value}`);
if (`${key}` !== "tag-form") {
newData[`${key}`] = `${value}`;
} }
} }
//Take formdata values as newData when submit newData["tags"] = [];
form.addEventListener("submit", function(){
/* let tags = document.querySelectorAll(".tag");
* User submits the form for their review. for(let i = 0; i < tags.length; i ++) {
* We create reviewCard and put in storage newData["tags"].push(tags[i].innerHTML);
*/ tagContainer.removeChild(tags[i]);
let formData = new FormData(form); }
let newData = {};
for (let [key, value] of formData) {
console.log(`${key}`);
console.log(`${value}`);
if (`${key}` !== "tag-form") {
newData[`${key}`] = `${value}`;
}
}
newData["tags"] = [];
let tags = document.querySelectorAll(".tag");
for(let i = 0; i < tags.length; i ++) {
newData["tags"].push(tags[i].innerHTML);
tagContainer.removeChild(tags[i]);
}
newData["reviewID"] = currID; newData["reviewID"] = currID;
updateReviewToStorage(currID, newData);
localStorage.setItem("review"+currID, JSON.stringify(newData)); form.style.display = "none";
form.style.display = "none"; });
}); let tagAddBtn = document.getElementById("tag-add-btn");
tagAddBtn.addEventListener("click", ()=> {
let tagAddBtn = document.getElementById("tag-add-btn"); let tagField = document.getElementById("tag-form");
tagAddBtn.addEventListener("click", ()=> { if (tagField.value.length > 0) {
let tagField = document.getElementById("tag-form"); let tagLabel = document.createElement("label");
if (tagField.value.length > 0) { tagLabel.innerHTML = tagField.value;
let tagLabel = document.createElement("label"); tagLabel.setAttribute("class","tag");
tagLabel.innerHTML = tagField.value; tagLabel.addEventListener("click",()=> {
tagLabel.setAttribute("class","tag"); tagContainer.removeChild(tagLabel);
tagLabel.addEventListener("click",()=> { });
tagContainer.removeChild(tagLabel);
}); tagContainer.append(tagLabel);
tagField.value = "";
tagContainer.append(tagLabel); }
tagField.value = ""; });
}
});
}
}); });
} }

78
source/assets/scripts/localStorage.js
View File

@@ -1,7 +1,68 @@
/** /**
* @returns {Array<Object>} An array of reviews found in localStorage * Creates a new review to storage and performs related meta tasks
* @param {Object} review to store
* @return {number} ID of the newly added review
*/ */
export function getReviewsFromStorage() { export function newReviewToStorage(review){
//grabbing the nextID, and putting our review object in storage associated with the ID
let nextReviewId = JSON.parse(localStorage.getItem("nextID"));
review["reviewID"] = nextReviewId;
// set the review entry to the review object
localStorage.setItem(`review${nextReviewId}`, JSON.stringify(review));
//updating our activeIDS list
let tempIdArr = JSON.parse(localStorage.getItem("activeIDS"));
tempIdArr.push(nextReviewId);
localStorage.setItem("activeIDS", JSON.stringify(tempIdArr));
//increment nextID for next review creation
nextReviewId++;
localStorage.setItem("nextID", JSON.stringify(nextReviewId));
return nextReviewId;
}
/**
* Gets a single review by ID from storage
* @param {string} ID of the review to get
* @returns {Object} review object corresponding to param ID
*/
export function getReviewFromStorage(ID){
return JSON.parse(localStorage.getItem(`review${ID}`));
}
/**
* Updates a single review by ID to storage
* @param {string} ID of review to update
* @param {Object} review to store
*/
export function updateReviewToStorage(ID, review){
// set the review entry with ID to the review object
localStorage.setItem(`review${ID}`, JSON.stringify(review));
}
/**
* Deletes a review by ID from storage
* @param {string} ID of the review to delete
*/
export function deleteReviewFromStorage(ID){
let activeIDS = JSON.parse(localStorage.getItem("activeIDS"));
for (let i in activeIDS) {
if (activeIDS[i] == ID) {
activeIDS.splice(i,1);
localStorage.setItem('activeIDS', JSON.stringify(activeIDS));
localStorage.removeItem(`review${ID}`)
return;
}
}
console.error(`could not find review${ID} in localStorage`);
}
// legacy function
export function getAllReviewsFromStorage() {
if (!(localStorage.getItem("activeIDS"))) { if (!(localStorage.getItem("activeIDS"))) {
// we wanna init the active ID array and start the nextID count // we wanna init the active ID array and start the nextID count
localStorage.setItem("activeIDS", JSON.stringify([])); localStorage.setItem("activeIDS", JSON.stringify([]));
@@ -11,17 +72,8 @@ export function getReviewsFromStorage() {
let activeIDS = JSON.parse(localStorage.getItem("activeIDS")); let activeIDS = JSON.parse(localStorage.getItem("activeIDS"));
let reviews = [] let reviews = []
for (let i = 0; i < activeIDS.length; i++) { for (let i = 0; i < activeIDS.length; i++) {
let currReview = JSON.parse(localStorage.getItem('review'+activeIDS[i])); let currReview = JSON.parse(localStorage.getItem(`review${activeIDS[i]}`));
reviews.push(currReview); reviews.push(currReview);
} }
return reviews; return 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
*/
export function saveReviewsToStorage(reviews) {
localStorage.setItem(`review${reviewId}`, JSON.stringify(reviews));
}

4
source/assets/scripts/main.js
View File

@@ -1,12 +1,12 @@
// main.js // main.js
import {getReviewsFromStorage, saveReviewsToStorage} from "./localStorage.js"; import {getAllReviewsFromStorage} from "./localStorage.js";
// Run the init() function when the page has loaded // Run the init() function when the page has loaded
window.addEventListener("DOMContentLoaded", init); window.addEventListener("DOMContentLoaded", init);
function init() { function init() {
// Get the reviews from localStorage // Get the reviews from localStorage
let reviews = getReviewsFromStorage(); let reviews = getAllReviewsFromStorage();
// Add each reviews to the <main> element // Add each reviews to the <main> element
addReviewsToDocument(reviews); addReviewsToDocument(reviews);
// Add the event listeners to the form elements // Add the event listeners to the form elements