добавления активного поста в state, обработка клика по кнопке открытия модалки

Author: daria-z

src/js/initApp.js

@@ -1,11 +1,17 @@
 import { renderUIText } from "./view.js";
-import { updateInputValue, addRssFeed, validateInput } from "./model.js";
+import {
+  updateInputValue,
+  addRssFeed,
+  validateInput,
+  setActivePost,
+} from "./model.js";
 
 export const initApp = () => {
   renderUIText();
 
   const input = document.querySelector("#url-input");
   const form = document.querySelector("#rss-form");
+  const postsContainer = document.querySelector(".posts");
 
   input.addEventListener("input", (e) => {
     updateInputValue(e.target.value);
@@ -17,4 +23,12 @@ export const initApp = () => {
       .then(() => addRssFeed())
       .catch(() => console.log("валидация не пройдена"));
   });
+
+  postsContainer.addEventListener("click", (e) => {
+    const button = e.target.closest(".modal-btn");
+    console.log("id:", button.dataset.id);
+    if (button && button.dataset.id) {
+      setActivePost(button.dataset.id);
+    }
+  });
 };

src/js/model.js

@@ -51,3 +51,8 @@ export const addRssFeed = () => {
       throw error;
     });
 };
+
+export const setActivePost = (id) => {
+  console.log(state.posts);
+  state.activeItem = state.posts.find((post) => post.id === id);
+};

src/js/parseRss.js

@@ -8,7 +8,7 @@ export const parseRss = (xmlString) => {
   }
 
   const channel = {
-    id: 1, // добавить
+    id: doc.querySelector("channel > link")?.textContent || "",
     title: doc.querySelector("channel > title")?.textContent || "",
     description: doc.querySelector("channel > description")?.textContent || "",
     link: doc.querySelector("channel > link")?.textContent || "",

src/js/renderRssFeed.js

@@ -33,9 +33,9 @@ export const renderRssFeed = (state) => {
             (post) => `
           <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>
-            <button type="button" class="btn btn-outline-primary btn-sm" data-id="${post.id}" data-bs-toggle="modal" data-bs-target="#modal">Просмотр</button>
+            <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>

src/js/state.js

@@ -1,6 +1,6 @@
 import onChange from "on-change";
 import { renderRssFeed } from "./renderRssFeed.js";
-import { renderErrors, renderInputValue } from "./view.js";
+import { renderErrors, renderInputValue, showModal } from "./view.js";
 
 const createState = () => {
   const object = {
@@ -19,8 +19,7 @@ const createState = () => {
       renderRssFeed(state);
     }
     if (path === "activeItem") {
-      // поиск по массиву постов
-      // рендер модалки
+      showModal(state.activeItem);
     }
     if (path === "form.inputValue") {
       renderInputValue(value);

src/js/view.js

@@ -33,3 +33,7 @@ export const renderErrors = (errors) => {
 export const renderInputValue = (value) => {
   input.value = value;
 };
+
+export const showModal = (activeItem) => {
+  console.log("Активный пост:", activeItem);
+};