Update app and view

Readpost now uses New Set instead of an array

Author: AxeRicin

src/js/app.js

@@ -52,7 +52,7 @@ const findPostById = (posts, id) => posts.find((post) => post.postId === id);
 const fillingModalWindow = (watcherState, posts, button) => {
   const postId = button.dataset.id;
   const post = findPostById(posts, postId);
-  if (!watcherState.readPosts.includes(postId)) watcherState.readPosts.push(postId);
+  if (!watcherState.readPosts.has(postId)) watcherState.readPosts.add(postId);
   watcherState.modal.post = post;
   watcherState.modal.state = 'show';
 };
@@ -86,7 +86,7 @@ const app = () => {
       feeds: [],
       posts: [],
     },
-    readPosts: [],
+    readPosts: new Set(),
     modal: {
       post: null,
     },
@@ -148,8 +148,8 @@ const app = () => {
       });
       elements.columnPosts.addEventListener('click', (e) => {
         const targetId = e.target.dataset.id;
-        if (targetId && !watcherState.readPosts.includes(targetId)) {
-          watcherState.readPosts.push(targetId);
+        if (targetId && !watcherState.readPosts.has(targetId)) {
+          watcherState.readPosts.add(targetId);
         }
       });
       elements.modal.addEventListener('show.bs.modal', (event) => fillingModalWindow(watcherState, initialState.content.posts, event.relatedTarget));

src/js/view.js

@@ -96,7 +96,7 @@ const renderPosts = (elements, posts, readPosts, i18n) => {
     const li = document.createElement('li');
     li.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-start', 'border-0', 'border-end-0');
     const title = document.createElement('a');
-    if (readPosts.includes(post.postId)) {
+    if (readPosts.has(post.postId)) {
       title.classList.add('fw-normal');
     } else {
       title.classList.add('fw-bold');
@@ -139,8 +139,10 @@ const markPostAsRead = (elements, postId) => {
   postTitle.classList.add('fw-normal');
 };
 
+const getLastElemFromSet = (coll) => Array.from(coll).at(-1);
+
 const render = (elements, initialState, i18n) => (path, value) => {
-  console.log(path, value);
+  // console.log(path, value);
   if (path === 'validationUrl.state' && value === 'updated') {
     renderFormUpdated(elements);
   }
@@ -160,7 +162,7 @@ const render = (elements, initialState, i18n) => (path, value) => {
     renderModal(elements, initialState.modal.post);
   }
   if (path === 'readPosts') {
-    markPostAsRead(elements, initialState.readPosts.at(-1));
+    markPostAsRead(elements, getLastElemFromSet(initialState.readPosts));
   }
   if (path === 'modal.state' && !value) {
     clearModal(elements);