@mycujoo/mcls-data-providers
v1.0.2-rc.3
Published
MCLS react context providers and utils for data fetching.
Downloads
43
Maintainers
Keywords
Readme
MCLS data providers
MCLS react context providers and utils for data fetching.
Event state
EventContext
This is a react context holding event information.
isLoading
: boolean / default true - This indicates if the event state finished getting initial data from the apiauthentication
: { publicKey: string identityToken?: string } - This stores information about the public key and user identity tokeneventInfo
: EventInfo | null - information regarding the event as received from the apitimelineActions
: ActionCall[] | null - list of mcls annotation action callserror
: notFound | invalidPublicKey | domainEmbedBlocked | geoBlocked | noEntitlement | unexpectedError | null - information regarding any errors that might occur when fetching events.refetch
: (updateId: string) => void - updates event information from apirefetchTimeline
: (updateId: string) => void - updates timeline action calls from timeline apiactiveView
: VIDEO | UPCOMING | AUTHORIZATION | GEOBLOCKED | NOT_FOUND | LOADING | CONCURRENCY_LIMITtotalViewers
: string - number of active users
EventContextProvider
This component handles the creation and management of the state for a single event.
Example of usage
import { EventContextProvider, useEventState } from '@mycujoo/mcls-data-providers'
function EventPageWithContext() {
return <EventContextProvider publicKey={"YOUR_PUBLIC_KEY"} eventId={"YOUR_EVENT_ID"} identityToken={"YOUR_IDENTITY_TOKEN"} >
<EventPageInfo />
</EventContextProvider>
}
const EventPageInfo = () => {
const { isLoading, eventInfo, activeView} = useEventState()
const eventMetadata = eventInfo.metadata
const renderView = (view) => {
switch (view) {
case 'VIDEO':
return 'render video player screen'
case 'UPCOMING':
return 'render upcoming screen'
case 'AUTHORIZATION':
return 'render ppv screen'
case 'GEOBLOCKED':
return 'render geoblocked screen'
case 'NOT_FOUND':
return 'render not found screen'
case 'LOADING':
return 'render loading screen'
case 'CONCURRENCY_LIMIT':
return 'render concurrency limit screen'
}
}
return eventInfo ? <div>
<h1>{eventInfo.title}</h1>
<p>{eventInfo.description}</p>
<span>{eventMetadata.customEventTypeProp}</span>
<div>network status: {isLoading? 'loading': 'loaded'}</div>
<div>{renderView(activeView)}</div>
</div> : null
}
Additional hooks for more granular state updates:
const { timelineActions, isLoading } = useEventTimeline()
const refreshTimeline = useTimelineRefetch() // refreshTimeline()
const refreshEvent = useEventRefetch() // refreshEvent()
const isConcurrencyExceeded = useIsConcurrencyLimitExceeded()
const activeViewers = useEventTotalViewers()
const streamObject = useEventStream()
const source = useStreamSource()
const { metadata, isLoading } = useEventMetadata()
const authHeader = useAuthentication()
const { eventInfo, isLoading } = useEvent()
Events list state
EventsContext
This is a react context holding information about a list of events.
events
: T[] / default [] - list of event objectsloadMore
: () => Promise<void> - loads more events to the current list if availableisLoading
: boolean / default true - indicates if there's an active request to get the event listdebug
: boolean / default false - logs events for debugging
EventsContextProvider
This component handles the state creation and management for a list of events. This can be used in combination to MCLS Slider or MCLS Grid for various display options.
Example of usage
import { EventsContextProvider, useEventsStore } from '@mycujoo/mcls-data-providers'
const refreshRateMs = 10 * 60 * 1000
const searchKey = ''
const eventReadMask = ['id', 'name', 'physical.coordinates', 'physical.continent_code']
type LightEventWithLocation = {
id: string,
name: string,
physical: {
coordinates: {
latitude: number
longiture: number
},
continent_code: string
}
}
const EventsSection = () => {
const filter = {
start_after_time: (startTime).toISOString(),
start_before_time: (endTime).toISOString(),
status: ['EVENT_STATUS_SCHEDULED', 'EVENT_STATUS_STARTED'],
continent_codes: ['EU', 'NA'],
country_codes: ['NL', 'US'],
}
return <EventsContextProvider
publicKey={"YOUR_PUBLIC_KEY"}
orderBy="START_TIME_ASC"
pageSize={9}
filter={filter}
eventReadMask={eventReadMask}
search={searchKey}
refreshRateMs={refreshRateMs}
debug
>
<CalendarSection />
</EventsContextProvider>
}
const CalendarSection = () => {
const { events, isLoading, loadMore } = useEventsStore()
return <div>
{events && events.map((item: LightEventWithLocation) => (<div key={item.id}>
<h1>{item.name}</h1>
<div>longitude: {item.physical.coordinates?.longitude}</div>
<div>latitude: {item.physical.coordinates?.latitude}</div>
</div>))
}
<button onClick={() => { loadMore(false) }}>Load more</button>
</div>
}
Additional hooks for more granular state updates:
const useEvents = useEvents<CustomEventType>()
const loadMore = useLoadMoreEvents() // loadMore(isLoading); isLoading: boolean / default true - set to false if isLoading should not change when loading more
const isLoading = useIsLoadingEvents()
useEventsList
Hook for fetching event list data directly used internally by the context
Example of usage:
import { useEventsList, buildKQLQuery } from '@mycujoo/mcls-data-providers'
const CustomEventList = () => {
const { events: liveEvents, loadMore: loadMoreLive, isLoading: isLoadingLive } = useEventsList({
publicKey: 'YOUR_PUBLIC_KEY',
pageSize: 5,
orderBy: 'START_TIME_DESC',
filter: buildKQLQuery({
country_codes: ['NL', 'US'],
status: ['EVENT_STATUS_STARTED'],
})
})
const { events: popularEvents, loadMore: loadMorePopular, isLoading: isLoadingPopular } = useEventsList({
publicKey: 'YOUR_PUBLIC_KEY',
pageSize: 3,
orderBy: 'VIEWS_DESC',
filter: buildKQLQuery({
status: ['EVENT_STATUS_FINISHED'],
'metadata.custom.nested.property': 'Your value'
})
})
const { events: selectedEvents, isLoading: isLoadingPopular } = useEventsList({
publicKey: 'YOUR_PUBLIC_KEY',
featuredEventIds: ['TEST_EVENT_1', 'TEST_EVENT_2', 'TEST_EVENT_3']
})
...
}
Translation state
translate
Utility funtion for translation common mcls terms:
Example of usage
import { translate, SupportedLanguages } from '@mycujoo/mcls-data-providers'
const lang: SupportedLanguages = 'it'
console.log(translate('live', lang))
console.log(translate('Watch', lang))
console.log(translate('FullTime', lang))
Packages state
EventPackagesContext
This is a react context holding information about a list of event packages.
packages
: Package[] / default [] - list of event package objectsloadMore
: () => Promise<void> - loads more event pacakge objects to the current list if availableisLoading
: boolean / default true - indicates if there's an active request to get the event package listisLimitReached
: boolean / default false - indicates if there's more data to fetch (useful for pagination)debug
: boolean / default false - logs events for debugging
EventPackagesContextProvider
This component handles the state creation and management for a list of event pacakges. This can be used in combination to MCLS Slider or MCLS Grid for various display options.
Example of usage
import { EventPackagesContextProvider, useEventsStore } from '@mycujoo/mcls-data-providers'
const Paywall = () => {
return <EventPackagesContextProvider
publicKey={publicKey}
identityToken={identityToken}
eventId={eventId}
>
<PaywallSlider />
</EventPackagesContextProvider>
}
useEventPackages
Hook for fetching event packages list data (used internally by the context)
Example of usage:
import { useEventPackagesList } from '@mycujoo/mcls-data-providers'
import { Grid } from '@mycujoo/mcls-components-grid'
const CustomEventPackagesList = () => {
const {
packages,
loadMore,
createOrder,
isLoading,
isLimitReached
} = useEventPackagesList({
publicKey: 'YOUR_PUBLIC_KEY',
identityToken: 'YOUR_USER_IDENTITY_TOKEN'
pageSize: 5,
refreshRateMs: 60000,
})
if (!isLoading) return null
return <Grid
data={packages}
title="Event packages"
lang="es"
onSeeAll={() => { console.log("On see all click") }}
onLoadMore={loadMore}
config={config}
isLoading={isLoading}
limitReached={limitReached}
className="my-custom-grid"
card={<PackageCard />}
preloadCard={<PreloadCard />}
noDataContent={<NoContent />}
/>
}