Connection Metadata - Electric UI

The usage of each of these hooks is similar. All examples assume they're being rendered by a component such as this, providing their connectionHash.

import { useDeviceConnectionHashes } from '@electricui/components-core'

import { useDeviceConnectionHashes } from '@electricui/components-core'
function DisplayAllConnections() {
  // Grab all the connection hashes from the current device
  const connectionHashes = useDeviceConnectionHashes()
  return connectionHashes.map(hash => (
    <ConnectionInformation key={hash} hash={hash} />
  ))
}
interface ConnectionInformationProps {
  hash: string
}

useConnectionAcceptability

Given a connection hash, return if a connection is considered acceptable.

import { useConnectionAcceptability } from '@electricui/components-core'

function ConnectionInformation(props: ConnectionInformationProps) {
  const connectionAcceptable = useConnectionAcceptability(props.hash)
  return (
    <div>
      Connection hash {props.hash} is{' '}
      {connectionAcceptable ? 'acceptable' : 'unacceptable'}
    </div>
  )
}

useConnectionTransportKey

Given a connection hash, return the transport key of the connection.

import { useConnectionTransportKey } from '@electricui/components-core'

function ConnectionInformation(props: ConnectionInformationProps) {
  const transportKey = useConnectionTransportKey(props.hash)
  return (
    <div>
      Connection hash {props.hash} has transport key {transportKey}
    </div>
  )
}

useConnectionMetadata

Given a connection hash, return the metadata object of the connection.

import { useConnectionMetadata } from '@electricui/components-core'

function ConnectionInformation(props: ConnectionInformationProps) {
  const connectionMetadata = useConnectionMetadata(props.hash)
  const nameMetadata = connectionMetadata.name ?? 'no name'
  return (
    <div>
      Connection hash {props.hash} is called {nameMetadata}
    </div>
  )
}

useConnectionMetadataKey

Given a connection hash and a specific key, return that value of metadata for the connection.

import { useConnectionMetadataKey } from '@electricui/components-core'

function ConnectionInformation(props: ConnectionInformationProps) {
  const name = useConnectionMetadataKey(props.hash, 'name') ?? 'no name'
  return (
    <div>
      Connection hash {props.hash} is {name}
    </div>
  )
}

useConnectionState

Given a connection hash, return the CONNECTION_STATE enum of the connection.

import { useConnectionState } from '@electricui/components-core'
import { CONNECTION_STATE } from '@electricui/core'

function ConnectionInformation(props: ConnectionInformationProps) {
  const connectionState = useConnectionState(props.hash)
  switch (connectionState) {
    case CONNECTION_STATE.DISCONNECTED:
      return <div>Connection hash {props.hash} is disconnected</div>
    case CONNECTION_STATE.CONNECTING:
      return <div>Connection hash {props.hash} is connecting</div>
    case CONNECTION_STATE.DISCONNECTING:
      return <div>Connection hash {props.hash} is disconnecting</div>
    case CONNECTION_STATE.CONNECTED:
      return <div>Connection hash {props.hash} is connected</div>
    default:
      throw new Error('Connection state is unknown')
  }
}