import React from "react";
import ReactDOM from "react-dom";
import { Provider } from 'react-redux';
import { BrowserRouter as Router } from "react-router-dom";
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga'
import thunk from 'redux-thunk';

import Root from './components/Root';
import reducers from './reducers';
import setupSocket from './actionCreators/websocketActions';

import handleNewMessage from './sagas';
import "./styles/main.scss";

const sagaMiddleware = createSagaMiddleware()

const store = createStore(
  reducers,
  applyMiddleware(sagaMiddleware, thunk)
);

const { dispatch } = store

const socket = setupSocket(dispatch, user)

sagaMiddleware.run(handleNewMessage, { socket, user })

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <Root />
    </Router>
  </Provider>,
  document.getElementById('root')
);