рендер отдельных состояний UI (pending, error, success) в одном месте

Author: daria-z

src/js/model.js

@@ -1,8 +1,6 @@
 import * as yup from "yup";
-// import i18next from "../i18n.js";
 import { fetchRssData } from "./fetchRssData.js";
 import { parseRss } from "./parseRss.js";
-// import { renderRssFeed } from "./renderRssFeed.js";
 
 import createState from './state.js';
 
@@ -40,17 +38,14 @@ export const updateInputValue = (value) => {
 
 const fetchAndParseFeed = (url) => {
   state.ui.pending = true;
-  //перерендер
   return fetchRssData(url)
     .then((xmlString) => {
       state.ui.pending = false;
       state.ui.success = true;
-      //перерендер
       return parseRss(xmlString);
     })
     .catch((error) => {
       state.ui.pending = false;
-      //тоже перерендер
       throw error;
     });
 };
@@ -97,6 +92,7 @@ export const feedsChecking = () => {
 
 export const checkRssFeed = () => {
   const promises = state.feedsList.map((feed) => {
+    // разделять ли это для UI ? если да, то как отслеживать разницу. Обрабатывать оба случая одинакого и поменять условия рендера?
     return fetchAndParseFeed(feed)
       .then(({ items }) => {
         return items;

src/js/renderRssFeed.js

@@ -23,18 +23,6 @@ export const renderFeeds = (feeds) => {
   `;
 };
 
-export const renderFeedsPending = () => {
-  const postsContainer = document.querySelector(".feeds");
-  postsContainer.innerHTML = `
-    <div
-      id="posts-spinner"
-      class="spinner-border text-primary d-none"
-      role="status">
-        <span>Загрузка фидов...</span>
-    </div>
-  `;
-};
-
 export const renderPosts = (posts) => {
   const postsContainer = document.querySelector(".posts");
 

src/js/state.js

@@ -1,7 +1,7 @@
 import onChange from "on-change";
 import { renderFeeds, renderPosts, renderViewedPost } from "./renderRssFeed.js";
 import { closeModal, showModal } from "./renderModal.js";
-import { renderErrors, renderInputValue } from "./view.js";
+import { renderInputValue, renderUi } from "./view.js";
 import { feedsChecking, markPostAsRead  } from "./model.js";
 
 const createState = () => {
@@ -43,7 +43,13 @@ const createState = () => {
       renderInputValue(value);
     }
     if (path === "ui.error") {
-      renderErrors(value);
+      renderUi('error', value);
+    }
+    if (path === "ui.success") {
+      renderUi("success");
+    }
+    if (path === "ui.pending") {
+      renderUi("pending");
     }
   });
 

src/js/view.js

@@ -20,13 +20,61 @@ export const renderUIText = () => {
   example.textContent = i18next.t("example");
 };
 
-export const renderErrors = (error) => {
-  if (error) {
-    input.classList.add("is-invalid");
-    feedback.textContent = i18next.t(`errors.${error}`);
-  } else {
-    input.classList.remove("is-invalid");
-    feedback.textContent = "";
+const renderErrors = (error) => {
+  input.classList.add("is-invalid");
+  feedback.classList.add("text-danger");
+  feedback.textContent = i18next.t(`errors.${error}`);
+};
+
+const renderSuccess = () => {
+  feedback.classList.add("text-success");
+  feedback.textContent = i18next.t(`ui.success`);
+};
+
+const renderFeedsPending = () => {
+  const postsContainer = document.querySelector(".feeds");
+  const spinner = document.createElement('div');
+  spinner.classList.add('spinner-container')
+  spinner.innerHTML = `
+    <div
+      id="posts-spinner"
+      class="spinner-border text-primary d-none"
+      role="status">
+        <span>${i18next.t("ui.pending")}</span>
+    </div>
+  `;
+  postsContainer.append(spinner);
+};
+
+const cleanDomElements = () => {
+  input.classList.remove("is-invalid");
+  feedback.classList.remove("text-danger");
+  feedback.classList.remove("text-success");
+  feedback.textContent = "";
+  const spinner = document.querySelector(".spinner-container");
+  if (spinner) spinner.remove();
+}
+
+export const renderUi = (uiState, message) => {
+  switch (uiState) {
+    case 'error':
+      cleanDomElements();
+      renderErrors(message);
+      break;
+    case 'success':
+      cleanDomElements();
+      renderSuccess();
+      break;
+    case 'pending':
+      cleanDomElements();
+      renderFeedsPending();
+      break;
+    case 'update':
+      // нужен ли отдельный case?
+      break;
+    default:
+      cleanDomElements();
+      break;
   }
 };
 

src/locales/en.js

@@ -7,6 +7,10 @@ export default {
     full_btn: "Full",
     close_btn: "Close",
     example: "Example",
+    ui: {
+      success: "RSS успешно загружен",
+      pending: "Загрузка фидов...",
+    },
     errors: {
       exists: "This feed has already been added",
       required: "Required field",

src/locales/ru.js

@@ -7,10 +7,7 @@ export default {
     full_btn: "Читать полностью",
     close_btn: "Закрыть",
     example: "Пример",
-    invalid_url: "Ссылка должна быть валидным URL",
-    required_field: "Обязательное поле",
-    no_duplicate: "Эта лента уже добавлена",
-    loading: {
+    ui: {
       success: "RSS успешно загружен",
     },
     errors: {