@citydna/experience

@citydna/experience

This package contains common code shared between the app-townhall-experience, app-aboriginal-melbourne-app, and app-melbourne-historical-map apps. There are many common functions & patterns between the two of them. They are centralised here:

Components

AuthQRCode

A QR code generator that hooks into the Amplify API and generates auth tokens. These auth tokens are passed via URL in the QR code, along with other information such as experience, websocket channel, and the stack the user should join.

Avatar

An avatar that generally shows the icon and colour assigned to the anonymous user.

/common

This contains artifacts common to the experiences and, such as websocket event names, icons used, and helper functions to parse data into the correct shape.

• icons
  • aboriginal-melbourne-themes
  • indigenous

These icons can be auto-converted to TypeScript react components by running the yarn build:icons script when in this folder.

ConfigProvider

Provides config for a given experience based on the experience passed in the URL. Config for the apps are stored in the citydna-configs-bucket. These control things such as;

• what data/resources are displayed and used
• copy & translations for the apps, as well as custom images
• how the app displays on the user's phone

A local copy of these is kept in /apps/citydna-app-townhall-public/public/config.

FeaturePropertiesAccessorProvider

Context wrapper to wrap mini-applications that takes a callback that consumes fetched data and returns an object with appropriate parameters.

/hooks

• blurHashToURL - Helper function that will return a blurhash image
• useBuildProjectionImage - builds an object containing content for the City DNA projection map in Town Hall
• useCardStack - listens to websocket events and manages a queue of content to display.
• useRemoteConfig - downloads and stores config, mainly used by ConfigProvider.
• useEsriModules - a react-friendly wrapper for esri-loader to load in arcgis-js modules.
• useFeatureLayers - pass in feature layer URLs and get back esri FeatureLayer instances.
• useImage - a flexible, lazy-loader for images that can handle IIIF, blurhashes, S3 and regular https image URLs
• useIsIdle - toggles state to indicate that a timeout length has been exceeded
• useLoadFullCardFromAgol - often just an ID is provided. This hook loads the remaining information for a card.
• useMouseIsIdle - toggles state to indicate that the mouse has been idle for a prescribed amount of time
• useRandomFeature - collates a list of IDs on a feature layer and randomly loads one of them.

Map Experiences

Components shared across the Aboriginal Melbourne and Melbourne Historical Map Town Hall experiences.

TourCard

The small card that pops up when a user taps a content item in citydna-app-townhall-* apps.

TourCardStack

A managed stack of TourCards that uses useCardStack to track and visualise content waiting in a queue.