From 19a558740fbb27222ccf5b7eb5dea28f35508879 Mon Sep 17 00:00:00 2001
From: jcarmac3 <pokemonpower92@gmail.com>
Date: Sat, 15 Mar 2025 09:46:44 -0600
Subject: [PATCH] createcollagepage

---
 src/components/collage/CollageCard.module.css |  2 +-
 src/components/collage/CollageCard.tsx        |  2 +-
 src/components/collage/CollageItems.tsx       |  6 +--
 src/components/imageset/ImageSetCard.tsx      |  2 +-
 src/components/imageset/ImageSetItems.tsx     |  2 +-
 src/hooks/UseImageApi/UseImageApi.tsx         |  4 --
 src/pages/CollagePage.module.css              | 14 ++++++
 src/pages/CollagePage.tsx                     | 12 ++++-
 src/pages/CreateCollagePage.module.css        |  5 ++
 src/pages/CreateCollagePage.tsx               | 50 +++++++++++++++++++
 src/routes/Routes.tsx                         | 12 +++++
 11 files changed, 98 insertions(+), 13 deletions(-)
 create mode 100644 src/pages/CollagePage.module.css
 create mode 100644 src/pages/CreateCollagePage.module.css
 create mode 100644 src/pages/CreateCollagePage.tsx

