added list user functionality, SvelteButton component

J-Rebs · Nov 24, 2022 · 949194a · 949194a · vercel · Nov 24, 2022
1 parent 35637bd
commit 949194a
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 19 deletions.
diff --git a/src/lib/SvelteButton.svelte b/src/lib/SvelteButton.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    export let buttonItem, action;
+</script>
+
+<button on:click={action}
+class="transition ease-in-out delay-10 hover:-translate-y-1 hover:scale-110 duration-300 bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow shadow-lg shadow-cyan-500/50"
+>{buttonItem}</button>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,19 +1,4 @@
 <script>
-  import { onMount } from "svelte";
-  import axios from "axios";
-  let quotes = [];
-  let error = null;
-
-  onMount(async () => {
-    try {
-      const res = await axios.get(
-        "https://music-tonic.herokuapp.com/client1-rest/listUsers"
-      );
-      quotes = res.data;
-    } catch (e) {
-      error = e;
-    }
-  });
 </script>
 
 <div class="bg-lime-300 px-6 py-6 opacity-80 hover:opacity-100 transition-opacity">

diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
@@ -1,5 +1,51 @@
-<h1>Admin</h1>
+<script>
+  import axios from "axios";
+  import SvelteButton from "../../lib/SvelteButton.svelte";
+  let listUsersCallCount = 0;
+  let userList = [];
+  async function listUsers() {
+    let error = null;
+    try {
+      const res = await axios.get(
+        "https://music-tonic.herokuapp.com/client1-rest/listUsers"
+      );
+      userList = res.data;
+      listUsersCallCount += 1;
+      console.log("user list retrieved as:", userList);
+      return userList;
+    } catch (e) {
+      error = e;
+      listUsersCallCount += 1;
+      return ["Bad request"];
+    }
+  }
+</script>
 
-<button>list users</button>
-<button>add user</button>
-<button>delete user</button>
+<h1 class="text-lg w-screen text-center mx-auto font-bold">Admin</h1>
+<div class="px-4 py-4 auto-cols-auto">
+  <div class="px-4 py-4">
+    <SvelteButton buttonItem="list users" action={listUsers} />
+    <div class="px-4 py-4">
+      {#key listUsersCallCount}
+        <ul>
+          {#each userList as { userId, realName, userType, mainGenre, age }}
+            <li>
+              userId: {userId} Name: {realName} userType: {userType} mainGenre: {mainGenre}
+              age:{age}
+            </li>
+          {/each}
+        </ul>
+      {/key}
+    </div>
+  </div>
+  <div class="px-4 py-4">
+    <SvelteButton buttonItem="add user" action={listUsers} />
+    <div class="px-4 py-4">
+    </div>
+  </div>
+  <div class="px-4 py-4">
+    <SvelteButton buttonItem="delete user" action={listUsers} />
+    <div class="px-4 py-4">
+    </div>
+  </div>
+</div>