diff --git a/js/components/commentsform.jsx b/js/components/commentsform.jsx index 6454056..e041577 100644 --- a/js/components/commentsform.jsx +++ b/js/components/commentsform.jsx @@ -21,7 +21,22 @@ class CommentsForm extends React.Component { const mapDispatchToProps = function(dispatch){ return { handleSubmit: function(body){ - dispatch({type:'ADD', comment: body }); + fetch( + 'https://stupidcomments.herokuapp.com/comments', + { + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + method: "POST", + body: JSON.stringify({ body:body }) + } + ).then(function(response){ + response.json().then(function(data){ + console.log(data); + dispatch({type:'ADD', comment: data.body }); + }); + }); } } } diff --git a/js/components/commentslist.jsx b/js/components/commentslist.jsx index b39c4b3..4513a88 100644 --- a/js/components/commentslist.jsx +++ b/js/components/commentslist.jsx @@ -1,5 +1,6 @@ import React from 'react'; import { connect } from 'react-redux'; +import store from '../store.js'; class CommentsList extends React.Component { render(){ @@ -10,6 +11,16 @@ class CommentsList extends React.Component { } + componentDidMount(){ + fetch('https://stupidcomments.herokuapp.com/comments').then(function(response){ + response.json().then(function(data){ + let commentsArray = data.map(function(comment){ + return comment.body + }); + store.dispatch({type:'SET', comments:commentsArray}); + }); + }); + } } const mapStateToProps = function(state){ diff --git a/js/index.js b/js/index.js index 3248c71..6290874 100644 --- a/js/index.js +++ b/js/index.js @@ -4,6 +4,27 @@ import Comments from './components/comments.jsx'; import { Provider } from 'react-redux'; import store from './store.js'; +// fetch('https://stupidcomments.herokuapp.com/comments').then(function(response){ +// response.json().then(function(data){ +// console.log(data); +// }); +// }); +// fetch( +// 'https://stupidcomments.herokuapp.com/comments', +// { +// headers: { +// 'Accept': 'application/json', +// 'Content-Type': 'application/json' +// }, +// method: "POST", +// body: JSON.stringify({ body:'again from react' }) +// } +// ).then(function(response){ +// response.json().then(function(data){ +// console.log(data); +// }); +// }); + ReactDOM.render( diff --git a/js/store.js b/js/store.js index 747588c..879e994 100644 --- a/js/store.js +++ b/js/store.js @@ -4,6 +4,8 @@ let comments = function(state = [], action){ switch(action.type){ case 'ADD': return [...state, action.comment]; + case 'SET': + return action.comments default: return state }