diff --git a/src/components/collage/CollageCard.module.css b/src/components/collage/CollageCard.module.css
index 81a87d4..648af7d 100644
--- a/src/components/collage/CollageCard.module.css
+++ b/src/components/collage/CollageCard.module.css
@@ -1,4 +1,4 @@
-.collageCardContainer {
+.collageContainer {
 	background-color: lightgray;
 	display: flex;
 	flex-direction: column;
diff --git a/src/components/collage/CollageCard.tsx b/src/components/collage/CollageCard.tsx
index e416b10..7fcee4d 100644
--- a/src/components/collage/CollageCard.tsx
+++ b/src/components/collage/CollageCard.tsx
@@ -29,7 +29,7 @@ const CollageCard = ({ collage: collage }: CollageCardProps) => {
 	};
 
 	return (
-		<div key={collage.id} className={styles.collageContainer}>
+		<div className={styles.collageContainer}>
 			<p className={styles.collageName}>{collage.name}</p>
 			<p className={styles.collageDescription}>{collage.description}</p>
 			<button className={styles.collageButton} onClick={handleClick}>
diff --git a/src/components/collage/CollageItems.tsx b/src/components/collage/CollageItems.tsx
index 9de2914..8e44dd7 100644
--- a/src/components/collage/CollageItems.tsx
+++ b/src/components/collage/CollageItems.tsx
@@ -3,15 +3,15 @@ import CollageCard from "./CollageCard";
 
 import styles from "./CollageItems.module.css";
 
-type CollageGalleryProps = {
+type CollageItemsProps = {
 	collages: Collage[];
 };
 
-export const CollageGallery = ({ collages }: CollageGalleryProps) => {
+export const CollageItems = ({ collages }: CollageItemsProps) => {
 	return (
 		<div className={styles.collageItemsContainer}>
 			{collages.map((item) => (
-				<CollageCard collage={item} />
+				<CollageCard key={item.id} collage={item} />
 			))}
 		</div>
 	);
diff --git a/src/components/imageset/ImageSetCard.tsx b/src/components/imageset/ImageSetCard.tsx
index 51406e6..2ef6c64 100644
--- a/src/components/imageset/ImageSetCard.tsx
+++ b/src/components/imageset/ImageSetCard.tsx
@@ -17,7 +17,7 @@ export const ImageSetCard = ({ imageSet }: ImageSetCardProps) => {
 	};
 
 	return (
-		<div key={imageSet.id} className={styles.imageSetCardContainer}>
+		<div className={styles.imageSetCardContainer}>
 			<p className={styles.imageSetName}>{imageSet.name}</p>
 			<p className={styles.imageSetdescription}>{imageSet.description}</p>
 			<button className={styles.imageSetButton} onClick={handleClick}>
diff --git a/src/components/imageset/ImageSetItems.tsx b/src/components/imageset/ImageSetItems.tsx
index 91aecdf..7a8cdcc 100644
--- a/src/components/imageset/ImageSetItems.tsx
+++ b/src/components/imageset/ImageSetItems.tsx
@@ -11,7 +11,7 @@ export const ImageSetItems = ({ imageSets }: ImageSetItemsProps) => {
 	return (
 		<div className={styles.imageSetItemsContainer}>
 			{imageSets.map((item) => (
-				<ImageSetCard imageSet={item} />
+				<ImageSetCard key={item.id} imageSet={item} />
 			))}
 		</div>
 	);
diff --git a/src/hooks/UseImageApi/UseImageApi.tsx b/src/hooks/UseImageApi/UseImageApi.tsx
index 4fe06dd..ddcb5f3 100644
--- a/src/hooks/UseImageApi/UseImageApi.tsx
+++ b/src/hooks/UseImageApi/UseImageApi.tsx
@@ -1,4 +1,3 @@
-// UseImageApi.ts
 import { useEffect, useState } from "react";
 
 export interface ImageApiState {
@@ -23,7 +22,6 @@ export function useImageApi(
 		let mounted = true;
 
 		const fetchData = async () => {
-			// Clear previous state
 			setState((prev) => ({
 				...prev,
 				isLoading: true,
@@ -76,7 +74,6 @@ export function useImageApi(
 
 		return () => {
 			mounted = false;
-			// Cleanup previous objectURL if it exists
 			setState((prev) => {
 				if (prev.imageUrl) {
 					URL.revokeObjectURL(prev.imageUrl);
@@ -86,7 +83,6 @@ export function useImageApi(
 		};
 	}, [url, JSON.stringify(options)]);
 
-	// Cleanup objectURL when component unmounts
 	useEffect(() => {
 		return () => {
 			if (state.imageUrl) {
diff --git a/src/pages/CollagePage.module.css b/src/pages/CollagePage.module.css
new file mode 100644
index 0000000..0f8aacc
--- /dev/null
+++ b/src/pages/CollagePage.module.css
@@ -0,0 +1,14 @@
+.collagePage {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.collageCreateLink {
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: 1rem;
+	margin-bottom: 1rem;
+	width: 15rem;
+	height: 2rem;
+}
diff --git a/src/pages/CollagePage.tsx b/src/pages/CollagePage.tsx
index dfc85e3..c3ff02e 100644
--- a/src/pages/CollagePage.tsx
+++ b/src/pages/CollagePage.tsx
@@ -1,7 +1,10 @@
-import { CollageGallery } from "../components/collage/CollageItems";
+import { Link } from "react-router-dom";
+import { CollageItems } from "../components/collage/CollageItems";
 import { DataLoader } from "../components/common/DataLoader/DataLoader";
 import { ApiResponse, useApi } from "../hooks/UseApi/UseApi";
 
+import styles from "./CollagePage.module.css";
+
 export interface Collage {
 	db_id: number;
 	id: string;
@@ -18,7 +21,12 @@ const CollagePage = () => {
 		useApi<ApiResponse<Collage[]>>("/api/collages");
 	return (
 		<DataLoader state={{ isLoading, error, response }}>
-			{response && <CollageGallery collages={response.data} />}
+			<div className={styles.collagePage}>
+				<Link to="/createcollage" className={styles.collageCreateLink}>
+					Create your own!
+				</Link>
+				{response && <CollageItems collages={response.data} />}
+			</div>
 		</DataLoader>
 	);
 };
diff --git a/src/pages/CreateCollagePage.module.css b/src/pages/CreateCollagePage.module.css
new file mode 100644
index 0000000..3b61dd3
--- /dev/null
+++ b/src/pages/CreateCollagePage.module.css
@@ -0,0 +1,5 @@
+.createCollagePage {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
diff --git a/src/pages/CreateCollagePage.tsx b/src/pages/CreateCollagePage.tsx
new file mode 100644
index 0000000..a5f519e
--- /dev/null
+++ b/src/pages/CreateCollagePage.tsx
@@ -0,0 +1,50 @@
+import { ApiResponse, useApi } from "../hooks/UseApi/UseApi";
+import { ImageSet } from "./ImageSetPage";
+
+import styles from "./CreateCollagePage.module.css";
+import { DataLoader } from "../components/common/DataLoader/DataLoader";
+
+export interface TargetImage {
+	db_id: number;
+	id: string;
+	name: string;
+	description: string;
+	created_at: string;
+	updated_at: string;
+}
+
+const CreateCollagePage = () => {
+	const {
+		isLoading: targetsLoading,
+		error: targetsError,
+		response: targets,
+	} = useApi<ApiResponse<TargetImage[]>>("/api/targets");
+
+	const {
+		isLoading: setsLoading,
+		error: setsError,
+		response: imageSets,
+	} = useApi<ApiResponse<ImageSet[]>>("/api/imagesets");
+
+	const isLoading = targetsLoading || setsLoading;
+	const error = targetsError || setsError ? "Error loading form data" : null;
+	const formData =
+		targets && imageSets
+			? {
+					targets: targets?.data,
+					imageSets: imageSets?.data,
+			  }
+			: null;
+
+	return (
+		<div className={styles.createCollagePage}>
+			<DataLoader state={{ isLoading, error, response: formData }}>
+				<p>
+					Hello! {isLoading} {error} {JSON.stringify(formData)}
+				</p>
+			</DataLoader>
+		</div>
+	);
+};
+
+export default CreateCollagePage;
diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx
index bf97325..1550cff 100644
--- a/src/routes/Routes.tsx
+++ b/src/routes/Routes.tsx
@@ -18,6 +18,7 @@ const Root = () => {
 const HomePage = lazy(() => import("../pages/HomePage"));
 const ImageSetPage = lazy(() => import("../pages/ImageSetPage"));
 const CollagePage = lazy(() => import("../pages/CollagePage"));
+const CreateCollagePage = lazy(() => import("../pages/CreateCollagePage"));
 const NotFound = lazy(() => import("../pages/NotFound"));
 
 const router = createBrowserRouter([
@@ -54,6 +55,17 @@ const router = createBrowserRouter([
 			},
 		],
 	},
+	{
+		path: "/createcollage",
+		element: <Root />,
+		errorElement: <NotFound />,
+		children: [
+			{
+				index: true,
+				element: <CreateCollagePage />,
+			},
+		],
+	},
 ]);
 
 export function Routes() {