react-pipe

Whats this then?

react-pipe is a react library - that enables a react applicatoin to easily integrate with @happy-code/pipes built applications

It provides easy access to shared context, with hooks and functions to make it super simple to interact with the pipe.

Installation

$>npm install @happy-code/react-pipe

Usage

In your app - it is intentionally similar to Reacts own Context API, you will first want to wrap you app / components with a context provider

import { PipeProvider } from "react-pipe"


return <PipeProvider>...</PipeProvider>

In any child component you are now able to access the shared context..

import { usePipeContext } from "react-pipe"

const myComponent = () => {
   const { counter } = usePipeContext()

   return <p>Count is {counter}</p>
}

Each browser session connected to the pipe will be assigned its own uniqule user to identify itself on the network, you may augment this object with app specific data.

import { getUser, updateUser } from "react-pipe"

const myComponent = () => {
   const user = getUser()

   useEffect(() => {
       updateUser({
           name: 'Happy'
       })
   }, [])


   return <p>[{user.id}] is called '{user.name}'</p>
}

by default the user will be saved in local (session storage)

If your application wants to update the pipe context, you can use the 'modify' function which will preserve any shared keys not specified.. so its a diff!

import { modify, usePipeContext } from "react-pipe"

const myComponent = () => {
    const { counter } = usePipeContext()
    return <button onClick={() => modify({ counter: counter + 1 })>Add 1</button>
}

If your application needs to signal an event (but not necessarily update context), you may emit events that can be listened to by peers.

import { emit, useListener } from "react-pipe"
const MY_EVENT = "MY_EVENT"

const myComponent = () => {
    useListener(MY_EVENT, (peer, payload) => {
        alert(`Peer: [${peer.id}] fired: some ${payload.some}`)
    })

    const doAThing = () => {
        const someData = { some: "data"}
        emit(MY_EVENT, someData)
        alert(`I fired: some ${someData.some}`)
    }
    return <button onClick={doAThing}>Add 1</button>
}

The emitting client will not recieve the event.

Pipe configuration @happy-code/pipes can intercept these events and choose weather to prevent the broadcast, it is also able to trigger new event to be broadcast. As such, Silo(ing) or filtering of recipient peers is not necessary, this should be handled on a network level

example:

in client app

emit("NOTIFY_FRIENDS", { status: 'HAPPY' })

Intercepting this event and emiting selected events

pipe.intercept("NOTIFY_FRIENDS", (client, data) => {
  getFriends(client.user).forEach(friend => {
      pipe.emit(friend, "FRIEND_UPDATE", data)
  })
  return false; 
});

Friend only clients would trigger on

useListener("FRIEND_UPDATE", (peer, payload) => {
    alert(`Friend: [${peer.id}] is now ${payload.status}`)
})