import React, { Suspense } from 'react';
import theme from 'helpers/Theme';
import { ThemeProvider, CssBaseline } from '@material-ui/core';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import * as serviceWorker from 'helpers/serviceWorker';
import rootReducer from 'redux/reducers/rootReducer';
import App from 'components/App';
import Loading from 'components/layout/Loding';
import 'helpers/i18n';
// creating the store, connecting to the reducer and applying middleware with thunk
const store = createStore(rootReducer, applyMiddleware(thunk, logger));
// Wraping App.jsx into Provider component to make data from the store avaliable throughout all application
// Also wraping the App.jsx with ThemeProvider and CssBaseline to applay Material-UI theme settings
ReactDOM.render(
<div>
<Suspense fallback={<Loading />}>
<Provider store={store}>
<ThemeProvider theme={theme}>
<CssBaseline />
<App />
</ThemeProvider>
</Provider>
</Suspense>
</div>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
