1 files changed, 47 insertions, 0 deletions
diff --git a/static/index.js b/static/index.js
new file mode 100644
index 0000000..d546dba
--- /dev/null
+++ b/static/index.js
@@ -0,0 +1,47 @@
+const markAllArticles = (feedId, el, read) => {
+  const basePath = window.BASE_PATH;
+  const apiUrl = `${basePath}/api/feeds/${feedId}/${read ? 'read' : 'unread'}`;
+  fetch(apiUrl, { method: 'PUT' })
+    .then(_data => {
+      el.parentNode.nextElementSibling.remove();
+      el.parentNode.remove();
+    })
+    .catch(error => {
+      alert(error);
+    });
+};
+
+const markOneArticle = (articleId, el, read) => {
+  const basePath = window.BASE_PATH;
+  const apiUrl = `${basePath}/api/articles/${articleId}/${read ? 'read' : 'unread'}`;
+  fetch(apiUrl, { method: 'PUT' })
+    .then(_data => {
+      el.parentNode.remove();
+    })
+    .catch(error => {
+      alert(error);
+    });
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.js-unread-feed').forEach(el => {
+    el.addEventListener('click', () => {
+      markAllArticles(el.dataset.feedId, el, false);
+    });
+  });
+  document.querySelectorAll('.js-unread-article').forEach(el => {
+    el.addEventListener('click', () => {
+      markOneArticle(el.dataset.articleId, el, false);
+    });
+  });
+  document.querySelectorAll('.js-read-feed').forEach(el => {
+    el.addEventListener('click', () => {
+      markAllArticles(el.dataset.feedId, el, true);
+    });
+  });
+  document.querySelectorAll('.js-read-article').forEach(el => {
+    el.addEventListener('click', () => {
+      markOneArticle(el.dataset.articleId, el, true);
+    });
+  });
+});