1 of 55

trixta-js-core

Overview

trixta-js-core is a javascript library to help any organization, easily connect to a Trixta space, build front-end components for you application. It leverages to communicate with Trixta and gives you a variety of tools / utilities to build react components.

Welcome to trixta-js-core

Welcome to trixta-js-core! Here you'll find all the documentation you need to get up and running with the trixta-js-core

Want to deep dive?

Dive a little deeper and start exploring our API reference to get an idea of everything that's possible with the package:

Reference

Installation

You can install trixta-js-core with NPM or Yarn

Using is recommended over npm.

yarn add @trixtateam/trixta-js-core @trixtateam/phoenix-to-redux

npm i @trixtateam/trixta-js-core @trixtateam/phoenix-to-redux

Quick Start

This example will quickly connect your react application to a Trixta space

1. Setup Reducer

2. Setup Middleware

Read up on setting up middleware

3. Setup Trixta Saga

Read up on redux-saga

Option 1

If your not planning to use any other sagas, you can simple use the one from trixta-js-core

Option 2

If you plan on using your own sagas, then you should create a root saga and include the one from trixta-js-core

4. Connect to Trixta

Option 1

Using the useTrixtaSpace hook

Option 2

Using a saga

Reference

Types

All types mentioned in the docs can be found here.

Action Related Types

See related to Trixta Actions

see regarding a Trixta Action

Reaction Related Types

See related to Trixta Reactions

See regarding a Trixta Reaction

Other Types

See that are not related to or

Methods

Here you can find information all the react methods that you can dispatch.

Reactions

Trixta reaction related methods can be found here.

submitTrixtaReactionResponse clearTrixtaReactionResponse clearTrixtaReactionRequestStatus

submitTrixtaReactionResponse

This method will attempt to respond to a Trixta Reaction for the given roleName and reactionName

Parameter

Description

Type

clearTrixtaReactionResponse

This method will attempt to clear a responses in the Trixta Reducer for the given roleName and reactionName

Parameter

Description

Type

clearTrixtaReactionRequestStatus

This method will attempt to reset the progress status in the Trixta Reducer for the given roleName and reactionName

Parameter

Description

Type

Actions

Trixta action related methods can be found here.

submitTrixtaActionResponse clearTrixtaActionResponse clearTrixtaActionRequestStatus

submitTrixtaActionResponse

This method will attempt to send a request to the given roleName and actionName

Parameter

Description

Type

clearTrixtaActionResponse

This method will attempt to clear a responses in the Trixta Reducer for the given roleName and actionName

import {
  clearTrixtaActionResponse
} from '@trixtateam/trixta-js-core';

Parameters

Parameter

Description

Type

roleName

Trixta role name

string

actionName

clearTrixtaActionRequestStatus

This method will attempt reset the progress status in the Trixta Reducer for the given roleName and actionName

import {
  clearTrixtaActionRequestStatus
} from '@trixtateam/trixta-js-core';

Parameters

Parameter

Description

Type

roleName

Trixta role name

string

actionName

updateTrixtaRole

This method will attempt to join the given Trixta Role on connected Trixta Space

import {
  updateTrixtaRole
} from '@trixtateam/trixta-js-core';

Parameters

Parameter

Description

Type

name

Trixta role name

string

logPresence

updateTrixtaRoles

This method will attempt to join the given Trixta Roles on connected Trixta Space

import {
  updateTrixtaRoles
} from '@trixtateam/trixta-js-core';

Parameters

Parameter

Description

Type

roles

Array of Trixta roles to join

Array<>

removeTrixtaRole

This method will attempt to leave the given Trixta Role on connected Trixta Space

Parameter

Description

Type

connectTrixta

This method will attempt to connect to the passed Trixta space and optional params

import {
  connectTrixta
} from '@trixtateam/trixta-js-core';

Parameters

Parameter

Description

Type

space

to connect to

string

params

signoutTrixta

This method will attempt to initialize all Trixta State in the reducer

import {
  signoutTrixta
} from '@trixtateam/trixta-js-core';

Parameters

None

Saga Methods

Here you will find all saga helper methods.

respondToTrixtaReactionEffectSaga listenForTrixtaReactionResponse

respondToTrixtaReactionEffectSaga

Will listen for a Trixta reaction for the given roleName and reactionName, dispatching the data to actionToDispatch or dispatchResponseTo parameters

Option 1

