import { connectPhoenix } from '@trixtateam/phoenix-to-redux';

import {
  all,
  call,
  fork,
  put,
  select,
  takeEvery,
  takeLatest,
} from 'redux-saga/effects';
import {
  socketActionTypes,
  connectPhoenix
} from '@trixtateam/phoenix-to-redux';


/**
 * Should the socket attempt to open, this action is dispatched to the
 * phoenix reducer
 * @param {Object} params - parameters
 * @param {string} params.domainKey - domain for socket
 * @param {Object} params.socket = socket being opened
 * @param {boolean} params.params
 */
export function* socketConnectedSaga({ socket,params, domainKey }) {
  console.info('socketConnectedSaga',{ socket,params, domainKey });
}

/** Should an error occur from the phoenix socket, this action will be dispatched
 * @param {Object} params - parameters
 * @param {string} params.error
 * @param {string} params.socketState
 * @param {string} params.domainKey - domain for socket
 */
export function* socketErrorSaga({ error, socketState, domainKey }) {
  // here you should check if your token is valid or not expired, if not
  // disconnect phoenix
  console.error('socketErrorSaga',{ error, socketState, domainKey });
}

/**
 * Should the socket attempt to close, this action is dispatched to the
 * phoenix reducer
 * @param {Object} params - parameters
 * @param {Object} params.socket = socket being closed
 * @param {string} params.domainKey - domain for socket
 * @param {object} params.params - socket.params()
 */
export function* socketCloseSaga({ params, socket, domainKey }) {
  console.info('socketCloseSaga',{ params, socket, domainKey });
}
/**
 * After  phoenix socket disconnects
 * @param {Object} params - parameters
 * @param {Object} params.socket = socket being disconnected
 * @param {string} params.domainKey - domain for socket
 * @param {Object} params.params - socket.params()
 */
export function* socketDisconnectionSaga({ params, socket, domainKey }) {
  console.info('socketDisconnectionSaga',{ params, socket, domainKey });
}


export function* connectSocketSaga() {
  yield put(connectPhoenix({ domainUrl: 'localhost:4000', params: {} }));
}

export default function* defaultSaga() {
yield call(connectSocketSaga);
yield takeEvery(
    socketActionTypes.SOCKET_DISCONNECT,
    socketDisconnectionSaga
  );
  yield takeEvery(socketActionTypes.SOCKET_OPEN, socketConnectedSaga);
  yield takeEvery(socketActionTypes.SOCKET_ERROR, socketErrorSaga);
  yield takeEvery(socketActionTypes.SOCKET_CLOSE, socketCloseSaga);
}

import { disconnectPhoenix } from '@trixtateam/phoenix-to-redux';

import { combineReducers } from 'redux';
import { phoenixReducer } from '@trixtateam/phoenix-to-redux';

export default function createReducer() {
  const rootReducer = combineReducers({
    phoenix: phoenixReducer,
  });
  return rootReducer;
}

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(initialState = {}) {
  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 { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import {
  connectPhoenix
} from '@trixtateam/phoenix-to-redux';
import Providers from './Providers';
import Routes from './Routes';


export function App() {
const dispatch = useDispatch();
useEffect(() => {
    dispatch(connectPhoenix({ domainUrl:'localhost:4000', params: {} }))
  }, [dispatch]);
  
return (<Providers>
      <Routes />
    </Providers>)

}

export default App;

import { channelActionTypes } from '@trixtateam/phoenix-to-redux';
const { CHANNEL_JOIN_ERROR } = channelActionTypes;

import { pushPhoenixChannel } from '@trixtateam/phoenix-to-redux';

import { channelActionTypes } from '@trixtateam/phoenix-to-redux';
const { CHANNEL_ERROR } = channelActionTypes;

import { channelActionTypes } from '@trixtateam/phoenix-to-redux';
const { CHANNEL_JOIN } = channelActionTypes;

import { channelActionTypes } from '@trixtateam/phoenix-to-redux';
const { CHANNEL_LEAVE } = channelActionTypes;

import { channelActionTypes } from '@trixtateam/phoenix-to-redux';
const { CHANNEL_CLOSE } = channelActionTypes;

import { channelActionTypes } from '@trixtateam/phoenix-to-redux';
const { CHANNEL_TIMEOUT } = channelActionTypes;

import { channelActionTypes } from '@trixtateam/phoenix-to-redux';
const { CHANNEL_PUSH_ERROR } = channelActionTypes;

import { leavePhoenixChannel } from '@trixtateam/phoenix-to-redux';