npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mycujoo/mcls-data-providers

v1.0.2-rc.3

Published

MCLS react context providers and utils for data fetching.

Downloads

8

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 api
  • authentication: { publicKey: string identityToken?: string } - This stores information about the public key and user identity token
  • eventInfo: EventInfo | null - information regarding the event as received from the api
  • timelineActions: ActionCall[] | null - list of mcls annotation action calls
  • error: 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 api
  • refetchTimeline: (updateId: string) => void - updates timeline action calls from timeline api
  • activeView: VIDEO | UPCOMING | AUTHORIZATION | GEOBLOCKED | NOT_FOUND | LOADING | CONCURRENCY_LIMIT
  • totalViewers: 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 objects
  • loadMore: () => Promise<void> - loads more events to the current list if available
  • isLoading: boolean / default true - indicates if there's an active request to get the event list
  • debug: 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 objects
  • loadMore: () => Promise<void> - loads more event pacakge objects to the current list if available
  • isLoading: boolean / default true - indicates if there's an active request to get the event package list
  • isLimitReached: 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 />}
    />
}