From 70f9cb089b89c2ece27e841569c1c6a76d7badc3 Mon Sep 17 00:00:00 2001
From: "Zed A. Shaw" <zed.shaw@gmail.com>
Date: Wed, 27 Aug 2025 11:36:17 -0400
Subject: [PATCH] A little better Alpine.js usage by having GetJson just be an
 async function you use in x-init.

---
 static/js/code.js           | 20 ++++----------------
 views/admin/table/new.html  | 16 ++++++++--------
 views/admin/table/view.html |  8 +++-----
 views/feed.html             | 12 ++++++------
 views/post/view.html        |  5 +----
 5 files changed, 22 insertions(+), 39 deletions(-)

diff --git a/static/js/code.js b/static/js/code.js
index 5c8527f..b317a93 100644
--- a/static/js/code.js
+++ b/static/js/code.js
@@ -31,22 +31,10 @@ class PaginateTable {
   }
 }
 
-class GetJson {
-  constructor(url) {
-    console.assert(url !== undefined, "Invalid url is undefined");
-    console.log("GetJson url", url);
-    this.item;
-    this.url = url;
-  }
-
-  async item() {
-    const the_url = this.url;
-    const resp = await fetch(this.url);
-    console.assert(resp.status == 200, "failed to get it");
-
-    this.item = await resp.json();
-    return this.item;
-  }
+const GetJson = async (url) => {
+  const resp = await fetch(url);
+  console.assert(resp.status == 200, "failed to get it");
+  return await resp.json();
 }
 
 const ConfirmDelete = async (table, obj_id) => {
diff --git a/views/admin/table/new.html b/views/admin/table/new.html
index d005f4a..c7d1558 100644
--- a/views/admin/table/new.html
+++ b/views/admin/table/new.html
@@ -1,13 +1,12 @@
-<script>
-  let Data = new GetJson("/api/admin/new/table/{{ .Table }}");
-</script>
-
 <h1><a href="/admin/table/{{ .Table }}/">&laquo;</a>Admin {{ .Table }}</h1>
 
-<block x-data="Data">
+<block x-data="{item: {}}"
+       x-init="item = await GetJson('/api/admin/new/table/{{ .Table }}')">
+
   <form method="POST" action="/api/admin/new/table/{{ .Table }}">
     <card>
     <top><h2>New {{ .Table }}</h2></top>
+
     <middle>
       <template x-for="(value, key) in item">
         <div>
@@ -16,10 +15,11 @@
         </div>
       </template>
     </middle>
+
     <bottom>
-        <button type="button"><a href="/admin/table/{{ .Table }}/">Back</a></button>
-        <button class="hover:btn-alert" type="button">Clear</button>
-        <button class="hover:btn-hover" type="submit">Insert</button>
+      <button type="button"><a href="/admin/table/{{ .Table }}/">Back</a></button>
+      <button class="hover:btn-alert" type="button">Clear</button>
+      <button class="hover:btn-hover" type="submit">Insert</button>
     </bottom>
     </card>
   </form>
diff --git a/views/admin/table/view.html b/views/admin/table/view.html
index 7f428fb..34d8fc7 100644
--- a/views/admin/table/view.html
+++ b/views/admin/table/view.html
@@ -1,10 +1,8 @@
-<script>
-  let Data = new GetJson("/api/admin/table/{{ .Table }}/{{ .Id }}");
-</script>
-
 <h1><a href="/admin/table/{{ .Table }}/">&laquo;</a>Admin {{ .Table }}</h1>
 
-<block x-data="Data">
+<block x-data="{item: {}}"
+       x-init="item = await GetJson('/api/admin/table/{{ .Table }}/{{ .Id }}')">
+
   <form method="POST" action="/api/admin/table/{{ .Table }}/{{ .Id }}">
     <card>
     <top><h1>{{ .Table }} : {{ .Id }}</h1></top>
diff --git a/views/feed.html b/views/feed.html
index 52dce5c..3c7f63d 100644
--- a/views/feed.html
+++ b/views/feed.html
@@ -35,12 +35,12 @@
   <bar class="justify-evenly">
     <img src="/favicon.ico" />
     <b>Notifications</b>
-      <svg xmlns="http://www.w3.org/2000/svg"
-        width="2rem"
-        height="2rem"
-        viewBox="0 0 2rem 2rem">
-        <use href="/icons/settings.svg#settings" />
-      </svg>
+    <svg xmlns="http://www.w3.org/2000/svg"
+      width="2rem"
+      height="2rem"
+      viewBox="0 0 2rem 2rem">
+      <use href="/icons/settings.svg#settings" />
+    </svg>
   </bar>
 
   <template x-for="message in contents">
diff --git a/views/post/view.html b/views/post/view.html
index 16035f2..0eb2d8f 100644
--- a/views/post/view.html
+++ b/views/post/view.html
@@ -1,10 +1,7 @@
-<script>
-  let theMessage = new GetJson("/api/message/1");
-</script>
 
 <block class="!gap-0 border-t-1 border-gray-600"
        x-data="{item: {}}"
-       x-init="item = await theMessage.item()">
+       x-init="item = await GetJson('/api/message/1')">
 
   <bar class="!p-0 mb-3">
     <img src="/logo.png" style="width: 50px; height: 50px" class="aspect-square" />