Only this pageAll pages
Powered by GitBook
1 of 55

trixta-js-core

Loading...

Loading...

Loading...

Reference

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Action Related Types

See types related to Trixta Actions

see details regarding a Trixta Action

Overview

JS-CORE

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

Types

All types mentioned in the docs can be found here.

Action Related TypesReaction Related TypesOther Types

Reaction Related Types

See types related to Trixta Reactions

See details regarding a Trixta Reaction

clearTrixtaReactionResponse

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

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

Parameters

Parameter
Description
Type

roleName

Trixta role name

string

reactionName

Trixta reaction name

string

loadingStatusRef

see submitTrixtaReactionResponse

string?

Reactions

Trixta reaction related methods can be found here.

submitTrixtaReactionResponseclearTrixtaReactionResponseclearTrixtaReactionRequestStatus

submitTrixtaReactionResponse

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

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

Please note your reaction must be a request for response to use this method.

Parameters

Parameter
Description
Type

Quick Start

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

1. Setup Reducer

2. Setup Middleware

Read up on

timeoutEvent

Redux event for data to dispatch error response due to timeout

string?

errorEvent

Redux event for data to dispatch error response to

string?

loadingStatusRef

Optional value to change the default isInProgress behaviour for when submitting reactions.

  • If you plan to use the same reaction name for the same role, on the same screen, this is when you would make use of this * property

string?

timeout

timeout in milliseconds for submitting data to Trixta, default is 15000

number?

extraData

Extra data to pass on and receive in response with the key extraData. This can be used as needed.

any

roleName

Trixta role name

string

reactionName

Trixta reaction name

string

ref

Unique Trixta reaction reference. Can be found on a TrixtaReactionInstance

string

responseEvent

Redux event for data to dispatch response to

string?

requestEvent

Redux event for data to dispatch to before submitting request to Trixta

string?

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

