createcollagepage

src/components/collage/CollageCard.module.css

@@ -1,4 +1,4 @@
-.collageCardContainer {
+.collageContainer {
 	background-color: lightgray;
 	display: flex;
 	flex-direction: column;

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}>

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>
 	);

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}>

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>
 	);

src/hooks/UseImageApi/UseImageApi.tsx

@@ -1,4 +1,3 @@
-// UseImageApi.ts
 import { useEffect, useState } from "react";
 
 export interface ImageApiState {
@@ -23,7 +22,6 @@
 		let mounted = true;
 
 		const fetchData = async () => {
-			// Clear previous state
 			setState((prev) => ({
 				...prev,
 				isLoading: true,
@@ -76,7 +74,6 @@
 
 		return () => {
 			mounted = false;
-			// Cleanup previous objectURL if it exists
 			setState((prev) => {
 				if (prev.imageUrl) {
 					URL.revokeObjectURL(prev.imageUrl);
@@ -84,16 +81,15 @@
 				return prev;
 			});
 		};
 	}, [url, JSON.stringify(options)]);
 
-	// Cleanup objectURL when component unmounts
 	useEffect(() => {
 		return () => {
 			if (state.imageUrl) {
 				URL.revokeObjectURL(state.imageUrl);
 			}
 		};
 	}, []);
 
 	return state;
 }

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;
+}

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>
 	);
 };

src/pages/CreateCollagePage.module.css

@@ -0,0 +1,5 @@
+.createCollagePage {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}

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;

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() {