стили для прочитанных постов

Author: daria-z

src/js/renderRssFeed.js

@@ -22,26 +22,29 @@ export const renderFeeds = (feeds) => {
   `;
 };
 
-export const renderPosts = (posts) => {
+export const renderPosts = (posts, viewedPostsIds) => {
   const postsContainer = document.querySelector(".posts");
 
   postsContainer.innerHTML = `
-    <div class="card border-0">
-      <div class="card-body">
-        <h2 class="card-title h4">Посты</h2>
-      </div>
-      <ul class="list-group border-0 rounded-0">
-        ${posts
-          .map(
-            (post) => `
+  <div class="card border-0">
+  <div class="card-body">
+  <h2 class="card-title h4">Посты</h2>
+  </div>
+  <ul class="list-group border-0 rounded-0">
+  ${posts
+    .map(
+      (post) => {
+              const titleStyle = viewedPostsIds.includes(post.id) ? "fw-normal" : "fw-bold";
+              return `
           <li class="list-group-item d-flex justify-content-between align-items-start border-0 border-end-0">
-            <a href="${post.link}" class="fw-bold" data-id="${post.id}" target="_blank" rel="noopener noreferrer">${post.title}</a>
+            <a href="${post.link}" class=${titleStyle} data-id="${post.id}" target="_blank" rel="noopener noreferrer">${post.title}</a>
             <button type="button" class="btn btn-outline-primary btn-sm modal-btn" data-id="${post.id}" data-bs-toggle="modal" data-bs-target="#modal">Просмотр</button>
           </li>
-        `
+        `}
           )
           .join("")}
       </ul>
     </div>
   `;
 };
+

src/js/state.js

@@ -23,13 +23,16 @@ const createState = () => {
       feedsChecking();
     }
     if (path === "posts") {
-      renderPosts(state.posts);
+      renderPosts(state.posts, [...state.viewedPostsIds]);
+      state.posts.forEach((post) => {
+        post.rendered = true;
+      });
     }
     if (path === "activeItem") {
       if (state.activeItem !== null) {
         showModal(state.activeItem);
         markPostAsRead(state.activeItem.id); //проверять на уникальность!
-        // менять стиль по button.dataset.id?
+        renderPosts(state.posts, [...state.viewedPostsIds]);
       } else {
         closeModal();
       }