use image id for key & use unique images in seed

Author: damiensedgwick

app/routes/users+/$username_+/notes.$noteId.tsx

@@ -32,6 +32,7 @@ export async function loader({ params }: Route.LoaderArgs) {
 			updatedAt: true,
 			images: {
 				select: {
+					id: true,
 					altText: true,
 					objectKey: true,
 				},
@@ -123,7 +124,7 @@ export default function NoteRoute({
 			<div className={`${displayBar ? 'pb-24' : 'pb-12'} overflow-y-auto`}>
 				<ul className="flex flex-wrap gap-5 py-5">
 					{loaderData.note.images.map((image) => (
-						<li key={image.objectKey}>
+						<li key={image.id}>
 							<a href={getNoteImgSrc(image.objectKey)}>
 								<Img
 									src={getNoteImgSrc(image.objectKey)}

prisma/seed.ts

@@ -54,19 +54,21 @@ async function seed() {
 
 			// Add images to note
 			const noteImageCount = faker.number.int({ min: 1, max: 3 })
-			for (let imageIndex = 0; imageIndex < noteImageCount; imageIndex++) {
-				const imgNumber = faker.number.int({ min: 0, max: 9 })
-				const noteImage = noteImages[imgNumber]
-				if (noteImage) {
-					await prisma.noteImage.create({
+			const selectedImages = faker.helpers.arrayElements(
+				noteImages,
+				noteImageCount,
+			)
+			await Promise.all(
+				selectedImages.map((noteImage) =>
+					prisma.noteImage.create({
 						data: {
 							noteId: note.id,
 							altText: noteImage.altText,
 							objectKey: noteImage.objectKey,
 						},
-					})
-				}
-			}
+					}),
+				),
+			)
 		}
 	}
 	console.timeEnd(`👤 Created ${totalUsers} users...`)