Add stratey pattern

api.js

@@ -2,21 +2,21 @@
 
 const json = {
     token: ''
-}
+};
 
 async function api(url, method, endpoint, message, data, headers) {
     try {
         const header = headers !== undefined ? headers : {};
         header['Authorization'] = getCookie('token');
-        const response = await fetch(url+endpoint, {
+        const response = await fetch(url + endpoint, {
             method: method,
-            body: data === null? undefined : data,
-            headers : header
+            body: data === null ? undefined : data,
+            headers: header
         });
         return await response.json()
     } catch (e) {
-        console.error(e.message)
-        document.getElementById("status").innerText = "Error in "+ message
+        console.error(e.message);
+        document.getElementById("status").innerText = "Error in " + message
     }
 }
 

arch-front.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

auth.html

@@ -14,24 +14,24 @@
 </body>
 <script>
 
-    const url = "http://localhost:8081"
+    const url = "http://localhost:8081";
 
     async function sendForm() {
 
-        event.preventDefault()
+        event.preventDefault();
 
-        const usernameElement = document.getElementById("username")
-        const username = usernameElement.value
-        const passwordElement = document.getElementById("password")
-        const password = passwordElement.value
+        const usernameElement = document.getElementById("username");
+        const username = usernameElement.value;
+        const passwordElement = document.getElementById("password");
+        const password = passwordElement.value;
         const data = {
             username: username,
             password: password
         };
-        console.log(data)
+        console.log(data);
         const response = await api(url, 'POST', "/sign_in/", "authorization", JSON.stringify(data), {'Content-Type': 'application/json'})
-        console.log(response)
-        setCookie(response)
+        console.log(response);
+        setCookie(response);
         window.location.href = "index.html"
     }
 

index.html

@@ -20,38 +20,111 @@
 
 <script>
 
-    const url = "http://localhost:8080"
+    const url = "http://localhost:8080";
 
-    async function sendData() {
+
+	/*
+	* Созаем обЪект и передаем стратегию WebsocketUpdaterStrategy
+	*/
+    new Updater(new WebsocketUpdaterStrategy(json => {
+        const catElement = document.getElementById("categories");
+        catElement.innerHTML = "";
+        for (let category of json) {
+            const elem = document.createElement("li");
+            const a = document.createElement("a");
+            a.dataset.id = category.id;
+            a.innerText = category.title;
+            a.href = url + "/category/" + category.id;
+            elem.appendChild(a);
+            catElement.appendChild(elem)
+        }
+    }, url)).start();
 
-        event.preventDefault()
+
+
+	/*
+	* Класс, получает стратегию и вызывает у нее метод start для запуска обновления категорий
+	*/
+    class Updater {
+        constructor(strategy) {
+            this.strategy = strategy;
+        }
 
-        const inputElement = document.getElementById("input")
-        const input = inputElement.value
+        start() {
+            this.strategy.update();
+        }
+    }
 
-        const fileInput = document.getElementById("file-input").files[0]
-        const formData = new FormData()
+
+	/*
+	* Базовый класс стратегии
+	*/
+    class UpdaterStrategy {
 
-        if (fileInput !== undefined){
-            formData.append("file", fileInput)
+        constructor(callback) {
+            this.callback = callback;
         }
-        await api(url, 'POST', "/data/", "sending data", fileInput === undefined ? input : formData)
+
+        start();
     }
 
-    async function showCategories() {
-
-            const json = await api(url, 'GET', "/category/", "getting categories", null)
-            const catElement = document.getElementById("categories")
-            catElement.innerHTML = ""
-            for (let category of json) {
-                const elem = document.createElement("li")
-                const a = document.createElement("a")
-                a.dataset.id = category.id
-                a.innerText = category.title
-                a.href = url + "/category/" + category.id
-                elem.appendChild(a)
-                catElement.appendChild(elem)
+
+	/*
+	* Стратегия, которая обновляет категории, используя websocket
+	*/
+    class WebsocketUpdaterStrategy extends UpdaterStrategy {
+
+        constructor(callback, url) {
+            super(callback);
+            this.url = url;
+        }
+
+        start() {
+            const socket = new WebSocket(this.url);
+
+            socket.onopen = function (e) {
+                console.log("WebSocket start!");
+            };
+
+            socket.onmessage = function (event) {
+                callback(event.data);
             }
+        }
+    }
+
+	/*
+	* Стратегия, которая обновляет категории, используя fetch
+	*/
+    class FetchUpdaterStrategy extends UpdaterStrategy {
+
+        constructor(callback, url) {
+            super(callback);
+        }
+
+        start() {
+            setInterval(() => {
+                (async () => {
+                    const json = await api(url, 'GET', "/category/", "getting categories", null);
+                    this.callback(json);
+                })();
+            }, 3000);
+        }
+    }
+
+    async function sendData() {
+
+        event.preventDefault();
+
+        const inputElement = document.getElementById("input");
+        const input = inputElement.value;
+
+        const fileInput = document.getElementById("file-input").files[0];
+        const formData = new FormData();
+
+        if (fileInput !== undefined) {
+            formData.append("file", fileInput)
+        }
+        await api(url, 'POST', "/data/", "sending data", fileInput === undefined ? input : formData)
     }
 
     function checkCookie() {
@@ -60,9 +133,7 @@
         }
     }
 
-    showCategories()
-    setInterval(showCategories, 3000)
-    setInterval(checkCookie, 3000)
+    setInterval(checkCookie, 3000);
 
 </script>
 </html>