after apply redux

react-client/.eslintcache

-[{"/home/mli/react-flask-poc/react-client/src/index.js":"1","/home/mli/react-flask-poc/react-client/src/App.js":"2","/home/mli/react-flask-poc/react-client/src/reportWebVitals.js":"3","/home/mli/react-flask-poc/react-client/src/components/Posts.js":"4","/home/mli/react-flask-poc/react-client/src/components/Postform.js":"5"},{"size":500,"mtime":1608066788746,"results":"6","hashOfConfig":"7"},{"size":245,"mtime":1608080866771,"results":"8","hashOfConfig":"7"},{"size":362,"mtime":1608066788746,"results":"9","hashOfConfig":"7"},{"size":713,"mtime":1608079404067,"results":"10","hashOfConfig":"7"},{"size":1437,"mtime":1608080388800,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1j0yot5",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/mli/react-flask-poc/react-client/src/index.js",[],"/home/mli/react-flask-poc/react-client/src/App.js",[],"/home/mli/react-flask-poc/react-client/src/reportWebVitals.js",[],"/home/mli/react-flask-poc/react-client/src/components/Posts.js",[],["23","24"],"/home/mli/react-flask-poc/react-client/src/components/Postform.js",[],{"ruleId":"25","replacedBy":"26"},{"ruleId":"27","replacedBy":"28"},"no-native-reassign",["29"],"no-negated-in-lhs",["30"],"no-global-assign","no-unsafe-negation"]
\ No newline at end of file
+[{"/home/mli/react-flask-poc/react-client/src/index.js":"1","/home/mli/react-flask-poc/react-client/src/App.js":"2","/home/mli/react-flask-poc/react-client/src/reportWebVitals.js":"3","/home/mli/react-flask-poc/react-client/src/components/Posts.js":"4","/home/mli/react-flask-poc/react-client/src/components/Postform.js":"5","/home/mli/react-flask-poc/react-client/src/store.js":"6","/home/mli/react-flask-poc/react-client/src/reducers/index.js":"7","/home/mli/react-flask-poc/react-client/src/reducers/postReducer.js":"8","/home/mli/react-flask-poc/react-client/src/actions/types.js":"9","/home/mli/react-flask-poc/react-client/src/actions/postActions.js":"10"},{"size":500,"mtime":1608066788746,"results":"11","hashOfConfig":"12"},{"size":357,"mtime":1608082528849,"results":"13","hashOfConfig":"12"},{"size":362,"mtime":1608066788746,"results":"14","hashOfConfig":"12"},{"size":1030,"mtime":1608087500736,"results":"15","hashOfConfig":"12"},{"size":1448,"mtime":1608086637568,"results":"16","hashOfConfig":"12"},{"size":371,"mtime":1608085288315,"results":"17","hashOfConfig":"12"},{"size":138,"mtime":1608082858554,"results":"18","hashOfConfig":"12"},{"size":565,"mtime":1608086969576,"results":"19","hashOfConfig":"12"},{"size":73,"mtime":1608082975157,"results":"20","hashOfConfig":"12"},{"size":676,"mtime":1608085818986,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},"1j0yot5",{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"41","messages":"42","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},"/home/mli/react-flask-poc/react-client/src/index.js",[],["43","44"],"/home/mli/react-flask-poc/react-client/src/App.js",[],"/home/mli/react-flask-poc/react-client/src/reportWebVitals.js",[],"/home/mli/react-flask-poc/react-client/src/components/Posts.js",[],"/home/mli/react-flask-poc/react-client/src/components/Postform.js",[],"/home/mli/react-flask-poc/react-client/src/store.js",[],"/home/mli/react-flask-poc/react-client/src/reducers/index.js",[],"/home/mli/react-flask-poc/react-client/src/reducers/postReducer.js",["45"],"/home/mli/react-flask-poc/react-client/src/actions/types.js",[],"/home/mli/react-flask-poc/react-client/src/actions/postActions.js",[],{"ruleId":"46","replacedBy":"47"},{"ruleId":"48","replacedBy":"49"},{"ruleId":"50","severity":1,"message":"51","line":8,"column":1,"nodeType":"52","endLine":27,"endColumn":2},"no-native-reassign",["53"],"no-negated-in-lhs",["54"],"import/no-anonymous-default-export","Unexpected default export of anonymous function","ExportDefaultDeclaration","no-global-assign","no-unsafe-negation"]
\ No newline at end of file

react-client/package-lock.json

@@ -7040,6 +7040,14 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -12310,6 +12318,18 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-redux": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.2.tgz",
+      "integrity": "sha512-8+CQ1EvIVFkYL/vu6Olo7JFLWop1qRUeb46sGtIMDCSpgwPQq8fPLpirIB0iTqFe9XYEFPHssdX8/UwN6pAkEA==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "hoist-non-react-statics": "^3.3.2",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.13.1"
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -12496,6 +12516,20 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "redux": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
+      "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "symbol-observable": "^1.2.0"
+      }
+    },
+    "redux-thunk": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz",
+      "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw=="
+    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -14179,6 +14213,11 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

react-client/package.json

@@ -8,7 +8,10 @@
     "@testing-library/user-event": "^12.6.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-redux": "^7.2.2",
     "react-scripts": "4.0.1",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

react-client/src/App.js

 import './App.css';
+import {Provider} from 'react-redux';
 import Posts from './components/Posts';
 import Postform from './components/Postform';
+import store from './store';
 
 function App() {
   return (
+    <Provider store={store}>
     <div className="App">
       <Postform/>
       <hr/>
       <Posts/>
     </div>
+    </Provider>
   );
 }
 

react-client/src/actions/postActions.js

+import {FETCH_POSTS,NEW_POST} from './types';
+export const  fetchPosts=()=>dispatch=>{
+        console.log('fetching...');
+        fetch('https://jsonplaceholder.typicode.com/posts')
+        .then(res=>res.json())
+        .then(posts=>dispatch({
+            type:FETCH_POSTS,
+            payload: posts
+        }));
+}
+export const  createPost=(post)=>dispatch=>{
+       fetch('https://jsonplaceholder.typicode.com/posts',
+        {
+            method:'POST',
+            header:{'content-type':'application/json'},
+            body: JSON.stringify(post)
+        }).then(res=>res.json())
+       .then(post=>dispatch({
+        type:NEW_POST,
+        payload: post
+       }));
+};
\ No newline at end of file

react-client/src/actions/types.js

+export const FETCH_POSTS='FETCH_POSTS';
+export const NEW_POST='NEW_POST';
\ No newline at end of file

react-client/src/components/Postform.js

 import React,{Component} from 'react'
+import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
+import {createPost} from '../actions/postActions'
+
 class Postform extends Component{
     constructor(props){
         super(props);
@@ -18,13 +22,8 @@ class Postform extends Component{
             title:this.state.title,
             body:this.state.body
         }
-        fetch('https://jsonplaceholder.typicode.com/posts',
-        {
-            method:'POST',
-            header:{'content-type':'application/json'},
-            body: JSON.stringify(post)
-        }).then(res=>res.json())
-        .then(data=>console.log(data));
+      //call action
+      this.props.createPost(post);
     }
     
     render(){
@@ -49,4 +48,8 @@ class Postform extends Component{
     }
 }
 
-export default Postform;
\ No newline at end of file
+Postform.propTypes={
+    createPost: PropTypes.func.isRequired
+    
+};
+export default connect(null,{createPost})(Postform);
\ No newline at end of file

react-client/src/components/Posts.js

-import React,{Component} from 'react'
+import React,{Component} from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {fetchPosts} from '../actions/postActions';
+
 class Posts extends Component{
-    constructor(props){
-        super(props);
-        this.state={
-            posts:[]
-        }
-    }
+
     componentWillMount(){
-        fetch('https://jsonplaceholder.typicode.com/posts')
-        .then(res=>res.json())
-        .then(data=>{console.log(data);this.setState({posts:data});})
+        this.props.fetchPosts();
+    }
+    componentWillReceiveProps(nextProps){
+        if(nextProps.newPost){
+            this.props.posts.unshift(nextProps.newPost);
+            
+        }
     }
     render(){
-        const postItems=this.state.posts.map(post=>(
+        const postItems=this.props.posts.map(post=>(
             <div key={post.id}>
             <h3>{post.title}</h3>
             <p>{post.body}</p>
@@ -26,5 +29,14 @@ class Posts extends Component{
             )
     }
 }
+Posts.propTypes={
+    fetchPosts: PropTypes.func.isRequired,
+    posts:PropTypes.array.isRequired,
+    newPost:PropTypes.object
+}
+const mapStateToProps=state=>({
+    posts:state.posts.items,
+    newPost:state.posts.item
+})
 
-export default Posts;
\ No newline at end of file
+export default connect (mapStateToProps,{fetchPosts})(Posts);
\ No newline at end of file

react-client/src/reducers/index.js

+import {combineReducers} from 'redux';
+import postReducer from './postReducer';
+export default combineReducers({
+    posts:postReducer
+});
\ No newline at end of file

react-client/src/reducers/postReducer.js

+import {FETCH_POSTS,NEW_POST} from '../actions/types';
+
+const initialState={
+    items : [] ,
+    item : {}
+};
+
+export default function(state=initialState,action){
+    switch(action.type){
+        case FETCH_POSTS:
+            console.log('reducer');
+            return {
+                ...state,
+                items: action.payload
+                ,item: {}
+            }
+        case NEW_POST:
+            return {
+                ...state,
+                item: action.payload
+            }
+        default:
+            return state;
+            
+    }
+    
+}
\ No newline at end of file

react-client/src/store.js

+import {createStore,applyMiddleware,compose} from 'redux';
+import thunk from 'redux-thunk';
+import rootReducer from './reducers'; 
+
+const initalState={};
+const middleware=[thunk];
+
+const store=createStore(rootReducer,initalState,
+compose(applyMiddleware(...middleware),window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()));
+export default store;