JohnCosta27/Haystack
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Merge branch 'integrating-frontend'

Browse Source
This commit is contained in:
John Costa
2025-04-01 19:30:51 +00:00
parent 901f214f9d 35f004752d
commit b56250c1f8
4 changed files with 43 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/App.tsx
View File

@ -1,46 +1,52 @@
import { IconSearch } from "@tabler/icons-solidjs";
import clsx from "clsx";
import Fuse from "fuse.js";
import { For, createSignal } from "solid-js";
import { SearchCardContact } from "./components/search-card/SearchCardContact";
import { For, createEffect, createResource, createSignal } from "solid-js";
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 type { DataItem } from "./network/types";
import { UserImage, getUserImages } from "./network";
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":
return <SearchCardContact item={item} />;
case "Website":
return <SearchCardWebsite item={item} />;
case "Note":
return <SearchCardNote item={item} />;
case "Receipt":
return <SearchCardReceipt item={item} />;
// case "Contact":
// return <SearchCardContact item={item} />;
// case "Website":
// return <SearchCardWebsite item={item} />;
// case "Note":
// return <SearchCardNote item={item} />;
// case "Receipt":
// 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, {
keys: [{ name: "title", weight: 2 }, "rawData"],
const [data] = createResource(getUserImages);
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 +104,7 @@ function App() {
)}
>
<span class="sr-only">
{item.title}
{item.data.Name}
</span>
{getCardComponent(item)}
</div>

12
frontend/src/components/search-card/SearchCardEvent.tsx
View File

@ -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{" "}
{new Date(data.dateTime.start).toLocaleDateString("en-US", {
Organized by TODO on{" "}
{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>
);

10
frontend/src/components/search-card/SearchCardLocation.tsx
View File

@ -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>
);

6
frontend/src/network/index.ts
View File

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