How do we implement the bookmark click function like the one in React and Next JS Course? #8

Activity

1. Rope-a-dope commented on Jun 6, 2024

   

   Rope-a-dope

   on Jun 6, 2024

   Author

   More actions

   I was able to figure the solution. The differene here is that we store bookmarkItems instead of bookmarkIds as in R & N course. So if we the bookmarkClickHandler has to be updated with logic to check the id by the bookmarkicon. The full code is pasted in the end. But I have another similiar problem. The problem is that when we click the bookmark icon either in the jobList or the bookmarkList, both bookmark icons will be toggled except the bookmark icon in jobDetails. As soon as I add this statement in bookmark ClickHandler, then it will show like this without the "#" in the url if we click the bookmark icon on jobList or bookmarkList . Why?

   The other problem is that because the activeJobItem doesn't have the "qulification" field, there will be an error since this data is fetched from the search not with the id.

     state.activeJobItem && renderJobDetails(state.activeJobItem); // This will cause the problem.
   

   First of all, I put the id in the image so that we can grab the jobItem id in jobDetails.

   					<img src="${jobItem.coverImgURL}" alt="${jobItem.id}" class="job-details__cover-img">
   

   Then, we grab the id either from the jobList or jobDetails because both of them have bookmark icon.

   import {
     state,
     bookmarksBtnEl,
     jobDetailsEl,
     jobListBookmarksEl,
     jobListSearchEl,
   } from "../common.js";
   import renderJobDetails from "./JobDetails.js";
   import renderJobList, { clickHandler } from "./JobList.js";
   
   const bookmarkClickHandler = (event, bookmarkTag = "item") => {
     if (!event.target.className.includes("bookmark")) {
       return;
     }
   
     const jobItemEl = event.target.closest(`.job-item`);  
     const id = jobItemEl?.children[0]?.getAttribute("href") || document.querySelector(".job-details__cover-img").alt;
     if (
       state.bookmarkJobItems.some(
         (jobItem) => jobItem.id === +id
       )
     ) {
       state.bookmarkJobItems = state.bookmarkJobItems.filter(
         (jobItem) => jobItem.id !== +id
       );
     } else {
       const jobItem = state.searchJobItems.find(
         (jobItem) => jobItem.id === +id
       )  
       state.bookmarkJobItems.push(jobItem);
     }
   
     localStorage.setItem(
       "bookmarkJobItems",
       JSON.stringify(state.bookmarkJobItems)
     );
     document
       .querySelector(`.job-${bookmarkTag}__bookmark-icon`)
       .classList.toggle(`job-${bookmarkTag}__bookmark-icon--bookmarked`);
     renderJobList();
     renderJobList("bookmarks");
     // state.activeJobItem && renderJobDetails(state.activeJobItem); // This will cause the problem.
     event.stopPropagation();
     event.preventDefault();
   };
   
   const mouseEnterHandler = () => {
     bookmarksBtnEl.classList.add("bookmarks-btn--active");
     jobListBookmarksEl.classList.add("job-list--visible");
     renderJobList("bookmarks");
   };
   
   const mouseLeaveHandler = () => {
     bookmarksBtnEl.classList.remove("bookmarks-btn--active");
     jobListBookmarksEl.classList.remove("job-list--visible");
   };
   
   bookmarksBtnEl.addEventListener("mouseenter", mouseEnterHandler);
   jobListBookmarksEl.addEventListener("mouseleave", mouseLeaveHandler);
   jobListBookmarksEl.addEventListener("click", (event) => {
     if (event.target.classList.contains("job-item__bookmark-icon")) {
       bookmarkClickHandler(event);
     } else {
       clickHandler(event);
     }
   });
   jobListSearchEl.addEventListener("click", (event) => {
     if (event.target.classList.contains("job-item__bookmark-icon")) {
       bookmarkClickHandler(event);
     } else {
       clickHandler(event);
     }
   });
   jobDetailsEl.addEventListener("click", (event) => {
     bookmarkClickHandler(event, "info");
   });
   
   export default bookmarkClickHandler;
   
   
