add dnd render for todo, inprogress, done

Author: NikitaSysoev

package.json

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

src/App.js

@@ -1,5 +1,4 @@
 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 { NAV_ITEMS, NAV_MAIN } from './lib/nav_data';
@@ -100,7 +99,7 @@ export default class App extends React.Component {
 
   render() {
     return (
-      <Container>
+      <div className="container">
         <Navigation items={this.navHelper()} />
         <React.Suspense fallback={<div> Loading....</div>}>
           {this.state.activeNavItem === NAV_MAIN ? (
@@ -111,15 +110,15 @@ export default class App extends React.Component {
               taskForEdit={this.state.taskForEdit}
               formSate={this.state.formSate}
               onSaveData={this.handleSaveFormData}
-              onListClear = {this.handleClearList}
+              onListClear={this.handleClearList}
             />
           ) : (
             <Dnd />
           )}
           {/* <Route exact path="/" render={props => <MainTab {...props} />} />
             <Route exact path="/dnd" render={props => <Dnd {...props} />} /> */}
         </React.Suspense>
-      </Container>
+      </div>
     );
   }
 }

src/components/main_form/index.jsx

@@ -4,7 +4,7 @@ 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 { TASK_OPTIONS, FORM_ADD, FORM_EDIT } from '../../lib/const';
+import { TASK_OPTIONS, FORM_ADD } from '../../lib/const';
 
 export default class MainForm extends React.Component {
     static propTypes = {
@@ -54,7 +54,8 @@ export default class MainForm extends React.Component {
 
     handleSaveData = (e) => {
         e.preventDefault();
-        if (this.props.onSaveData({ ...this.state.data, id: new Date().valueOf() }) === true) {
+        const { taskStatus = 'TODO' } = this.state.data;
+        if (this.props.onSaveData({ ...this.state.data, taskStatus, id: new Date().valueOf() }) === true) {
             this.setState({ data: {} });
         }
     }
@@ -109,7 +110,7 @@ export default class MainForm extends React.Component {
                 </div>
 
                 <SelectInput
-                    value={this.state.data.taskStatus || ''}
+                    value={this.state.data.taskStatus || 'TODO'}
                     options={TASK_OPTIONS}
                     name='taskStatus'
                     onChange={this.handleChange}
@@ -144,7 +145,6 @@ export default class MainForm extends React.Component {
                             className="btn btn-secondary"
                             onClick={this.handleResetData}
                         >
-
                             {
                                 this.props.formSate === FORM_ADD ? "Clear form" : "Cancel"
                             }

src/screens/DnD.jsx

@@ -1,16 +1,62 @@
 import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+
+const renderOneTask = (item) => {
+    return (
+        <li key={item.id}
+            className="list-group-item"
+            style={{ position: "relative" }}>
+            {
+                item.taskUrgent && (<FontAwesomeIcon icon={faExclamationTriangle} />)
+            }
+            <a
+                href="#"
+                // onClick={this.handleViewTask}
+                data-id={item.id}
+            >
+                {item.taskName}
+            </a>
+            <br />
+            <span className="text-muted">
+                <small>
+                    {item.taskDate}
+                </small>
+            </span>
+            <br />
+        </li>
+    )
+};
+
+
+const DnD = (props) => {
+    const [state, setState] = React.useState({
+        todo: [],
+        inprogress: [],
+        done: []
+    });
+
+    React.useEffect(() => {
+        const string = localStorage.getItem('TASKS');
+        const taskList = JSON.parse(string);
+        const todo = taskList.filter(item => item.taskStatus === 'TODO');
+        const inprogress = taskList.filter(item => item.taskStatus === 'INPROGRESS');
+        const done = taskList.filter(item => item.taskStatus === 'DONE');
+        setState({ todo, inprogress, done });
+    }, []);
+
+    const emptyList = <li className="list-group-item">
+        <strong className="text-secondary">Список пуст</strong>
+    </li>;
 
-const DnD = () => {
     return (
         <div className="row" style={{ marginTop: '20px' }}>
             <div className="col-sm-4">
                 <div className="card">
                     <div className="card-body card-body-dnd">
                         <h3>To Do</h3>
                         <ul className="list-group">
-                            <li className="list-group-item">
-                                <strong className="text-secondary">Список пуст</strong>
-                            </li>
+                            {state.todo.length ? state.todo.map(renderOneTask) : emptyList}
                         </ul>
                     </div>
                 </div>
@@ -20,9 +66,7 @@ const DnD = () => {
                     <div className="card-body card-body-dnd">
                         <h3>In progress</h3>
                         <ul className="list-group">
-                            <li className="list-group-item">
-                                <strong className="text-secondary">Список пуст</strong>
-                            </li>
+                            {state.inprogress.length ? state.inprogress.map(renderOneTask) : emptyList}
                         </ul>
                     </div>
                 </div>
@@ -32,9 +76,7 @@ const DnD = () => {
                     <div className="card-body card-body-dnd">
                         <h3>Done</h3>
                         <ul className="list-group">
-                            <li className="list-group-item">
-                                <strong className="text-secondary">Список пуст</strong>
-                            </li>
+                            {state.done.length ? state.done.map(renderOneTask) : emptyList}
                         </ul>
                     </div>
                 </div>

src/screens/main.jsx

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