export const EXAMPLE_RESPONSE = 'app/EXAMPLE_RESPONSE';
export function functionToDispatch(payload) {
  return {
    type: EXAMPLE_RESPONSE,
    payload,
  }
}

import { fork } from '@redux-saga/core/effects';
import { respondToTrixtaReactionEffectSaga } from '@trixtateam/trixta-js-core';

export default function* defaultSaga() {
  yield fork(respondToTrixtaReactionEffectSaga, {
    roleName: "",
    reactionName: "",
    actionToDispatch: functionToDispatch,
  });
  
}

Option 2

import { fork } from '@redux-saga/core/effects';
import { respondToTrixtaReactionEffectSaga } from '@trixtateam/trixta-js-core';

export const EXAMPLE_RESPONSE = 'app/EXAMPLE_RESPONSE';

export default function* defaultSaga() {
  yield fork(respondToTrixtaReactionEffectSaga, {
    roleName: "",
    reactionName: "",
    dispatchResponseTo: EXAMPLE_RESPONSE,
  });
  
}

Parameter

Description

Type

roleName

Trixta role name

string

listenForTrixtaReactionResponse

This helper method will return the react redux dispatch event for a given roleName and reactionName. This can be used to listen for reactions in saga using the takeEvery effect

Parameter

Description

Type

Components

Here you can find information on all the react components.

Reactions

Trixta reaction related components can be found here.

TrixtaReactionComponent

React component used to pass Trixta Reaction Props to your child component or function.

RespondToReactionComponent

React component used to respond to the latest Trixta reaction effect or response when shouldRespond is true, by dispatching the response / initialData to actionToDispatch or dispatchResponseTo props.

RespondToReactionsComponent

React component used to respond to many Trixta reaction effect or response by dispatching the response / initialData to actionToDispatch or dispatchResponseTo props.

TrixtaReactionResponseComponent

React component used to pass Trixta Reaction Response Props to your child component or function.

Actions

Trixta action related components can be found here.

TrixtaActionComponent TrixtaActionResponseComponent

TrixtaActionComponent

React component used to pass Trixta Action Props to your child component or function.

import {
  TrixtaActionComponent,
  TrixtaActionComponentArgs
} from '@trixtateam/trixta-js-core';

<TrixtaActionComponent
  roleName=""
  actionName=""
  initialData={}
  extraData={}
  debugOptions={}
  debugMode={false}
  requestEvent=""
  responseEvent=""
  errorEvent=""
  timeoutEvent=""
  timeout={1500}
  setTimeoutEventAsErrorEvent={false}
  actionOptions={}
>
  {({
    submit,
    isInProgress,
    instances,
    response,
    initialData,
  }: TrixtaActionComponentArgs<
    TFormDataType,TSuccessType,TErrorType
  >) => (
    {function | <component />}
  )}
</TrixtaActionComponent>

TrixtaActionResponseComponent

React component used to pass Trixta Action Response Props to your child component or function.

import {
  TrixtaActionResponseComponent,
  TrixtaActionResponseComponentArgs
} from '@trixtateam/trixta-js-core';

<TrixtaActionResponseComponent
  roleName=""
  actionName=""
  debugMode={false}
>
  {({
    instance,
    response,
  }: TrixtaActionResponseComponentArgs<
    TSuccessType,TErrorType
  >) => (
    {function | <component />}
  )}
</TrixtaActionResponseComponent>

TrixtaAuthComponent

React component used to only render a child component or function, if you have access to the passed roleName.

Hooks

Here you can find information on all the react hooks.

Reactions Actions useTrixtaActionReaction useTrixtaSpace useTrixtaRoles useTrixtaAuth useTrixtaAccess useTrixtaRoleUnmount

Reactions

Trixta reaction related hooks can be found here.

useTrixtaReaction useRespondToReactionEffect useRespondToReactionResponse

useRespondToReactionEffect

React hook used to interact with a Trixta reaction that does not require a response for a given roleName. Will trigger the callBack when a reaction is received.

roleName : string
- Required

useRespondToReactionResponse

React hook used to interact with a Trixta reaction that does require a response for a given roleName. Will trigger the callBack when a reaction is received.

import { useRespondToReactionResponse } from '@trixtateam/trixta-js-core';
const { 
hasRoleAccess,
latestInstance,
respondToReaction
} = useRespondToReactionResponse<TInitialData>({ 
  roleName:"",
  reactionName:"",
  debugMode: false,
   });

