Migrate over to async/await on Users.svelte

Author: mytja

src/Admin/Users.svelte

@@ -13,39 +13,35 @@
 
     let principalId = undefined;
 
-    loadThings();
-
-    function loadThings() {
+    async function loadThings() {
         loaded = false;
-
-        fetch(`${baseurl}/users/get`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}})
-            .then((response) => response.json())
-            .then((json) => {
-                    items = json["data"];
-                    loaded = true;
-                    for (let i in items) {
-                        let item = items[i]
-                        if (item.Role === "principal") {
-                            principalId = item.ID;
-                            break
-                        }
-                    }
-                },
-            );
+        let response = await fetch(`${baseurl}/users/get`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}})
+        let json = await response.json();
+        items = json["data"];
+        loaded = true;
+        for (let i in items) {
+            let item = items[i]
+            if (item.Role === "principal") {
+                principalId = item.ID;
+                break
+            }
+        }
     }
 
-    let choices = ["unverified", "student", "parent", "teacher", "food organizer", "school psychologist", "principal assistant", "principal"];
-
+    const choices = ["unverified", "student", "parent", "teacher", "food organizer", "school psychologist", "principal assistant", "principal"];
 
     import { navigate } from "svelte-navigator";
     import Cookies from "js-cookie";
     import FormField from "@smui/form-field";
     import Switch from "@smui/switch";
+    import {onMount} from "svelte";
 
     const token = Cookies.get("key");
     if (token === null || token === undefined) {
         navigate("/login");
     }
+
+    onMount(loadThings);
 </script>
 
 <DataTable table$aria-label="User list" style="width: 100%;">
@@ -69,25 +65,18 @@
             <Cell>{item["Email"]}</Cell>
             <Cell>
                 {#if localStorage.getItem("userId") !== item["ID"]}
-                    <SegmentedButton segments={choices} let:segment singleSelect on:change={(e) => {
+                    <SegmentedButton segments={choices} let:segment singleSelect on:change={async (e) => {
                         e.stopPropagation();
-                        console.log(e);
-
                         let fd = new FormData();
                         fd.append("role", e.detail.segmentId);
-
                         principalId = undefined;
 
-                        fetch(`${baseurl}/user/role/update/${item["ID"]}`, {
+                        await fetch(`${baseurl}/user/role/update/${item["ID"]}`, {
                             headers: {"Authorization": "Bearer " + Cookies.get("key")},
                             body: fd,
                             method: "PATCH"
                         })
-                            .then((response) => response.json())
-                            .then((json) => {
-                                    loadThings()
-                                },
-                            );
+                        await loadThings()
                     }} bind:selected="{item['Role']}">
                         {#if
                             (localStorage.getItem("role") === "principal assistant" && !(segment === "principal" || segment === "principal assistant")) ||
@@ -109,37 +98,30 @@
                         <Switch bind:checked={item["IsLocked"]} on:click={async (e) => {
                             e.stopPropagation();
                             await fetch(`${baseurl}/user/lock_unlock/${item["ID"]}`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}, method: "PATCH"});
-                            loadThings();
+                            await loadThings();
                         }} />
                     </FormField>
                 {/if}
             </Cell>
             <Cell>
                 {#if localStorage.getItem("email") !== item["Email"]}
-                    <IconButton class="material-icons" on:click={(e) => {
+                    <IconButton class="material-icons" on:click={async (e) => {
                         e.stopPropagation();
-                        fetch(`${baseurl}/user/get/password_reset/${item["ID"]}`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}})
-                            .then((response) => response.blob())
-                            .then((blob) => saveBlob(blob))
-                            .catch((err) => {
-                            console.log(err);
-                          });
+                        let response = await fetch(`${baseurl}/user/get/password_reset/${item["ID"]}`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}})
+                        let blob = await response.blob()
+                        await saveBlob(blob)
                     }}>download</IconButton>
                 {/if}
             </Cell>
             <Cell>
                 {#if localStorage.getItem("email") !== item["Email"]}
-                    <IconButton class="material-icons" on:click={(e) => {
+                    <IconButton class="material-icons" on:click={async (e) => {
                         e.stopPropagation();
-                        fetch(`${baseurl}/user/delete/${item["ID"]}`, {
+                        await fetch(`${baseurl}/user/delete/${item["ID"]}`, {
                             headers: {"Authorization": "Bearer " + Cookies.get("key")},
                             method: "DELETE"
                         })
-                            .then((response) => response.json())
-                            .then((json) => {
-                                    loadThings()
-                                },
-                            );
+                        await loadThings()
                     }}>delete</IconButton>
                 {/if}
             </Cell>