async, fetch()

1 files changed, 121 insertions, 125 deletions

diff --git a/main.js b/main.js
index 1c7fba3..3ab8426 100644
--- a/main.js
+++ b/main.js
@@ -1,47 +1,31 @@
 const messages = new Map();
 const users = new Map();
-const host = window.location.protocol + "//" + window.location.host;
 let sent = false;
+const host = location.protocol + "//" + location.host;
+
+// const xhttp_worker = new Worker("xhttp.js");
 
 
 function xhttp_request(location) {
-    var xhttp = new XMLHttpRequest();
-    var return_string;
+    let f = fetch(`${host}/api/${location}`);
+    return f.then((response) => response.json());
 
-    xhttp.onreadystatechange = function() {
-        if (this.readyState == 4 && this.status == 200) {
-            // Typical action to be performed when the document is ready:
-            return_string = xhttp.responseText;
-        }
-    };
-    xhttp.open("GET", `${host}/api/${location}`, false);
-    xhttp.send();
-    
-    return JSON.parse(return_string);
 }
 
 function xhttp_post(location, json) {
-    var xhttp = new XMLHttpRequest();
-    xhttp.open("POST", `${host}/api/${location}`, false);
-    xhttp.setRequestHeader("Content-Type", "application/json")
-
-    
-    var return_string;
+    let f = fetch(`${host}/api/${location}`, {
+        method: "POST",
+        headers: {"Content-Type": "application/json"},
+        body: json
+    })
 
-    xhttp.onreadystatechange = function() {
-        if (this.readyState == 4 && this.status == 200) {
-            return_string = xhttp.responseText;
-        }
-    };
-
-    xhttp.send(json);
-    
-    return JSON.parse(return_string);
+    return f.then((response) => response.json());
 }
 
