Fix note image duplication on navigate (#1047)

Co-authored-by: Kent C. Dodds <me@kentcdodds.com>

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

app/utils/cache.server.ts

@@ -1,5 +1,6 @@
 import fs from 'node:fs'
 import path from 'node:path'
+import { DatabaseSync } from 'node:sqlite'
 import {
 	cachified as baseCachified,
 	verboseReporter,
@@ -13,7 +14,6 @@ import {
 } from '@epic-web/cachified'
 import { remember } from '@epic-web/remember'
 import { LRUCache } from 'lru-cache'
-import { DatabaseSync } from 'node:sqlite'
 import { z } from 'zod'
 import { updatePrimaryCacheValue } from '#app/routes/admin+/cache_.sqlite.server.ts'
 import { getInstanceInfo, getInstanceInfoSync } from './litefs.server.ts'

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...`)

tests/e2e/passkey.test.ts

@@ -24,7 +24,7 @@ test('Users can register and use passkeys', async ({
 	navigate,
 	login,
 }) => {
-	const user = await login()
+	await login()
 
 	const { client, authenticatorId } = await setupWebAuthn(page)