Options

roleName : string
- Required
- Trixta role name
reactionName : string
- Required
- Trixta reaction name
debugMode: boolean
- Optional
- Defaults to false.

hasRoleAccess : boolean
- Will be true if the roleName has access for this user.

Actions

Trixta action related hooks can be found here.

useTrixtaAction

React hook used to interact with a Trixta action for a given roleName.

import { useTrixtaAction } from '@trixtateam/trixta-js-core';
const { 
hasRoleAccess,
isInProgress,
hasResponse,
loading,
latestInstance,
response,
submitTrixtaAction,
clearActionResponses,
} = useTrixtaAction<TSuccessType,TErrorType>({ roleName:"",
  actionName:"",
  actionParameters:{
    data:{},
    extraData:{},
    timeout:1500,
    timeoutEvent:"",
    loadingStatusRef:"",
    requestEvent:"",
    responseEvent:"",
    errorEvent:""
  },
  loadingStatusRef:"",
  options: {
    debugMode: false,
    autoSubmit: false,
    setTimeoutEventAsErrorEvent: false,
    clearResponsesOnCallback: false,
  },
  onSuccess:(success)=>{},
  onError:(errror)=>{}
   });

Options

roleName : string
- Required
- Trixta role name
actionName : string
- Required
- Trixta action name
actionParameters: see related parameters
loadingStatusRef: string
- Optional
- Optional value to change the default isInProgress behaviour for when submitting actions. If you plan to use the same action name for the same role, on the same screen, this is when you would make use of this * property
options: { debugMode, autoSubmit, setTimeoutEventAsErrorEvent, clearResponsesOnCallback }
- debugMode: boolean
  - Optional
onSuccess : (success: TSuccessType) => void|boolean
- Optional
- This function will fire any time a successful response is received from Trixta.
onError : (error: TErrorType) => void|boolean
- Optional
- This function will fire any time an error response is received from Trixta.

hasRoleAccess : boolean
- Will be true if the roleName has access for this user.

useTrixtaSpace

A react hook that will attempt to connect to the passed Trixta space and optional params, on mount of component. This hook should be used in the entry point of your react application.

space : string
- Required

useTrixtaRoles

A react hook that will attempt to join the passed array of roles, on mount of component.

import { useTrixtaRoles } from '@trixtateam/trixta-js-core';
useTrixtaRoles({ roles });

Options

roles : Array<TrixtaRoleParameter>
- Required
- An array of roles with their name and any optional additionalData you wish to pass

The hook returns nothing.

useTrixtaAuth

A react hook that will return authentication and authorization info.

roleName : string?
- Optional

useTrixtaAccess

A react hook that will return true if the given roleName has access.

import { useTrixtaAccess } from '@trixtateam/trixta-js-core';
const hasAccess = useTrixtaAccess({ roleName });

Options

roleName : string
- Trixta role name

Returns

boolean
- Will be true if the roleName mentioned above has access.

useTrixtaRoleUnmount

A react hook that will attempt to leave the passed roleName, on unmount of component.

import { useTrixtaRoleUnmount } from '@trixtateam/trixta-js-core';
useTrixtaRoleUnmount({ roleName });

Options

roleName : string
- Trixta role name

Returns

This hook returns nothing

Redux Selectors

Reaction Related Selectors

See related selectors

Action Related Selectors

See action related selectors

Other Selectors

See selectors that is not related to or

Trixta Space

Here you find all information related to a Trixta space.

Trixta Interactions

Here you will find all information related to Trixta Roles, Actions, Reactions

Quick Start

This example will quickly connect your react application to a Trixta space

1. Setup Reducer

/**
 * Combine all reducers in this file and export the combined reducers.
 */

import { combineReducers } from '@reduxjs/toolkit';
import { phoenixReducer } from '@trixtateam/phoenix-to-redux';
import { trixtaReducer } from '@trixtateam/trixta-js-core-core';
export default function createReducer() {
  const rootReducer = combineReducers({
    trixta: trixtaReducer,
    phoenix: phoenixReducer,
  });
  return rootReducer;
}

2. Setup Middleware

Read up on setting up middleware

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { createPhoenixChannelMiddleware } from '@trixtateam/phoenix-to-redux';
import createSagaMiddleware from 'redux-saga';
import { createReducer } from './reducers';

