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};
    }

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

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

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

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

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

        if(this.state.load) {
            return this.load();
        }

        if (this.state.excel !== null && !this.state.load) {
            const items = this.prepareJson();
            this.state.load = false;
            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>
            )
        } else {
            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>
            );
        }
    }

    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});
            };
            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: 'A'});
    };

}));
export default App