refactoring statuses

src/logic/main.js

@@ -17,7 +17,7 @@ const addProxy = (url) => {
 const app = () => {
   const initialState = {
     error: null,
-    processing: 'filling', // sending, editing
+    status: 'idle', // sending, failed, success
     feeds: [],
     posts: [],
     openedPostId: null,
@@ -71,6 +71,7 @@ const app = () => {
 
     elements.form.addEventListener('submit', (event) => {
       event.preventDefault();
+      state.status = 'sending';
       const formData = new FormData(event.target);
       const url = formData.get('url').trim();
       yup.setLocale({
@@ -82,7 +83,6 @@ const app = () => {
 
       urlSchema.validate(url)
         .then(() => {
-          state.processing = 'sending';
           state.error = null;
           const urlWithProxy = addProxy(url);
           return axios.get(urlWithProxy);
@@ -94,7 +94,7 @@ const app = () => {
           state.feeds = [feed, ...state.feeds];
           const newPostsWithId = posts.map((post) => ({ ...post, id: uniqueId() }));
           state.posts = [...newPostsWithId, ...state.posts];
-          state.processing = 'filling';
+          state.status = 'success';
         })
         .catch((error) => {
           switch (error.name) {
@@ -111,6 +111,7 @@ const app = () => {
               state.error = 'unknown';
               break;
           }
+          state.status = 'failed';
         });
     });
 

src/logic/render/mainRender.js

@@ -1,19 +1,18 @@
-import renderError from './renderError.js';
-import renderProcessing from './renderProcessing.js';
+import renderStatuses from './renderStatuses.js';
 import renderPosts from './renderPosts.js';
 import renderFeeds from './renderFeeds.js';
 import renderReadPost from './renderReadPost.js';
 import putPostInModal from './putPostInModal.js';
 
 export default (elements, state, i18n) => (path, value, previousValue) => {
+  if (path === 'error') return;
   const clickedPost = state.posts.find((post) => Number(post.id) === value);
   const mapping = {
     feeds: () => renderFeeds(value, previousValue, elements.feedsContainer, i18n),
     posts: () => renderPosts(value, previousValue, elements.postsContainer, i18n),
-    processing: () => renderProcessing(value, elements, i18n),
+    status: () => renderStatuses(value, elements, state.error, i18n),
     viewedPostId: () => renderReadPost(value, elements.postsContainer),
     openedPostId: () => putPostInModal(clickedPost, elements.modalContainer),
-    error: () => renderError(value, elements, i18n),
   };
 
   mapping[path]();

src/logic/render/renderProcessing.js → src/logic/render/renderStatuses.js

@@ -1,23 +1,27 @@
-export default (process, elements, i18n) => {
+export default (status, elements, error, i18n) => {
   const { input } = elements;
   const { button } = elements;
   const { feedback } = elements;
 
-  switch (process) {
-    case 'filling':
+  switch (status) {
+    case 'success':
       elements.form.reset();
       elements.input.focus();
       input.readOnly = false;
       button.disabled = false;
       feedback.textContent = i18n.t('otherTexts.success');
+      input.classList.remove('is-invalid');
       feedback.classList.remove('text-danger');
       feedback.classList.add('text-success');
       break;
     case 'sending':
       input.readOnly = true;
       button.disabled = true;
       break;
-    case 'editing':
+    case 'failed':
+      input.classList.add('is-invalid');
+      feedback.classList.add('text-danger');
+      feedback.textContent = i18n.t(`errors.${error}`);
       input.readOnly = false;
       button.disabled = false;
       elements.input.focus();