feat(cards): adjusting for backend data types

frontend/src/App.tsx

@@ -1,46 +1,57 @@
 import { IconSearch } from "@tabler/icons-solidjs";
 import clsx from "clsx";
 import Fuse from "fuse.js";
-import { For, createSignal } from "solid-js";
+import { For, createEffect, createResource, createSignal } from "solid-js";
 import { SearchCardContact } from "./components/search-card/SearchCardContact";
 import { SearchCardEvent } from "./components/search-card/SearchCardEvent";
 import { SearchCardLocation } from "./components/search-card/SearchCardLocation";
 import { SearchCardNote } from "./components/search-card/SearchCardNote";
 import { SearchCardReceipt } from "./components/search-card/SearchCardReceipt";
 import { SearchCardWebsite } from "./components/search-card/SearchCardWebsite";
-import { sampleData } from "./network/sampleData";
+import { UserImage, getUserImages } from "./network";
 import type { DataItem } from "./network/types";
 import { getCardSize } from "./utils/getCardSize";
 
-const getCardComponent = (item: DataItem) => {
+const getCardComponent = (item: UserImage) => {
     switch (item.type) {
-        case "Location":
+        case "location":
             return <SearchCardLocation item={item} />;
-        case "Event":
+        case "event":
             return <SearchCardEvent item={item} />;
-        case "Contact":
+        // case "Contact":
-            return <SearchCardContact item={item} />;
+        //     return <SearchCardContact item={item} />;
-        case "Website":
+        // case "Website":
-            return <SearchCardWebsite item={item} />;
+        //     return <SearchCardWebsite item={item} />;
-        case "Note":
+        // case "Note":
-            return <SearchCardNote item={item} />;
+        //     return <SearchCardNote item={item} />;
-        case "Receipt":
+        // case "Receipt":
-            return <SearchCardReceipt item={item} />;
+        //     return <SearchCardReceipt item={item} />;
         default:
             return null;
     }
 };
 
 function App() {
-    const [searchResults, setSearchResults] = createSignal<DataItem[]>([]);
+    const [searchResults, setSearchResults] = createSignal<UserImage[]>([]);
     const [searchQuery, setSearchQuery] = createSignal("");
-    const [selectedItem, setSelectedItem] = createSignal<DataItem | null>(null);
+    const [selectedItem, setSelectedItem] = createSignal<UserImage | null>(
+        null,
+    );
 
-    const fuze = new Fuse<DataItem>(sampleData, {
+    const [data] = createResource(getUserImages);
-        keys: [{ name: "title", weight: 2 }, "rawData"],
+
+    let fuze = new Fuse<UserImage>(data() ?? [], {
+        keys: [{ name: "title", weight: 2 }, "data"],
         threshold: 0.4,
     });
 
+    createEffect(() => {
+        fuze = new Fuse<UserImage>(data() ?? [], {
+            keys: [{ name: "data.Name", weight: 2 }],
+            threshold: 0.4,
+        });
+    });
+
     const onInputChange = (event: InputEvent) => {
         const query = (event.target as HTMLInputElement).value;
         setSearchQuery(query);
@@ -98,7 +109,7 @@ function App() {
                                             )}
                                         >
                                             <span class="sr-only">
-                                                {item.title}
+                                                {item.data.Name}
                                             </span>
                                             {getCardComponent(item)}
                                         </div>

frontend/src/components/search-card/SearchCardEvent.tsx

@@ -1,10 +1,10 @@
 import { Separator } from "@kobalte/core/separator";
 
 import { IconCalendar } from "@tabler/icons-solidjs";
-import type { Event } from "../../network/types";
+import type { UserImage } from "../../network";
 
 type Props = {
-    item: Event;
+    item: Extract<UserImage, { type: "event" }>;
 };
 
 export const SearchCardEvent = ({ item }: Props) => {
@@ -13,12 +13,12 @@ export const SearchCardEvent = ({ item }: Props) => {
     return (
         <div class="absolute inset-0 p-3 bg-purple-50">
             <div class="grid grid-cols-[auto_20px] gap-1 mb-1">
-                <p class="text-sm text-neutral-900 font-bold">{data.title}</p>
+                <p class="text-sm text-neutral-900 font-bold">{data.Name}</p>
                 <IconCalendar size={20} class="text-neutral-500 mt-1" />
             </div>
             <p class="text-xs text-neutral-500">
-                Organized by {data.organizer.name} on{" "}
+                Organized by TODO on{" "}
-                {new Date(data.dateTime.start).toLocaleDateString("en-US", {
+                {new Date(data.StartDateTime).toLocaleDateString("en-US", {
                     month: "long",
                     day: "numeric",
                     year: "numeric",
@@ -26,7 +26,7 @@ export const SearchCardEvent = ({ item }: Props) => {
             </p>
             <Separator class="my-2" />
             <p class="text-xs text-neutral-500 line-clamp-2 overflow-hidden">
-                {data.description}
+                {data.Description}
             </p>
         </div>
     );

frontend/src/components/search-card/SearchCardLocation.tsx

@@ -1,10 +1,10 @@
 import { Separator } from "@kobalte/core/separator";
 
 import { IconMapPin } from "@tabler/icons-solidjs";
-import type { Location } from "../../network/types";
+import type { UserImage } from "../../network";
 
 type Props = {
-    item: Location;
+    item: Extract<UserImage, { type: "location" }>;
 };
 
 export const SearchCardLocation = ({ item }: Props) => {
@@ -13,13 +13,13 @@ export const SearchCardLocation = ({ item }: Props) => {
     return (
         <div class="absolute inset-0 p-3 bg-red-50">
             <div class="grid grid-cols-[auto_20px] gap-1 mb-1">
-                <p class="text-sm text-neutral-900 font-bold">{data.name}</p>
+                <p class="text-sm text-neutral-900 font-bold">{data.Name}</p>
                 <IconMapPin size={20} class="text-neutral-500 mt-1" />
             </div>
-            <p class="text-xs text-neutral-500">{data.address}</p>
+            <p class="text-xs text-neutral-500">{data.Address}</p>
             <Separator class="my-2" />
             <p class="text-xs text-neutral-500 line-clamp-2 overflow-hidden">
-                {data.description}
+                {data.Description}
             </p>
         </div>
     );

frontend/src/network/index.ts

@@ -82,9 +82,9 @@ const eventDataType = object({
 const dataTypeValidator = variant("type", [locationDataType, eventDataType]);
 const getUserImagesResponseValidator = array(dataTypeValidator);
 
-export const getUserImages = async (): Promise<
+export type UserImage = InferOutput<typeof dataTypeValidator>;
-    InferOutput<typeof getUserImagesResponseValidator>
+
-> => {
+export const getUserImages = async (): Promise<UserImage[]> => {
     const request = getBaseRequest({ path: "image" });
 
     const res = await fetch(request).then((res) => res.json());