mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
649efe551d
* use server response for local state updates * fix formatting * refactor: comprehensive server-response-first pattern implementation ## Major Changes ### LayerProps ID Required - Made `LayerProps.id` required (was optional) - All layers now guaranteed to have server-provided UUID - Enables reliable layer ID mapping from server responses ### useSelectPosition Hook Refactored - Added reusable `handleApiOperation` helper function - Refactored `itemUpdatePosition`, `itemUpdateParent`, `linkItem` - All functions now use server response + layer ID mapping - Consistent error handling and toast management ### itemFunctions.ts Complete Refactor - **submitNewItem**: Server response with layer mapping - **linkItem**: Server response preserves layer object - **unlinkItem**: Same pattern as linkItem - **handleDelete**: Simplified error handling - **onUpdateItem**: Complex function refactored for both update/create branches ### Benefits - ✅ Eliminates race conditions from manual state construction - ✅ Server response as single source of truth for all updates - ✅ Consistent error handling across all API operations - ✅ Items no longer disappear from map after updates - ✅ Type-safe layer ID mapping ### Testing - Updated ItemFunctions.spec.tsx with new toast patterns - Added required layer IDs to test objects - All 19 tests passing (3 skipped) - ESLint clean 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * fix linting * fix: resolve TypeScript undefined data errors - Add non-null assertions for result.data in conditional blocks - TypeScript now properly recognizes data is defined after success check - All linting and TypeScript errors resolved 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * fixed examples * remove unneccessary uuid generation --------- Co-authored-by: Claude <noreply@anthropic.com>
Example 2: Static Layers
In Example 1, we learned how to create a basic map app using utopia-ui. Now, we'll add static layers to our map.
Adding Sample Data
First, we create a new file called src/sample-data.ts and define some sample data:
export const places = [
{
"id": 51,
"name": "Stadtgemüse",
"text": "Stadtgemüse Fulda ist eine Gemüsegärtnerei in Maberzell, die es sich zur Aufgabe gemacht hat, die Stadt und seine Bewohner:innen mit regionalem, frischem und natürlich angebautem Gemüse mittels Gemüsekisten zu versorgen. Es gibt also jede Woche, von Frühjahr bis Herbst, angepasst an die Saison eine Kiste mit schmackhaftem und frischem Gemüse für euch, welche ihr direkt vor Ort abholen könnt.\r\n\r\nhttps://stadtgemuese-fulda.de",
"position": { "type": "Point", "coordinates": [9.632435, 50.560342] }
},
{
"id": 166,
"name": "Weidendom",
"text": "Free camping",
"position": { "type": "Point", "coordinates": [9.438793, 50.560112] }
}
];
export const events = [
{
"id": 423,
"name": "Hackathon",
"text": "Still in progress",
"position": { "type": "Point", "coordinates": [10.5, 51.62] },
"start": "2022-03-25T12:00:00",
"end": "2022-05-12T12:00:00"
}
];
Creating Layers
We want to create two layers:
- A "Places" layer for locations
- An "Events" layer for scheduled activities.
First, we import our sample data into src/App.tsx:
import { events, places } from "./sample-data";
Adding Layers to <UtopiaMap>
Next, we define our <Layer> components inside <UtopiaMap>:
<UtopiaMap center={[50.6, 15.5]} zoom={5} height="100dvh" width="100dvw">
<Layer
name="events"
markerIcon="calendar"
markerShape="square"
markerDefaultColor="#700"
data={events}
/>
<Layer
name="places"
markerIcon="point"
markerShape="circle"
markerDefaultColor="#007"
data={places}
/>
</UtopiaMap>
Running the Application
Finally, we start our development server to see the map with two layers:
npm run dev
➡️ In Example 3, we'll add tags to our map.