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

@aller/cyclops-frontend-react

v2.8.0

Published

Front end abstractions for interacting with the cyclops API

Downloads

784

Readme

Design

While all datatypes returned in a CyclopsResponse are readonly, we can think of cyclops as returning two types of data, namely transient user state and cachable public data. For example the state of a User may change due to their interaction with the website, updating a subscription for example. On the other hand there is cachable data like the Catalogue (a big old JSON data structure that contains all Aller Media brands, products and deals) that is not expected to change due to user interation and is infact public (one can perform a GET request without any cookies)

For this reason cyclops-frontend-react exposes two separate contexts CyclopsUserContext and CyclopsDataContext.

CyclopsUserContext

ICyclopsUserContext; // interface
CyclopsUserContextProvider;
useCyclopsUserContext: () => ICyclopsUserContext;

The cyclopsUserContext ensures that any action that requires the User data to be reloaded is performed automatically. This means that you do not have to worry about the User object becoming stale. As an example:

import {
  useCyclopsUserContext,
  ICyclopsUserContext,
  CyclopsResponse,
  IUser,
} from 'cyclops-frontend-react';

export const MyComponent = () => {
  const context: ICyclopsUserContext = useCyclopsUserContext();
  /* the userResponse is guaranteed to have a boolean value `.loading`. */
  if (context.user.loading) {
    return <div>you spin me right round baby right round</div>;
  }
  if (context.user.error) {
    /*
    cyclops-front does not currently try to hide the errors
    insead it catches and wraps them in the response.
    Note that an error may be due to the network - or due to
    a schema validation error.
    */
    return <div>Ooops!</div>;
  }
  if (context.user.result) {
    return <div>Hello {context.user.result.fullName}</div>;
  }
  return <div>The unknown user</div>;
};

managed sessions

If you only need to add a login button to your page then you can use the CyclopsSessionButton. This is a compenent that relies upon the existance of the CyclopsUserContextProvider and handles login status for you.

CyclopsDataContext

ICyclopsDataContext; // interface
CyclopsDataContextProvider;
useCyclopsDataContext: () => ICyclopsDataContext;

The data context currently only contains the Catalogue datastructure. This data can only be fetched as is cachable. This context is most likely only interesting if you are working on the minside webpage.

Contracts (JSON spec)

One of the main responsibilities of this library is to provide a contract with cyclops-api - your one stop shop for all user related interactions.

Every response value from the api is verified using the ajv libray (JSON schema).

When an object returned from the cyclops-api is exposed to the user of this library it returned as a CyclopsResponse type. This actually means that the responses are not returned as Promises.

export interface CyclopsError {
  error: any;
}

export interface CyclopsResponse<T> {
  loading: boolean;
  result?: T;
  error?: CyclopsError;
}