From d4b14605c16280abf987567d7bb5e8dbbc93ddeb Mon Sep 17 00:00:00 2001
From: John Costa <johncosta027@gmail.com>
Date: Fri, 18 Jul 2025 13:51:52 +0100
Subject: [PATCH] feat: images showing up in entity page

---
 frontend/src/Entity.tsx                 |  5 ++-
 frontend/src/Image.tsx                  | 59 ++++++++++---------------
 frontend/src/components/image/index.tsx |  6 +++
 3 files changed, 33 insertions(+), 37 deletions(-)
 create mode 100644 frontend/src/components/image/index.tsx

diff --git a/frontend/src/Entity.tsx b/frontend/src/Entity.tsx
index ef03bd5..dcb33d3 100644
--- a/frontend/src/Entity.tsx
+++ b/frontend/src/Entity.tsx
@@ -2,6 +2,7 @@ import { useParams } from "@solidjs/router";
 import { Component, For, Show } from "solid-js";
 import { ConcreteItemModal } from "./components/item-modal/ItemModal";
 import { useSearchImageContext } from "./contexts/SearchImageContext";
+import { Image } from "./components/image";
 
 export const Entity: Component = () => {
 	const params = useParams<{ entityId: string }>();
@@ -19,7 +20,9 @@ export const Entity: Component = () => {
 				{(e) => (
 					<div>
 						<ConcreteItemModal item={e()} />
-						<For each={e().data.Images}>{(imageId) => <p>{imageId}</p>}</For>
+						<For each={e().data.Images}>
+							{(imageId) => <Image ID={imageId} />}
+						</For>
 					</div>
 				)}
 			</Show>
diff --git a/frontend/src/Image.tsx b/frontend/src/Image.tsx
index 0129bbb..5ee0409 100644
--- a/frontend/src/Image.tsx
+++ b/frontend/src/Image.tsx
@@ -4,45 +4,32 @@ import { base, type UserImage } from "./network";
 import { useSearchImageContext } from "./contexts/SearchImageContext";
 import { SearchCard } from "./components/search-card/SearchCard";
 import { IconArrowLeft } from "@tabler/icons-solidjs";
-import { useSetEntity } from "./WithEntityDialog";
 
 export const Image: Component = () => {
-    const { imageId } = useParams<{ imageId: string }>();
+	const { imageId } = useParams<{ imageId: string }>();
 
-    const { imagesWithProperties } = useSearchImageContext();
+	const { imagesWithProperties } = useSearchImageContext();
 
-    const imageProperties = (): UserImage[] | undefined =>
-        Object.entries(imagesWithProperties()).find(
-            ([id]) => id === imageId,
-        )?.[1];
+	const imageProperties = (): UserImage[] | undefined =>
+		Object.entries(imagesWithProperties()).find(([id]) => id === imageId)?.[1];
 
-    const setEntity = useSetEntity();
-
-    return (
-        <main class="flex flex-col items-center">
-            <nav class="self-start">
-                <A href="/">
-                    <IconArrowLeft />
-                </A>
-            </nav>
-            <img class="h-1/2" alt="users" src={`${base}/image/${imageId}`} />
-            <div class="w-3/4 grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
-                <Show when={imageProperties()}>
-                    {(image) => (
-                        <For each={image()}>
-                            {(property) => (
-                                <div
-                                    onKeyDown={() => setEntity(property)}
-                                    onClick={() => setEntity(property)}
-                                    class="h-[144px] border relative col-span-3 border-neutral-200 cursor-pointer overflow-hidden rounded-xl"
-                                >
-                                    <SearchCard item={property} />
-                                </div>
-                            )}
-                        </For>
-                    )}
-                </Show>
-            </div>
-        </main>
-    );
+	return (
+		<main class="flex flex-col items-center">
+			<nav class="self-start">
+				<A href="/">
+					<IconArrowLeft />
+				</A>
+			</nav>
+			<img class="h-1/2" alt="users" src={`${base}/image/${imageId}`} />
+			<div class="w-3/4 grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
+				<Show when={imageProperties()}>
+					{(image) => (
+						<For each={image()}>
+							{(property) => <SearchCard item={property} />}
+						</For>
+					)}
+				</Show>
+			</div>
+		</main>
+	);
 };
diff --git a/frontend/src/components/image/index.tsx b/frontend/src/components/image/index.tsx
new file mode 100644
index 0000000..5c30065
--- /dev/null
+++ b/frontend/src/components/image/index.tsx
@@ -0,0 +1,6 @@
+import { Component } from "solid-js";
+import { base } from "../../network";
+
+export const Image: Component<{ ID: string }> = (props) => {
+	return <img src={`${base}/image/${props.ID}`} />;
+};