Skip to content

Commit d56d7d7

Browse files
NikitaSysoevNikitaSysoev
committed
add Edit, Add, actions
1 parent efb2e81 commit d56d7d7

File tree

11 files changed

+207
-202
lines changed

11 files changed

+207
-202
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-tracker",
3-
"version": "1.1.1",
3+
"version": "1.1.2",
44
"private": true,
55
"dependencies": {
66
"@fortawesome/fontawesome-svg-core": "^1.2.18",

‎src/App.js‎

Lines changed: 8 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
2-
// import { Route, HashRouter as Router } from 'react-router-dom';
3-
import { FORM_ADD, FORM_EDIT } from './lib/const';
2+
import { Route, Switch } from 'react-router-dom';
43
import { NAV_ITEMS, NAV_MAIN } from './lib/nav_data';
54
import Navigation from './components/navigation';
65

@@ -11,65 +10,10 @@ export default class App extends React.Component {
1110
constructor(props) {
1211
super(props);
1312
this.state = {
14-
activeNavItem: NAV_MAIN,
15-
taskForEdit: null,
16-
formSate: FORM_ADD // ["add", "edit"]
13+
activeNavItem: NAV_MAIN
1714
};
1815
}
1916

20-
handleSaveFormData = data => {
21-
let { taskList, formSate, taskForEdit } = this.state;
22-
if (formSate === FORM_ADD) {
23-
taskList = taskList.concat(data);
24-
} else {
25-
taskList = taskList.map(item => (item.id === taskForEdit.id ? data : item));
26-
}
27-
this.setState({
28-
taskList,
29-
taskForEdit: null,
30-
formSate: FORM_ADD
31-
});
32-
localStorage.setItem('TASKS', JSON.stringify(taskList));
33-
return true;
34-
};
35-
36-
handleResetData = () => {
37-
this.setState({
38-
taskForEdit: null,
39-
formSate: FORM_ADD
40-
});
41-
};
42-
43-
handleEditTask = (e, taskId) => {
44-
const { taskList } = this.state;
45-
const taskForEdit = taskList.find(item => item.id === taskId);
46-
if (taskForEdit === this.state.taskForEdit || this.state.formSate === FORM_EDIT) {
47-
this.handleResetData();
48-
return false;
49-
}
50-
if (this.state.formSate === FORM_ADD) {
51-
this.setState({
52-
taskForEdit,
53-
formSate: FORM_EDIT
54-
});
55-
}
56-
};
57-
58-
handleClearList = () => {
59-
this.setState({ taskList: [] });
60-
localStorage.removeItem('TASKS');
61-
};
62-
63-
// handleDeleteTask = (e, taskId) => {
64-
// const { taskList } = this.state;
65-
// this.setState(
66-
// {
67-
// taskList: taskList.filter(item => item.id !== taskId)
68-
// },
69-
// () => localStorage.setItem('TASKS', JSON.stringify(this.state.taskList))
70-
// );
71-
// };
72-
7317
handleNavClick = e => {
7418
e.preventDefault();
7519
const { target } = e;
@@ -93,18 +37,12 @@ export default class App extends React.Component {
9337
<div className="container">
9438
<Navigation items={this.navHelper()} />
9539
<React.Suspense fallback={<div> Loading....</div>}>
96-
{this.state.activeNavItem === NAV_MAIN ? (
97-
<MainTab
98-
onTaskEdit={this.handleEditTask}
99-
taskForEdit={this.state.taskForEdit}
100-
formSate={this.state.formSate}
101-
onSaveData={this.handleSaveFormData}
102-
onListClear={this.handleClearList}
103-
onResetData={this.handleResetData}
104-
/>
105-
) : (
106-
<Dnd taskList={this.state.taskList} />
107-
)}
40+
{/* <Switch>
41+
<Route exact path="/" render={() => (<MainTab
42+
/>)} />
43+
<Route exact path="/dnd" render={() => <Dnd />} />
44+
</Switch> */}
45+
{this.state.activeNavItem === NAV_MAIN ? <MainTab /> : <Dnd />}
10846
</React.Suspense>
10947
</div>
11048
);

‎src/components/main_form/index.jsx‎

Lines changed: 70 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3+
import { connect } from 'react-redux';
4+
import * as actions from '../../store/action_creators';
35

46
import { Card } from '../card';
57
import { TextInput, TextArea, SelectInput, CheckboxInput, DateInput } from '../form';
68
import { TASK_OPTIONS, FORM_ADD, TODO } from '../../lib/const';
79

8-
export default class MainForm extends React.Component {
10+
class MainForm extends React.Component {
911
static propTypes = {
10-
formSate: PropTypes.string, // состояние формы (редактровать или добавить таску)
11-
taskForEdit: PropTypes.object, // номер таски, которую редактируют
12-
onSaveData: PropTypes.func
12+
taskForEdit: PropTypes.string, // номер таски, которую редактируют
13+
formState: PropTypes.string,
14+
taskList: PropTypes.array,
15+
taskAdd: PropTypes.func,
16+
setFormState: PropTypes.func,
17+
taskEdit: PropTypes.func
1318
};
1419

1520
constructor(props) {
@@ -21,15 +26,24 @@ export default class MainForm extends React.Component {
2126
}
2227
}
2328

24-
static getDerivedStateFromProps = (nextProps, state) => {
25-
if (!state.propsFlag && nextProps.taskForEdit) {
26-
return {
27-
data: nextProps.taskForEdit,
28-
propsFlag: true
29-
}
29+
// static getDerivedStateFromProps = (nextProps, state) => {
30+
// if (!state.propsFlag && nextProps.taskForEdit !== null && nextProps.taskList.length) {
31+
// const data = { ...nextProps.taskList.find(item => item.id === nextProps.taskForEdit) };
32+
// return {
33+
// data,
34+
// propsFlag: true
35+
// }
36+
// }
37+
// return null;
38+
// };
39+
40+
componentDidUpdate(prevProps) {
41+
if (this.props.taskForEdit !== prevProps.taskForEdit) {
42+
this.setState({
43+
data: { ...this.props.taskList.find(item => item.id === this.props.taskForEdit) }
44+
})
3045
}
31-
return null;
32-
};
46+
}
3347

3448

3549
handleChange = (e) => {
@@ -43,32 +57,39 @@ export default class MainForm extends React.Component {
4357
}));
4458
}
4559

46-
handleClearForm = () => {
47-
this.setState({ data: {} });
48-
}
49-
5060
handleResetData = () => {
51-
this.props.onResetData();
52-
this.setState({ data: {} });
61+
if (this.props.formState === FORM_ADD) {
62+
this.setState({ data: {} });
63+
} else {
64+
this.props.setFormState({ formState: FORM_ADD, taskId: null });
65+
this.setState({ data: {} });
66+
}
5367
}
5468

5569
handleSaveData = (e) => {
5670
e.preventDefault();
5771
const { data } = this.state;
5872
const { taskStatus = TODO } = data;
59-
if (this.props.onSaveData({ ...data, taskStatus, id: String(Date.now()) }) === true) {
60-
this.setState({ data: {} });
73+
const { taskList, taskForEdit } = this.props;
74+
if (this.props.formState === FORM_ADD) {
75+
const newItem = { ...data, taskStatus, id: String(Date.now()) };
76+
this.props.taskAdd({ newItem, taskList });
77+
} else {
78+
const newItem = { ...data };
79+
this.props.taskEdit({ newItem, taskList, taskForEdit });
80+
this.props.setFormState({ formState: FORM_ADD, taskId: null })
6181
}
82+
this.setState({ data: {} });
6283
}
6384

6485
render() {
6586
return (
6687
<Card>
6788
<h4>
6889
{
69-
this.props.formSate === FORM_ADD
90+
this.props.formState === FORM_ADD
7091
? "Add new task"
71-
: `Edit task ${this.props.taskForEdit.taskName || ""}`
92+
: `Edit task ${this.state.data.taskName || ""}`
7293
}
7394
</h4>
7495

@@ -119,27 +140,49 @@ export default class MainForm extends React.Component {
119140
<div className='col-sm-6'>
120141
<button
121142
type="submit"
122-
className={`btn ${this.props.formSate === FORM_ADD ? 'btn-primary' : 'btn-warning'}`}
143+
className={`btn ${this.props.formState === FORM_ADD ?
144+
'btn-primary' : 'btn-warning'}`}
123145
onClick={this.handleSaveData}
124146
>
125147
{
126-
this.props.formSate === FORM_ADD ? "Add new task" : "Save changes"
148+
this.props.formState === FORM_ADD ?
149+
"Add new task" : "Save changes"
127150
}
128151
</button>
129152
</div>
130153
<div className='col-sm-6'>
131154
<button
132155
type="submit"
133-
className={`btn ${this.props.formSate === FORM_ADD ? 'btn-secondary' : 'btn-danger'}`}
156+
className={`btn ${this.props.formState === FORM_ADD ?
157+
'btn-secondary' : 'btn-danger'}`}
134158
onClick={this.handleResetData}
135159
>
136160
{
137-
this.props.formSate === FORM_ADD ? "Clear form" : "Cancel"
161+
this.props.formState === FORM_ADD ?
162+
"Clear form" : "Cancel"
138163
}
139164
</button>
140165
</div>
141166
</div>
142167
</Card>
143168
)
144169
}
145-
}
170+
}
171+
172+
const mapStateToProps = store => {
173+
return {
174+
taskForEdit: store.app.taskId,
175+
formState: store.app.formState,
176+
taskList: [...store.app.taskList]
177+
}
178+
}
179+
180+
const mapDispatchToProps = dispatch => {
181+
return {
182+
taskAdd: payload => dispatch(actions.addTask(payload)),
183+
taskEdit: payload => dispatch(actions.editTask(payload)),
184+
setFormState: payload => dispatch(actions.setFormState(payload))
185+
}
186+
}
187+
188+
export default connect(mapStateToProps, mapDispatchToProps)(MainForm);

‎src/components/main_list/index.jsx‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,16 @@ import { Card } from '../card';
77
import ViewTaskModal from '../task/view_task';
88
import Modal from '../modals/simple_modal';
99
import * as actions from '../../store/action_creators';
10+
import { FORM_ADD, FORM_EDIT } from '../../lib/const';
1011

1112
class MainList extends React.Component {
1213
static propTypes = {
1314
taskList: PropTypes.array,
1415
taskUpdate: PropTypes.func,
1516
taskDelete: PropTypes.func,
16-
onTaskEdit: PropTypes.func,
17+
setFormState: PropTypes.func,
18+
taskForEdit: PropTypes.string, // номер таски, которую редактируют
19+
formState: PropTypes.string,
1720
};
1821

1922
constructor(props) {
@@ -56,7 +59,12 @@ class MainList extends React.Component {
5659
e.persist(); // convert event React to event DOM
5760
const { currentTarget: target } = e;
5861
const taskId = target.getAttribute('data-id');
59-
this.props.onTaskEdit(e, taskId);
62+
63+
this.props.setFormState({ formState: FORM_EDIT, taskId });
64+
65+
if (this.props.formState === FORM_EDIT && taskId === this.props.taskForEdit){
66+
this.props.setFormState({ formState: FORM_ADD, taskId: null })
67+
}
6068
};
6169

6270
handleDeleteTask = (e) => {
@@ -67,13 +75,14 @@ class MainList extends React.Component {
6775
this.props.taskDelete({ taskList, taskId });
6876
};
6977

70-
handleClearList() {
71-
this.props.onListClear();
78+
handleClearList = () => {
79+
this.props.taskUpdate({ taskList: [] });
80+
localStorage.removeItem('TASKS');
7281
}
7382

7483
renderOneTask = (item) => {
7584
const { taskForEdit } = this.props;
76-
const isActive = taskForEdit && taskForEdit.id === item.id ? 'active' : '';
85+
const isActive = taskForEdit && taskForEdit === item.id ? 'active' : '';
7786
return (
7887
<li
7988
key={item.id}
@@ -132,16 +141,19 @@ class MainList extends React.Component {
132141
<button
133142
type="button"
134143
className="btn btn-outline-danger"
135-
onClick={this.handleClearList.bind(this)}
144+
onClick={this.handleClearList}
136145
style={{ marginTop: '10px' }}>
137146
Clear List
138147
</button>
139148
:
140149
null;
141150

142151
const filterElement = () => {
143-
return this.props.taskList ? this.props.taskList.find(item => String(item.id) === this.state.taskId) : null;
152+
return this.props.taskList ?
153+
this.props.taskList.find(item => String(item.id) === this.state.taskId)
154+
: null;
144155
}
156+
145157
return (
146158
<Card>
147159
<h4>Список всех задач</h4>
@@ -154,7 +166,7 @@ class MainList extends React.Component {
154166
btnClearAll
155167
}
156168
<Modal
157-
title="Some title"
169+
title="Task Info"
158170
onCancelClick={this.handleCloseModal}
159171
display={this.state.modalFlag}
160172
>
@@ -168,14 +180,17 @@ class MainList extends React.Component {
168180

169181
const mapStateToProps = store => {
170182
return {
183+
taskForEdit: store.app.taskId,
184+
formState: store.app.formState,
171185
taskList: [...store.app.taskList]
172186
}
173187
}
174188

175189
const mapDispatchToProps = dispatch => {
176190
return {
177191
taskUpdate: (payload) => dispatch(actions.updateTask(payload)),
178-
taskDelete: (payload) => dispatch(actions.deleteTask(payload))
192+
taskDelete: (payload) => dispatch(actions.deleteTask(payload)),
193+
setFormState: payload => dispatch(actions.setFormState(payload))
179194
}
180195
}
181196

‎src/lib/nav_data.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ export const NAV_ITEMS = [
55
{
66
title: 'Главная',
77
name: NAV_MAIN,
8-
8+
link: '/'
99
},
1010
{
1111
title: 'Drag & Drop',
1212
name: NAV_DND,
13+
link: '/dnd'
1314
}
1415
]

0 commit comments

Comments
 (0)