Skip to content

Commit

Permalink
Merge pull request #66 from trixtateam/feat/use_trixta_space_hook
Browse files Browse the repository at this point in the history 
feat: useTrixtaSpace hook
  • Loading branch information
@jacqueswho
jacqueswho authored Aug 29, 2022
2 parents c529008 + 8e0ff6d commit ef86ec4
Show file tree
Hide file tree
Showing 27 changed files with 695 additions and 411 deletions.
218 changes: 18 additions & 200 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,220 +16,38 @@ JS
![Coverage functions](https://github.com/trixtateam/trixta-js/blob/master/badges/badge-functions.svg)
![Coverage lines](https://github.com/trixtateam/trixta-js/blob/master/badges/badge-lines.svg)

<br />
---

# What is trixta-JS?
**📚 Documentation:** [Storybook](https://trixtateam.github.io/trixta-js/?path=/docs/introduction--page)
**📦 Package:** [npm](https://www.npmjs.com/package/@trixtateam/trixta-js)
## What is trixta-JS?

trixta-js a javascript library to help any organization, easily connect to a
Trixta space, build front-end components for you application. It leverages
[phoenix-to-redux](https://github.com/trixtateam/phoenix-to-redux) to
communicate with Trixta and gives you a variety of tools / utilities to build
react components.

# Who is this for?
## Who is this for?

Any orgranization using Trixta for their javascript application.

# Quick Start Guide
[Explore the documentation =>](https://trixtateam.github.io/trixta-js/)

Install the package with npm or yarn

`npm i @trixtateam/trixta-js @trixtateam/phoenix-to-redux` or yarn - whichever you prefer

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

## 1. Setup Reducer

```javascript
/**
* Combine all reducers in this file and export the combined reducers.
*/
---
## Install
⚠️ Using [Yarn Package Manager](https://yarnpkg.com) is recommended over `npm`.

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

## 2. Setup Middleware
[See example to setup middleware](https://redux-toolkit.js.org/api/configureStore)

```javascript
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
[See redux-saga](https://redux-saga.js.org/docs/introduction/GettingStarted)

### Option 1

```javascript
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { createPhoenixChannelMiddleware } from '@trixtateam/phoenix-to-redux';
import createSagaMiddleware from 'redux-saga';
import { setupTrixtaSaga } from '@trixtateam/trixta-js';
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

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

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

```javascript
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 Trixta

#### Not logged In
```javascript
import { put, select, takeLatest, takeEvery, fork } from 'redux-saga/effects';
import { connectTrixta } from '@trixtateam/trixta-js';

export function* connectTrixtaSaga() {
yield put(connectTrixta({ space: 'localhost:4000'}));
}

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

#### Logged In
```javascript
import { put, select, takeLatest, takeEvery, fork } from 'redux-saga/effects';
import { connectTrixta } from '@trixtateam/trixta-js';

export function* connectTrixtaSaga() {
yield put(connectTrixta({ space: 'localhost:4000', params : { agentId: 'john@doe.com', token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c' }}));
}

export default function* rootSaga() {
yield fork(setupTrixtaSaga);
yield call(connectTrixtaSaga);
}
or
```shell
npm i @trixtateam/trixta-js @trixtateam/phoenix-to-redux
```
---
## Quick Start Guides
* [general guide](docs/guides/general/README.md)
* [setting up with CRA](docs/guides/cra/README.md)

## [Detailed Documentation](docs/README.md)
## License

This project is licensed under the MIT license, Copyright (c) 2020 Trixta Inc.
Expand Down
Loading

0 comments on commit ef86ec4

Please sign in to comment.