рендер только новых постов, добавление viewed стилей через поле поста

Author: daria-z

src/js/model.js

@@ -15,7 +15,7 @@ const schema = yup
   .test(
     "no-duplicate",
     i18next.t("no_duplicate"),
-    (value) => !state.feeds.some((feed) => feed.link === value)
+    (value) => !state.feedsList.includes(value)
   );
 
 export const validateInput = () => {
@@ -42,33 +42,33 @@ export const updateInputValue = (value) => {
 const fetchAndParseFeed = (url) => {
   return fetchRssData(url)
     .then((xmlString) => {
-      // console.log("Полученные данные:", xmlString);
       return parseRss(xmlString);
     })
     .catch((error) => {
       throw error;
     })
 };
 
-const addNewPosts = (items) => {
+const addNewPosts = (posts) => {
   const existingIds = new Set(state.posts.map((post) => post.id));
-  const newPosts = items
-    .filter((item) => !existingIds.has(item.id));
-  state.posts = [...state.posts, ...newPosts];
+  const newPosts = posts
+    .filter((post) => !existingIds.has(post.id))
+    .map((post) => ({ ...post, viewed: false }));
+  state.posts.unshift(...newPosts);
 };
 
 const updateFeedsAndPostsState = ({ channel, items }) => {
-  state.feeds = [...state.feeds, channel];
+  state.feeds.push(channel);
+  state.feedsList.push(state.form.inputValue);
   addNewPosts(items);
   state.form.inputValue = "";
 };
 
 export const addRssFeed = () => {
   return fetchAndParseFeed(state.form.inputValue)
     .then(({ channel, items }) => {
-      updateFeedsAndPostsState({ channel, items });
-      // return { channel, items };
-    })
+    updateFeedsAndPostsState({ channel, items });
+  })
     .catch((error) => {
       console.error("Ошибка в addRssFeed:", error.message);
       throw error;
@@ -77,7 +77,6 @@ export const addRssFeed = () => {
 
 export const feedsChecking = () => {
   if (state.feeds.length === 0) {
-    // setTimeout(feedsChecking, 10000);
     return;
   }
   checkRssFeed()
@@ -91,13 +90,15 @@ export const feedsChecking = () => {
 };
 
 export const checkRssFeed = () => {
-  const promises = state.feeds.map((feed) => {
-    return fetchAndParseFeed(feed.link)
+  const promises = state.feedsList.map((feed) => {
+    // передавать нормальную ссылку на feed
+    console.log("feed link:", feed)
+    return fetchAndParseFeed(feed)
       .then(({ items }) => {
         return items;
       })
       .catch((error) => {
-        console.error("Ошибка проверки фида:", feed.link, error.message);
+        console.error("Ошибка проверки фида:", feed, error.message);
         return [];
       });
   });
@@ -117,5 +118,8 @@ export const setActivePost = (id) => {
 };
 
 export const markPostAsRead = (id) => {
-  state.viewedPostsIds = [...state.viewedPostsIds, id];
+  const post = state.posts.find(post => post.id === id);
+  if (post && !post.viewed) {
+    post.viewed = true;
+  }
 };

src/js/parseRss.js

@@ -1,26 +1,24 @@
 export const parseRss = (xmlString) => {
   const parser = new DOMParser();
-  const doc = parser.parseFromString(xmlString, "application/xml");
+  const doc = parser.parseFromString(xmlString, "text/xml");
 
   const error = doc.querySelector("parsererror");
   if (error) {
-    throw new Error("ошибка парсинга xml");
+    throw new Error(`Ошибка парсинга XML: ${error.textContent}`);
   }
 
   const channel = {
     id: doc.querySelector("channel > link")?.textContent || "",
     title: doc.querySelector("channel > title")?.textContent || "",
     description: doc.querySelector("channel > description")?.textContent || "",
     link: doc.querySelector("channel > link")?.textContent || "",
-    pubDate: doc.querySelector("channel > pubDate")?.textContent || "",
   };
 
   const items = Array.from(doc.querySelectorAll("item")).map((item) => ({
     id: item.querySelector("guid")?.textContent || "",
     title: item.querySelector("title")?.textContent || "",
     description: item.querySelector("description")?.textContent || "",
     link: item.querySelector("link")?.textContent || "",
-    pubDate: item.querySelector("pubDate")?.textContent || "",
   }));
 
   return { channel, items };

src/js/renderRssFeed.js

@@ -22,7 +22,7 @@ export const renderFeeds = (feeds) => {
   `;
 };
 
-export const renderPosts = (posts, viewedPostsIds) => {
+export const renderPosts = (posts) => {
   const postsContainer = document.querySelector(".posts");
 
   postsContainer.innerHTML = `
@@ -34,7 +34,7 @@ export const renderPosts = (posts, viewedPostsIds) => {
   ${posts
     .map(
       (post) => {
-              const titleStyle = viewedPostsIds.includes(post.id) ? "fw-normal" : "fw-bold";
+              const titleStyle = post.viewed ? "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=${titleStyle} data-id="${post.id}" target="_blank" rel="noopener noreferrer">${post.title}</a>
@@ -48,3 +48,9 @@ export const renderPosts = (posts, viewedPostsIds) => {
   `;
 };
 
+export const renderViewedPost = (id) => {
+  const viewedPost = document.querySelector(`[data-id="${id}"]`);
+  viewedPost.classList.remove("fw-bold");
+  viewedPost.classList.add("fw-normal");
+}
+

src/js/state.js

@@ -10,29 +10,26 @@ const createState = () => {
       inputValue: "",
       errors: null,
     },
+    feedsList: [],
     feeds: [],
     posts: [],
     activeItem: null,
-    viewedPostsIds: [],
   };
 
   const state = onChange(object, (path, value) => {
     console.log(`состояние изменено: ${path}`, value);
     if (path === "feeds") {
-      renderFeeds(state.feeds);
+      renderFeeds(value);
       feedsChecking();
     }
     if (path === "posts") {
-      renderPosts(state.posts, [...state.viewedPostsIds]);
-      state.posts.forEach((post) => {
-        post.rendered = true;
-      });
+      renderPosts(value);
     }
     if (path === "activeItem") {
       if (state.activeItem !== null) {
         showModal(state.activeItem);
-        markPostAsRead(state.activeItem.id); //проверять на уникальность!
-        renderPosts(state.posts, [...state.viewedPostsIds]);
+        markPostAsRead(state.activeItem.id);
+        renderViewedPost(state.activeItem.id);
       } else {
         closeModal();
       }
@@ -49,8 +46,3 @@ const createState = () => {
 };
 
 export default createState;
-
-
-
-
-