Haystack V2: Removing entities completely
This commit is contained in:
@@ -1,28 +0,0 @@
|
||||
import { ImageComponent } from "@components/image";
|
||||
import { ItemModal } from "@components/item-modal/ItemModal";
|
||||
import { useSearchImageContext } from "@contexts/SearchImageContext";
|
||||
import { useParams } from "@solidjs/router";
|
||||
import { Component, For, Show } from "solid-js";
|
||||
|
||||
export const Entity: Component = () => {
|
||||
const params = useParams<{ entityId: string }>();
|
||||
|
||||
const { images } = useSearchImageContext();
|
||||
|
||||
const entity = () => images().find((i) => i.data.ID === params.entityId);
|
||||
|
||||
return (
|
||||
<Show when={entity()} fallback={<>Sorry, this entity could not be found</>}>
|
||||
{(e) => (
|
||||
<div>
|
||||
<ItemModal item={e()} />
|
||||
<div class="w-full grid grid-cols-4 auto-rows-[minmax(100px,1fr)] gap-4 bg-white p-4 rounded-xl border border-neutral-200">
|
||||
<For each={e().data.Images}>
|
||||
{(imageId) => <ImageComponent ID={imageId} />}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Show>
|
||||
);
|
||||
};
|
||||
@@ -1,21 +1,8 @@
|
||||
import { Component, For } from "solid-js";
|
||||
import { A } from "@solidjs/router";
|
||||
import {
|
||||
SearchImageStore,
|
||||
useSearchImageContext,
|
||||
} from "@contexts/SearchImageContext";
|
||||
import { useSearchImageContext } from "@contexts/SearchImageContext";
|
||||
import fastHashCode from "../../utils/hash";
|
||||
|
||||
// TODO: lots of stuff to do with Entities, this could be seperated into a centralized place.
|
||||
const CategoryColor: Record<
|
||||
keyof ReturnType<SearchImageStore["categories"]>,
|
||||
string
|
||||
> = {
|
||||
contact: "bg-orange-50",
|
||||
location: "bg-red-50",
|
||||
event: "bg-purple-50",
|
||||
};
|
||||
|
||||
const colors = [
|
||||
"bg-emerald-50",
|
||||
"bg-lime-50",
|
||||
@@ -31,30 +18,10 @@ const colors = [
|
||||
];
|
||||
|
||||
export const Categories: Component = () => {
|
||||
const { categories, lists } = useSearchImageContext();
|
||||
const { lists } = useSearchImageContext();
|
||||
|
||||
return (
|
||||
<div class="rounded-xl bg-white p-4 flex flex-col gap-2">
|
||||
<h2 class="text-xl font-bold">Entities</h2>
|
||||
<div class="w-full grid grid-cols-4 auto-rows-[minmax(100px,1fr)] gap-4">
|
||||
<For each={Object.entries(categories())}>
|
||||
{([category, group]) => (
|
||||
<A
|
||||
href={`/gallery/${category}`}
|
||||
class={
|
||||
"col-span-2 flex flex-col justify-center items-center rounded-lg p-4 border border-neutral-200 " +
|
||||
"capitalize " +
|
||||
CategoryColor[category as keyof typeof CategoryColor] +
|
||||
" " +
|
||||
(group.length === 0 ? "row-span-1 order-10" : "row-span-2")
|
||||
}
|
||||
>
|
||||
<p class="text-xl font-bold">{category}s</p>
|
||||
<p class="text-lg">{group.length}</p>
|
||||
</A>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
<h2 class="text-xl font-bold">Generated Lists</h2>
|
||||
<div class="w-full grid grid-cols-3 auto-rows-[minmax(100px,1fr)] gap-4">
|
||||
<For each={lists()}>
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
import { Component, For, Show } from "solid-js";
|
||||
import { useParams } from "@solidjs/router";
|
||||
import { union, literal, safeParse, InferOutput, parse } from "valibot";
|
||||
import { useSearchImageContext } from "@contexts/SearchImageContext";
|
||||
import { SearchCard } from "@components/search-card/SearchCard";
|
||||
|
||||
const entityValidator = union([
|
||||
literal("event"),
|
||||
literal("note"),
|
||||
literal("location"),
|
||||
literal("contact"),
|
||||
]);
|
||||
|
||||
const EntityGallery: Component<{
|
||||
entity: InferOutput<typeof entityValidator>;
|
||||
}> = (props) => {
|
||||
// Just to be doubly sure.
|
||||
parse(entityValidator, props.entity);
|
||||
|
||||
// These names are being silly. Entity or Category?
|
||||
const { images } = useSearchImageContext();
|
||||
|
||||
const filteredCategories = () =>
|
||||
images().filter((i) => i.type === props.entity);
|
||||
|
||||
return (
|
||||
<div class="w-full flex flex-col gap-4 capitalize bg-white rounded-xl p-4">
|
||||
<h2 class="font-bold text-xl">
|
||||
{props.entity}s ({filteredCategories().length})
|
||||
</h2>
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<For each={filteredCategories()}>
|
||||
{(category) => <SearchCard item={category} />}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Gallery: Component = () => {
|
||||
const params = useParams();
|
||||
const validated = safeParse(entityValidator, params.entity);
|
||||
|
||||
return (
|
||||
<Show
|
||||
when={validated.success}
|
||||
fallback={<p>Sorry, this entity is not supported</p>}
|
||||
>
|
||||
<EntityGallery entity={validated.output as any} />
|
||||
</Show>
|
||||
);
|
||||
};
|
||||
@@ -1,25 +1,16 @@
|
||||
import { ImageComponent } from "@components/image";
|
||||
import { SearchCard } from "@components/search-card/SearchCard";
|
||||
import { useSearchImageContext } from "@contexts/SearchImageContext";
|
||||
import { UserImage } from "@network/index";
|
||||
import { useParams } from "@solidjs/router";
|
||||
import { createEffect, For, Show, type Component } from "solid-js";
|
||||
import { type Component } from "solid-js";
|
||||
import SolidjsMarkdown from "solidjs-markdown";
|
||||
|
||||
export const ImagePage: Component = () => {
|
||||
const { imageId } = useParams<{ imageId: string }>();
|
||||
|
||||
const { imagesWithProperties, userImages } = useSearchImageContext();
|
||||
const { userImages } = useSearchImageContext();
|
||||
|
||||
const image = () => userImages().find((i) => i.ImageID === imageId);
|
||||
|
||||
createEffect(() => {
|
||||
console.log(userImages());
|
||||
});
|
||||
|
||||
const imageProperties = (): UserImage[] | undefined =>
|
||||
Object.entries(imagesWithProperties()).find(([id]) => id === imageId)?.[1];
|
||||
|
||||
return (
|
||||
<main class="flex flex-col items-center gap-4">
|
||||
<div class="w-full bg-white rounded-xl p-4">
|
||||
@@ -29,15 +20,7 @@ export const ImagePage: Component = () => {
|
||||
<h2 class="font-bold text-xl">Description</h2>
|
||||
<SolidjsMarkdown>{image()?.Image.Description}</SolidjsMarkdown>
|
||||
</div>
|
||||
<div class="w-full grid grid-cols-3 gap-2 grid-flow-row-dense p-4 bg-white rounded-xl">
|
||||
<Show when={imageProperties()}>
|
||||
{(image) => (
|
||||
<For each={image()}>
|
||||
{(property) => <SearchCard item={property} />}
|
||||
</For>
|
||||
)}
|
||||
</Show>
|
||||
</div>
|
||||
<div class="w-full grid grid-cols-3 gap-2 grid-flow-row-dense p-4 bg-white rounded-xl"></div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
export * from "./front";
|
||||
export * from "./gallery";
|
||||
export * from "./image";
|
||||
export * from "./settings";
|
||||
export * from "./login";
|
||||
export * from "./entity";
|
||||
export * from "./search";
|
||||
export * from "./all-images";
|
||||
export * from "./list";
|
||||
|
||||
@@ -2,13 +2,13 @@ import { Component, createSignal, For } from "solid-js";
|
||||
import { Search } from "@kobalte/core/search";
|
||||
import { IconSearch } from "@tabler/icons-solidjs";
|
||||
import { useSearch } from "./search";
|
||||
import { UserImage } from "@network/index";
|
||||
import { SearchCard } from "@components/search-card/SearchCard";
|
||||
import { JustTheImageWhatAreTheseNames } from "@network/index";
|
||||
|
||||
export const SearchPage: Component = () => {
|
||||
const fuse = useSearch();
|
||||
|
||||
const [searchItems, setSearchItems] = createSignal<UserImage[]>([]);
|
||||
const [searchItems, setSearchItems] =
|
||||
createSignal<JustTheImageWhatAreTheseNames>([]);
|
||||
|
||||
return (
|
||||
<Search
|
||||
@@ -36,7 +36,9 @@ export const SearchPage: Component = () => {
|
||||
<Search.Portal>
|
||||
<Search.Content class="container relative w-full rounded-xl bg-white p-4 grid grid-cols-3 gap-4">
|
||||
<Search.Arrow />
|
||||
<For each={searchItems()}>{(item) => <SearchCard item={item} />}</For>
|
||||
<For each={searchItems()}>
|
||||
{(item) => <div>{item.Image.Description}</div>}
|
||||
</For>
|
||||
<Search.NoResult>No result found</Search.NoResult>
|
||||
</Search.Content>
|
||||
</Search.Portal>
|
||||
|
||||
@@ -1,46 +1,12 @@
|
||||
import { useSearchImageContext } from "@contexts/SearchImageContext";
|
||||
import { UserImage } from "@network/index";
|
||||
import Fuse from "fuse.js";
|
||||
|
||||
// This language is stupid. `keyof` only returns common keys but this somehow doesnt.
|
||||
type KeysOfUnion<T> = T extends T ? keyof T : never;
|
||||
|
||||
const weightedTerms: Record<
|
||||
KeysOfUnion<UserImage["data"]>,
|
||||
number | undefined
|
||||
> = {
|
||||
ID: undefined,
|
||||
LocationID: undefined,
|
||||
OrganizerID: undefined,
|
||||
Images: undefined,
|
||||
|
||||
Description: 10,
|
||||
|
||||
Name: 5,
|
||||
Address: 2,
|
||||
|
||||
PhoneNumber: 2,
|
||||
Email: 2,
|
||||
|
||||
CreatedAt: 1,
|
||||
StartDateTime: 1,
|
||||
EndDateTime: 1,
|
||||
};
|
||||
|
||||
export const useSearch = () => {
|
||||
const { images, userImages } = useSearchImageContext();
|
||||
|
||||
const imageDescriptions = () =>
|
||||
userImages().map((i) => ({ data: { Description: i.Image.Description } }));
|
||||
const { userImages } = useSearchImageContext();
|
||||
|
||||
return () =>
|
||||
new Fuse([...images(), ...imageDescriptions()], {
|
||||
new Fuse(userImages(), {
|
||||
shouldSort: true,
|
||||
keys: Object.entries(weightedTerms)
|
||||
.filter(([, w]) => w != null)
|
||||
.map(([name, weight]) => ({
|
||||
name: `data.${name}`,
|
||||
weight,
|
||||
})),
|
||||
keys: ["Image.Description"],
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user