AI Created Todo view created by AI

gistfile1.jsx

        
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import {    Row, 
            Col , 
            Navbar, 
            NavItem, 
            NavbarBrand, 
            Input, 
            InputGroup, 
            InputGroupText, 
            Button 
        } from 'reactstrap';
                
import {    getTasks, 
            addTask, 
            removeTask 
        }  from '../actions/tasksActions.js'; 

        
    class tasksView extends React.Component {
        
        state: {
            add_task: ''
        }
        
        handleChange(e) {
            this.setState({
                [e.target.name]: e.target.value
            })
        }    
            
        componentDidMount = () => {
           const { getTasks } = this.props 
           getTasks()    
        }
    
        add_task = () => {

        }

        tasksTemplate = () => {
            const { tasks } = this.props
            return (
                tasks.map((task)=>{
                    return (
                        <Row>
                            <Col md={10}>
                                {task.name}
                            </Col>
                            <Col md={2}>
                        
                            </Col>
                            
                        </Row>
                    )
                })
            )
        }

        render() {
            return (
                <Row>
                    <Navbar color="light" className="navigation-bar-blue">
                        <NavbarBrand>Tasks</NavbarBrand>
                    </Navbar>
                    {this.tasksTemplate()}
                    
                    <Col md={12}>
                        <InputGroup>
                            <Input 
                                className="form-group white-standard-input" 
                                value={this.state.add_task}
                                onChange={this.handleChange}
                                name="add_task"
                                placeholder="add task" />
                            </InputGroup>
                    </Col>

                    <Col md={12}>
                        <Button 
                            className="btn button-light-sky-blue-blue" 
                            onClick={() => this.add_task()} >
                                Add Task
                            </Button> 
                    </Col>
                     
                </Row>
            )   
        }
    }
                   
function mapStateToProps(state) {
            
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({  getTasks, addTask, removeTask  }, dispatch);
}
    
   
export default connect(mapStateToProps, mapDispatchToProps)(tasksView);