04/03: fix api in problem, add waitForLoadState in solution

Author: kettanaito

exercises/03.guides/04.problem.api-mocking/app/routes/users+/$username_+/__note-editor.tsx

@@ -57,12 +57,11 @@ export const NoteEditorSchema = z.object({
 	location: z.string().optional(),
 })
 
-export type GoogleFindPlaceApiResponse = {
-	candidates: Array<{
-		place_id: string
-		formatted_address: string
-	}>
-}
+export type NominatimSearchResponse = Array<{
+	place_id: number
+	addresstype: 'country' | 'city'
+	display_name: string
+}>
 
 export function NoteEditor({
 	note,
@@ -89,22 +88,23 @@ export function NoteEditor({
 	const imageList = fields.images.getFieldList()
 
 	const { data: locationSuggestions } = useQuery<
-		GoogleFindPlaceApiResponse | undefined
+		NominatimSearchResponse | undefined
 	>({
-		queryKey: ['location-suggestions'],
+		queryKey: ['location-suggestions', fields.location.value],
 		queryFn: async ({ signal }) => {
 			await new Promise((resolve) => setTimeout(resolve, 300))
 
 			if (!signal.aborted && fields.location.value) {
-				const url = new URL(
-					'https://maps.googleapis.com/maps/api/place/findplacefromtext/json',
-				)
-				url.searchParams.set('key', 'FOO')
-				url.searchParams.set('input', fields.location.value)
-				url.searchParams.set('inputtype', 'textquery')
-				url.searchParams.set('fields', 'place_id,formatted_address')
+				const url = new URL('https://nominatim.openstreetmap.org/search')
+				url.searchParams.set('q', fields.location.value)
+				url.searchParams.set('format', 'jsonv2')
 				const response = await fetch(url)
-				return response.json() as Promise<GoogleFindPlaceApiResponse>
+				const locations = (await response.json()) as NominatimSearchResponse
+				return locations.filter(
+					(location) =>
+						location['addresstype'] === 'city' ||
+						location['addresstype'] === 'country',
+				)
 			}
 		},
 		enabled: !!fields.location.value,
@@ -144,9 +144,10 @@ export function NoteEditor({
 						/>
 						<ComboboxField
 							options={
-								locationSuggestions?.candidates.map((candidate) => ({
-									label: candidate.formatted_address,
-									value: candidate.formatted_address,
+								locationSuggestions?.map((location) => ({
+									id: location.place_id,
+									label: location.display_name,
+									value: location.display_name,
 								})) || []
 							}
 							labelProps={{ children: 'Location' }}

exercises/03.guides/04.problem.api-mocking/tests/e2e/notes-create.test.ts

@@ -53,7 +53,7 @@ test('displays location suggestions when creating a new note', async ({
 	// 🐨 Assert that the full location name has been filled into the `locationInput`.
 	// 💰 expect(locator).toHaveValue(value)
 
-	// 🐨 CLick on the "Submit" button to create a new note.
+	// 🐨 Click on the "Submit" button to create a new note.
 
 	// 🐨 Finally, assert that a heading with the new note's title is visible on the page.
 	// 💰 expect(locator)toBeVisible()

exercises/03.guides/04.solution.api-mocking/app/routes/users+/$username_+/__note-editor.tsx

@@ -58,8 +58,8 @@ export const NoteEditorSchema = z.object({
 })
 
 export type NominatimSearchResponse = Array<{
-	addresstype: 'country' | 'city'
 	place_id: number
+	addresstype: 'country' | 'city'
 	display_name: string
 }>
 

exercises/03.guides/04.solution.api-mocking/playwright.config.ts

@@ -13,10 +13,10 @@ export default defineConfig({
 	forbidOnly: !!process.env.CI,
 	retries: process.env.CI ? 2 : 0,
 	workers: process.env.CI ? 1 : undefined,
-	reporter: 'html',
+	reporter: 'list',
 	use: {
 		baseURL: `http://localhost:${PORT}/`,
-		trace: 'on-first-retry',
+		screenshot: 'on-first-failure',
 		contextOptions: {
 			reducedMotion: 'reduce',
 		},

exercises/03.guides/04.solution.api-mocking/tests/e2e/notes-create.test.ts

@@ -30,13 +30,12 @@ test('displays location suggestions when creating a new note', async ({
 
 	const { user } = await authenticate({ as: 'user' })
 	await navigate('/users/:username/notes/new', { username: user.username })
+	await page.waitForLoadState('networkidle')
 
 	await page.getByLabel('Title').fill('My note')
 	await page.getByLabel('Content').fill('Hello world')
 
 	const locationInput = page.getByLabel('Location')
-	await locationInput.waitFor({ state: 'visible' })
-
 	await locationInput.fill('San')
 	await expect(page.getByRole('option')).toHaveText([
 		'San Francisco',