From cbf013aecea46c48569093fbcbc90c42fbc1f9de Mon Sep 17 00:00:00 2001
From: Dmytro Kondakov <dmytro@attio.com>
Date: Mon, 14 Apr 2025 10:54:18 +0200
Subject: [PATCH] feat(search): improve Search component with conditional
 rendering and debugging logs

- Added conditional rendering for the "No results found" message using the Show component.
- Introduced debugging logs in getUserImages and Search component to track data flow.
- Cleaned up the data mapping process in getUserImages for better readability.
---
 frontend/src/Search.tsx       | 27 +++++++++++++++++----------
 frontend/src/network/index.ts | 12 +++++++-----
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/frontend/src/Search.tsx b/frontend/src/Search.tsx
index 64f2a3b..5e95c3d 100644
--- a/frontend/src/Search.tsx
+++ b/frontend/src/Search.tsx
@@ -6,6 +6,7 @@ import { listen } from "@tauri-apps/api/event";
 import Fuse from "fuse.js";
 import {
     For,
+    Show,
     createEffect,
     createResource,
     createSignal,
@@ -55,12 +56,13 @@ export const Search = () => {
     );
 
     const [data] = createResource(() =>
-        getUserImages().then((data) =>
-            data.map((d) => ({
+        getUserImages().then((data) => {
+            console.log("DBG: ", data);
+            return data.map((d) => ({
                 ...d,
                 rawData: getAllValues(d),
-            })),
-        ),
+            }));
+        }),
     );
 
     let fuze = new Fuse<UserImage>(data() ?? [], {
@@ -72,7 +74,9 @@ export const Search = () => {
     });
 
     createEffect(() => {
+        console.log("DBG: ", data());
         setSearchResults(data() ?? []);
+
         fuze = new Fuse<UserImage>(data() ?? [], {
             keys: [
                 { name: "data.Name", weight: 2 },
@@ -157,7 +161,14 @@ export const Search = () => {
 
                 <div class="px-4 mt-4 bg-white rounded-t-2xl">
                     <div class="h-[254px] mt-4 overflow-scroll scrollbar-hide">
-                        {searchResults().length > 0 ? (
+                        <Show
+                            when={searchResults().length > 0}
+                            fallback={
+                                <div class="text-center text-lg m-auto mt-6 text-neutral-700">
+                                    No results found
+                                </div>
+                            }
+                        >
                             <div class="w-full grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
                                 <For each={searchResults()}>
                                     {(item) => (
@@ -180,11 +191,7 @@ export const Search = () => {
                                     )}
                                 </For>
                             </div>
-                        ) : (
-                            <div class="text-center text-lg m-auto mt-6 text-neutral-700">
-                                No results found
-                            </div>
-                        )}
+                        </Show>
                     </div>
                 </div>
 
diff --git a/frontend/src/network/index.ts b/frontend/src/network/index.ts
index 0cd1cbd..9033c87 100644
--- a/frontend/src/network/index.ts
+++ b/frontend/src/network/index.ts
@@ -3,13 +3,13 @@ import { fetch } from "@tauri-apps/plugin-http";
 import {
     type InferOutput,
     array,
+    literal,
     nullable,
-    strictObject,
     parse,
     pipe,
+    strictObject,
     string,
     uuid,
-    literal,
     variant,
 } from "valibot";
 
@@ -19,9 +19,7 @@ type BaseRequestParams = Partial<{
     method: "GET" | "POST";
 }>;
 
-export const base = import.meta.env.DEV
-    ? "http://localhost:3040"
-    : "https://haystack.johncosta.tech";
+export const base = "https://haystack.johncosta.tech";
 
 const getBaseRequest = ({ path, body, method }: BaseRequestParams): Request => {
     return new Request(`${base}/${path}`, {
@@ -134,8 +132,12 @@ export type UserImage = InferOutput<typeof dataTypeValidator>;
 export const getUserImages = async (): Promise<UserImage[]> => {
     const request = getBaseAuthorizedRequest({ path: "image" });
 
+    console.log("DBG: ", request);
+
     const res = await fetch(request).then((res) => res.json());
 
+    console.log("DBG: ", res);
+
     return parse(getUserImagesResponseValidator, res);
 };