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 b68aa45

Browse files
committed
crud complete
1 parent eeb8bb9 commit b68aa45

File tree

3 files changed

+120
-13
lines changed

3 files changed

+120
-13
lines changed
Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React, { PureComponent } from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
class EditListForm extends PureComponent {
5+
state = {
6+
id: 0,
7+
title: '',
8+
excerpt: '',
9+
};
10+
11+
componentDidMount() {
12+
const { list } = this.props;
13+
const { id, title, excerpt } = list;
14+
this.setState({ id, title, excerpt });
15+
}
16+
17+
handleChange = e => {
18+
this.setState({ [e.target.name]: e.target.value });
19+
};
20+
21+
handleSubmit = e => {
22+
e.preventDefault();
23+
console.log('clicked');
24+
const { id, title, excerpt } = this.state;
25+
const { editList } = this.props;
26+
editList(id, title, excerpt);
27+
};
28+
29+
render() {
30+
const { title, excerpt } = this.state;
31+
return (
32+
<form onSubmit={this.handleSubmit}>
33+
<input
34+
type="text"
35+
name="title"
36+
placeholder="Title..."
37+
value={title}
38+
onChange={this.handleChange}
39+
/>
40+
<input
41+
type="text"
42+
name="excerpt"
43+
placeholder="Excerpt..."
44+
value={excerpt}
45+
onChange={this.handleChange}
46+
/>
47+
48+
<button type="submit">Update List</button>
49+
</form>
50+
);
51+
}
52+
}
53+
54+
EditListForm.propTypes = {
55+
list: PropTypes.object,
56+
editList: PropTypes.func,
57+
};
58+
59+
EditListForm.defaultProps = { list: {}, editList: () => {} };
60+
61+
export default EditListForm;

‎client/src/components/List.jsx‎

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

4-
const List = ({ list, onRemoveList }) => (
4+
const List = ({ list, onRemoveList, editingList }) => (
55
<div>
66
<div className="single-listItem" key={list.id}>
77
<h4>{list.title}</h4>
@@ -14,6 +14,15 @@ const List = ({ list, onRemoveList }) => (
1414
>
1515
Remove
1616
</button>
17+
{` | `}
18+
<button
19+
type="button"
20+
onClick={() => {
21+
editingList(list.id);
22+
}}
23+
>
24+
Edit
25+
</button>
1726
</div>
1827
</div>
1928
);

‎client/src/components/ListsContainer.jsx‎

Lines changed: 49 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
/* eslint-disable no-unused-expressions */
2-
import React, { Component } from 'react';
2+
import React, { PureComponent } from 'react';
33
import axios from 'axios';
44
import List from './List';
55
import NewListForm from './NewListForm';
6+
import EditListForm from './EditListForm';
67

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

1514
componentDidMount = () => {
1615
this.loadLists;
@@ -49,14 +48,52 @@ class ListsContainer extends Component {
4948
});
5049
};
5150

51+
editingList = id => {
52+
this.setState({ editingListId: id });
53+
};
54+
55+
editList = (id, title, excerpt) => {
56+
axios
57+
.put(`/api/v1/lists/${id}`, {
58+
list: {
59+
title,
60+
excerpt,
61+
},
62+
})
63+
.then(response => {
64+
console.log(response);
65+
const { lists } = this.state;
66+
// TODO FIX THE EDIT FN
67+
lists[id - 1] = { id, title, excerpt };
68+
this.setState(() => ({
69+
lists,
70+
editingListId: null,
71+
}));
72+
})
73+
.catch(error => console.log(error));
74+
};
75+
5276
render() {
53-
const { lists } = this.state;
77+
const { lists, editingListId } = this.state;
5478
return (
5579
<React.Fragment>
5680
<div className="lists-container">
57-
{lists.map(list => (
58-
<List list={list} key={list.id} onRemoveList={this.removeList} />
59-
))}
81+
{lists.map(list =>
82+
editingListId === list.id ? (
83+
<EditListForm
84+
list={list}
85+
key={list.id}
86+
editList={this.editList}
87+
/>
88+
) : (
89+
<List
90+
list={list}
91+
key={list.id}
92+
onRemoveList={this.removeList}
93+
editingList={this.editingList}
94+
/>
95+
)
96+
)}
6097
</div>
6198

6299
<NewListForm onNewList={this.addNewList} />

0 commit comments

Comments
(0)

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