fixed 10.06.2019

NikitaSysoev · NikitaSysoev · commit 40e8971e4817 · 2019-06-10T13:18:17.000+03:00
diff --git a/src/App.js b/src/App.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { Container } from 'react-bootstrap';
 import { Route, HashRouter as Router } from 'react-router-dom';
 import { FORM_ADD, FORM_EDIT } from './lib/const';
-import './css/micalendar.css';
 
 import Navigation from './components/navigation';
 import { NAV_ITEMS, NAV_MAIN } from './lib/nav_data';
@@ -22,15 +21,32 @@ export default class App extends React.Component {
   }
 
   componentDidMount() {
-    let taskList = [];
+    let taskList = null;
     try {
       taskList = JSON.parse(localStorage.getItem('TASKS'));
     } catch {
       console.log('Error localstorage upload data');
     }
-    this.setState({ taskList });
+   this.setState({ taskList: taskList !== null ? taskList : [] }) 
   }
 
+  handleSaveFormData = data => {
+    const { taskList  } = this.state;
+    if (this.state.formSate === FORM_ADD) {
+      taskList.push(data);
+    } else {
+      taskList.filter(item => this.state.taskId === item.id)[0] = { ...data };
+    }
+    this.setState({
+      taskList,
+      taskId: null,
+      taskForEdit: null,
+      formSate: FORM_ADD
+    });
+    localStorage.setItem('TASKS', JSON.stringify(taskList));
+    return true;
+  };
+
   handleEditTask = (e, taskId) => {
     const { taskList } = this.state;
     const taskForEdit = taskList.filter(item => item.id === taskId)[0];
@@ -41,6 +57,7 @@ export default class App extends React.Component {
   };
 
   handleDeleteTask = (e, taskId) => {
+    
     console.log('this is DELETE from App, id = ', taskId);
   };
 
@@ -74,6 +91,7 @@ export default class App extends React.Component {
                 onTaskDelete={this.handleDeleteTask}
                 taskForEdit={this.state.taskForEdit}
                 formSate={this.state.formSate}
+                onSaveData={ this.handleSaveFormData }
               />
             ) : (
               <Dnd />
diff --git a/src/api/localstorage.js b/src/api/localstorage.js
diff --git a/src/api/newid.js b/src/api/newid.js
diff --git a/src/components/form/textarea.jsx b/src/components/form/textarea.jsx
@@ -11,7 +11,7 @@ const TextArea = props => {
     if (cols !== null) {
         colsRows.cols = cols;
     }
-    console.log("textarea", props)
+
     return (
         <div className="form-group">
             <label htmlFor={name} className={err ? 'text-danger' : null}>
diff --git a/src/components/main_form/index.jsx b/src/components/main_form/index.jsx
@@ -10,28 +10,26 @@ export default class MainForm extends React.Component {
     static propTypes = {
         formSate: PropTypes.string, // состояние формы (редактровать или добавить таску)
         taskForEdit: PropTypes.object, // номер таски, которую редактируют
+        onSaveData: PropTypes.func
     };
 
-
     constructor(props) {
         super(props);
         this.state = {
             data: {
-                taskid: null,
-                taskName: '',
-                taskDesciption: '',
-                taskDate: null,
-                taskUrgent: false,
-                taskStatus: 'todo',
+                // taskId: null,
+                // taskName: '',
+                // taskDescription: '',
+                // taskDate: null,
+                // taskUrgent: false,
+                // taskStatus: 'todo',
             },
             err: {},
             propsFlag: false
         }
-        this.initialState = { ...this.state };
     }
 
     static getDerivedStateFromProps = (nextProps, state) => {
-
         console.log("getDerivedStateFromProps ", nextProps.taskForEdit)
         console.log("getDerivedStateFromProps if=", (!state.propsFlag), !!nextProps.taskForEdit)
         if (!state.propsFlag && nextProps.taskForEdit) {
@@ -57,24 +55,32 @@ export default class MainForm extends React.Component {
     }
 
     handleClearForm = () => {
-        this.setState({ ...this.initialState });
+        this.setState({ data: {} });
     }
 
-    handleAddTask = (e) => {
-        e.preventDefault();
+    handleResetData = () => {
+        this.handleClearForm();
+    }
 
+    handleSaveData = (e) => {
+        e.preventDefault();
+        if (this.props.onSaveData({ ...this.state.data, id: new Date().valueOf() }) === true) {
+            this.setState({ data: {} });
+        }
     }
 
     render() {
-    console.log("main RNR", this.props.taskForEdit)        
+        // console.log("main RNR", this.props.taskForEdit)
+        console.log('props', this.props);
         return (
             <Card>
                 <h4>
-					{
-						this.props.formSate === FORM_ADD
-							? "Add new task"
-							: `Edit task ${ this.props.taskId || "" }`
-					}</h4>
+                    {
+                        this.props.formSate === FORM_ADD
+                            ? "Add new task"
+                            : `Edit task ${this.props.taskId || ""}`
+                    }
+                </h4>
 
                 <TextInput
                     value={this.state.data.taskName || ''}
@@ -88,7 +94,7 @@ export default class MainForm extends React.Component {
 
                 <TextArea
                     value={this.state.data.taskDescription || ''}
-                    name='taskDesciption'
+                    name='taskDescription'
                     onChange={this.handleChange}
                     label='Task description'
                     helper={'Введите описание вашей задачи'}
@@ -133,23 +139,28 @@ export default class MainForm extends React.Component {
                 />
 
                 <div className="row">
-                    <div className="col-sm-6">
+                    <div className='col-sm-6'>
                         <button
                             type="submit"
-                            className="btn btn-primary"
-                            onClick={this.handleAddTask}
+                            className={`btn ${this.props.formSate === FORM_ADD ? 'btn-primary' : 'btn-warning'}`}
+                            onClick={this.handleSaveData}
                         >
-                            Add new task
-                            </button>
+                            {
+                                this.props.formSate === FORM_ADD ? "Add new task" : "Save changes"
+                            }
+                        </button>
                     </div>
-                    <div className="col-sm-6">
+                    <div className='col-sm-6'>
                         <button
                             type="submit"
                             className="btn btn-secondary"
-                            onClick={this.handleClearForm}
+                            onClick={this.handleResetData}
                         >
-                            Clear form
-                            </button>
+
+                            {
+                                this.props.formSate === FORM_ADD ? "Clear form" : "Cancel"
+                            }
+                        </button>
                     </div>
                 </div>
             </Card>
diff --git a/src/components/main_list/index.jsx b/src/components/main_list/index.jsx
@@ -15,7 +15,6 @@ export default class MainList extends React.Component {
         }
     }
 
-
     static propTypes = {
         data: PropTypes.array, // список задач длдя рендера
         onTaskEdit: PropTypes.func,
@@ -106,7 +105,7 @@ export default class MainList extends React.Component {
             ? this.props.data.map(this.renderOneTask)
             : emptyList;
 
-        const filterElement = (id) => {
+        const filterElement = () => {
             return this.props.data ? this.props.data.filter(item => item.id === this.state.taskId)[0] : null;
         }
 
@@ -118,7 +117,6 @@ export default class MainList extends React.Component {
                         list
                     }
                 </ul>
-
                 {
                     this.props.children // компоненты "дети", которые были переданы внутрь <MainList>....</MainList>
                 }
diff --git a/src/components/main_list/task.jsx b/src/components/main_list/task.jsx
diff --git a/src/css/index.css b/src/css/index.css
diff --git a/src/index.js b/src/index.js
@@ -2,8 +2,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import './css/index.css';
-import './css/micalendar.css';
+import './micalendar.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
diff --git a/src/micalendar.css b/src/micalendar.css
@@ -1,3 +1,15 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
 .micalendar {
   font-family: 'Open Sans Condensed', sans-serif;
   background-color: #fff;
diff --git a/src/screens/main.jsx b/src/screens/main.jsx
@@ -5,16 +5,14 @@ import MainList from '../components/main_list';
 import MainForm from '../components/main_form';
 
 const MainTab = (props) => {
-    console.log("MainTab RND", {props})
     return (
         <div className="row">
             <div className="col-sm-6">
                 <MainForm
                     taskForEdit={props.taskForEdit}
                     formSate={props.formSate}
-                >
-                    <p>This is children from Main Tab</p>
-                </MainForm>
+                    onSaveData={props.onSaveData}
+                />
             </div>
             <div className="col-sm-6">
                 <MainList
@@ -35,4 +33,5 @@ MainTab.propTypes = {
     onTaskDelete: PropTypes.func, // удалить таску
     formSate: PropTypes.string, // состояние формы (редактровать или добавить таску)
     taskForEdit: PropTypes.object, // номер таски, которую редактируют
+    onSaveData: PropTypes.func
 };
diff --git a/src/store/action_creators.js b/src/store/action_creators.js
@@ -24,3 +24,15 @@ export function deleteTask(payload) {
     payload
   };
 }
+
+export function stateFormAdd() {
+  return {
+    type: ACT.FORM_STATE_ADD
+  };
+}
+
+export function stateFormEdit() {
+  return {
+    type: ACT.FORM_STATE_EDIT
+  };
+}
diff --git a/src/store/actions.js b/src/store/actions.js
@@ -1,4 +1,7 @@
 export const DATA_TASK_UPDATE = 'DATA_TASK_UPDATE';
 export const DATA_TASK_ADD = 'DATA_TASK_ADD';
 export const DATA_TASK_DELETE = 'DATA_TASK_DELETE';
-export const DATA_TASK_EDIT = 'DATA_TASK_EDIT';
+export const DATA_TASK_EDIT = 'DATA_TASK_EDIT';
+
+export const FORM_STATE_ADD = 'FORM_STATE_ADD';
+export const FORM_STATE_EDIT = 'FORM_STATE_EDIT';
diff --git a/src/store/reducer.js b/src/store/reducer.js
@@ -1,5 +1,6 @@
 import { combineReducers } from 'redux';
 import * as ACT from './actions';
+import { FORM_ADD, FORM_EDIT } from '../lib/const';
 
 function rootReducer(store, action) {
   switch (action.type) {
@@ -11,6 +12,10 @@ function rootReducer(store, action) {
       return { ...store, ...action.payload };
     case ACT.DATA_TASK_UPDATE:
       return { ...store, ...action.payload };
+    case ACT.FORM_STATE_ADD:
+      return { ...store, formState: FORM_ADD };
+    case ACT.FORM_STATE_EDIT:
+      return { ...store, formState: FORM_EDIT };
     default:
       return store;
   }

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ const TextArea = props => {`
`11`	`11`	`if (cols !== null) {`
`12`	`12`	`colsRows.cols = cols;`
`13`	`13`	`}`
`14`		`- console.log("textarea", props)`
	`14`	`+`
`15`	`15`	`return (`
`16`	`16`	`<div className="form-group">`
`17`	`17`	`<label htmlFor={name} className={err ? 'text-danger' : null}>`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,6 @@ export default class MainList extends React.Component {`
`15`	`15`	`}`
`16`	`16`	`}`
`17`	`17`
`18`		`-`
`19`	`18`	`static propTypes = {`
`20`	`19`	`data: PropTypes.array, // список задач длдя рендера`
`21`	`20`	`onTaskEdit: PropTypes.func,`
`@@ -106,7 +105,7 @@ export default class MainList extends React.Component {`
`106`	`105`	`? this.props.data.map(this.renderOneTask)`
`107`	`106`	`: emptyList;`
`108`	`107`
`109`		`- const filterElement = (id) => {`
	`108`	`+ const filterElement = () => {`
`110`	`109`	`return this.props.data ? this.props.data.filter(item => item.id === this.state.taskId)[0] : null;`
`111`	`110`	`}`
`112`	`111`
`@@ -118,7 +117,6 @@ export default class MainList extends React.Component {`
`118`	`117`	`list`
`119`	`118`	`}`
`120`	`119`	`</ul>`
`121`		`-`
`122`	`120`	`{`
`123`	`121`	`this.props.children // компоненты "дети", которые были переданы внутрь <MainList>....</MainList>`
`124`	`122`	`}`