diff --git a/package-lock.json b/package-lock.json index f8c8362..b990dc2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4974,6 +4974,20 @@ "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" }, + "event-stream": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-4.0.1.tgz", + "integrity": "sha512-qACXdu/9VHPBzcyhdOWR5/IahhGMf0roTeZJfzz077GwylcDd90yOHLouhmv7GJ5XzPi6ekaQWd8AvPP2nOvpA==", + "requires": { + "duplexer": "^0.1.1", + "from": "^0.1.7", + "map-stream": "0.0.7", + "pause-stream": "^0.0.11", + "split": "^1.0.1", + "stream-combiner": "^0.2.2", + "through": "^2.3.8" + } + }, "eventemitter3": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz", @@ -5490,6 +5504,11 @@ "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" }, + "from": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz", + "integrity": "sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4=" + }, "from2": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz", @@ -8322,6 +8341,11 @@ "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=" }, + "lodash.assign": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz", + "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=" + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -8442,6 +8466,11 @@ "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz", "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=" }, + "map-stream": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.0.7.tgz", + "integrity": "sha1-ih8HiW2CsQkmvTdEokIACfiJdKg=" + }, "map-visit": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz", @@ -8612,6 +8641,11 @@ "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz", "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==" }, + "mingo": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/mingo/-/mingo-1.3.3.tgz", + "integrity": "sha1-aSLE0Ufvx3GgFCWixMj3eER4xUY=" + }, "mini-css-extract-plugin": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz", @@ -9404,6 +9438,14 @@ "pify": "^3.0.0" } }, + "pause-stream": { + "version": "0.0.11", + "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz", + "integrity": "sha1-/lo0sMvOErWqaitAPuLnO2AvFEU=", + "requires": { + "through": "~2.3" + } + }, "pbkdf2": { "version": "3.0.17", "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.0.17.tgz", @@ -11393,6 +11435,27 @@ } } }, + "save": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/save/-/save-2.4.0.tgz", + "integrity": "sha512-wd5L2uVnsKYkIUaK6i8Ie66IOHaI328gMF0MPuTJtYOjXgUolC33LSIk7Qr8WVA55QHaGwfiVS8a7EFIeGOR3w==", + "requires": { + "async": "^2.6.2", + "event-stream": "^4.0.1", + "lodash.assign": "^4.2.0", + "mingo": "1" + }, + "dependencies": { + "async": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.2.tgz", + "integrity": "sha512-H1qVYh1MYhEEFLsP97cVKqCGo7KfCyTt6uEWqsTBr9SO84oK9Uwbyd/yCW+6rKJLHksBNUVWZDAjfS+Ccx0Bbg==", + "requires": { + "lodash": "^4.17.11" + } + } + } + }, "sax": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", @@ -11961,6 +12024,14 @@ } } }, + "split": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz", + "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==", + "requires": { + "through": "2" + } + }, "split-string": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz", @@ -12054,6 +12125,15 @@ "readable-stream": "^2.0.2" } }, + "stream-combiner": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.2.2.tgz", + "integrity": "sha1-rsjLrBd7Vrb0+kec7YwZEs7lKFg=", + "requires": { + "duplexer": "~0.1.1", + "through": "~2.3.4" + } + }, "stream-each": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.3.tgz", diff --git a/package.json b/package.json index 490d2cc..93fa198 100644 --- a/package.json +++ b/package.json @@ -4,12 +4,14 @@ "private": true, "homepage": "https://boomcamp.github.io/react-3/", "dependencies": { + "axios": "^0.19.0", "faker": "^4.1.0", "json-server": "^0.15.0", "react": "^16.8.6", "react-dom": "^16.8.6", "react-icons": "^3.7.0", - "react-scripts": "3.0.1" + "react-scripts": "3.0.1", + "save": "^2.4.0" }, "scripts": { "start": "react-scripts start", diff --git a/src/components/App.js b/src/components/App.js index b48f641..a1d3bb7 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,9 +1,14 @@ import React, { Component } from 'react'; +import axios from 'axios'; import './App.css'; + import Header from './Header/Header'; import Compose from './Compose/Compose'; +import Post from './Post/Post'; + +axios.defaults.headers.common['Content-Type'] = 'application/json'; class App extends Component { constructor() { @@ -18,13 +23,45 @@ class App extends Component { this.createPost = this.createPost.bind(this); } - componentDidMount() {} + componentDidMount() { + axios + .get('http://localhost:9090/posts') + .then(response => this.setState({ posts: response.data })); + } - updatePost() {} + updatePost(id,text) { + axios + .put(`http://localhost:9090/posts/${id}`, { text }) + .then(response => { + const updatedPost = response.data; + + const updatedPosts = this.state.posts.map(post => { + if(post.id === updatedPost.id) { + return {post, ...updatedPost }; + } + else { + return post; + } + }); + this.setState({ posts: updatedPosts }) + }); + } - deletePost() {} + deletePost(id) { + axios.delete(`http://localhost:9090/posts/${id}`).then(response => { + this.setState({ + posts: this.state.posts.filter(post => post.id !== id), + }); + }); + } - createPost() {} + createPost(text) { + axios + .post('http://localhost:9090/posts', { text }) + .then(results => { + this.setState({ posts: [results.data, ...this.state.posts] }); + }); + } render() { const { posts } = this.state; @@ -34,11 +71,21 @@ class App extends Component {
- + + {posts.map(post => ( + ) + )}
); } } -export default App; +export default App; \ No newline at end of file diff --git a/src/components/Compose/Compose.js b/src/components/Compose/Compose.js index 57a3aed..d63879f 100644 --- a/src/components/Compose/Compose.js +++ b/src/components/Compose/Compose.js @@ -20,7 +20,13 @@ export default class Compose extends Component { this.setState({ text }); } - createPost() {} + createPost() { + const { text } = this.state; + const { createPostFn } = this.props; + + createPostFn( text ); + this.setState({ text: ''}); + } render() { // Destructuring @@ -48,4 +54,4 @@ export default class Compose extends Component { ); } -} +} \ No newline at end of file diff --git a/src/components/Post/Edit/Edit.js b/src/components/Post/Edit/Edit.js index 29e4d05..0b7dbe6 100644 --- a/src/components/Post/Edit/Edit.js +++ b/src/components/Post/Edit/Edit.js @@ -19,7 +19,13 @@ export default class Edit extends Component { this.setState({ text: value }); } - updatePost() {} + updatePost() { + const {text } = this.state; + const { id, updatePostFn, hideEdit } = this.props; + + updatePostFn(id, text); + hideEdit(); + } render() { // More destructuring! diff --git a/src/components/Post/Post.js b/src/components/Post/Post.js index c7cb520..f454cd5 100644 --- a/src/components/Post/Post.js +++ b/src/components/Post/Post.js @@ -56,6 +56,7 @@ export default class Post extends Component { // const editing = this.state.editing // const showMasterMenu = this.state.showMasterMenu const { editing, showMasterMenu } = this.state; + const { id, text, date, updatePostFn, deletePostFn } = this.props; return ( // Main body of post @@ -70,7 +71,7 @@ export default class Post extends Component { style={{ display: showMasterMenu ? 'flex' : 'none' }} > Edit - Delete + deletePostFn(id)}>Delete @@ -80,10 +81,10 @@ export default class Post extends Component { - DevMountain - @DevMountain + Boom.Camp + @boom.camp - - POST DATE GOES HERE + - {date} {/* This is where the text goes. Notice the turnary statement. The turnary statement decides to display either the text OR the editor view @@ -97,9 +98,14 @@ export default class Post extends Component {
{// This has been pulled off of this.state via destructuring editing ? ( - + ) : ( - POST TEXT GOES HERE + {text} )}
@@ -112,4 +118,4 @@ export default class Post extends Component { ); } -} +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index c6dd5c7..a62a218 100644 --- a/src/index.js +++ b/src/index.js @@ -5,4 +5,4 @@ import './index.css'; import App from './components/App'; -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render(, document.getElementById('root')); \ No newline at end of file