alu/cse110-fa22-group29
1
0
Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2024-12-26 17:09:09 +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
Show Stats 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);
function init() {
@ -37,23 +39,9 @@ function initFormHandler() {
tagContainer.removeChild(tags[i]);
}
//grabbing the nextID, and putting our review object in storage associated with the ID
let nextReviewId = JSON.parse(localStorage.getItem("nextID"));
reviewObject["reviewID"] = nextReviewId;
localStorage.setItem("review"+nextReviewId, JSON.stringify(reviewObject));
let nextReviewId = newReviewToStorage(reviewObject);
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');
});

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

@ -1,5 +1,5 @@
//reviewDetails.js
import {getReviewsFromStorage, saveReviewsToStorage} from "./localStorage.js";
import {deleteReviewFromStorage, getReviewFromStorage, updateReviewToStorage} from "./localStorage.js";
// Run the init() function when the page has loaded
window.addEventListener("DOMContentLoaded", init);
@ -12,19 +12,11 @@ function init(){
function setupDelete(){
let deleteBtn = document.getElementById("delete-btn");
let currID = JSON.parse(sessionStorage.getItem("currID"));
let activeIDS = JSON.parse(localStorage.getItem("activeIDS"));
deleteBtn.addEventListener("click", function(){
if(window.confirm("Are you sure you want to delete this entry?")){
for (let i in activeIDS) {
if (activeIDS[i] == currID) {
activeIDS.splice(i,1);
localStorage.setItem('activeIDS', JSON.stringify(activeIDS));
sessionStorage.removeItem('currID');
localStorage.removeItem(`review${currID}`);
window.location.assign("./index.html");
break;
}
}
deleteReviewFromStorage(currID);
sessionStorage.removeItem('currID');
window.location.assign("./index.html");
}
});
}
@ -32,83 +24,82 @@ function setupDelete(){
function setupUpdate(){
let updateBtn = document.getElementById("update-btn");
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");
updateBtn.addEventListener("click", 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
document.getElementById("mealImg").defaultValue = currReview["mealImg"];
document.getElementById("imgAlt").defaultValue = currReview["imgAlt"];
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"];
form.style.display = "block";
form.classList.remove("hidden");
let tagContainer = document.getElementById("tag-container-form");
if(currReview["tags"]){
while (tagContainer.firstChild) {
tagContainer.removeChild(tagContainer.firstChild);
}
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);
//Set value of each input element to current's values
document.getElementById("mealImg").defaultValue = currReview["mealImg"];
document.getElementById("imgAlt").defaultValue = currReview["imgAlt"];
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"]){
while (tagContainer.firstChild) {
tagContainer.removeChild(tagContainer.firstChild);
}
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
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}`;
}
}
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["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 tagField = document.getElementById("tag-form");
if (tagField.value.length > 0) {
let tagLabel = document.createElement("label");
tagLabel.innerHTML = tagField.value;
tagLabel.setAttribute("class","tag");
tagLabel.addEventListener("click",()=> {
tagContainer.removeChild(tagLabel);
});
tagContainer.append(tagLabel);
tagField.value = "";
}
});
}
let tagAddBtn = document.getElementById("tag-add-btn");
tagAddBtn.addEventListener("click", ()=> {
let tagField = document.getElementById("tag-form");
if (tagField.value.length > 0) {
let tagLabel = document.createElement("label");
tagLabel.innerHTML = tagField.value;
tagLabel.setAttribute("class","tag");
tagLabel.addEventListener("click",()=> {
tagContainer.removeChild(tagLabel);
});
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"))) {
// we wanna init the active ID array and start the nextID count
localStorage.setItem("activeIDS", JSON.stringify([]));
@ -11,17 +72,8 @@ export function getReviewsFromStorage() {
let activeIDS = JSON.parse(localStorage.getItem("activeIDS"));
let reviews = []
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);
}
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
import {getReviewsFromStorage, saveReviewsToStorage} from "./localStorage.js";
import {getAllReviewsFromStorage} from "./localStorage.js";
// Run the init() function when the page has loaded
window.addEventListener("DOMContentLoaded", init);
function init() {
// Get the reviews from localStorage
let reviews = getReviewsFromStorage();
let reviews = getAllReviewsFromStorage();
// Add each reviews to the <main> element
addReviewsToDocument(reviews);
// Add the event listeners to the form elements