feat: единый интерфейс для работы с model

Author: daria-z

src/js/fetchRssData.js

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { errorsHandler } from "./model.js";
+import { model } from "./model/index.js";
 
 export const fetchRssData = (link) => {
   const proxyUrl = `https://allorigins.hexlet.app/raw?url=${encodeURIComponent(link)}&disableCache=true`;
@@ -10,9 +10,7 @@ export const fetchRssData = (link) => {
       return response.data;
     })
     .catch((error) => {
-      errorsHandler(error, "fetch");
-      console.error("fetching or parsing error:", error);
+      model.error.handle(error, "fetch");
       throw error;
     });
 };
-

src/js/index.js

@@ -2,5 +2,3 @@ import "../i18n.js";
 import { initApp } from "./main.js";
 
 initApp();
-
-// validateInput -> fetchRssData -> parseRss -> state -> render

src/js/main.js

@@ -1,29 +1,23 @@
 import { view } from "./view/index.js";
-import {
-  updateInputValue,
-  addRssFeed,
-  validateInput,
-  setActivePost,
-  feedsChecking,
-} from "./model.js";
+import { model } from "./model/index.js";
 
 export const initApp = () => {
   view.ui.renderUIText();
-  feedsChecking();
+  model.update.startFeedChecks();
 
   const input = document.querySelector("#url-input");
   const form = document.querySelector("#rss-form");
   const postsContainer = document.querySelector(".posts");
   const closeModalBtns = document.querySelectorAll('[data-bs-dismiss="modal"]');
 
   input.addEventListener("input", (e) => {
-    updateInputValue(e.target.value);
+    model.form.updateInputValue(e.target.value);
   });
 
   form.addEventListener("submit", (e) => {
     e.preventDefault();
-    validateInput()
-      .then(() => addRssFeed())
+    model.form.validateInput()
+      .then(() => model.feed.add())
       .catch((error) => {
         console.log("валидация не пройдена:", error.message);
       });
@@ -32,13 +26,13 @@ export const initApp = () => {
   postsContainer.addEventListener("click", (e) => {
     const button = e.target.closest(".modal-btn");
     if (button && button.dataset.id) {
-      setActivePost(button.dataset.id);
+      model.post.setActive(button.dataset.id);
     }
   });
 
   closeModalBtns.forEach((btn) => {
     btn.addEventListener('click', () => {
-      setActivePost(null);
+      model.post.setActive(null);
     });
   });
 };

src/js/model.js

@@ -0,0 +1,18 @@
+import state from "../state.js";
+
+export const handle = (error, type) => {
+  switch (type) {
+    case "fetch":
+      console.error("Network error:", type, error);
+      state.ui.error = "network";
+      break;
+    case "parse":
+      console.error("Parse error:", type, error);
+      state.ui.error = "noRss";
+      break;
+    default:
+      console.error("Unknown error:", error);
+      state.ui.error = "no_details";
+      break;
+  }
+};

src/js/model/error.js

@@ -0,0 +1,43 @@
+import state from "../state";
+import { fetchRssData } from "../fetchRssData.js";
+import { parseRss } from "../parseRss.js";
+
+import { addNew } from "./post.js";
+import { handle } from "./error.js";
+
+export const fetchAndParse = (url) => {
+  state.ui.pending = true;
+  // state.ui.error = null;
+  return fetchRssData(url)
+    .then((xmlString) => {
+      state.ui.pending = false;
+      state.ui.success = true;
+      return parseRss(xmlString);
+    })
+    .catch((error) => {
+      state.ui.pending = false;
+      handle(error, error.message === "noRss" ? "parse" : "fetch");
+      throw error;
+    });
+};
+
+export const updateState = ({ channel, items }) => {
+  state.feeds.push(channel);
+  state.feedsList.push(state.form.inputValue);
+  addNew(items);
+  state.form.inputValue = "";
+  // state.ui.error = null;
+};
+
+export const add = () => {
+  const url = state.form.inputValue;
+  return fetchAndParse(url)
+    .then(({ channel, items }) => {
+      updateState({ channel, items });
+      // state.ui.error = null;
+    })
+    .catch((error) => {
+      handle(error, error.message === "noRss" ? "parse" : "fetch");
+      throw error;
+    });
+};

src/js/model/feed.js

@@ -0,0 +1,33 @@
+import * as yup from "yup";
+
+import state from "../state.js";
+
+const schema = yup
+  .string()
+  .url("notUrl")
+  .required("required")
+  .test(
+    "no-duplicate",
+    "exists",
+    (value) => !state.feedsList.includes(value)
+  );
+
+export const validateInput = () => {
+  state.ui.success = false;
+  return schema
+    .validate(state.form.inputValue)
+    .then(() => {
+      state.ui.error = null;
+      return state.form.inputValue;
+    })
+    .catch((error) => {
+      state.ui.error = error.errors.join();
+      throw error;
+    });
+};
+
+export const updateInputValue = (value) => {
+  if (value === null) return;
+  state.form.inputValue = value;
+  if (state.ui.error) state.ui.error = null;
+};

src/js/model/form.js

@@ -0,0 +1,13 @@
+import * as update from "./update.js";
+import * as form from "./form.js";
+import * as feed from "./feed.js";
+import * as post from "./post.js";
+import * as error from "./error.js";
+
+export const model = {
+  form,
+  feed,
+  post,
+  update,
+  error,
+};

src/js/model/index.js

@@ -0,0 +1,24 @@
+import state from "../state.js";
+
+export const addNew = (posts) => {
+  const existingIds = new Set(state.posts.map((post) => post.id));
+  const newPosts = posts
+    .filter((post) => !existingIds.has(post.id))
+    .map((post) => ({ ...post, viewed: false }));
+  state.posts.unshift(...newPosts);
+};
+
+export const setActive = (id) => {
+  if (id === null) {
+    state.activeItem = null;
+    return;
+  }
+  state.activeItem = state.posts.find((post) => post.id === id);
+};
+
+export const markAsRead = (id) => {
+  const post = state.posts.find((post) => post.id === id);
+  if (post && !post.viewed) {
+    post.viewed = true;
+  }
+};

src/js/model/post.js

@@ -0,0 +1,36 @@
+import state from "../state.js";
+import { fetchAndParse } from "./feed.js";
+import { addNew } from "./post.js";
+
+export const checkFeeds = () => {
+  const promises = state.feedsList.map((feed) => {
+    return fetchAndParse(feed)
+      .then(({ items }) => {
+        return items;
+      })
+      .catch((error) => {
+        console.error("Ошибка проверки фида:", feed, error.message);
+        return [];
+      });
+  });
+
+  return Promise.all(promises).then((results) => {
+    const newPosts = results.flat();
+    addNew(newPosts);
+  });
+};
+
+export const startFeedChecks = () => {
+  if (state.feeds.length === 0) {
+    return;
+  }
+  checkFeeds()
+    .then(() => {
+      setTimeout(startFeedChecks, 10000);
+    })
+    .catch((error) => {
+      console.error(error.message);
+      setTimeout(startFeedChecks, 10000);
+    });
+};
+