setting up middleware
/**
 * 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;
}
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;
}
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;
}
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;
}
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;
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);
}

Actions

Trixta action related methods can be found here.

submitTrixtaActionResponseclearTrixtaActionResponseclearTrixtaActionRequestStatus

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

Trixta action name

string

loadingStatusRef

see submitTrixtaActionResponse

string

clearTrixtaReactionRequestStatus

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

Parameters

Parameter
Description
Type

string

reactionName

Trixta reaction name

string

loadingStatusRef

see

string?

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

roleName

Trixta role name

submitTrixtaReactionResponse

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<TrixtaRoleParameter>

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

determines if phoenix channel presence for role should be logged

boolean

additionalData

Any additional data to pass on joining a role

any

removeTrixtaRole

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

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

Parameters

Parameter
Description
Type

name

Trixta role name

string

submitTrixtaActionResponse

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

Parameters

Parameter
Description
Type

roleName

Trixta role name

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

string

actionName

Trixta action name

string

actionOptions

Options for action in Trixta flow

any

debugOptions

Trixta flow debugging options

debugMode

Enables debugging for action in Trixta flow. False by default

boolean?

responseEvent

Redux event for data to dispatch response to

string?

requestEvent

Redux event for data to dispatch to before submitting request to Trixta

string?

timeoutEvent

Redux event for data to dispatch error response due to timeout

string?

errorEvent

Redux event for data to dispatch error response to

string?

loadingStatusRef

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

string?

timeout

timeout in milliseconds for submitting data to Trixta, default is 15000

number?

extraData

Extra data to pass on and receive in response with the key extraData. This can be used as needed.

any

clearResponse

Determines if the instances for action should be cleared before submitting. False by default

boolean?

formData

Data to submit to Trixta

any

{
    slowdown: number;
    inspect: boolean;
    debug_broadcast: {
      role: string;
    }
}

signoutTrixta

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

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

Parameters

None

respondToTrixtaReactionEffectSaga

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

Option 1

Option 2

Parameter
Description
Type

roleName

Trixta role name

string

reactionName

Trixta reaction name

string

actionToDispatch

Redux action creator function to dispatch response to

Function(payload) => ({ type:string; payload})

dispatchResponseTo

Name of event to dispatch response to

string

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,
  });
  
}
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,
  });
  
}

Components

Here you can find information on all the react components.

ReactionsActionsTrixtaAuthComponent

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

Any optional params when connect to the Trixta space

any

Trixta Space

Installation

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

Using Yarn Package Manager is recommended over npm.

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

Saga Methods

Here you will find all saga helper methods.

respondToTrixtaReactionEffectSagalistenForTrixtaReactionResponse

Reactions

Trixta reaction related components can be found here.

TrixtaReactionComponentRespondToReactionComponentRespondToReactionsComponentTrixtaReactionResponseComponent

Methods

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

Please note all methods need to be dispatched to the redux store either using the

useDispatch hook, the dispatch store function or the put effect in a Saga

Reactions
Actions

TrixtaReactionResponseComponent

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

Please note a reaction response is only viable, if the requestForEffect property is false

import {
  TrixtaReactionResponseComponent,
  TrixtaReactionComponentArgs
} from '@trixtateam/trixta-js-core';

<TrixtaReactionResponseComponent
  roleName=""
  reactionName=""
  debugMode={false}
>
  {({
    isInProgress,
    loading,
    instance,
    response,
    data,
  }: TrixtaReactionComponentArgs<
    TInitialData,TFormDataType,TSuccessType,TErrorType
  >) => (
    {function | <component />}
  )}
</TrixtaReactionResponseComponent>

Props

Actions

Trixta action related components can be found here.

TrixtaActionComponentTrixtaActionResponseComponent

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>

Props

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.

Please note if your reaction is a request for response, the property requestForEffect must be false

export function functionToDispatch(payload) {
  return {
    type: '',
    payload,
  }
}
import {
  RespondToReactionComponent,
} from '@trixtateam/trixta-js-core';

<RespondToReactionComponent
  roleName=""
  reactionName=""
  formData={}
  shouldRespond={false}
  actionToDispatch={functionToDispatch}
  dispatchResponseTo=""
  requestForEffect={false}
/>

Props

Other Types

See types that are not related to Trixta Actions or Trixta Reactions

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.

Options

  • roleName : string

    • Required

    • Trixta role name

  • reactionName : string

    • Required

    • Trixta reaction name

  • debugMode: boolean

    • Optional

    • Defaults to false.

    • If set to true

Returns

  • hasRoleAccess : boolean

    • Will be true if the roleName has access for this user.

import { useRespondToReactionResponse } from '@trixtateam/trixta-js-core';
const { 
hasRoleAccess,
latestInstance,
respondToReaction
} = useRespondToReactionResponse<TInitialData>({ 
  roleName:"",
  reactionName:"",
  debugMode: false,
   });
, enables Trixta console debugging
latestInstance : TrixtaReactionInstance
  • First or most recent Trixta instance

  • respondToReaction : (parameters: { data, instance, responseEvent, errorEvent }) => void

    • Required

    • This function will respond to the reaction with the data for the given parameters that is received from Trixta.

  • Actions

    Trixta action related hooks can be found here.

    useTrixtaAction

    TrixtaReactionComponent

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

    Please note if your reaction is a request for response, the property requestForEffect must be false

    import {
      TrixtaReactionComponent,
      TrixtaReactionComponentArgs
    } from '@trixtateam/trixta-js-core';
    
    <TrixtaReactionComponent
      roleName=""
      reactionName=""
      includeResponse={false}
      initialData={}
      extraData={}
      requestForEffect={false}
      defaultComponent={<Component/>}
      debugMode={false}
      requestEvent=""
      responseEvent=""
      errorEvent=""
      timeoutEvent=""
      timeout={1500}
      setTimeoutEventAsErrorEvent={false}
    >
      {({
        submit,
        isInProgress,
        loading,
        instance,
        response,
        data,
      }: TrixtaReactionComponentArgs<
        TInitialData,TFormDataType,TSuccessType,TErrorType
      >) => (
        {function | <component />}
      )}
    </TrixtaReactionComponent>

    Props

    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

    Trixta action name

    string

    loadingStatusRef

    see submitTrixtaActionResponse

    string

    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.

    import { useTrixtaSpace } from '@trixtateam/trixta-js-core';
    useTrixtaSpace({space,params});
    

    Options

    • space : string

      • Required

      • to connect to

    • params : Object | unknown

      • Optional

      • Any optional params when you connect to the Trixta space

    Returns

    This hook returns nothing

    Trixta space

    Reactions

    Trixta reaction related hooks can be found here.

    useTrixtaReactionuseRespondToReactionEffectuseRespondToReactionResponse

    Hooks

    Here you can find information on all the react hooks.

    ReactionsActionsuseTrixtaActionReactionuseTrixtaSpaceuseTrixtaRolesuseTrixtaAuthuseTrixtaAccessuseTrixtaRoleUnmount

    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>

    Props

    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

    Returns

    The hook returns nothing.

    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

    RespondToReactionsComponent

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

    Please note if your reaction is a request for response, the property requestForEffect must be false

    export function functionToDispatch(payload) {
      return {
        type: '',
        payload,
      }
    }
    import {
      RespondToReactionsComponent,
    } from '@trixtateam/trixta-js-core';
    
    <RespondToReactionsComponent
      roleName=""
      reactions={[{name,actionToDispatch,dispatchResponseTo,requestForEffect}]}
    />

    Props

    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

    Example

    export const EXAMPLE_RESPONSE = 'app/EXAMPLE_RESPONSE';
    export function functionToDispatch(payload) {
      return {
        type: EXAMPLE_RESPONSE,
        payload,
      }
    }
    import { put,takeEvery } from 'redux-saga/effects';
    import { listenForTrixtaReactionResponse } from '@trixtateam/trixta-js-core';
    
    export default function* checkReactionSaga({ meta, reactionDetails }) {
      const { reactionDetails } = payload;
      const { reactionName, roleName } = meta;
    
      if(reactionName === 'name of Trixta reaction'){
        yield put(functionToDispatch(reactionDetails.initial_data));
      }
    }
    
    export default function* globalSaga() {
    yield takeEvery(listenForTrixtaReactionResponse({
      roleName: // name of Trixta role
      reactionName: // name of Trixta reaction
    }),checkReactionSaga);
    }
    Parameter
    Description
    Type

    roleName

    Trixta role name

    string

    reactionName

    Trixta reaction name

    string

    TrixtaAuthComponent

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

    import {
      TrixtaAuthComponent,
    } from '@trixtateam/trixta-js-core';
    
    <TrixtaAuthComponent 
     roleName=""
    >
    {children}
    </TrixtaAuthComponent>

    Props

    Redux Selectors

    Reaction Related Selectors
    Action Related Selectors

    useTrixtaActionReaction

    React hook used to interact with a Trixta action and reaction for a given roleName. This hook uses a combination of both the useTrixtaAction and useTrixtaReaction hooks.

    Options

    • actionProps: { roleName, actionName }

      • roleName : string

        • Required

        • Trixta role name

      • actionName : string

        • Required

        • Trixta action name

    • reactionProps: { roleName, reactionName, requestForEffect }

      • roleName : string?

        • Optional

    • actionParameters: see related parameters

    • autoSubmit: boolean

      • Optional

      • Defaults to false.

      • If set to true

    Returns

    • hasRoleAccess : boolean

      • Will be true if the roleName has access for this user.

    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.

    Options

    • roleName : string

    import { useTrixtaActionReaction } from '@trixtateam/trixta-js-core';
    const { 
    hasRoleAccess,
    initialData,
    isInProgress,
    hasResponse,
    hasActionResponse,
    hasReactionResponse,
    loading,
    actionResponse,
    reactionResponse,
    submitTrixtaActionResponse,
    submitTrixtaReactionResponse,
    clearActionResponses,
    clearReactionResponses,
    } = useTrixtaActionReaction<TInitialData,
    TActionResponseType,
    TActionErrorType,
    TReactionResponseType,
    TReactionErrorType
    >({ 
      actionProps:{
        roleName:"",
        actionName:"",
      },
      reactionProps:{
        roleName:"",
        reactionName:"",
      },
      autoSubmit:false,
      actionParameters:{
        data:{},
        extraData:{},
        timeout:1500,
        timeoutEvent:"",
        loadingStatusRef:"",
        requestEvent:"",
        responseEvent:"",
        errorEvent:""
      }
       });

    Trixta role name

  • If the roleName for actionProps is the same, this can be excluded

  • reactionName : string

    • Required

    • Trixta reaction name

  • requestForEffect: boolean

    • Optional

    • Defaults to false.

    • If set to true, this Trixta reaction is not waiting for a response and the only expect to use the initialData

  • , hook will submit
    actionParameters
    to
    actionName
    when the component mounts.
    isInProgress : boolean
    • value is based on useTrixtaAction or useTrixtaReaction

  • hasActionResponse : boolean

    • value is based on hasResponse from useTrixtaAction

  • hasReactionResponse : boolean

    • value is based on hasResponse from useTrixtaReaction

  • initialData : TInitialData on TrixtaReactionInstance

    • Initial data returned from Trixta reaction instance

  • hasResponse : boolean

    • value is based on hasReactionResponse or hasActionResponse .

  • loading : boolean

    • value is based on useTrixtaAction or useTrixtaReaction.

  • reactionResponse : TrixtaInstanceResponse

    • value is based on latestResponse from useTrixtaReaction

  • actionResponse : TrixtaInstance

    • value is based response from useTrixtaAction

  • submitTrixtaActionResponse : (parameters: SubmitTrixtaFunctionParameters) => void

    • function is based on submitTrixtaAction from useTrixtaAction

  • clearActionResponses : () => void

    • function is based on clearActionResponses from useTrixtaAction

  • clearReactionResponses : () => void

    • function is based on clearReactionResponses from useTrixtaReaction

  • submitTrixtaReactionResponse : (parameters: SubmitTrixtaFunctionParameters) => void

    • function is based on submitTrixtaReaction from useTrixtaReaction

  • submitTrixtaActionResponse

    Required

  • Trixta role name

  • reactionName : string

    • Required

    • Trixta reaction name

  • debugMode: boolean

    • Optional

    • Defaults to false.

    • If set to true, enables Trixta console debugging

  • callBack : (payload: TInitialData) => void

    • Required

    • This function will fire any time a reaction is received from Trixta.

  • Returns

    • hasRoleAccess : boolean

      • Will be true if the roleName has access for this user.

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

    Reaction Related Selectors

    See related selectors

    useTrixtaAction

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

    Options

    • roleName : string

    reaction

    Required

  • Trixta role name

  • actionName : string

    • Required

    • Trixta action name

  • actionParameters: see related submitTrixtaActionResponse 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

      • Defaults to false.

      • If set to true, enables Trixta console debugging

    • autoSubmit: boolean

      • Optional

      • Defaults to false.

      • If set to true

    • setTimeoutEventAsErrorEvent: boolean

      • Optional

      • Defaults to false.

      • If set to true

    • clearResponsesOnCallback: boolean

      • Optional

      • Defaults to false.

      • If set to true

  • onSuccess : (success: TSuccessType) => void|boolean

    • Optional

    • This function will fire any time a successful response is received from Trixta.

    • If you return true and clearResponsesOnCallback is true, all responses will be cleared.

  • onError : (error: TErrorType) => void|boolean

    • Optional

    • This function will fire any time an error response is received from Trixta.

    • If you return true and clearResponsesOnCallback is true, all responses will be cleared.

  • Returns

    • hasRoleAccess : boolean

      • Will be true if the roleName has access for this user.

    • isInProgress : boolean

      • Will be true if there is no response yet after calling or submitTrixtaAction.

      • Will be false if there is a response after calling or submitTrixtaAction

    • hasResponse : boolean

      • Will be true if there is at least one Trixta Instance response.

    • loading : boolean

      • Will be true if the action is waiting to be loaded.

    • response :

      • First or most recent Trixta instance response

    • latestInstance : TrixtaInstance

      • First or most recent Trixta instance

    • submitTrixtaAction : (parameters: ) => void

      • This function will submit a request for the given roleName and actionName

    • clearActionResponses : () => void

      • This function will clear and reset responses for the given roleName and actionName.

    Trixta Reducer

    Here you can find more information on the Trixta Reducer

    of Trixta state

    Action Related Selectors

    See related selectors

    useTrixtaAuth

    A react hook that will return authentication and authorization info.

    Options

    • roleName : string?

    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)=>{}
       });
    , hook will submit
    actionParameters
    to
    actionName
    when the component mounts.
    , will set the
    actionParameters
    timeoutEvent
    to be the same as the
    errorEvent
    , will clear all responses when
    onSuccess
    or
    onError
    callbacks are called returning a value true.

    submitTrixtaActionResponse
    submitTrixtaActionResponse
    TrixtaInstanceResponse
    SubmitTrixtaFunctionParameters
    Preview
    action

    Optional

  • Trixta role name

  • Returns

    • isAuthenticated : boolean

      • Will be true if the Trixta space connected with token parameter.

    • hasRole : boolean

      • Will be true if the passed roleName for the current user has access.

    • hasAccess : boolean

      • Will be true if the hasRole and isAuthenticated mentioned above is true.

    • isAuthorizing : boolean

      • Will be true if Trixta is still authorizing the above mentioned roleName

    import { useTrixtaAuth } from '@trixtateam/trixta-js-core';
    const { 
    isAuthenticated,
    hasRole,
    hasAccess,
    isAuthorizing 
    } = useTrixtaAuth({ roleName });
    

    useTrixtaReaction

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

    Options

    • roleName : string

    Required

  • Trixta role name

  • reactionName : string

    • Required

    • Trixta reaction name

  • requestForEffect: boolean

    • Optional

    • Defaults to false.

    • If set to true, this Trixta reaction is not waiting for a response and the only expect to use the initialData

  • loadingStatusRef: string

    • Optional

    • Optional value to change the default isInProgress behaviour for when submitting reactions. If you plan to use the same reaction name for the same role, on the same screen, this is when you would make use of this * property

  • debugMode: boolean

    • Optional

    • Defaults to false.

    • If set to true, enables Trixta console debugging

  • setTimeoutEventAsErrorEvent: boolean

    • Optional

    • Defaults to false.

    • If set to true, will set the timeoutEvent to be the same as the errorEvent

  • clearResponsesOnCallback: boolean

    • Optional

    • Defaults to false.

    • If set to true, will clear all responses when onSuccess or onError callbacks are called returning a value true

  • onSuccess : (success: TSuccessType) => void|boolean

    • Optional

    • This function will fire any time a successful response is received from Trixta.

    • If you return true and clearResponsesOnCallback is true, all responses will be cleared.

  • onError : (error: TErrorType) => void|boolean

    • Optional

    • This function will fire any time an error response is received from Trixta.

    • If you return true and clearResponsesOnCallback is true, all responses will be cleared.

  • Returns

    • hasRoleAccess : boolean

      • Will be true if the roleName has access for this user.

    • isInProgress : boolean

      • Will be true if there is no response yet after calling submitTrixtaReactionResponse or submitTrixtaReaction.

      • Will be false if there is a response after calling submitTrixtaReactionResponse or submitTrixtaReaction

    • hasResponse : boolean

      • Will be true if there is at least one Trixta Instance response.

    • loading : boolean

      • Will be true if the reaction is waiting to be loaded or receive a reaction.

    • latestResponse :

      • First or most recent Trixta instance response

    • initialData : TInitialData on

      • Initial data returned from Trixta reaction instance

    • latestInstance :

      • First or most recent Trixta instance

    • submitTrixtaReaction : (parameters: ) => void

      • This function will submit a response for the given roleName and reactionName

    • clearReactionResponses : () => void

      • This function will clear and reset responses for the given roleName and reactionName.

    Trixta Interactions

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

    ?

    ?

    ?

    import { useTrixtaReaction } from '@trixtateam/trixta-js-core';
    const { 
    hasRoleAccess,
    isInProgress,
    latestResponse,
    loading,
    latestInstance,
    instances,
    initialData,
    hasResponse,
    submitTrixtaReaction,
    clearReactionResponses,
    } = useTrixtaReaction<TInitialData,TSuccessType,TErrorType>({ roleName:"",
      reactionName:"",
      requestForEffect:false,
      loadingStatusRef:"",
      debugMode: false,
      setTimeoutEventAsErrorEvent: false,
      clearResponsesOnCallback: false,
      onSuccess:(success)=>{},
      onError:(errror)=>{}
       });
    TrixtaReactionInstanceResponse
    TrixtaReactionInstance
    TrixtaReactionInstance
    SubmitTrixtaFunctionParameters
    What are Trixta Roles
    What are Trixta Actions
    What are Trixta Reactions

    Other Selectors

    See other selectors that is not related to actions or reactions

    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.

    Trixta Space

    Here you find all information related to a Trixta space.

    What is a Trixta Space?

    phoenix-to-redux
    GitHub - trixtateam/trixta-js: Javascript Trixta Library, to help integrate with Trixta SpaceGitHub
    Github Repository
    Logo