hummhive-react-web-data

Power your React site with public and/or encrypted members-only data from HummHive.

This package abstracts all the encryption, decryption, public/private key generation and HummHive data-bridge calls into a React Context Object that contains:

1. A HummHive state object
2. Actions to fetch or create data
3. A set of React Hooks to simplify usage of encrypted blob data.

Installation

1. Install with npm install @hummhive/react-web-data

Usage Examples

Using state

import React, { useContext } from 'react';
import { HummContext } from '@hummhive/react-web-data';

const MyComponent = () => {
  const { state } = useContext(HummContext);

  return <h1>Hello {state.hive.name}</h1>;
};

Fetching state

import React, { useEffect, useContext } from 'react';
import { HummContext } from '@hummhive/react-web-data';

const MyComponent = () => {
  const { state, actions } = useContext(HummContext);

  // fetch hive data when the component mounts
  useEffect(() => {
    if (!state.hive) actions.getHive();
  }, []);

  if (!state.hive) return <p>Loading...</p>;

  return <h1>Hello {state.hive.name}</h1>;
};

Joining a Hive

import React, { useEffect, useContext, useState } from 'react';
import { HummContext } from '@hummhive/react-web-data';

const MyComponent = () => {
  const { state, actions } = useContext(HummContext);
  const [error, setError] = useState(null);

  const handleJoin = async () => {
    try {
      await actions.joinHive(state.hive, USERNAME, EMAIL, GROUP_ID);
    } catch (err) {
      setError(err.message);
    }
  };

  return <button onClick={handleJoin}>Join</button>;
};

The State Object

const { state } = useContext(HummContext);

The state object contains all the data you need to build a HummHive website.

Name	Type	Notes
isLoggedIn	boolean
memberStatus	'non-member' | 'pending-member' | 'member'
keySet	MemberKeys
keySetBase64	MemberKeysBase64
secretKeyBase64	string	The base64 of the member encryption secret key byte array concatenated to the end of the signing key byte array.
hive	Hive
me	Member
groups	Array<Group>	A list of groups available to join.
isLoadingStoryIndex	Boolean
storyIndex	Array<StoryIndex>	An index of stories published using @honeyworks/editor
story	Stories	A map of stories published using @honeyworks/editor
loadingStories	Array<string>	A list of story IDs that are currently being fetched

Types

type Hive = {
  name: string;
  description: string;
  signingPublicKey: string;
  encryptionPublicKey: string;
  createdAt: string;
  updatedAt: string;
};

type Member = {
  id: string;
  email: string;
  username: string;
  hive: string;
  role: string;
  groups: Array<GroupMembership>;
  encryptionPublicKey: string;
  signingPublicKey: string;
  createdAt: string;
  updatedAt: string;
};

type GroupMembership = {
  expiration: string;
  groupId: string;
  intervalCount: bigint;
  joinedAt: string;
};

type Group = {
  id: string;
  name: string;
  description: string;
  amount: bigint;
  currency: string;
  interval: string;
  isActive: boolean;
};

type StoryIndex = {
  id: string;
  title: string;
  slug: string;
  createdAt: string;
  updatedAt: string;
  publishedAt: string;
  summary: string;
};

type Stories = {
  [storyId: string]: Story;
};
type Story = {
  id: string;
  title: string;
  slug: string;
  createdAt: string;
  updatedAt: string;
  publishedAt: string;
  summary: string;
};

type MemberKeys = {
  signing: KeyPair;
  encryption: KeyPair;
};

type KeyPair = {
  public: ByteArray;
  secret: ByteArray;
};

type ByteArray = Array<bigint>;

type MemberKeysBase64 = {
  signing: KeyPairBase64;
  encryption: KeyPairBase64;
};

type KeyPairBase64 = {
  public: string;
  secret: string;
};

Actions

const { actions } = useContext(HummContext);

The actions object contains all the functions you need in order to hydrate the state object, join a Hive, login and logout.

getHive(): Promise<void>

joinHive(hive: Hive, username: string, email: string, groupId: string): Promise<void>

getMe(): Promise<void>

getGroups(): Promise<void>

login(base64KeySet: string): Promise<void>

logout(): Promise<void>

getStoryIndex(): Promise<void>

getStory(id: string): Promise<void>

Hooks

import { HummHooks } from '@hummhive/react-web-data';

Currently the only available hook is useBlob. This handles the fetching and decryption of blobs within a component.

useBlob(filename: string): { blob: DOMString, isLoading: boolean, error: string }