From 9c07fb24e0a3d978dddc9a7b8a19755703288701 Mon Sep 17 00:00:00 2001 From: Benjamin Montgomery Date: Mon, 8 Jul 2024 12:27:18 -0400 Subject: [PATCH 01/13] Fix the issue by removing commas from filename before saving to firebase. --- components/image-generation/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/components/image-generation/index.tsx b/components/image-generation/index.tsx index a35a362..b605ee7 100644 --- a/components/image-generation/index.tsx +++ b/components/image-generation/index.tsx @@ -143,7 +143,9 @@ export const ImageGeneration = ({updateUserGeneratedImages, loadedImage}:Props) //This will save image to Firebase storage as a Blob - UNTESTED async function saveToFirebase(blob: Blob, today: Date, ) { - const userImagePath = auth.currentUser?.uid + "/" + formatDate(today) + ".png" + const formattedDate = formatDate(today).replace(",","").trim(); + + const userImagePath = auth.currentUser?.uid + "/" + formattedDate + ".png" const storageRef = ref(storage, userImagePath); const metadata: UploadMetadata = { customMetadata: { @@ -154,7 +156,7 @@ export const ImageGeneration = ({updateUserGeneratedImages, loadedImage}:Props) const imageUrl = await getDownloadURL(storageRef) - updateUserGeneratedImages({url:imageUrl,date:formatDate(today),prompt}) + updateUserGeneratedImages({url:imageUrl,date:formattedDate,prompt}) } //This will save image to the local system and save to Firebase storage as a Blob - UNTESTED From 77ab5edd4ae07b7ae14bc00da8045e1268ec7059 Mon Sep 17 00:00:00 2001 From: Benjamin Montgomery Date: Mon, 8 Jul 2024 12:36:56 -0400 Subject: [PATCH 02/13] commit --- components/image-generation/index.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/components/image-generation/index.tsx b/components/image-generation/index.tsx index b605ee7..a35a362 100644 --- a/components/image-generation/index.tsx +++ b/components/image-generation/index.tsx @@ -143,9 +143,7 @@ export const ImageGeneration = ({updateUserGeneratedImages, loadedImage}:Props) //This will save image to Firebase storage as a Blob - UNTESTED async function saveToFirebase(blob: Blob, today: Date, ) { - const formattedDate = formatDate(today).replace(",","").trim(); - - const userImagePath = auth.currentUser?.uid + "/" + formattedDate + ".png" + const userImagePath = auth.currentUser?.uid + "/" + formatDate(today) + ".png" const storageRef = ref(storage, userImagePath); const metadata: UploadMetadata = { customMetadata: { @@ -156,7 +154,7 @@ export const ImageGeneration = ({updateUserGeneratedImages, loadedImage}:Props) const imageUrl = await getDownloadURL(storageRef) - updateUserGeneratedImages({url:imageUrl,date:formattedDate,prompt}) + updateUserGeneratedImages({url:imageUrl,date:formatDate(today),prompt}) } //This will save image to the local system and save to Firebase storage as a Blob - UNTESTED From 1aa78fe19e760ebd56c1fde7db9541ff44a44645 Mon Sep 17 00:00:00 2001 From: Benjamin Montgomery Date: Mon, 8 Jul 2024 13:46:19 -0400 Subject: [PATCH 03/13] Fix card border radius --- components/ui/card.tsx | 2 +- tailwind.config.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/components/ui/card.tsx b/components/ui/card.tsx index 9a9089e..cedfbe2 100644 --- a/components/ui/card.tsx +++ b/components/ui/card.tsx @@ -9,7 +9,7 @@ const Card = React.forwardRef<
Date: Mon, 8 Jul 2024 13:54:35 -0400 Subject: [PATCH 04/13] Fix card radius (again) and fix radius of a few other items --- components/image-generation/index.tsx | 4 ++-- tailwind.config.ts | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/components/image-generation/index.tsx b/components/image-generation/index.tsx index a35a362..591ecdb 100644 --- a/components/image-generation/index.tsx +++ b/components/image-generation/index.tsx @@ -201,14 +201,14 @@ export const ImageGeneration = ({updateUserGeneratedImages, loadedImage}:Props)
-
+
{res}
{saveFirebaseBttn} {saveLocalBttn}
-
+
diff --git a/tailwind.config.ts b/tailwind.config.ts index 758a1a5..95dca5b 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -83,7 +83,8 @@ module.exports = { }, }, borderRadius: { - card: "calc(var(--radius) + 8px", + card: "calc(var(--radius) + 5px)", + 'card-contents': "calc(var(--radius) + 3px)", xl: "calc(var(--radius) + 2px)", lg: "var(--radius)", md: "calc(var(--radius) - 2px)", From 22f4f5fa8d0cf8cb71189d838d50543e50530c8b Mon Sep 17 00:00:00 2001 From: Benjamin Montgomery Date: Mon, 8 Jul 2024 14:10:29 -0400 Subject: [PATCH 05/13] Fix border around the blocks panel for image gen --- components/image-generation/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/image-generation/index.tsx b/components/image-generation/index.tsx index 591ecdb..518b4f0 100644 --- a/components/image-generation/index.tsx +++ b/components/image-generation/index.tsx @@ -208,7 +208,7 @@ export const ImageGeneration = ({updateUserGeneratedImages, loadedImage}:Props) {saveLocalBttn}
-
+
From 60a49bbbc2b2d3b58fce10be4c0026e6e6d07eed Mon Sep 17 00:00:00 2001 From: Benjamin Montgomery Date: Mon, 8 Jul 2024 16:02:00 -0400 Subject: [PATCH 06/13] Redesign image library page --- app/image-library/page.tsx | 99 +++++++++++++++++++++++++++++--------- 1 file changed, 76 insertions(+), 23 deletions(-) diff --git a/app/image-library/page.tsx b/app/image-library/page.tsx index bb5baf0..f16273d 100644 --- a/app/image-library/page.tsx +++ b/app/image-library/page.tsx @@ -1,16 +1,65 @@ "use client" +import * as React from "react"; + import { NavBar } from "@/components/navbar" import { onAuthStateChanged } from "firebase/auth" import { useState } from "react" -import { auth } from "../firebase" -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" -import { ChatHistoryBox } from "@/components/chat-history-boxes" +import { storage, auth } from "../../app/firebase"; +import { Card } from "@/components/ui/card" +import { ScrollArea } from "@/components/ui/scroll-area" +import { FullMetadata, ListResult, StorageReference, getDownloadURL, getMetadata, listAll, ref } from "firebase/storage"; +import { EditIcon } from "@/components/icons/prompt-ed-icons"; +import { Button } from "@/components/ui/button"; + +interface UserImage { + url:string + date:string + prompt:string | undefined +} export default function Home() { + const [logIn, setLogIn] = useState(false); + const [userGeneratedImages, setUserGeneratedImages] = useState([]) + const [userID, setUserID] = useState(auth.currentUser?.uid); + onAuthStateChanged(auth, (user) => { + if (user && !logIn) { + setLogIn(true); + } + if (user && typeof userID === 'undefined') { + setUserID(user.uid); + } + }); + + React.useEffect(()=>{ + const getUserImages = async (folderName: string | undefined): Promise => { + const folderRef: StorageReference = ref(storage, folderName); + const savedUserImages: UserImage[] = []; + + try { + const result: ListResult = await listAll(folderRef); + + const urlPromises: Promise[] = result.items.map(async (itemRef: StorageReference) => { + const url = await getDownloadURL(itemRef); + const metadata: FullMetadata = await getMetadata(itemRef); + const date = metadata.timeCreated; + const prompt = metadata.customMetadata?.prompt + return { url, date, prompt}; + }); + + const userImages: UserImage[] = await Promise.all(urlPromises); + userImages.reverse() + savedUserImages.push(...userImages); + } catch (error) { + console.error("Error getting image URLs:", error); + } + + setUserGeneratedImages(savedUserImages); + }; - const [logIn, setLogIn] = useState(true); + getUserImages(auth.currentUser?.uid) + },[userID]) onAuthStateChanged(auth, (user) => { if (user && !logIn) { @@ -26,25 +75,29 @@ export default function Home() { return (
-
- - - Chat History - Click on a chat to reopen it - - - - - - - - Image History - Click on an image to reopen it - - - nothing - - +
+
+ + +
+
+ {userGeneratedImages.map((image, key) => ( +
+ +
+ {image.prompt} +
+ +
+
+ ))} +
+
+ + +
); From 20684d1bbe2aad8b64d69e1100e20876a1d9291e Mon Sep 17 00:00:00 2001 From: Benjamin Montgomery Date: Tue, 9 Jul 2024 14:52:58 -0400 Subject: [PATCH 07/13] Refactoring of image library --- app/image-library/page.tsx | 15 +---------- components/icons/prompt-ed-icons.tsx | 7 ++++- components/image-history-boxes.tsx | 20 +++++++-------- components/image-history.tsx | 38 ++++++++++++---------------- 4 files changed, 32 insertions(+), 48 deletions(-) diff --git a/app/image-library/page.tsx b/app/image-library/page.tsx index 015d8d6..923a700 100644 --- a/app/image-library/page.tsx +++ b/app/image-library/page.tsx @@ -82,20 +82,7 @@ export default function Home() {
-
- {userGeneratedImages.map((image, key) => ( -
- -
- {image.prompt} -
- -
-
- ))} -
+
diff --git a/components/icons/prompt-ed-icons.tsx b/components/icons/prompt-ed-icons.tsx index f9f1431..d165952 100644 --- a/components/icons/prompt-ed-icons.tsx +++ b/components/icons/prompt-ed-icons.tsx @@ -130,4 +130,9 @@ export const NavBarUploadIcon = (props: IconProps) => - \ No newline at end of file + + +export const XIcon = (props: IconProps) => + + + diff --git a/components/image-history-boxes.tsx b/components/image-history-boxes.tsx index d30fb4d..49f5c1e 100644 --- a/components/image-history-boxes.tsx +++ b/components/image-history-boxes.tsx @@ -70,18 +70,16 @@ export const ImageHistoryBox = () => { }, [userID]); return ( -
+
{userGeneratedImages.map((val, key) => ( -
- -
+ ))}
); diff --git a/components/image-history.tsx b/components/image-history.tsx index 6a5a81d..9ff47dd 100644 --- a/components/image-history.tsx +++ b/components/image-history.tsx @@ -3,11 +3,11 @@ import * as React from "react"; import { useState } from "react"; -import { Card, CardHeader, CardTitle } from "./ui/card"; import Link from "next/link"; import { Button } from "./ui/button"; import { storage } from "@/app/firebase"; import { deleteObject, ref } from "firebase/storage"; +import { EditIcon, XIcon } from "./icons/prompt-ed-icons"; interface ImageHistoryProps { date: string; @@ -69,28 +69,22 @@ export function ImageHistory({ {deleted ? ( <> ) : ( - - -
- - {prompt} - - {formatDate(date)} -
- -
- -
- - + + +
+
)} ); -} +} \ No newline at end of file From 8fa12c182d719b76fd8bf0ba9368a592584b4b01 Mon Sep 17 00:00:00 2001 From: Benjamin Montgomery Date: Tue, 9 Jul 2024 15:22:22 -0400 Subject: [PATCH 08/13] allow for loading an image based on the query params in image-gen url --- app/image-gen/page.tsx | 124 ++++++++++++++++++++++++----------------- 1 file changed, 73 insertions(+), 51 deletions(-) diff --git a/app/image-gen/page.tsx b/app/image-gen/page.tsx index 21171a5..55bdeb0 100644 --- a/app/image-gen/page.tsx +++ b/app/image-gen/page.tsx @@ -1,8 +1,8 @@ "use client" import { NavBar } from "@/components/navbar" -import { onAuthStateChanged} from "firebase/auth"; -import { useState } from "react"; +import { onAuthStateChanged } from "firebase/auth"; +import { useCallback, useEffect, useState } from "react"; import React from "react"; import { ImageGeneration } from "@/components/image-generation"; import { auth, storage } from "../firebase"; @@ -12,25 +12,33 @@ import { ScrollArea } from "@/components/ui/scroll-area"; import { ref, listAll, getDownloadURL, getMetadata, StorageReference, ListResult, FullMetadata } from "firebase/storage"; import { BuildableState, usePromptEditorState } from "@/store/editorStore"; import { EditIcon } from "@/components/icons/prompt-ed-icons"; +import { useSearchParams } from "next/navigation"; +import { useRouter } from "next/navigation"; -interface UserImage{ - url:string - date:string - prompt:string | undefined - buildables:BuildableState[] +interface UserImage { + url: string + date: string + prompt: string | undefined + buildables: BuildableState[] } export default function Home() { + const router = useRouter(); const [logIn, setLogIn] = useState(false); const [userGeneratedImages, setUserGeneratedImages] = useState([]) const [loadedImage, setLoadedImage] = useState() const [userID, setUserID] = useState(auth.currentUser?.uid); + // This is the Next.js hook, NOT the React hook + const searchParams = useSearchParams(); + + const dateParam = searchParams.get("date"); + const setBuildables = usePromptEditorState((state) => state.setBuildables); - const updateUserGeneratedImages = (image:UserImage) => { - setUserGeneratedImages((oldArray)=>([image,...oldArray ])) + const updateUserGeneratedImages = (image: UserImage) => { + setUserGeneratedImages((oldArray) => ([image, ...oldArray])) } onAuthStateChanged(auth, (user) => { @@ -42,57 +50,67 @@ export default function Home() { } }); - React.useEffect(()=>{ + React.useEffect(() => { const getUserImages = async (folderName: string | undefined): Promise => { const folderRef: StorageReference = ref(storage, folderName); const savedUserImages: UserImage[] = []; - + try { const result: ListResult = await listAll(folderRef); - + const urlPromises: Promise[] = result.items.map(async (itemRef: StorageReference) => { const url = await getDownloadURL(itemRef); const metadata: FullMetadata = await getMetadata(itemRef); - const date = metadata.timeCreated; + const date = metadata.timeCreated; const prompt = metadata.customMetadata?.prompt const buildables = JSON.parse(metadata.customMetadata?.buildables || "{}") as BuildableState[] return { url, date, prompt, buildables }; }); - + const userImages: UserImage[] = await Promise.all(urlPromises); userImages.reverse() savedUserImages.push(...userImages); } catch (error) { console.error("Error getting image URLs:", error); } - + setUserGeneratedImages(savedUserImages); + + if (dateParam) { + savedUserImages.forEach(image => { + if (image.date == dateParam) { + loadImage(image); + } + }); + + router.replace('/image-gen', undefined, { shallow: true }); + } }; getUserImages(auth.currentUser?.uid) - },[userID]) + }, [userID]) function formatISODate(isoDateString: string): string { const date = new Date(isoDateString); - + const options: Intl.DateTimeFormatOptions = { month: 'long', day: 'numeric', year: 'numeric' }; - + const formattedDate = date.toLocaleDateString('en-US', options); - + const day = date.getDate(); const suffix = getDaySuffix(day); - if(formattedDate.replace(day.toString(), `${day}${suffix}`)==="Invalid Date"){ + if (formattedDate.replace(day.toString(), `${day}${suffix}`) === "Invalid Date") { return isoDateString } return formattedDate.replace(day.toString(), `${day}${suffix}`); } - + function getDaySuffix(day: number): string { if (day > 3 && day < 21) return 'th'; switch (day % 10) { @@ -103,6 +121,11 @@ export default function Home() { } } + const loadImage = useCallback((image: UserImage) => { + setLoadedImage({ ...image }); + setBuildables(() => image.buildables); + }, [setBuildables]); + if (!logIn) { return (

Access Denied

@@ -110,42 +133,41 @@ export default function Home() { } else { return (
- +
-
-

+ { + name: "Image History", content: + <> +

+

Image History -

-
- - {userGeneratedImages.map((image,key)=>( -
-

- {formatISODate(image.date)}

-
-

- {image.prompt} -

- -
- ))} - - }, - ]} defaultValue="Image History" /> + + {userGeneratedImages.map((image, key) => ( +
+

+ {formatISODate(image.date)} +

+
+

+ {image.prompt} +

+ +
+
+ ))} + + + }, + ]} defaultValue="Image History" />
- +
From 5a097bc85ba5488b3ffe956981ea778e3189b265 Mon Sep 17 00:00:00 2001 From: Benjamin Montgomery Date: Tue, 9 Jul 2024 18:08:32 -0400 Subject: [PATCH 09/13] Fix input borders when selected. Also add a "search" input variant --- components/ui/input.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/components/ui/input.tsx b/components/ui/input.tsx index 3e61de1..bb86b97 100644 --- a/components/ui/input.tsx +++ b/components/ui/input.tsx @@ -5,10 +5,11 @@ import { cn } from "@/lib/utils" const inputVariants = cva( cn( - "flex border bg-card-solid px-2 py-1.5 text-input", + "flex border bg-card-solid px-2 py-1.5 text-input ring-offset-red-950", "file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground", "disabled:cursor-not-allowed disabled:opacity-50 enabled:hover:bg-[rgba(208,232,255,0.4)]", - "enabled:hover:border-ring focus-visible:border-card-foreground invalid:border-destructive"), + "enabled:hover:border-ring focus-visible:border-card-foreground invalid:border-destructive", + "focus-visible:outline-none focus-visible:border-ring"), { variants: { inputSize: { @@ -16,6 +17,7 @@ const inputVariants = cva( sm: "h-5 w-full rounded-md", lg: "h-9 px-3 w-full rounded-md text-base", xl: "h-[60px] w-full rounded-lg text-tabs p-[21px]", + search: "h-[40px] w-full rounded-card-contents text-xl px-4", }, }, defaultVariants: { @@ -24,6 +26,11 @@ const inputVariants = cva( } ) +/*"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm +ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium +placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 +focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",*/ + export interface InputProps extends React.InputHTMLAttributes, VariantProps { From 9e7ac90fdd7fdce8e214b60b93774d7d79c17ea1 Mon Sep 17 00:00:00 2001 From: Benjamin Montgomery Date: Tue, 9 Jul 2024 18:11:35 -0400 Subject: [PATCH 10/13] fix borders on dragable-input --- components/dragable-input.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/dragable-input.tsx b/components/dragable-input.tsx index e75cdf9..7d43ab4 100644 --- a/components/dragable-input.tsx +++ b/components/dragable-input.tsx @@ -17,6 +17,6 @@ export const DragableInput: FC = ({ onChange, initialValue } return
- +
} \ No newline at end of file From a5d62417fd1e04cfe5334e1d6b53dc5869481a65 Mon Sep 17 00:00:00 2001 From: Benjamin Montgomery Date: Tue, 9 Jul 2024 19:32:10 -0400 Subject: [PATCH 11/13] Add in search and delete button to image library --- app/image-gen/page.tsx | 2 +- app/image-library/page.tsx | 2 +- components/icons/prompt-ed-icons.tsx | 8 ++- components/image-delete-alert.tsx | 36 ++++++++++ components/image-history-boxes.tsx | 98 ++++++++++++++++++++++++---- components/image-history.tsx | 44 ++----------- 6 files changed, 137 insertions(+), 53 deletions(-) create mode 100644 components/image-delete-alert.tsx diff --git a/app/image-gen/page.tsx b/app/image-gen/page.tsx index 55bdeb0..e1eb88c 100644 --- a/app/image-gen/page.tsx +++ b/app/image-gen/page.tsx @@ -83,7 +83,7 @@ export default function Home() { } }); - router.replace('/image-gen', undefined, { shallow: true }); + router.replace('/image-gen', undefined); } }; diff --git a/app/image-library/page.tsx b/app/image-library/page.tsx index 923a700..67f06b5 100644 --- a/app/image-library/page.tsx +++ b/app/image-library/page.tsx @@ -79,7 +79,7 @@ export default function Home() {
- +
diff --git a/components/icons/prompt-ed-icons.tsx b/components/icons/prompt-ed-icons.tsx index d165952..0fc6d2f 100644 --- a/components/icons/prompt-ed-icons.tsx +++ b/components/icons/prompt-ed-icons.tsx @@ -134,5 +134,11 @@ export const NavBarUploadIcon = (props: IconProps) => export const XIcon = (props: IconProps) => - + + +export const SearchIcon = (props: IconProps) => + + + + diff --git a/components/image-delete-alert.tsx b/components/image-delete-alert.tsx new file mode 100644 index 0000000..0f77548 --- /dev/null +++ b/components/image-delete-alert.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from "./ui/alert-dialog"; +import { XIcon } from "./icons/prompt-ed-icons"; + +export const ImageDeleteAlert: React.FC<{ + onConfirm: () => void; + onDeny: () => void; +}> = ({ onConfirm, onDeny }) => { + return ( + + + + + Are you sure? + + Once you delete this image, it can't be recovered. + + + + Cancel + Confirm + + + + ); +}; diff --git a/components/image-history-boxes.tsx b/components/image-history-boxes.tsx index 49f5c1e..331c764 100644 --- a/components/image-history-boxes.tsx +++ b/components/image-history-boxes.tsx @@ -1,6 +1,6 @@ import * as React from "react"; -import { useState } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; import { auth, storage, db } from "@/app/firebase"; import { ImageHistory } from "./image-history"; import { onAuthStateChanged } from "firebase/auth"; @@ -13,10 +13,13 @@ import { ListResult, FullMetadata, } from "firebase/storage"; +import { Input } from "./ui/input"; +import { SearchIcon } from "./icons/prompt-ed-icons"; interface UserImage { url: string; date: string; + formattedDate: string; prompt: string | undefined; objectName: string; } @@ -27,6 +30,8 @@ export const ImageHistoryBox = () => { [] ); + const [searchText, setSearchText] = useState(""); + onAuthStateChanged(auth, (user) => { if (user && typeof userID === "undefined") { setUserID(user.uid); @@ -49,10 +54,11 @@ export const ImageHistoryBox = () => { const url = await getDownloadURL(itemRef); const metadata: FullMetadata = await getMetadata(itemRef); const date = metadata.timeCreated; + const formattedDate = formatDate(date); const prompt = metadata.customMetadata?.prompt; const objectName = itemRef.name; - return { objectName, url, date, prompt }; + return { objectName, url, date, formattedDate, prompt }; } ); @@ -69,18 +75,84 @@ export const ImageHistoryBox = () => { getUserImages(auth.currentUser?.uid); }, [userID]); + + function formatDate(dateString: string): string { + console.log("test"); + const date = new Date(dateString); + + const options: Intl.DateTimeFormatOptions = { + month: "long", + day: "numeric", + year: "numeric", + }; + + const formattedDate = date.toLocaleDateString("en-US", options); + const day = date.getDate(); + const suffix = getDaySuffix(day); + + return formattedDate.replace(day.toString(), `${day}${suffix}`); + } + + function getDaySuffix(day: number): string { + if (day > 3 && day < 21) return "th"; + switch (day % 10) { + case 1: + return "st"; + case 2: + return "nd"; + case 3: + return "rd"; + default: + return "th"; + } + } + + const shouldDisplay = useCallback((prompt_raw: string, date_raw: string) => { + if (searchText == "") { + return true; + } else { + const prompt = prompt_raw.toLowerCase(); + const date = date_raw.toLowerCase(); + + const parts = searchText.toLowerCase().split(" "); + + for (const part of parts) { + if (prompt.includes(part) || date.includes(part)) { + + } else { + return false; + } + }; + + return true; + } + }, [searchText]); + return ( -
- {userGeneratedImages.map((val, key) => ( - - ))} +
+
+
+
+ +
+
+ setSearchText(e.target.value)} inputSize="search" className="bg-transparent border-2 border-secondary pl-[49px]" placeholder="Search Library" /> +
+
+ {userGeneratedImages.map((val, key) => ( + + ))} +
); }; diff --git a/components/image-history.tsx b/components/image-history.tsx index 9ff47dd..5605ed1 100644 --- a/components/image-history.tsx +++ b/components/image-history.tsx @@ -8,9 +8,11 @@ import { Button } from "./ui/button"; import { storage } from "@/app/firebase"; import { deleteObject, ref } from "firebase/storage"; import { EditIcon, XIcon } from "./icons/prompt-ed-icons"; +import { ImageDeleteAlert } from "./image-delete-alert"; interface ImageHistoryProps { date: string; + formattedDate: string; prompt: string | undefined; url: string; objectName: string; @@ -19,6 +21,7 @@ interface ImageHistoryProps { export function ImageHistory({ date, + formattedDate, prompt, url, objectName, @@ -33,55 +36,22 @@ export function ImageHistory({ setDeleted(true); }; - function formatDate(dateString: string): string { - console.log(objectName); - const date = new Date(dateString); - - const options: Intl.DateTimeFormatOptions = { - month: "long", - day: "numeric", - year: "numeric", - }; - - const formattedDate = date.toLocaleDateString("en-US", options); - const day = date.getDate(); - const suffix = getDaySuffix(day); - - return formattedDate.replace(day.toString(), `${day}${suffix}`); - } - - function getDaySuffix(day: number): string { - if (day > 3 && day < 21) return "th"; - switch (day % 10) { - case 1: - return "st"; - case 2: - return "nd"; - case 3: - return "rd"; - default: - return "th"; - } - } - return ( <> {deleted ? ( <> ) : ( -
+
- {formatDate(date)}: {prompt} +

{formattedDate}: {prompt}

- - + {}} />
)} From af3bbdd7bdaf8add8da5b11b536953c9948ae5fd Mon Sep 17 00:00:00 2001 From: Benjamin Montgomery Date: Tue, 9 Jul 2024 19:44:13 -0400 Subject: [PATCH 12/13] minor visual tweaks --- app/image-library/page.tsx | 2 +- components/image-delete-alert.tsx | 2 +- components/image-history-boxes.tsx | 4 ++-- components/image-history.tsx | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/image-library/page.tsx b/app/image-library/page.tsx index 67f06b5..a48710d 100644 --- a/app/image-library/page.tsx +++ b/app/image-library/page.tsx @@ -80,7 +80,7 @@ export default function Home() {
- +
diff --git a/components/image-delete-alert.tsx b/components/image-delete-alert.tsx index 0f77548..8183ff7 100644 --- a/components/image-delete-alert.tsx +++ b/components/image-delete-alert.tsx @@ -18,7 +18,7 @@ export const ImageDeleteAlert: React.FC<{ }> = ({ onConfirm, onDeny }) => { return ( - + Are you sure? diff --git a/components/image-history-boxes.tsx b/components/image-history-boxes.tsx index 331c764..b64bece 100644 --- a/components/image-history-boxes.tsx +++ b/components/image-history-boxes.tsx @@ -130,7 +130,7 @@ export const ImageHistoryBox = () => { return (
-
+
@@ -138,7 +138,7 @@ export const ImageHistoryBox = () => {
setSearchText(e.target.value)} inputSize="search" className="bg-transparent border-2 border-secondary pl-[49px]" placeholder="Search Library" />
-
+
{userGeneratedImages.map((val, key) => (