feat: adding button to delete image
This commit is contained in:
@@ -3,62 +3,63 @@ 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[] }
|
||||
| { type: "date"; date: Date };
|
||||
| { type: "image"; ID: string[] }
|
||||
| { type: "date"; date: Date };
|
||||
|
||||
export const AllImages: Component = () => {
|
||||
let scrollRef: HTMLDivElement | undefined;
|
||||
let scrollRef: HTMLDivElement | undefined;
|
||||
|
||||
const { imagesByDate } = useSearchImageContext();
|
||||
const { imagesByDate, onDeleteImage } = useSearchImageContext();
|
||||
|
||||
const items = () => {
|
||||
const items: Array<ImageOrDate> = [];
|
||||
const items = () => {
|
||||
const items: Array<ImageOrDate> = [];
|
||||
|
||||
for (const { date, images } of imagesByDate()) {
|
||||
items.push({ type: "date", date });
|
||||
const chunkedRows = chunkRows(3, images);
|
||||
for (const chunk of chunkedRows) {
|
||||
items.push({ type: "image", ID: chunk.map((c) => c.ImageID) });
|
||||
}
|
||||
}
|
||||
for (const { date, images } of imagesByDate()) {
|
||||
items.push({ type: "date", date });
|
||||
const chunkedRows = chunkRows(3, images);
|
||||
for (const chunk of chunkedRows) {
|
||||
items.push({ type: "image", ID: chunk.map((c) => c.ImageID) });
|
||||
}
|
||||
}
|
||||
|
||||
return items;
|
||||
};
|
||||
return items;
|
||||
};
|
||||
|
||||
const rowVirtualizer = createVirtualizer({
|
||||
count: items().length,
|
||||
estimateSize: () => 400,
|
||||
getScrollElement: () => scrollRef!,
|
||||
overscan: 3,
|
||||
});
|
||||
const rowVirtualizer = createVirtualizer({
|
||||
count: items().length,
|
||||
estimateSize: () => 400,
|
||||
getScrollElement: () => scrollRef!,
|
||||
overscan: 3,
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={scrollRef}
|
||||
class="flex flex-col gap-4 h-[calc(100% - 12px)] overflow-y-auto"
|
||||
>
|
||||
<div
|
||||
class={`h-[${rowVirtualizer.getTotalSize()}px] grid grid-cols-3 gap-4 rounded-xl border border-neutral-200 bg-white p-4`}
|
||||
>
|
||||
<For each={rowVirtualizer.getVirtualItems()}>
|
||||
{(i) => {
|
||||
const item = items()[i.index];
|
||||
if (item.type === "image") {
|
||||
return (
|
||||
<For each={item.ID}>{(id) => <ImageComponent ID={id} />}</For>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<h3 class="col-span-3 font-bold text-2xl">
|
||||
{item.date.toDateString()}
|
||||
</h3>
|
||||
);
|
||||
}
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div
|
||||
ref={scrollRef}
|
||||
class="flex flex-col gap-4 h-[calc(100% - 12px)] overflow-y-auto"
|
||||
>
|
||||
<div
|
||||
class={`h-[${rowVirtualizer.getTotalSize()}px] grid grid-cols-3 gap-4 rounded-xl border border-neutral-200 bg-white p-4`}
|
||||
>
|
||||
<For each={rowVirtualizer.getVirtualItems()}>
|
||||
{(i) => {
|
||||
const item = items()[i.index];
|
||||
if (item.type === "image") {
|
||||
return (
|
||||
<For each={item.ID}>{(id) => <ImageComponent ID={id} onDelete={onDeleteImage} />}</For>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<h3 class="col-span-3 font-bold text-2xl">
|
||||
{item.date.toDateString()}
|
||||
</h3>
|
||||
);
|
||||
}
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,28 +1,29 @@
|
||||
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 } = useSearchImageContext();
|
||||
const { userImages, onDeleteImage } = useSearchImageContext();
|
||||
|
||||
const latestImages = () =>
|
||||
userImages()
|
||||
.sort(
|
||||
(a, b) =>
|
||||
new Date(b.CreatedAt!).getTime() - new Date(a.CreatedAt!).getTime(),
|
||||
)
|
||||
.slice(0, NUMBER_OF_MAX_RECENT_IMAGES);
|
||||
const latestImages = () =>
|
||||
userImages()
|
||||
.sort(
|
||||
(a, b) =>
|
||||
new Date(b.CreatedAt!).getTime() - new Date(a.CreatedAt!).getTime(),
|
||||
)
|
||||
.slice(0, NUMBER_OF_MAX_RECENT_IMAGES);
|
||||
|
||||
return (
|
||||
<div class="rounded-xl bg-white p-4 flex flex-col gap-2">
|
||||
<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} />}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div class="rounded-xl bg-white p-4 flex flex-col gap-2">
|
||||
<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} />}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -4,35 +4,36 @@ import { useParams } from "@solidjs/router";
|
||||
import { For, type Component } from "solid-js";
|
||||
import SolidjsMarkdown from "solidjs-markdown";
|
||||
import { ListCard } from "@components/list-card";
|
||||
import { deleteImage } from "@network/index";
|
||||
|
||||
export const ImagePage: Component = () => {
|
||||
const { imageId } = useParams<{ imageId: string }>();
|
||||
const { imageId } = useParams<{ imageId: string }>();
|
||||
|
||||
const { userImages, lists } = useSearchImageContext();
|
||||
const { userImages, lists, onDeleteImage } = useSearchImageContext();
|
||||
|
||||
const image = () => userImages().find((i) => i.ImageID === imageId);
|
||||
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} />
|
||||
</div>
|
||||
<div class="w-full bg-white rounded-xl p-4 flex flex-col gap-4">
|
||||
<h2 class="font-bold text-2xl">Description</h2>
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<For each={image()?.Image.ImageLists}>
|
||||
{(imageList) => (
|
||||
<ListCard
|
||||
list={lists().find((l) => l.ID === imageList.ListID)!}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full bg-white rounded-xl p-4">
|
||||
<h2 class="font-bold text-2xl">Description</h2>
|
||||
<SolidjsMarkdown>{image()?.Image.Description}</SolidjsMarkdown>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
return (
|
||||
<main class="flex flex-col items-center gap-4">
|
||||
<div class="w-full bg-white rounded-xl p-4">
|
||||
<ImageComponentFullHeight ID={imageId} onDelete={onDeleteImage()} />
|
||||
</div>
|
||||
<div class="w-full bg-white rounded-xl p-4 flex flex-col gap-4">
|
||||
<h2 class="font-bold text-2xl">Description</h2>
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<For each={image()?.Image.ImageLists}>
|
||||
{(imageList) => (
|
||||
<ListCard
|
||||
list={lists().find((l) => l.ID === imageList.ListID)!}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full bg-white rounded-xl p-4">
|
||||
<h2 class="font-bold text-2xl">Description</h2>
|
||||
<SolidjsMarkdown>{image()?.Image.Description}</SolidjsMarkdown>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -2,47 +2,50 @@ import { Component, createSignal, For } from "solid-js";
|
||||
import { Search } from "@kobalte/core/search";
|
||||
import { IconSearch } from "@tabler/icons-solidjs";
|
||||
import { useSearch } from "./search";
|
||||
import { JustTheImageWhatAreTheseNames } from "@network/index";
|
||||
import { deleteImage, JustTheImageWhatAreTheseNames } from "@network/index";
|
||||
import { ImageComponent } from "@components/image";
|
||||
import { useSearchImageContext } from "@contexts/SearchImageContext";
|
||||
|
||||
export const SearchPage: Component = () => {
|
||||
const fuse = useSearch();
|
||||
const fuse = useSearch();
|
||||
|
||||
const [searchItems, setSearchItems] =
|
||||
createSignal<JustTheImageWhatAreTheseNames>([]);
|
||||
const { onDeleteImage } = useSearchImageContext();
|
||||
|
||||
return (
|
||||
<Search
|
||||
options={searchItems()}
|
||||
onInputChange={(e) => {
|
||||
setSearchItems(
|
||||
fuse()
|
||||
.search(e)
|
||||
.map((i) => i.item),
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Search.Label />
|
||||
<Search.Control class="flex">
|
||||
<Search.Indicator class="bg-neutral-200 p-4 rounded-l-xl">
|
||||
<Search.Icon>
|
||||
<IconSearch />
|
||||
</Search.Icon>
|
||||
</Search.Indicator>
|
||||
<Search.Input
|
||||
class="w-full p-4 font-bold text-xl rounded-r-xl"
|
||||
placeholder="Woking Station..."
|
||||
/>
|
||||
</Search.Control>
|
||||
<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) => <ImageComponent ID={item.ImageID} />}
|
||||
</For>
|
||||
<Search.NoResult>No result found</Search.NoResult>
|
||||
</Search.Content>
|
||||
</Search.Portal>
|
||||
</Search>
|
||||
);
|
||||
const [searchItems, setSearchItems] =
|
||||
createSignal<JustTheImageWhatAreTheseNames>([]);
|
||||
|
||||
return (
|
||||
<Search
|
||||
options={searchItems()}
|
||||
onInputChange={(e) => {
|
||||
setSearchItems(
|
||||
fuse()
|
||||
.search(e)
|
||||
.map((i) => i.item),
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Search.Label />
|
||||
<Search.Control class="flex">
|
||||
<Search.Indicator class="bg-neutral-200 p-4 rounded-l-xl">
|
||||
<Search.Icon>
|
||||
<IconSearch />
|
||||
</Search.Icon>
|
||||
</Search.Indicator>
|
||||
<Search.Input
|
||||
class="w-full p-4 font-bold text-xl rounded-r-xl"
|
||||
placeholder="Woking Station..."
|
||||
/>
|
||||
</Search.Control>
|
||||
<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) => <ImageComponent ID={item.ImageID} onDelete={onDeleteImage} />}
|
||||
</For>
|
||||
<Search.NoResult>No result found</Search.NoResult>
|
||||
</Search.Content>
|
||||
</Search.Portal>
|
||||
</Search>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user