refactoring

neandreev · Aug 6, 2021 · efa52b5 · efa52b5
1 parent 029872c
commit efa52b5
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 67 deletions.
diff --git a/src/handlers/formSubmit.js b/src/handlers/formSubmit.js
@@ -16,7 +16,7 @@ export default (data) => (e) => {
         status: 'pending',
         feedback: '',
       };
-      const id = _.uniqueId();
+      const id = parseInt(_.uniqueId(), 10);
 
       request(id, url, true);
     })

diff --git a/src/handlers/postButton.js b/src/handlers/postButton.js
@@ -2,6 +2,8 @@ import _ from 'lodash';
 import i18next from 'i18next';
 
 export default (watchedState) => (e) => {
+  if (e.target.nodeName !== 'BUTTON') return;
+
   const { id } = e.target.dataset;
   const linkElement = document.querySelector(`a[data-id='${id}']`);
   const link = linkElement.href;

diff --git a/src/init.js b/src/init.js
@@ -46,9 +46,9 @@ export default () => {
   const input = document.querySelector('.form-control');
   const button = document.querySelector('[type=submit]');
   const feedback = document.querySelector('.feedback');
+  const postsFeedsContainer = document.querySelector('#posts_feeds');
   const feedsContainer = document.querySelector('#feeds');
   const postsContainer = document.querySelector('#posts');
-  button.textContent = i18next.t('buttons.form.add');
 
   const watchedState = onChange(state, (path, value) => {
     if (path === 'uiState') {
@@ -69,6 +69,7 @@ export default () => {
           button.disabled = false;
           break;
         case 'complete':
+          postsFeedsContainer.classList.add('bg-light', 'border', 'border-1', 'rounded', 'mt-2', 'py-2', 'px-3');
           document.querySelector('form').reset();
           button.disabled = false;
           input.removeAttribute('readonly');
@@ -93,13 +94,6 @@ export default () => {
 
     if (path === 'posts') {
       postsContainer.innerHTML = render.posts(value);
-      const buttons = document.querySelectorAll('li button');
-      buttons.forEach((b) => (
-        b.addEventListener(
-          'click',
-          handlers.postButton(watchedState),
-        )
-      ));
       return;
     }
 
@@ -112,27 +106,19 @@ export default () => {
     axios
       .get(getAllOriginsUrl(url))
       .then((response) => {
-        // if (!isRSS(response)) {
-        //   watchedState.uiState = {
-        //     status: 'invalid',
-        //     feedbackKey: 'feedback.notRSS',
-        //   };
-        //   return;
-        // }
-
         const parsedChannel = parse(response.data);
         const { items, title, description } = parsedChannel;
-        const feed = {
+        const newFeed = {
           id, url, title, description,
         };
         const posts = items
           .map((item) => ({ ...item, feedId: id, id: _.uniqueId() }));
         const newPosts = _.differenceBy(posts, state.posts, 'link');
 
-        watchedState.feeds = _.sortBy(_.uniqBy([
-          feed,
+        watchedState.feeds = _.uniqBy([
+          newFeed,
           ...state.feeds,
-        ], 'url'), 'id').reverse();
+        ], 'url');
         watchedState.posts = _.uniqBy([
           ...newPosts,
           ...state.posts,
@@ -157,4 +143,5 @@ export default () => {
 
   const formSubmitData = { watchedState, request };
   form.addEventListener('submit', handlers.formSubmit(formSubmitData));
+  postsContainer.addEventListener('click', handlers.postButton(watchedState));
 };
diff --git a/src/locales/en.js b/src/locales/en.js
@@ -20,6 +20,7 @@ export default {
         preview: 'Preview',
       },
     },
+    applicationName: 'RSS-Agregator',
     feedsHeader: 'Feeds',
     postsHeader: 'Posts',
   },

diff --git a/src/locales/ru.js b/src/locales/ru.js
@@ -20,6 +20,7 @@ export default {
         preview: 'Просмотр',
       },
     },
+    applicationName: 'RSS-Агрегатор',
     feedsHeader: 'Фиды',
     postsHeader: 'Посты',
   },

diff --git a/src/render/document.js b/src/render/document.js
@@ -1,43 +1,70 @@
+import i18next from 'i18next';
+
 export default () => {
   const doc = `
-    <div class="container-sm">
-      <div id="modal" class="modal fade" aria-hidden="true" tabindex="1">
-        <div class="modal-dialog">
-          <div class="modal-content">
-            <div class="modal-header">
-              <h5 class="modal-title"></h5>
-              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-              <p></p>
-            </div>
-            <div class="modal-footer">
-              <a role="button" class="btn btn-primary">
-              </a>
-              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
-              </button>
+    <div class="container-fluid">
+      <div class="row">
+        <div class="mx-auto my-2 col-12 col-sm-10 col-lg-8 col-xl-6">
+          <div id="modal" class="modal fade" aria-hidden="true" tabindex="1">
+            <div class="modal-dialog">
+              <div class="modal-content">
+                <div class="modal-header">
+                  <h5 class="modal-title"></h5>
+                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                  <p></p>
+                </div>
+                <div class="modal-footer">
+                  <div class="btn-group">
+                    <a role="button" class="btn btn-primary">
+                    </a>
+                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
+                    </button>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-      <div id="form">
-        <form class="md-3">
-          <div class="container-sm">
-            <div class="row">
-              <div class="col-8">
-                <input aria-label="url" name="url" type="href" class="form-control" id="rssHref">
-              </div>
-              <div class="col-4">
-                <button aria-label="add"type="submit" class="btn btn-primary">Add RSS</button>
+          <div class="p-2">
+            <h1>${i18next.t('applicationName')}</h1>
+          </div>  
+          <div id="form">
+              <!-- <div class="d-flex flex-column align-items justify-content-between align-items-rounded">
+                <label class="form-label" for="rssHref">Введите RSS URL</label>
+
+                <div class="row align-items-center justify-content-md-center">
+                  <div class="my-2 form-group col-6">
+                      <input placeholder="RSS URL" aria-label="url" name="url" type="href" class="form-control" id="rssHref">
+                  </div>
+                  <div class="my-2 form-group col-auto">
+                    <button aria-label="add" type="submit" class="btn btn-primary align-bottom">${i18next.t('buttons.form.add')}</button>
+                  </div>
+                </div>
+              
+                <small class="feedback small"></small>
+              </div> -->
+
+              <div class="bg-light border border-1 rounded mt-1 py-2 px-3">
+                <label class="form-label" for="rssHref">Введите RSS URL</label>
+                <form>
+                  <div class="row">
+                    <div class="col">
+                      <input placeholder="RSS URL" aria-label="url" name="url" type="href" class="form-control" id="rssHref">
+                    </div>
+                    <div class="col-auto">
+                      <button aria-label="add" type="submit" class="btn btn-primary">${i18next.t('buttons.form.add')}</button>
+                    </div>
+                  </div>
+                </form>
+                <small class="feedback small"></small>
               </div>
-            </div>
           </div>
-        </form>
-        <p class="feedback small"></p>
-      </div>
-      <div id="posts_feeds">
-        <div id="feeds"></div>
-        <div id="posts"></div>
+          <div id="posts_feeds">
+            <div id="feeds"></div>
+            <div id="posts"></div>
+          </div>
+        </div>
       </div>
     </div>
   `;

diff --git a/src/render/feeds.js b/src/render/feeds.js
@@ -1,18 +1,20 @@
 import i18next from 'i18next';
+import _ from 'lodash';
 
 const renderFeed = ({ title, description }) => (
-  `<li class="list-group-item border-0">
+  `<li class="list-group-item bg-light">
     <h3>${title}</h3>
     <p>${description}</p>
   </li>`
 );
 
 export default (feeds) => {
+  const sortedFeeds = _.sortBy(feeds, ['id']).reverse();
   const result = `
     <div>
-      <h2 class="list-group">${i18next.t('feedsHeader')}</h2>
-      <ul>
-        ${feeds.map(renderFeed).join('')}
+      <h2>${i18next.t('feedsHeader')}</h2>
+      <ul class="list-group list-group-flush">
+        ${sortedFeeds.map(renderFeed).join('')}
       </ul>
     </div>
   `;

diff --git a/src/render/posts.js b/src/render/posts.js
@@ -3,13 +3,13 @@ import i18next from 'i18next';
 const renderPost = ({
   link, title, isRead, id,
 }) => (
-  `<li class="list-group-item border-0">
-    <div class="row">
-      <div class="col-8">
+  `<li class="list-group-item bg-light">
+    <div class="d-flex justify-content-between">
+      <div class="">
         <a data-id="${id}" class="${isRead ? 'fw-normal' : 'fw-bold'}" href="${link}">${title}</a>
       </div>
-      <div class="col-4">
-        <button data-id="${id}"data-bs-toggle="modal" class="btn btn-secondary" data-bs-target="#modal">
+      <div class="">
+        <button data-id="${id}"data-bs-toggle="modal" class="btn btn-outline-primary" data-bs-target="#modal">
           ${i18next.t('buttons.post.preview')}
         </button>
       </div>
@@ -20,9 +20,9 @@ const renderPost = ({
 export default (posts) => {
   const result = `
     <div>
-      <h2 class="list-group">${i18next.t('postsHeader')}</h2>
-      <ul>
-        ${posts.map(renderPost).join('')}
+      <h2>${i18next.t('postsHeader')}</h2>
+      <ul class="list-group list-group-flush">
+        ${posts.sort(({ id }) => parseInt(id, 10)).map(renderPost).join('')}
       </ul>
     </div>`;
   return result;