feat: add search and no results indicator

BBN-Holding · Mar 19, 2024 · 052ca17 · 052ca17 · GregTCLTK · Mar 19, 2024
1 parent 04c703f
commit 052ca17
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/pages/admin/state.ts b/pages/admin/state.ts
@@ -13,7 +13,7 @@ export const state = asState({
     oauth: <External<OAuthApp[]> | "loading">"loading",
     files: <External<File[]> | "loading">"loading",
     wallets: <External<Wallet[]> | "loading">"loading",
-    search: <({ type: "transcript", val: Transcript; } | { type: "drop", val: Drop; } | { type: "server", val: Server; } | { type: "user", val: ProfileData; })[]>[],
+    search: <({ type: "transcript", val: Transcript; } | { type: "drop", val: Drop; } | { type: "server", val: Server; } | { type: "user", val: ProfileData; } | { type: "none"; } | { type: "searching"; })[]>[],
 });
 
 export const reviewState = asState({

diff --git a/pages/admin/views/menu.ts b/pages/admin/views/menu.ts
@@ -49,9 +49,14 @@ export const adminMenu = Navigation({
             title: ref`Search`,
             children: [
                 TextInput("text", "Search").onChange(debounce(async (data) => {
-                    state.search = asState(await API.admin.search(data ?? "").then(stupidErrorAlert));
+                    state.search = asState([ { type: "searching" } ]);
+                    const results = await API.admin.search(data ?? "").then(stupidErrorAlert);
+                    if (results.length === 0) {
+                        results.push({ type: "none" });
+                    }
+                    state.search = asState(results);
                 }, 1000)),
-                Items(state.$search.map(it => it as ({ type: "transcript", val: Transcript; } | { type: "drop", val: Drop; } | { type: "server", val: Server; } | { type: "user", val: ProfileData; })[]), it => {
+                Items(state.$search.map(it => it as ({ type: "transcript", val: Transcript; } | { type: "drop", val: Drop; } | { type: "server", val: Server; } | { type: "user", val: ProfileData; } | { type: "none"; } | {type: "searching"})[]), it => {
                     switch (it.type) {
                         case "transcript":
                             return Entry(
@@ -89,6 +94,10 @@ export const adminMenu = Navigation({
                                     SheetDialog(sheetStack, "User", Custom(box).setHeight("800px").setWidth("1200px")).open();
                                 })
                                 .addPrefix(showProfilePicture(it.val));
+                        case "none":
+                            return placeholder("No Results", "Try searching for something else.");
+                        case "searching":
+                            return placeholder("Searching", "Please wait...");
                     }
                 })
             ]