import React, {useState }  from 'react';
import logo from './logo.svg';
import './App.css';
import {Provider, connect}   from 'react-redux';
import {actionSearch } from './actions';
import store from './reducers'
//import { CounterView, Counter, ConnectedBIGTABLO, ConnectedCounter, ConnectedBigButton } from './components'
import {Router, Route, Link, Switch, Redirect} from 'react-router-dom';
import createHistory from "history/createBrowserHistory";


const history = createHistory()

const SearchField = connect(null, {onChange: actionSearch})(({onChange}) => {
    const [text, setText] = useState('')
    return (
        <input value={text} onChange={e => (setText(e.target.value), onChange(e.target.value))}/>
    )
})

const SearchResult = connect(s => (console.log(s), ({payload: s.searchResult && 
                                                              s.searchResult.payload && 
                                                              s.searchResult.payload.payload && 
                                                              s.searchResult.payload.payload.GoodFind})))(({payload}) => <h1>{console.log(payload)}{payload && payload.map(({_id, name}) => <div>{name}</div>)}</h1>)

export default () => {
    return (
        <Provider store={store}>
            <SearchField />
            <SearchResult />
            <Router history={history}>
            </Router>
        </Provider>
    )
}