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

feat: allowing users to delete images from lists

Browse Source
This commit is contained in:
John Costa
2025-08-30 21:38:01 +01:00
parent 94ee8bdb7e
commit 2dd9f33303
7 changed files with 188 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -6,8 +6,8 @@ import {
literal,
null_,
nullable,
parse,
pipe,
safeParse,
strictObject,
string,
transform,
@@ -64,8 +64,14 @@ export const sendImageFile = async (
request.headers.set("Content-Type", "application/oclet-stream");
const res = await fetch(request).then((res) => res.json());
const parsedRes = safeParse(sendImageResponseValidator, res);
return parse(sendImageResponseValidator, res);
if (!parsedRes.success) {
console.log(parsedRes.issues)
throw new Error(JSON.stringify(parsedRes.issues));
}
return parsedRes.output;
};
export const deleteImage = async (
@@ -79,6 +85,15 @@ export const deleteImage = async (
await fetch(request);
}
export const deleteImageFromStack = async (listID: string, imageID: string): Promise<void> => {
const request = getBaseAuthorizedRequest({
path: `stacks/${listID}/${imageID}`,
method: "DELETE",
});
await fetch(request);
}
export class ImageLimitReached extends Error {
constructor() {
super();
@@ -104,7 +119,13 @@ export const sendImage = async (
const res = await rawRes.json();
return parse(sendImageResponseValidator, res);
const parsedRes = safeParse(sendImageResponseValidator, res);
if (!parsedRes.success) {
console.log(parsedRes.issues)
throw new Error(JSON.stringify(parsedRes.issues));
}
return parsedRes.output;
};
const imageMetaValidator = strictObject({
@@ -207,7 +228,13 @@ export const getUserImages = async (): Promise<
console.log("Backend response: ", res);
return parse(imageRequestValidator, res);
const parsedRes = safeParse(imageRequestValidator, res);
if (!parsedRes.success) {
console.log(parsedRes.issues)
throw new Error(JSON.stringify(parsedRes.issues));
}
return parsedRes.output;
};
export const postLogin = async (email: string): Promise<void> => {
@@ -237,7 +264,13 @@ export const postCode = async (
const res = await fetch(request).then((res) => res.json());
return parse(codeValidator, res);
const parsedRes = safeParse(codeValidator, res);
if (!parsedRes.success) {
console.log(parsedRes.issues)
throw new Error(JSON.stringify(parsedRes.issues));
}
return parsedRes.output;
};
export class ReachedListLimit extends Error {

84
frontend/src/pages/list/index.tsx
View File

@@ -1,12 +1,56 @@
import { useSearchImageContext } from "@contexts/SearchImageContext";
import { useParams } from "@solidjs/router";
import { Component, For, Show } from "solid-js";
import { Component, For, Show, createSignal } from "solid-js";
import { base } from "../../network";
import { Dialog } from "@kobalte/core";
const DeleteButton: Component<{ onDelete: () => void }> = (props) => {
const [isOpen, setIsOpen] = createSignal(false);
return (
<>
<button
aria-label="Delete image from list"
class="text-white bg-red-600 hover:bg-red-700 rounded px-2 py-1 text-sm"
onClick={() => setIsOpen(true)}
>
×
</button>
<Dialog.Root open={isOpen()} onOpenChange={setIsOpen}>
<Dialog.Portal>
<Dialog.Overlay class="fixed inset-0 bg-black bg-opacity-50" />
<div class="fixed inset-0 z-50 flex items-center justify-center p-4">
<Dialog.Content class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
<Dialog.Title class="text-lg font-bold mb-2">
Confirm Delete
</Dialog.Title>
<Dialog.Description class="mb-4">
Are you sure you want to delete this image from
this list?
</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-red-600 text-white rounded hover:bg-red-700" onClick={props.onDelete}>
Confirm
</button>
</div>
</Dialog.Content>
</div>
</Dialog.Portal>
</Dialog.Root>
</>
);
};
export const List: Component = () => {
const { listId } = useParams();
const { lists } = useSearchImageContext();
const { lists, onDeleteImageFromStack } = useSearchImageContext();
const list = () => lists().find((l) => l.ID === listId);
@@ -24,14 +68,13 @@ export const List: Component = () => {
<For each={l().Schema.SchemaItems}>
{(item, index) => (
<th
class={`px-6 py-4 text-left text-sm font-semibold text-neutral-900 min-w-32 ${
index() <
class={`px-6 py-4 text-left text-sm font-semibold text-neutral-900 min-w-32 ${index() <
l().Schema.SchemaItems
.length -
1
? "border-r border-neutral-200"
: ""
}`}
1
? "border-r border-neutral-200"
: ""
}`}
>
{item.Item}
</th>
@@ -43,17 +86,16 @@ export const List: Component = () => {
<For each={l().Images}>
{(image, rowIndex) => (
<tr
class={`hover:bg-neutral-50 transition-colors ${
rowIndex() % 2 === 0
? "bg-white"
: "bg-neutral-25"
}`}
class={`hover:bg-neutral-50 transition-colors ${rowIndex() % 2 === 0
? "bg-white"
: "bg-neutral-25"
}`}
>
<td class="px-6 py-4 border-r border-neutral-200">
<div class="w-32 h-24 overflow-hidden rounded-lg">
<div class="flex items-center gap-2">
<a
href={`/image/${image.ImageID}`}
class="w-full h-full flex justify-center"
class="w-32 h-24 flex justify-center rounded-lg overflow-hidden"
>
<img
class="w-full h-full object-cover rounded-lg"
@@ -61,18 +103,18 @@ export const List: Component = () => {
alt="List item"
/>
</a>
<DeleteButton onDelete={() => onDeleteImageFromStack(l().ID, image.ImageID)} />
</div>
</td>
<For each={image.Items}>
{(item, colIndex) => (
<td
class={`px-6 py-4 text-sm text-neutral-700 ${
colIndex() <
class={`px-6 py-4 text-sm text-neutral-700 ${colIndex() <
image.Items.length -
1
? "border-r border-neutral-200"
: ""
}`}
1
? "border-r border-neutral-200"
: ""
}`}
>
<div
class="max-w-xs truncate"