move listeners

Author: daria-z

src/js/main.js

@@ -1,17 +1,17 @@
-import { updateInputValue, addRssFeed, getErrors, getRssFeed } from "./model";
-import { renderErrors, removeErrors } from "./view";
+import { createModel } from "./model";
+import { createView } from "./view";
 
-const input = document.querySelector("#url-input");
-const form = document.querySelector("#rss-form");
+const model = createModel();
+const view = createView();
 
-input.addEventListener('input', (e) => {
-  updateInputValue(e.target.value);
+view.bindInputChange((value) => {
+  model.updateInputValue(value);
+  const errors = model.getErrors();
+  view.renderErrors(errors);
 });
 
-form.addEventListener('submit', (e) => {
-  e.preventDefault();
-  addRssFeed();
-  renderErrors(getErrors());
+view.bindAddFeed((value) => {
+  model.addRssFeed(value);
 });
 
 
@@ -23,3 +23,4 @@ form.addEventListener('submit', (e) => {
 
 
 
+

src/js/model.js

@@ -33,26 +33,31 @@ const validateInput = (value) => {
   }
 };
 
-export const updateInputValue = (value) => {
-  state.inputValue = value;
-  state.errors = null;
-};
 
-export const addRssFeed = () => {
-  if (validateInput(state.inputValue)) {
-    state.rssFeed = [...state.rssFeed, state.inputValue];
-    console.log("обновлён список rss", state.rssFeed);
+export const createModel = () => {
+  const updateInputValue = (value) => {
+    state.inputValue = value;
     state.errors = null;
-  } else {
-    console.log("не прошёл валидацию:", state.errors);
-  }
-};
-
-export const getErrors = () => {
-  return state.errors;
-};
+  };
+
+  const addRssFeed = () => {
+    if (validateInput(state.inputValue)) {
+      state.rssFeed = [...state.rssFeed, state.inputValue];
+      console.log("обновлён список rss", state.rssFeed);
+      state.errors = null;
+    } else {
+      console.log("не прошёл валидацию:", state.errors);
+    }
+  };
 
+  const getErrors = () => {
+    return state.errors;
+  };
 
+  return {
+    updateInputValue, addRssFeed, getErrors
+  }
+}
 
 
 

src/js/view.js

@@ -1,23 +1,47 @@
-const input = document.querySelector("input");
+const form = document.querySelector("#rss-form");
+const input = document.querySelector("#url-input");
 const feedback = document.querySelector("#feedback");
 
-export const removeErrors = () => {
-  input.classList.remove("is-invalid");
-  feedback.textContent = '';
-}
+export const createView = () => {
+  const bindInputChange = (handler) => {
+    input.addEventListener('input', (e) => {
+      handler(e.target.value);
+    })
+  };
 
-export const renderErrors = (errors) => {
-  input.classList.add("is-invalid");
+  const bindAddFeed = (handler) => {
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      handler()
+    })
+  };
 
-  if (errors === null) {
-    removeErrors();
-  } else {
-    errors.map((error) => {
-      feedback.textContent = error;
-    });
+  const removeErrors = () => {
+    input.classList.remove("is-invalid");
+    feedback.textContent = "";
+  };
+
+  const renderErrors = (errors) => {
+    input.classList.add("is-invalid");
+
+    if (errors === null) {
+      removeErrors();
+    } else {
+      errors.map((error) => {
+        feedback.textContent = error;
+      });
+    }
+  };
+
+  return {
+    bindInputChange,
+    bindAddFeed,
+    renderErrors
   }
 };
 
 
 
 
+
+