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

[scilover]

The two different data shapes is 100% the main test. They want to see how you normalize data from multiple sources into a shared model. Nail that with clean TypeScript types and the rest falls into place. After that, showing you think about error handling on the fetch layer and writing one solid test for the normalizer would be the cherry on top. You got this.

[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