add some feautures

Author: NikitaSysoev

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tracker",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.18",

src/App.js

@@ -23,22 +23,17 @@ export default class App extends React.Component {
     try {
       taskList = JSON.parse(localStorage.getItem('TASKS'));
     } catch {
-      console.log('Error localstorage upload data');
+      console.error('Error localstorage upload data');
     }
     this.setState({ taskList: taskList !== null ? taskList : [] });
   }
 
   handleSaveFormData = data => {
-    let { taskList } = this.state;
-    if (this.state.formSate === FORM_ADD) {
-      taskList.push(data);
+    let { taskList, formSate, taskForEdit } = this.state;
+    if (formSate === FORM_ADD) {
+      taskList = taskList.concat(data);
     } else {
-      taskList = taskList.map(item => {
-        if (item.id === this.state.taskForEdit.id) {
-          return data;
-        }
-        return item;
-      });
+      taskList = taskList.map(item => (item.id === taskForEdit.id ? data : item));
     }
     this.setState({
       taskList,
@@ -54,15 +49,21 @@ export default class App extends React.Component {
       taskForEdit: null,
       formSate: FORM_ADD
     });
-  }
+  };
 
   handleEditTask = (e, taskId) => {
     const { taskList } = this.state;
     const taskForEdit = taskList.find(item => item.id === taskId);
-    this.setState({
-      taskForEdit,
-      formSate: FORM_EDIT
-    });
+    if (taskForEdit === this.state.taskForEdit || this.state.formSate === FORM_EDIT) {
+      this.handleResetData();
+      return false;
+    }
+    if (this.state.formSate === FORM_ADD) {
+      this.setState({
+        taskForEdit,
+        formSate: FORM_EDIT
+      });
+    }
   };
 
   handleClearList = () => {

src/components/form/date.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCalendar } from '@fortawesome/free-solid-svg-icons';
+import PropTypes from 'prop-types';
+
+const DateInput = (props) => {
+    const { label, placeholder, mandatory = false, helper, err } = props;
+    const handleView = () => console.log('x')
+    const mandatoryStr = mandatory && <span className="text-muted">*</span>;
+    return (
+        <div className="form-group">
+            <label>
+                {label}
+                {mandatoryStr}
+            </label>
+            <div className="input-group">
+                <div className="input-group-prepend" onClick={handleView}>
+                    <span className="input-group-text">
+                        <FontAwesomeIcon icon={faCalendar} />
+                    </span>
+                </div>
+                <input
+                    readOnly
+                    type="text"
+                    className={'form-control'}
+                    placeholder={placeholder || label}
+                />
+            </div>
+            <small className={`${err && 'text-danger'} form-text text-muted`}>
+                {helper || 'Это поле обязательное для заполнения'}
+            </small>
+        </div>
+    )
+}
+
+export default DateInput;
+
+DateInput.propTypes = {
+    label: PropTypes.string.isRequired,
+    placeholder: PropTypes.string,
+    manadatory: PropTypes.bool,
+    helper: PropTypes.string,
+    err: PropTypes.bool,
+}

src/components/form/index.jsx

@@ -2,10 +2,12 @@ import TextInput from './input_text';
 import TextArea from './textarea';
 import SelectInput from './input_select';
 import CheckboxInput from './input_checkbox';
+import DateInput from './date';
 
 export {
     TextInput,
     TextArea,
     SelectInput,
-    CheckboxInput
+    CheckboxInput,
+    DateInput
 }

src/components/main_form/index.jsx

@@ -1,10 +1,8 @@
 import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCalendar } from '@fortawesome/free-solid-svg-icons';
 import PropTypes from 'prop-types';
 
 import { Card } from '../card';
-import { TextInput, TextArea, SelectInput, CheckboxInput } from '../form';
+import { TextInput, TextArea, SelectInput, CheckboxInput, DateInput } from '../form';
 import { TASK_OPTIONS, FORM_ADD, TODO } from '../../lib/const';
 
 export default class MainForm extends React.Component {
@@ -93,24 +91,11 @@ export default class MainForm extends React.Component {
                     rows={4}
                 />
 
-                <div className="form-group">
-                    <label>Task date<span className="text-muted">*</span></label>
-                    <div className="input-group">
-                        <div className="input-group-prepend">
-                            <span className="input-group-text">
-                                <FontAwesomeIcon icon={faCalendar} />
-                            </span>
-                        </div>
-                        <input
-                            type="text"
-                            className={'form-control'}
-                            placeholder="Date"
-                        />
-                    </div>
-                    <small className="form-text text-muted">
-                        Это поле обязательное для заполнения
-                    </small>
-                </div>
+                <DateInput
+                    label='Task date'
+                    placeholder='Date'
+                    mandatory
+                />
 
                 <SelectInput
                     value={this.state.data.taskStatus || TODO}

src/components/main_list/index.jsx

@@ -61,15 +61,17 @@ export default class MainList extends React.Component {
     }
 
     renderOneTask = (item) => {
+        const isActive = (this.props.taskForEdit && this.props.taskForEdit.id === item.id) ? 'active' : '';
         return (
-            <li key={item.id} className="list-group-item" style={{ position: "relative" }}>
+            <li key={item.id} className={`list-group-item ${isActive}`} style={{ position: "relative" }}>
                 {
                     item.taskUrgent && (<FontAwesomeIcon icon={faExclamationTriangle} />)
                 }
                 <a
                     href={item.id}
                     onClick={this.handleViewTask}
                     data-id={item.id}
+                    style={{ color: 'black' }}
                 >
                     {item.taskName}
                 </a>

src/index.js

@@ -1,6 +1,6 @@
-import 'bootstrap/dist/css/bootstrap.min.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 import './micalendar.css';
 import App from './App';

src/screens/main.jsx

@@ -20,6 +20,7 @@ const MainTab = (props) => {
                     onTaskEdit={props.onTaskEdit}
                     onTaskDelete={props.onTaskDelete}
                     onListClear={props.onListClear}
+                    taskForEdit={props.taskForEdit}
                     data={props.taskList}
                 />
             </div>