start working at errors

Author: NikitaSysoev

package.json

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

src/components/form/date.jsx

@@ -10,10 +10,10 @@ const DateInput = (props) => {
     const [visibleCalendar, setVisibleCalendar] = useState(false);
     const handleView = () => setVisibleCalendar(state => !state);
 
-    const mandatoryStr = mandatory && <span className="text-muted">*</span>;
+    const mandatoryStr = mandatory && <span className={err ? 'text-danger' : 'text-muted'}>*</span>;
     return (
         <div className="form-group">
-            <label>
+            <label className={err ?  'text-danger' : null}>
                 {label}
                 {mandatoryStr}
             </label>
@@ -32,7 +32,7 @@ const DateInput = (props) => {
                     type="text"
                     name={name}
                     value={value}
-                    className={'form-control'}
+                    className={`${err && 'is-invalid'} form-control`}
                     placeholder={placeholder || label}
                 />
             </div>
@@ -41,7 +41,7 @@ const DateInput = (props) => {
                 display={visibleCalendar}
                 onSelectDate={onSelectDate}
             />
-            <small className={`${err && 'text-danger'} form-text text-muted`}>
+            <small className={`${err ? 'text-danger' : 'text-muted'} form-text `}>
                 {helper || 'Это поле обязательное для заполнения'}
             </small>
         </div>

src/components/form/input_text.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 const TextInput = props => {
     const { name, onChange, value = '', label, placeholder, mandatory = false, helper, err } = props;
-    const mandatoryStr = mandatory && <span className="text-muted">*</span>;
+    const mandatoryStr = mandatory && <span className={err ? 'text-danger' : 'text-muted'}>*</span>;
     return (
         <div className="form-group">
             <label htmlFor={name} className={err ? 'text-danger' : null}>
@@ -16,8 +16,8 @@ const TextInput = props => {
                 value={value}
                 className={`${err && 'is-invalid'} form-control`}
                 placeholder={placeholder || label} />
-            <small className={`${err && 'text-danger'} form-text text-muted`}>
-                {helper}
+            <small className={`${err ? 'text-danger' : 'text-muted'} form-text`}>
+                {helper || 'Это поле обязательно для заполнения'}
             </small>
         </div>
 

src/components/main_form/index.jsx

@@ -38,7 +38,6 @@ class MainForm extends React.Component {
                 data: { ...prevState.data, ...this.state.data }
             });
         }
-
     }
 
     handleChange = (e) => {
@@ -64,8 +63,20 @@ class MainForm extends React.Component {
     handleSaveData = (e) => {
         e.preventDefault();
         const { data } = this.state;
-        const { taskStatus = TODO } = data;
+        const { taskStatus = TODO, taskDate, taskName } = data;
         const { taskList, taskForEdit } = this.props;
+
+        if (!taskDate || !taskName) {
+            this.setState(prevState => ({
+                err: {
+                    ...prevState.err,
+                    taskName: !!prevState.err.taskName ? '' : 'Это поле обязательно для заполнения',
+                    taskDate: !!prevState.err.taskDate ? '' : 'Это поле обязательно для заполнения'
+                }
+            }));
+            return false;
+        }
+
         if (this.props.formState === FORM_ADD) {
             const newItem = { ...data, taskStatus, id: String(Date.now()) };
             this.props.taskAdd({ newItem, taskList });
@@ -122,8 +133,8 @@ class MainForm extends React.Component {
                     label='Task date'
                     placeholder='Date'
                     onSelectDate={this.handleSelectDate}
-                    helper={this.state.err.taskName}
-                    err={!!this.state.err.taskName}
+                    helper={this.state.err.taskDate || 'Выберите дату'}
+                    err={!!this.state.err.taskDate}
                     mandatory
                 />