@bbp/react-nexus

@bbp/react-nexus

A set of React components for Nexus

Usage

Install:

npm i @bbp/react-nexus @bbp/nexus-sdk

Wrap your App with the Provider

import React from 'react';
import { render } from 'react-dom';
import { NexusProvider } from '@bbp/react-nexus';
import { createNexusClient } from '@bbp/nexus-sdk';

const nexus = createNexusClient({
  uri: 'https://sandbox.bluebrainnexus.io/v1',
});

const rootElement = document.getElementById('root');
render(
  <NexusProvider nexusClient={nexus}>
    <App />
  </NexusProvider>,
  rootElement,
);

Use the useNexus hook to call your nexus client instance:

import { useNexus } from '@bbp/react-nexus';
import { OrganizationList, ListOrgOptions } from '@bbp/nexus-sdk';

const ListOrg = ({ options }: { options?: ListOrgOptions }) => {
  const state = useNexus<OrganizationList>(nexus =>
    nexus.Organization.list(options),
  );

  if (state.loading) {
    return <p>Loading Organization...</p>;
  }
  if (state.error) {
    return <p>An error occurred: {state.error.reason}</p>;
  }
  return state.data._results.map(org => <p>{org._label}</p>);
};

<ListOrg deprecated={true} />

useNexus hook uses the default react's useEffect so you can pass a list of values to watch in order to automatically refresh a new state:

const GetOrg = ({ orgLabel }: { orgLabel: String }) => {
  const state = useNexus(nexus => nexus.Organization.get(orgLabel), [orgLabel]);
  return children({ ...state });
};

const App = () => {
  const [orgLabel, setOrgLabel] = React.useState("defaultOrg");
  return (
    <>
      <input name="org-label" onChange={e => setOrgLabel(e.target.value)} />
      <GetOrg orgLabel={orgLabel}>
        {({ data, loading, error }) => {
          if (loading) {
            return <p>Loading Organization...</p>;
          }
          if (error) {
            return <p>An error occurred loading your the organization {orgLabel}: {error.reason}</p>;
          }
          return (<p>{data._label}</p>);
        }}
      </GetOrg>
    </>
  );
}

You can also directly get the instance of the nexus client from the context:

import { useNexusContext } from '@bbp/react-nexus';

const Component = () => {
  const nexus = useNexusContext();

  // use it the way you want here
  // nexus.Organization.list().then().catch()....
}

There are some very handy components too:

import { AccessControl } from '@bbp/react-nexus';

const RenderBasedOnPermission = () => (
  <AccessControl
    permissions={["projects/read", "resources/write"]}
    path="/org"
    noAccessComponent={(missingPerms) => <NoAccess />}
    loadingComponent={<p>Loading...</p>}
  >
    <Access />
  </AccessControl>
)