import './App.css';
import Layout from "./components/layout.js";
import {Provider, connect} from 'react-redux';
import {Header, Footer, actionCatalogCard, Main} from "./components/index"
import {BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react-router-dom';
import createHistory from "history/createBrowserHistory";
import Catalog from "./components/catalog"
import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk';




function promiseReducer(state={}, action){
  if (action.type === 'PROMISE'){
      const { name="default", status, payload, error} = action
      if (status){
          return {
              ...state, [name]: {status, payload: (status === 'PENDING' && state[name] && state[name].payload) || payload, error}
          }
      }
  }
  return state;
}

const store = createStore(combineReducers({promiseRed: promiseReducer}), compose(applyMiddleware(thunk)))


function App() {
  return (
    <>
      <Provider store={store}>
        <Router history = {createHistory}>
          
          <Header/>
          
          <Main/>

          <Footer/>
        </Router>
      </Provider>
    </>
  );
}

export default App;