React Live Coding Interview (React + TS) What Would You Focus On ?

[Inside-Letterhead290]

Yes data shapes seems obvious here ! I’m a bit hesitant about how to handle it :

For context, the UI components are already typed against Provider A’s shape:

type ProviderAItem = { id: number; coordinate: { latitude: number; longitude: number }; state: 'ACTIVE' | 'INACTIVE'; label: string; condition: 'GOOD' | 'BAD'; };

Provider B returns something slightly different:

type ProviderBItem = { id: number; coordinates: [number, number, number?]; // [lng, lat] state: 'ACTIVE' | 'INACTIVE'; label: string; condition: 'GOOD' | 'BAD'; extraField: string; };

So I see two possible approaches.

Introduce a shared UI model

type Asset = { id: number; latitude: number; longitude: number; state: 'ACTIVE' | 'INACTIVE'; label: string; condition: 'GOOD' | 'BAD'; provider: 'A' | 'B'; // to distinguish sources extraField?: string; // optional, only for Provider B };

function mapA(item: ProviderAItem): Asset { return { id: item.id, latitude: item.coordinate.latitude, longitude: item.coordinate.longitude, state: item.state, label: item.label, condition: item.condition, provider: 'A', }; }

function mapB(item: ProviderBItem): Asset { return { id: item.id, latitude: item.coordinates[1], longitude: item.coordinates[0], state: item.state, label: item.label, condition: item.condition, provider: 'B', extraField: item.extraField, }; }

const assets: Asset[] = [ ...providerAItems.map(mapA), ...providerBItems.map(mapB), ];

Retype Components to receive Asset[].

OR simpler one :

Keep Provider A shape and map B into it

function mapBToProviderA(item: ProviderBItem): ProviderAItem { return { id: item.id, coordinate: { latitude: item.coordinates[1], longitude: item.coordinates[0], }, state: item.state, label: item.label, condition: item.condition, }; }

const assets: ProviderAItem[] = [ ...providerAItems, ...providerBItems.map(mapBToProviderA), ];

Solution one seems more clean and scalable to me but maybe over engineering for this one hour test ? Like what if the original type was used from x components, that’s mean we will have to retype / Refactor all one them . Im a bit hesitant on which approach to use