export default function configureStore() {
  const reduxSagaMonitorOptions = {};
  // Makes redux connected to phoenix channels
  const phoenixChannelMiddleWare = createPhoenixChannelMiddleware();
  const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);
  // Create the store with saga middleware
  const middlewares = [sagaMiddleware,phoenixChannelMiddleWare];

   const enhancers = [];

  const store = configureStore({
    reducer: createReducer(),
    middleware: [
      ...getDefaultMiddleware({
        thunk: false,
        immutableCheck: {
          ignore: ['socket', 'channel', 'trixta', 'phoenix', 'router'],
        },
        serializableCheck: false,
      }),
      ...middlewares,
    ],
    devTools:
      /* istanbul ignore next line */
      process.env.NODE_ENV !== 'production' ||
      process.env.PUBLIC_URL.length > 0,
    enhancers,
  });

   return store;
}

3. Setup Trixta Saga

Read up on redux-saga

Option 1

If your not planning to use any other sagas, you can simple use the one from trixta-js-core

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { createPhoenixChannelMiddleware } from '@trixtateam/phoenix-to-redux';
import createSagaMiddleware from 'redux-saga';
import { setupTrixtaSaga } from '@trixtateam/trixta-js-core';
import createReducer from './reducers';

export default function configureStore() {
  const reduxSagaMonitorOptions = {};
  // Makes redux connected to phoenix channels
  const phoenixChannelMiddleWare = createPhoenixChannelMiddleware();
  const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);
  const middlewares = [sagaMiddleware,phoenixChannelMiddleWare];

  const enhancers = [];

  const store = configureStore({
    reducer: createReducer(),
    middleware: [
      ...getDefaultMiddleware({
        thunk: false,
        immutableCheck: {
          ignore: ['socket', 'channel', 'trixta', 'phoenix', 'router'],
        },
        serializableCheck: false,
      }),
      ...middlewares,
    ],
    devTools:
      /* istanbul ignore next line */
      process.env.NODE_ENV !== 'production' ||
      process.env.PUBLIC_URL.length > 0,
    enhancers,
  });

  sagaMiddleware.run(setupTrixtaSaga);

  return store;
}

Option 2

If you plan on using your own sagas, then you should create a root saga and include the one from trixta-js-core

import { put, select, takeLatest, takeEvery, fork } from 'redux-saga/effects';
import { setupTrixtaSaga } from '@trixtateam/trixta-js-core';

export default function* rootSaga() {
  yield fork(setupTrixtaSaga);
}

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { createPhoenixChannelMiddleware } from '@trixtateam/phoenix-to-redux';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './rootSaga';
import createReducer from './reducers';

export default function configureStore() {
   const reduxSagaMonitorOptions = {};
  // Makes redux connected to phoenix channels
  const phoenixChannelMiddleWare = createPhoenixChannelMiddleware();
  const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);
  const middlewares = [sagaMiddleware,phoenixChannelMiddleWare];

  const enhancers = [];

  const store = configureStore({
    reducer: createReducer(),
    middleware: [
      ...getDefaultMiddleware({
        thunk: false,
        immutableCheck: {
          ignore: ['socket', 'channel', 'trixta', 'phoenix', 'router'],
        },
        serializableCheck: false,
      }),
      ...middlewares,
    ],
    devTools:
      /* istanbul ignore next line */
      process.env.NODE_ENV !== 'production' ||
      process.env.PUBLIC_URL.length > 0,
    enhancers,
  });

  sagaMiddleware.run(rootSaga);

  return store;
}

4. Connect to Trixta

Option 1

Using the useTrixtaSpace hook

import * as React from 'react';
import { useTrixtaSpace } from '@trixtateam/trixta-js-core';
import Providers from './Providers';
import Routes from './Routes';


export function App() {
   useTrixtaSpace({ space: 'trixta-demo.space.trixta.io', params: {}});
  
return (<Providers>
      <Routes />
    </Providers>)

}

export default App;

Option 2

Using a saga

import { put, select, takeLatest, takeEvery, fork } from 'redux-saga/effects';
import { connectTrixta } from '@trixtateam/trixta-js-core';

export function* connectTrixtaSaga() {
  yield put(connectTrixta({ space: 'trixta-demo.space.trixta.io'}));
}

export default function* rootSaga() {
  yield fork(setupTrixtaSaga);
  yield call(connectTrixtaSaga);
}