feat(frontend): add the map picker - #117
Conversation
Fourth of eight. Location picking is self-contained enough to read on its own: a Baidu Maps integration with two implementations behind one shared types/services/styles trio. The web build loads the JS SDK directly; the native build drives the same SDK inside a WebView and talks to it over a message bridge. MapPicker.tsx is a single-line re-export of the web build. It resolves on neither platform, since Metro takes .native.tsx on device and .web.tsx on web, so its only real effect is to point tsc at the web implementation and leave the native one unchecked. Recorded as-is; the refactor fixes it.
![fennoai[bot]](https://avatars.githubusercontent.com/in/1924301?s=60&v=4){kind=small}
| }; | ||
| const initialJson = JSON.stringify(initialLocation); | ||
| const centerJson = JSON.stringify(center); | ||
|
|
There was a problem hiding this comment.
[P1] Escape values before embedding them into the HTML script. initialLocation can contain a user-controlled address, and JSON.stringify() does not neutralize </script>. An address such as </script><script>...</script> therefore breaks out of this script block and executes inside the WebView (and can forge bridge messages). Serialize for an HTML-script context, e.g. replace < with \u003c (and handle the other script-sensitive characters) before interpolation.
There was a problem hiding this comment.
Fixed in f97a12c. Initial location and map center values now use HTML-safe inline-script serialization for <, >, &, U+2028, and U+2029. npm run check passes.
| @@ -0,0 +1 @@ | |||
| export { MapPicker } from './MapPicker.web'; | |||
There was a problem hiding this comment.
[P1] Wire the picker into an existing screen or navigation flow. Nothing outside these newly added files imports MapPicker; App.tsx still renders only HomeScreen, so this PR has no user-reachable map-picker UI on either web or native.
There was a problem hiding this comment.
Fixed in f97a12c. HomeScreen now exposes a real map-picker entry, preserves the selected location, and lets the user reopen and edit it. npm run check passes.
| @@ -0,0 +1,26 @@ | |||
| import type { MapLocation } from './MapPicker.types'; | |||
|
|
|||
| export const BAIDU_MAP_AK = process.env.EXPO_PUBLIC_BAIDU_MAP_AK?.trim() ?? ''; | |||
There was a problem hiding this comment.
[P2] Document the required public map key. The component now depends on EXPO_PUBLIC_BAIDU_MAP_AK, but frontend/.env.example contains only the API URL. A fresh setup therefore always reaches the missing-key error with no documented configuration path; add the variable and any required Baidu JSAPI/referrer setup instructions.
1 participant
Summary
MapPicker.*, overlay, services)Validation
npm cinpm run checknpx expo export --platform android --output-dir dist