The V2 frontend now uses SWR for data fetching, I’d recommend having a quick read through this to get a feel for what the library does. SWR allows us to create hooks to access each backend endpoint as well as adding things like caching and request deduplication.

At the time of writing, we currently have the following hooks:

• useBuildings() to fetch data for all buildings, with the following derived hooks:

  • useBuilding(buildingId) to extract the data for a single building

• useStatus() to fetch the status of all buildings and rooms, with the following derived hooks:

  • useBuildingStatus(buildingId) to extract the status of all rooms in a building

  • useRoomStatus(roomId) to extract the status of a single room

• useBookings(roomId) to fetch all bookings for a room

Motivation

Every time we want to fetch data, we would usually need to do something like this

...

• If error is not NULL, an error occurred

• Else if data is undefined, the data is still loading

• Else, data has been fetched successfully

We currently have the following hooks:

• useBuildings() to fetch data for all buildings, with the following derived hooks:

  • useBuilding(buildingId) to extract the data for a single building

• useStatus() to fetch the status of all buildings and rooms, with the following derived hooks:

  • useBuildingStatus(buildingId) to extract the status of all rooms in a building

  • useRoomStatus(roomId) to extract the status of a single room

• useBookings(roomId) to fetch all bookings for a room

Making SWR Hooks

We build our hooks around the useSWR hook, which accepts a key and a fetcher function and returns an object containing data and error (among other things). We also should specify a type parameter to tell TypeScript what this hook returns.

...