craete and remove complted

Author: Dujota

client/package.json

@@ -8,7 +8,8 @@
  "http-proxy-middleware": "^0.19.1",
  "react": "^16.8.5",
  "react-dom": "^16.8.5",
- "react-scripts": "2.1.8"
+ "react-scripts": "2.1.8",
+ "prop-types": "^15.5.7"
  },
  "scripts": {
  "start": "react-scripts start",

client/src/components/List.jsx

@@ -1,16 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const List = ({ list }) => (
+const List = ({ list, onRemoveList }) => (
  <div>
  <div className="single-listItem" key={list.id}>
  <h4>{list.title}</h4>
  <p>{list.excerpt}</p>
+ <button
+ type="button"
+ onClick={() => {
+ onRemoveList(list.id);
+ }}
+ >
+ Remove
+ </button>
  </div>
  </div>
 );
 
-List.propTypes = { list: PropTypes.object };
-List.defaultProps = { list: {} };
+List.propTypes = { list: PropTypes.object, onRemoveList: PropTypes.func };
+List.defaultProps = { list: {}, onRemoveList: () => {} };
 
 export default List;

client/src/components/ListsContainer.jsx

@@ -1,19 +1,23 @@
+/* eslint-disable no-unused-expressions */
 import React, { Component } from 'react';
 import axios from 'axios';
 import List from './List';
 import NewListForm from './NewListForm';
 
 class ListsContainer extends Component {
- state = {
- lists: [],
- };
+ constructor(props) {
+ super(props);
+ this.state = {
+ lists: [],
+ };
+ }
 
  componentDidMount = () => {
- this.loadLists();
+ this.loadLists;
  };
 
- loadLists = () =>
- axios
+ get loadLists() {
+ return axios
  .get('api/v1/lists.json')
  .then(response => {
  console.log(response);
@@ -22,14 +26,36 @@ class ListsContainer extends Component {
  });
  })
  .catch(error => console.log(error));
+ }
+
+ addNewList = (title, excerpt) => {
+ axios
+ .post('/api/v1/lists', { list: { title, excerpt } })
+ .then(response => {
+ console.log(response);
+ const lists = [...this.state.lists, response.data];
+ this.setState({ lists });
+ })
+ .catch(error => {
+ console.log(error);
+ });
+ };
+
+ removeList = id => {
+ axios.delete(`/api/v1/lists/${id}`).then(() => {
+ const { lists } = this.state;
+ const newlist = lists.filter(list => list.id !== id);
+ this.setState({ lists: newlist });
+ });
+ };
 
  render() {
  const { lists } = this.state;
  return (
  <React.Fragment>
  <div className="lists-container">
  {lists.map(list => (
- <List list={list} key={list.id} />
+ <List list={list} key={list.id} onRemoveList={this.removeList} />
  ))}
  </div>
 

client/src/components/NewListForm.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const NewListForm = ({ onNewList = f => f }) => {
+const NewListForm = ({ onNewList }) => {
  let title;
  let excerpt;
  const submit = e => {
  e.preventDefault();
- onNewList(_title.value, _excerpt.value);
+ onNewList(title.value, excerpt.value);
  title.value = '';
  excerpt.value = '';
  title.focus();