-function format_message(m) {
+
+async function format_message(m) {
     var s;
-    var sender = get_user_name(m.sender);
+    var sender = await get_user_name(m.sender);
     var sclass = "";
 
     if (m.deleted) {
@@ -72,21 +56,21 @@ function format_date(d) {
 
 function send() {
     var input = document.getElementById("input").value;
-    let user_id = get_user_from_name();
-
-    if (user_id == undefined) {
-        alert("User not found")
-        return undefined
-    }
-
-    let message = JSON.stringify({"sender": user_id, "message": input})
-
-    var id = xhttp_post("send_message", message)
-
-    get_message(id.Ok);
-
-    document.getElementById("input").value = ""
-    sent = true
+    let user_id = get_user_from_name().then((user_id) => {
+        if (user_id == undefined) {
+            alert("User not found")
+            return undefined
+        }
+    
+        let message = JSON.stringify({"sender": user_id, "message": input})
+    
+        var id = xhttp_post("send_message", message).then((id) => {
+            get_message(id.Ok);
+        
+            document.getElementById("input").value = ""
+            sent = true
+        })
+    });
 }
 
 function get_newest_cache_id() {
@@ -106,68 +90,70 @@ function get_newest_cache_id() {
 
 // Returns message list
 function get_newest_messages() {
-    let newest_id = xhttp_request("get_message_id_newest");
-    let newest_cache_id = get_newest_cache_id();
-
-    if (newest_id.Err) {
-        return
-    } else {
-        newest_id = newest_id.Ok
-    }
-
-
-    let final_array = [];
-
-    if (newest_id == newest_cache_id) {
-        return
-    }
-
-    if (newest_cache_id == undefined) {
-        let id = newest_id;
-        if (id - 25 < 0) {
-            get_message(0)
+    xhttp_request("get_message_id_newest").then(async (newest_id) => {
+        let newest_cache_id = get_newest_cache_id();
+    
+        if (newest_id.Err) {
+            return
         } else {
-            get_message(newest_id - 25)
+            newest_id = newest_id.Ok
         }
-        return get_newest_messages()
-    }
     
-    if (newest_id > newest_cache_id) {
-        let delta = newest_id - newest_cache_id ;
-        if (delta > 25) {
-            let oldest = newest_id - 25;
-            let newest = delta;
-
-
-            let list = get_message_list(oldest, newest);
-            for (x of list.values()) {
-                final_array.push(x)
-            }
-
-            newest_id = oldest;
-            if (oldest - 25 < 0) {
-                newest_cache_id = 0
+    
+        let final_array = [];
+    
+        if (newest_id == newest_cache_id) {
+            return
+        }
+    
+        if (newest_cache_id == undefined) {
+            let id = newest_id;
+            if (id - 25 < 0) {
+                get_message(0)
             } else {
-                newest_cache_id = oldest - 25
+                get_message(newest_id - 25)
             }
+            return get_newest_messages()
         }
-    }
-
-    let list = get_message_list(newest_cache_id, newest_id)
-    for (x of list.values()) {
-        final_array.push(x)
-    }
-
-    // Insert all values into the message map
-    for (x of final_array.values()) {
-        messages.set(x.id, x)
-    }
-
-    chatwindow()
+        
+        if (newest_id > newest_cache_id) {
+            let delta = newest_id - newest_cache_id ;
+            if (delta > 25) {
+                let oldest = newest_id - 25;
+                let newest = delta;
+    
+    
+                let list = get_message_list(oldest, newest);
+                for (x of list.values()) {
+                    final_array.push(x)
+                }
+    
+                newest_id = oldest;
+                if (oldest - 25 < 0) {
+                    newest_cache_id = 0
+                } else {
+                    newest_cache_id = oldest - 25
+                }
+            }
+        }
+    
+        let list = await get_message_list(newest_cache_id, newest_id)
+        for (x of list.values()) {
+            final_array.push(x)
+        }
+    
+        // Insert all values into the message map
+        for (x of final_array.values()) {
+            messages.set(x.id, x)
+        }
+    
+        chatwindow().then()
+    });
 }
 
-function get_message_list(oldest, newest) {
-    let req = xhttp_request(`get_message_list/${oldest}/${newest}`).Ok
+async function get_message_list(oldest, newest) {
+    let data = await xhttp_request(`get_message_list/${oldest}/${newest}`).then();
+    let req = data.Ok;
     return req
 }
 
@@ -179,45 +165,51 @@ function get_message(id) {
     }
 
     // Get message
-    let msg = xhttp_request("get_message/" + id).Ok;
-    messages.set(msg.id, msg)
-
-    let dom = to_dom(format_message(msg));
-
-    chatwindow(msg.id)
+    xhttp_request("get_message/" + id).then((data) => {
+        if (data.Ok != undefined) {
+            let msg = data.Ok;
+            messages.set(msg.id, msg)
+            
+            chatwindow(msg.id)
+        }
+    })
 }
 
-function get_user_from_name() {
+async function get_user_from_name() {
     let v = document.getElementById("username").value;
 
-    let cached;
     for (x of users.values()) {
         if (x.username == v) {
             return x.id
         }
     }
 
-    let user = xhttp_post("get_user_by_name", JSON.stringify(v));
+
+    let user = await xhttp_post("get_user_by_name", JSON.stringify(v));
     if (user.Ok) {
+        users.set(user.id, user)
         return user.Ok.id
     } else {
         return create_user(v)
     }
 }
 
-function create_user(username) {
-    let user = xhttp_post("create_user", JSON.stringify(username));
-    return user.Ok
+async function create_user(username) {
+    let user = await xhttp_post("create_user", JSON.stringify(username)).Ok;
+    users.set(user.id, user)
+    return user
 }
 
-function get_user_name(id) {
+async function get_user_name(id) {
     let cached = users.get(id)
     if (cached != undefined) {
         return cached.username
     }
 
 
-    let user = xhttp_request("get_user/" + id).Ok;
+    let data = await xhttp_request("get_user/" + id,);
+    let user = data.Ok;
+
     users.set(user.id, user)
 
     return user.username
@@ -230,7 +222,7 @@ function to_dom(x) {
     return dom
 }
 
-function chatwindow(hash) {
+async function chatwindow(hash = undefined) {
     let window = document.getElementById("chatwindow");
     let pre_scroll = window.scrollHeight - window.clientHeight;
     window.innerHTML = "";
@@ -256,12 +248,14 @@ function chatwindow(hash) {
             old_date = date;
             window.append(to_dom(`<span class="date">${date.getDate()}/${date.getMonth()}/${date.getFullYear()}</span>`))
         }
-        let dom = to_dom(format_message(v))
 
+        let data = await format_message(v).then()
+        let dom = to_dom(data);
 
-        let node = window.appendChild(dom);
-    }
+        window.appendChild(dom);
 
+    }
+    
     if (window.scrollTop == pre_scroll) {
         if (latest_v != undefined && hash == undefined) {
             document.getElementById(v.id).scrollIntoView();
@@ -307,13 +301,15 @@ function clearnewlineinput() {
 }
 
 function onload() {
-    let server_info = xhttp_request("");
-    document.getElementById("info").innerHTML += server_info.version + ", " + server_info.name + ", users: " + server_info.users;
+    xhttp_request("").then((server_info) => {
 
-    // Get ready for websockets implementation in rocket_test 0.3
-    if (server_info.version[2] < 3 ) {
-        const interval = setInterval(get_newest_messages, 1000);
-    } else {
-        // Initiate websocket "polling"
-    }
+        document.getElementById("info").innerHTML += server_info.version + ", " + server_info.name + ", users: " + server_info.users;
+    
+        // Get ready for websockets implementation in rocket_test 0.3
+        if (server_info.version[2] < 3 ) {
+            const interval = setInterval(get_newest_messages, 1000);
+        } else {
+            // Initiate websocket "polling"
+        }
+    })
 }