2. Rope-a-dope commented on Jun 6, 2024

   

   Rope-a-dope

   on Jun 6, 2024

   Author

   More actions

   The second error can be resolved by adding another state activeJobItemDetails. Now, when then there is an active jobItem, click on any bookmark icon will toggle all the bookmark icons which is good. But similar problem arises when there is no active jobItem. In that case, click on jobList bookmark icon or bookmarkLIst bookmark icon will show this.
   

     state.activeJobItemDetails && renderJobDetails(state.activeJobItemDetails); // This will cause problem when there is no activeJobItemDetails 
   

   First, add activeJobItemDetails

   
   // STATE
   export const state = {
   	searchJobItems: [],
   	bookmarkJobItems: [],
   	activeJobItem:{},
   	activeJobItemDetails:{},
   	currentPage: 1,	
   };
   

   JobList.js

   
   	try {
   		const data = await getData(`${BASE_API_URL}/jobs/${id}`);
   		const { jobItem } = data;
       state.activeJobItemDetails = jobItem;
   		renderSpinner("job-details");
   		renderJobDetails(jobItem);
   	} catch (error) {
   		renderSpinner("job-details");
   		renderError(error.message);
   	}
   

   Second, renderJobDetails if there is an active jobItem.
   Boomark.js

   import {
     state,
     bookmarksBtnEl,
     jobDetailsEl,
     jobListBookmarksEl,
     jobListSearchEl,
   } from "../common.js";
   import renderJobDetails from "./JobDetails.js";
   import renderJobList, { clickHandler } from "./JobList.js";
   
   const bookmarkClickHandler = (event, bookmarkTag = "item") => {
     if (!event.target.className.includes("bookmark")) {
       return;
     }
   
     const jobItemEl = event.target.closest(`.job-item`);  
     const id = jobItemEl?.children[0]?.getAttribute("href") || document.querySelector(".job-details__cover-img").alt;
     if (
       state.bookmarkJobItems.some(
         (jobItem) => jobItem.id === +id
       )
     ) {
       state.bookmarkJobItems = state.bookmarkJobItems.filter(
         (jobItem) => jobItem.id !== +id
       );
     } else {
       const jobItem = state.searchJobItems.find(
         (jobItem) => jobItem.id === +id
       )  
       state.bookmarkJobItems.push(jobItem);
     }
   
     localStorage.setItem(
       "bookmarkJobItems",
       JSON.stringify(state.bookmarkJobItems)
     );
     document
       .querySelector(`.job-${bookmarkTag}__bookmark-icon`)
       .classList.toggle(`job-${bookmarkTag}__bookmark-icon--bookmarked`);
     state.activeJobItemDetails && renderJobDetails(state.activeJobItemDetails); // This will cause problem when there is no activeJobItemDetails 
     renderJobList();
     renderJobList("bookmarks");
     event.stopPropagation();
     event.preventDefault();
   };
   
   const mouseEnterHandler = () => {
     bookmarksBtnEl.classList.add("bookmarks-btn--active");
     jobListBookmarksEl.classList.add("job-list--visible");
     renderJobList("bookmarks");
   };
   
   const mouseLeaveHandler = () => {
     bookmarksBtnEl.classList.remove("bookmarks-btn--active");
     jobListBookmarksEl.classList.remove("job-list--visible");
   };
   
   bookmarksBtnEl.addEventListener("mouseenter", mouseEnterHandler);
   jobListBookmarksEl.addEventListener("mouseleave", mouseLeaveHandler);
   jobListBookmarksEl.addEventListener("click", (event) => {
     if (event.target.classList.contains("job-item__bookmark-icon")) {
       bookmarkClickHandler(event);
     } else {
       clickHandler(event);
     }
   });
   jobListSearchEl.addEventListener("click", (event) => {
     if (event.target.classList.contains("job-item__bookmark-icon")) {
       bookmarkClickHandler(event);
     } else {
       clickHandler(event);
     }
   });
   jobDetailsEl.addEventListener("click", (event) => {
     bookmarkClickHandler(event, "info");
   });
   
   export default bookmarkClickHandler;
   
   
3. Rope-a-dope commented on Jun 6, 2024

   

   Rope-a-dope

   on Jun 6, 2024

   Author

   More actions

   I found the root cause, it is because an empty object is not falsy. To check the empty object we can use JSON.stringify(state.activeJobItemDetails) !== '{}' && renderJobDetails(state.activeJobItemDetails);