App.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. import React, {useState } from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  4. import {Provider, connect} from 'react-redux';
  5. import {actionSearch } from './actions';
  6. import store from './reducers'
  7. //import { CounterView, Counter, ConnectedBIGTABLO, ConnectedCounter, ConnectedBigButton } from './components'
  8. import {Router, Route, Link, Switch, Redirect} from 'react-router-dom';
  9. import createHistory from "history/createBrowserHistory";
  10. import {actionPosts, actionLogin} from './actions'
  11. const history = createHistory()
  12. const SearchField = connect(null, {onChange: actionSearch})(({onChange}) => {
  13. const [text, setText] = useState('')
  14. return (
  15. <input value={text} onChange={e => (setText(e.target.value), onChange(e.target.value))}/>
  16. )
  17. })
  18. const Post = ({post}) =>
  19. <div>
  20. <h2>{post.title}</h2>
  21. <p>{post.text}</p>
  22. </div>
  23. const PostFeed = ({posts=[]}) =>
  24. <div>
  25. {posts && posts.map(p => <Post post={p}/>)}
  26. </div>
  27. const CPostFeed = connect(s => ({posts:s.promise.posts &&
  28. s.promise.posts.payload &&
  29. s.promise.posts.payload.getPosts}))(PostFeed)
  30. const PageMain = () =>
  31. <>
  32. <CPostFeed />
  33. </>
  34. const LoginForm = ({onLogin}) =>
  35. <>
  36. <input type='text' />
  37. <input type='password' />
  38. <button onClick={() => onLogin('admin', '123')}>Login</button>
  39. </>
  40. const CLoginForm = connect(null, {onLogin: actionLogin})(LoginForm)
  41. const SearchResult = connect(s => (console.log(s), ({payload: s.searchResult &&
  42. s.searchResult.payload &&
  43. s.searchResult.payload.payload &&
  44. s.searchResult.payload.payload.GoodFind})))(({payload}) => <h1>{console.log(payload)}{payload && payload.map(({_id, name}) => <div>{name}</div>)}</h1>)
  45. store.dispatch(actionPosts())
  46. export default () => {
  47. return (
  48. <Provider store={store}>
  49. <SearchField />
  50. <SearchResult />
  51. <CLoginForm />
  52. <Router history={history}>
  53. <Route path="/" component={PageMain} />
  54. </Router>
  55. </Provider>
  56. )
  57. }