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

frontend method to refresh image

Browse Source
This commit is contained in:
John Costa
2025-09-14 17:30:17 +01:00
parent 8b6b9453a8
commit ce2cd977ac
7 changed files with 199 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
frontend/src/components/image/index.tsx
View File

@ -6,10 +6,12 @@ import { Dialog } from "@kobalte/core";
type ImageComponentProps = {
ID: string;
onDelete: (id: string) => void;
}
onRefresh: (id: string) => void;
};
export const ImageComponent: Component<ImageComponentProps> = (props) => {
const [isOpen, setIsOpen] = createSignal(false);
const [isRefreshOpen, setIsRefreshOpen] = createSignal(false);
return (
<>
@ -27,6 +29,13 @@ export const ImageComponent: Component<ImageComponentProps> = (props) => {
>
×
</button>
<button
aria-label="Refresh image"
class="absolute top-2 right-10 bg-gray-800 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-blue-600"
onClick={() => setIsRefreshOpen(true)}
>
↻
</button>
</div>
<Dialog.Root open={isOpen()} onOpenChange={setIsOpen}>
@ -45,7 +54,40 @@ export const ImageComponent: Component<ImageComponentProps> = (props) => {
Cancel
</button>
</Dialog.CloseButton>
<button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700" onClick={() => props.onDelete(props.ID)}>
<button
class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
onClick={() => props.onDelete(props.ID)}
>
Confirm
</button>
</div>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
<Dialog.Root open={isRefreshOpen()} onOpenChange={setIsRefreshOpen}>
<Dialog.Portal>
<Dialog.Overlay class="fixed inset-0 bg-black bg-opacity-50" />
<Dialog.Content class="fixed top-1/2 left-1/2 max-w-md w-full p-6 bg-white rounded shadow-lg transform -translate-x-1/2 -translate-y-1/2">
<Dialog.Title class="text-lg font-bold mb-2">
Confirm Refresh
</Dialog.Title>
<Dialog.Description class="mb-4">
Are you sure you want to refresh this image?
</Dialog.Description>
<div class="flex justify-end gap-2">
<Dialog.CloseButton>
<button class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">
Cancel
</button>
</Dialog.CloseButton>
<button
class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
onClick={() => {
props.onRefresh?.(props.ID);
setIsRefreshOpen(false);
}}
>
Confirm
</button>
</div>
@ -56,8 +98,11 @@ export const ImageComponent: Component<ImageComponentProps> = (props) => {
);
};
export const ImageComponentFullHeight: Component<ImageComponentProps> = (props) => {
export const ImageComponentFullHeight: Component<ImageComponentProps> = (
props,
) => {
const [isOpen, setIsOpen] = createSignal(false);
const [isRefreshOpen, setIsRefreshOpen] = createSignal(false);
return (
<>
@ -75,6 +120,13 @@ export const ImageComponentFullHeight: Component<ImageComponentProps> = (props)
>
×
</button>
<button
aria-label="Refresh image"
class="absolute top-2 right-10 bg-gray-800 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-blue-600"
onClick={() => setIsRefreshOpen(true)}
>
↻
</button>
</div>
<Dialog.Root open={isOpen()} onOpenChange={setIsOpen}>
@ -93,7 +145,40 @@ export const ImageComponentFullHeight: Component<ImageComponentProps> = (props)
Cancel
</button>
</Dialog.CloseButton>
<button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700" onClick={() => props.onDelete(props.ID)}>
<button
class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
onClick={() => props.onDelete(props.ID)}
>
Confirm
</button>
</div>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
<Dialog.Root open={isRefreshOpen()} onOpenChange={setIsRefreshOpen}>
<Dialog.Portal>
<Dialog.Overlay class="fixed inset-0 bg-black bg-opacity-50" />
<Dialog.Content class="fixed top-1/2 left-1/2 max-w-md w-full p-6 bg-white rounded shadow-lg transform -translate-x-1/2 -translate-y-1/2">
<Dialog.Title class="text-lg font-bold mb-2">
Confirm Refresh
</Dialog.Title>
<Dialog.Description class="mb-4">
Are you sure you want to refresh this image?
</Dialog.Description>
<div class="flex justify-end gap-2">
<Dialog.CloseButton>
<button class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">
Cancel
</button>
</Dialog.CloseButton>
<button
class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
onClick={() => {
props.onRefresh?.(props.ID);
setIsRefreshOpen(false);
}}
>
Confirm
</button>
</div>

6
frontend/src/contexts/SearchImageContext.tsx
View File

@ -7,7 +7,7 @@ import {
createResource,
useContext,
} from "solid-js";
import { deleteImage, deleteImageFromStack, getUserImages, JustTheImageWhatAreTheseNames } from "../network";
import { deleteImage, deleteImageFromStack, getUserImages, JustTheImageWhatAreTheseNames, reprocessImage } from "../network";
export type SearchImageStore = {
imagesByDate: Accessor<
@ -25,6 +25,7 @@ export type SearchImageStore = {
onRefetchImages: () => void;
onDeleteImage: (imageID: string) => void;
onDeleteImageFromStack: (stackID: string, imageID: string) => void;
onRefreshImage: (imageID: string) => void;
};
const SearchImageContext = createContext<SearchImageStore>();
@ -75,6 +76,9 @@ export const SearchImageContextProvider: Component<ParentProps> = (props) => {
},
onDeleteImageFromStack: (stackID: string, imageID: string) => {
deleteImageFromStack(stackID, imageID).then(refetch);
},
onRefreshImage: (imageID: string) => {
reprocessImage(imageID).then(refetch)
}
}}
>

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

@ -18,7 +18,7 @@ import {
type BaseRequestParams = Partial<{
path: string;
body: RequestInit["body"];
method: "GET" | "POST" | "DELETE";
method: "GET" | "POST" | "DELETE" | "PATCH";
}>;
// export const base = "https://haystack.johncosta.tech";
@ -296,3 +296,19 @@ export const createList = async (
throw new ReachedListLimit();
}
};
export const reprocessImage = async (
id: string
): Promise<void> => {
const request = getBaseAuthorizedRequest({
path: `images/${id}`,
method: "PATCH"
});
request.headers.set("Content-Type", "application/json");
const res = await fetch(request);
if (!res.ok && res.status == 429) {
throw new ReachedListLimit();
}
}

14
frontend/src/pages/all-images/index.tsx
View File

@ -3,7 +3,6 @@ import { Component, For } from "solid-js";
import { createVirtualizer } from "@tanstack/solid-virtual";
import { ImageComponent } from "@components/image";
import { chunkRows } from "./chunk";
import { deleteImage } from "@network/index";
type ImageOrDate =
| { type: "image"; ID: string[] }
@ -12,7 +11,8 @@ type ImageOrDate =
export const AllImages: Component = () => {
let scrollRef: HTMLDivElement | undefined;
const { imagesByDate, onDeleteImage } = useSearchImageContext();
const { imagesByDate, onDeleteImage, onRefreshImage } =
useSearchImageContext();
const items = () => {
const items: Array<ImageOrDate> = [];
@ -48,7 +48,15 @@ export const AllImages: Component = () => {
const item = items()[i.index];
if (item.type === "image") {
return (
<For each={item.ID}>{(id) => <ImageComponent ID={id} onDelete={onDeleteImage} />}</For>
<For each={item.ID}>
{(id) => (
<ImageComponent
ID={id}
onDelete={onDeleteImage}
onRefresh={onRefreshImage}
/>
)}
</For>
);
} else {
return (

15
frontend/src/pages/front/recent.tsx
View File

@ -1,18 +1,19 @@
import { Component, For } from "solid-js";
import { ImageComponent } from "@components/image";
import { useSearchImageContext } from "@contexts/SearchImageContext";
import { deleteImage } from "@network/index";
const NUMBER_OF_MAX_RECENT_IMAGES = 10;
export const Recent: Component = () => {
const { userImages, onDeleteImage } = useSearchImageContext();
const { userImages, onDeleteImage, onRefreshImage } =
useSearchImageContext();
const latestImages = () =>
userImages()
.sort(
(a, b) =>
new Date(b.CreatedAt!).getTime() - new Date(a.CreatedAt!).getTime(),
new Date(b.CreatedAt!).getTime() -
new Date(a.CreatedAt!).getTime(),
)
.slice(0, NUMBER_OF_MAX_RECENT_IMAGES);
@ -21,7 +22,13 @@ export const Recent: Component = () => {
<h2 class="text-xl font-bold">Recent Screenshots</h2>
<div class="grid grid-cols-3 gap-4 place-items-center">
<For each={latestImages()}>
{(image) => <ImageComponent ID={image.ImageID} onDelete={onDeleteImage} />}
{(image) => (
<ImageComponent
ID={image.ImageID}
onDelete={onDeleteImage}
onRefresh={onRefreshImage}
/>
)}
</For>
</div>
</div>

17
frontend/src/pages/image/index.tsx
View File

@ -9,17 +9,22 @@ export const ImagePage: Component = () => {
const { imageId } = useParams<{ imageId: string }>();
const nav = useNavigate();
const { userImages, lists, onDeleteImage } = useSearchImageContext();
const { userImages, lists, onDeleteImage, onRefreshImage } =
useSearchImageContext();
const image = () => userImages().find((i) => i.ImageID === imageId);
return (
<main class="flex flex-col items-center gap-4">
<div class="w-full bg-white rounded-xl p-4">
<ImageComponentFullHeight ID={imageId} onDelete={(id) => {
<ImageComponentFullHeight
ID={imageId}
onDelete={(id) => {
onDeleteImage(id);
nav("/");
}} />
}}
onRefresh={onRefreshImage}
/>
</div>
<div class="w-full bg-white rounded-xl p-4 flex flex-col gap-4">
<h2 class="font-bold text-2xl">Description</h2>
@ -27,7 +32,11 @@ export const ImagePage: Component = () => {
<For each={image()?.Image.ImageLists}>
{(imageList) => (
<ListCard
list={lists().find((l) => l.ID === imageList.ListID)!}
list={
lists().find(
(l) => l.ID === imageList.ListID,
)!
}
/>
)}
</For>

10
frontend/src/pages/search/index.tsx
View File

@ -9,7 +9,7 @@ import { useSearchImageContext } from "@contexts/SearchImageContext";
export const SearchPage: Component = () => {
const fuse = useSearch();
const { onDeleteImage } = useSearchImageContext();
const { onDeleteImage, onRefreshImage } = useSearchImageContext();
const [searchItems, setSearchItems] =
createSignal<JustTheImageWhatAreTheseNames>([]);
@ -41,7 +41,13 @@ export const SearchPage: Component = () => {
<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) => <ImageComponent ID={item.ImageID} onDelete={onDeleteImage} />}
{(item) => (
<ImageComponent
ID={item.ImageID}
onDelete={onDeleteImage}
onRefresh={onRefreshImage}
/>
)}
</For>
<Search.NoResult>No result found</Search.NoResult>
</Search.Content>