Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 3c97ec5

Browse files
committed
craete and remove complted
1 parent 94e5dd3 commit 3c97ec5

File tree

4 files changed

+48
-13
lines changed

4 files changed

+48
-13
lines changed

‎client/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
"http-proxy-middleware": "^0.19.1",
99
"react": "^16.8.5",
1010
"react-dom": "^16.8.5",
11-
"react-scripts": "2.1.8"
11+
"react-scripts": "2.1.8",
12+
"prop-types": "^15.5.7"
1213
},
1314
"scripts": {
1415
"start": "react-scripts start",

‎client/src/components/List.jsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33

4-
const List = ({ list }) => (
4+
const List = ({ list, onRemoveList }) => (
55
<div>
66
<div className="single-listItem" key={list.id}>
77
<h4>{list.title}</h4>
88
<p>{list.excerpt}</p>
9+
<button
10+
type="button"
11+
onClick={() => {
12+
onRemoveList(list.id);
13+
}}
14+
>
15+
Remove
16+
</button>
917
</div>
1018
</div>
1119
);
1220

13-
List.propTypes = { list: PropTypes.object };
14-
List.defaultProps = { list: {} };
21+
List.propTypes = { list: PropTypes.object,onRemoveList: PropTypes.func };
22+
List.defaultProps = { list: {},onRemoveList: ()=>{} };
1523

1624
export default List;

‎client/src/components/ListsContainer.jsx

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
1+
/* eslint-disable no-unused-expressions */
12
import React, { Component } from 'react';
23
import axios from 'axios';
34
import List from './List';
45
import NewListForm from './NewListForm';
56

67
class ListsContainer extends Component {
7-
state = {
8-
lists: [],
9-
};
8+
constructor(props) {
9+
super(props);
10+
this.state = {
11+
lists: [],
12+
};
13+
}
1014

1115
componentDidMount = () => {
12-
this.loadLists();
16+
this.loadLists;
1317
};
1418

15-
loadLists=() =>
16-
axios
19+
getloadLists() {
20+
returnaxios
1721
.get('api/v1/lists.json')
1822
.then(response => {
1923
console.log(response);
@@ -22,14 +26,36 @@ class ListsContainer extends Component {
2226
});
2327
})
2428
.catch(error => console.log(error));
29+
}
30+
31+
addNewList = (title, excerpt) => {
32+
axios
33+
.post('/api/v1/lists', { list: { title, excerpt } })
34+
.then(response => {
35+
console.log(response);
36+
const lists = [...this.state.lists, response.data];
37+
this.setState({ lists });
38+
})
39+
.catch(error => {
40+
console.log(error);
41+
});
42+
};
43+
44+
removeList = id => {
45+
axios.delete(`/api/v1/lists/${id}`).then(() => {
46+
const { lists } = this.state;
47+
const newlist = lists.filter(list => list.id !== id);
48+
this.setState({ lists: newlist });
49+
});
50+
};
2551

2652
render() {
2753
const { lists } = this.state;
2854
return (
2955
<React.Fragment>
3056
<div className="lists-container">
3157
{lists.map(list => (
32-
<List list={list} key={list.id} />
58+
<List list={list} key={list.id} onRemoveList={this.removeList}/>
3359
))}
3460
</div>
3561

‎client/src/components/NewListForm.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33

4-
const NewListForm = ({ onNewList =f=>f}) => {
4+
const NewListForm = ({ onNewList }) => {
55
let title;
66
let excerpt;
77
const submit = e => {
88
e.preventDefault();
9-
onNewList(_title.value, _excerpt.value);
9+
onNewList(title.value, excerpt.value);
1010
title.value = '';
1111
excerpt.value = '';
1212
title.focus();

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /