ReactTodos

emilo Post Leave a Comment

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class Todo extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
             data: [],
             first: 0,
             last: 10,
             page: 1,
             showingItems: 10,
             searchValue: "",
             title: "",
             bio: "",
             info: ""
        }
    }
    objTitle(e) {
        this.setState({title:e.target.value});

    }
    objBio(e) {
        this.setState({bio:e.target.value});

    }

    addOBJ() {
        var data = this.state.data;
        var date = new Date();
        var obj = {
            date: date.toLocaleDateString(), 
            time: date.toLocaleTimeString() ,
            name: this.state.title, 
            bio: this.state.bio,
            isHidden: true
        };
        if (obj.name.length <= 3 || obj.bio.length <= 3) {
            this.messageInfo();
        }
        else {
            data.push(obj);
            this.setState({data:data});
        }
    }
    next() {
        var last = this.state.last;
        if (last >= this.state.data.length) {
            this.messageInfo();
        }
        else {
            var double = this.state.last + 10;
            var half = this.state.first + 10;
            var page = this.state.page + 1;
            var showingItems = this.state.showingItems + 10;
            this.setState({ last: double });
            this.setState({ first: half });
            this.setState({ page: page });
            this.setState({ showingItems: showingItems });
        }
    }
    prev() {
        var first = this.state.first;
        if (first < 1) {
            this.messageInfo();
        }
        else {
            var double = this.state.last - 10;
            var half = this.state.first - 10;
            var page = this.state.page - 1;
            var showingItems = this.state.showingItems - 10;
            this.setState({ last: double });
            this.setState({ first: half });
            this.setState({ page: page });
            this.setState({ showingItems: showingItems });
        }
    }
    delete(index) {
        var data = this.state.data;
        data.splice(index, 1);
        this.setState({ data: data });
    }
    update(index, e) {
        let data = this.state.data;
        // obj.name = object data[index] = string
        var obj = data[index];
            obj.name = e.target.value;
            this.setState({ data: data });
    }
    search(e) {
        this.setState({searchValue:e.target.value});
    }
    viewTodo(index) {
        var data = this.state.data;
        var obj = data[index];
        obj.isHidden=!obj.isHidden;
        this.setState({data:data});
    }
    reverseArray() {
        var data = this.state.data.reverse();
        this.setState({data:data});
    }

    messageInfo() {
       var info = "ERROR"
       var blank = "";
       this.setState({info:info})
       setTimeout(() => {
        this.setState({info:blank})
      }, 3000);
    }
    


    render() {
        var data = this.state.data.filter(obj => obj.name.includes(this.state.searchValue.toLocaleLowerCase()));
        var dataHTML = [];
        for (var index = this.state.first; index < this.state.last && index < data.length; index++) {
            var obj = data[index];
            var popUpArray = [];
            if (obj.isHidden === false) {
                popUpArray.push(<div key={index}>BIO: {obj.bio}</div>);
            }
            dataHTML.push(
                <div className="text" key={index}>
                    <span>{index+1} {obj.date} {obj.time} - {obj.name}</span>
                    <div>
                        <input type="text" value={obj.name} onChange={this.update.bind(this, index)}></input>
                        <button onClick={this.delete.bind(this, index)}>DELETE</button>
                        <button onClick={this.viewTodo.bind(this,index)}>VIEW</button>
                        {popUpArray}
                    </div>
                </div>);
        }
        return (
            <React.Fragment>
                <input type="text" placeholder="Search..." onChange={this.search.bind(this)}></input>
                <input type="text" placeholder="Title..." onChange={this.objTitle.bind(this)}></input>
                <input type="text" placeholder="Bio..." onChange={this.objBio.bind(this)}></input>
                <button onClick={this.addOBJ.bind(this)}>Add</button>
                <span>PAGE: {this.state.page} DATA: {this.state.data.length}</span>
                <button onClick={this.prev.bind(this)}>PREV</button>
                <button onClick={this.next.bind(this)}>NEXT</button>
                <button onClick={this.reverseArray.bind(this)}>SORT</button>
                <span>{this.state.info}</span>
                <div>{dataHTML}</div>
            </React.Fragment>
        );
    }
}
ReactDOM.render(<Todo />, document.getElementById('root'));