index.jsx

import {observable, computed, action, extendObservable} from 'mobx';
import './App.css';
import FileInput from 'react-file-input';
import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import {Link} from 'react-router';
import Table from 'react-json-table';
import {Modal, Button, ProgressBar} from 'react-bootstrap';
import NavBar from '../Layout/NavBar';


let XLSX = require('xlsx');

const App = inject('routing', 'UserStore')(observer(class App extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {excel: null, showModal: false, file: null, load: false};
    }

    render() {
        const {location, push, goBack} = this.props.routing;
        const {UserStore} = this.props;

        if (!UserStore.me.isAuth) {
            push('/login')
        }

        if(this.state.excel === null && !this.state.load) {
            return this.loadExcel();
        }

        if(this.state.load && this.state.excel === null) {
            return this.load();
        }

        if (this.state.excel !== null && !this.state.load) {
            let items = this.prepareJson();
            return this.complinceExcel(items);
        }
    };

    load = () => {
        return (
            <div>
                <NavBar/>
                <div className="loader">Loading...</div>
            </div>
        )
    };

    loadExcel = () => {
        return (
            <div>
                <NavBar/>
                <form className="form-horizontal" method="post"
                      action="http://mercadoserver.local/api/compines/price">
                    <div className="form-group">
                        <label htmlFor="excel" className="col-sm-2 control-label">Price</label>

                        <div className="form-group">
                            <div className="col-sm-8">
                                <FileInput name="excel"
                                           accept=".xls,.xlsx"
                                           placeholder="Select excel price..."
                                           className="form-control"
                                           onChange={this.handleFiles}
                                           id="excel"/>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        )
    };

    complinceExcel = (items) => {
        return (
            <div>
                <NavBar/>
                <div>
                    <form>

                    </form>
                </div>
                <div className="table-responsive">
                    <Table rows={items}
                           className="table-hover table-bordered table-condensed"
                           headerClass="alert"
                           onClickHeader={this.open}/>
                </div>

                <Modal show={this.state.showModal} onHide={this.close}>
                    <Modal.Header closeButton>
                        <Modal.Title>{this.state.column}</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={this.close}>Close</Button>
                    </Modal.Footer>
                </Modal>
            </div>
        )
    };


    handleFiles = (e) => {
        this.setState({load:true});
        let files = e.target.files;
        let i, f;
        for (i = 0; i != files.length; ++i) {
            f = files[i];
            this.state.file = f;
            let reader = new FileReader();
            let name = f.name;
            let loaded = 0;
            let total = files.length;
            reader.onload = (e) => {
                let data = e.target.result;
                loaded++;
                let workbook;
                workbook = XLSX.read(data, {type: 'binary'});
                this.setState({excel: workbook});
                this.setState({load:false});
            };
            reader.readAsBinaryString(f);
        }

    };

    prepareJson = (list = 0) => {
        let SheetsNames = this.state.excel.SheetNames;
        let Sheet = this.state.excel.Sheets[SheetsNames[list]];

        return XLSX.utils.sheet_to_json(Sheet, {range: 'A1:W5', header: 'A1'});
    };

    close = () => {
        this.setState({showModal: false});
    };

    open = (e, column) => {
        this.setState({showModal: true});
        this.setState({column: column});
    };

}));
export default App