MainApp.js

import React, {Component} from 'react';
import Table from "./Table";
import PopUP from "./PopUP";
import Pagination from "react-js-pagination";
import Clienteditorwindow from "./Clienteditorwindow";

export const URL = 'https://baloofeathers.herokuapp.com/gpwebsite/';

class MainApp extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            showPopup: false,
            canEnter: (localStorage.getItem('loggedIn') || '') === 'yes',
            currPopup: null,
            showClientEditor: false,
            currEditor: null,
            currHandle: '-1',
            currNumOfClients: this.getFromLocalStorage(),
            currTextSearch: '',
            activePage: 1,
            total: null,
            password: '',
            userName: ''
        };
        this.requestId = 0;
        this.buildURL();
    }

    addClientEditor = (item) => () => {
        this.setState({showClientEditor: true, currEditor: item});
    };
    removeClientEditor = () => {
        console.log(this.state.data);
        this.setState({showClientEditor: false, currEditor: null});
    };
    putInLocalStorage = (value) => {
        this.setState({currNumOfClients: value, activePage: 1}, () => {
            this.buildURL();

        });
        localStorage.setItem('clientNumber', value);
    };
    getFromLocalStorage = () => {

        return localStorage.getItem('clientNumber') || 10;
    };
    filterNumOfClients = (handle) => {
        console.log(handle);
        this.putInLocalStorage(handle);
    };
    changePages = (handle) => {
        this.setState({activePage: handle}, () => {
            this.buildURL();
        });
    };
    filtersearch = (handle) => {

        this.setState({currTextSearch: handle, activePage: 1}, () => {
            this.buildURL();
        });
    };
    filterClients = (handle) => {
        this.setState({currHandle: handle, activePage: 1}, () => {
            this.buildURL();
        });
    };
    buildURL = () => {
        let url = URL + '?';
        const {currHandle, currNumOfClients, currTextSearch, activePage} = this.state;
        if (currHandle === '0' || currHandle === '1')
            url += "handled=" + currHandle;
        url += "&$limit=" + currNumOfClients;
        if (currTextSearch !== '')
            url += "&text=" + currTextSearch;
        url += "&$skip=" + ((activePage - 1) * (currNumOfClients));
        this.loadURL(url);
    };

    loadURL = (url) => {
        const current = this.requestId;
        fetch(url)
            .then(response => response.json())
            .then(data => {
                if (current === this.requestId)
                    this.setState({data})
            });
    };
    onLogin = () => {
        if (this.state.userName === "GreenPoint" && this.state.password === "ron3428") {
            this.setState({canEnter: true});
            localStorage.setItem('loggedIn', 'yes');
        }
    };

    clicked = (item) => {
        this.setState({showPopup: true, currPopup: item})
    };
    closePopUp = (item) => {
        this.setState({showPopup: false, currPopup: null})
    };

    onChangeInput = (e) => {
        if (e.target.id === "inputUserName") {
            this.setState({userName: e.target.value});
        } else {
            this.setState({password: e.target.value});
        }
    };
    onFilterChange = (type) => (e) => {
        if (type === 0) {
            this.filterClients(e.target.value);
        } else if (type === 1) {
            this.filterNumOfClients(e.target.value);
        } else {
            this.filtersearch(e.target.value);
        }
    };

    render() {
        return (


            !this.state.canEnter ? <div id={"normal"}>
                    <h1 id={"titleStart"}>התחברות</h1>
                    <div id={"userNameConteiner"}>
                        <p id={"startUserName"}> שם משתמש</p>
                        <div id={"empty"}></div>
                        <input type={"text"} id={"inputUserName"} onChange={this.onChangeInput}/>
                    </div>
                    <br/>
                    <div id={"passwordContainer"}>
                        <p id={"startPassword"}> סיסמא</p>
                        <div id={"empty"}></div>
                        <input type={"text"} id={"inputPassword"} onChange={this.onChangeInput}/>
                    </div>
                    <br/>

                    <button id={"submitStart"} onClick={this.onLogin}>התחברות</button>

                </div> :
                <div style={{
                    overflowY: 'auto'
                }}>
                    {

                        this.state.data ?
                            <div><p id={"clientsTotal"}> מספר לקוחות:{this.state.data.total}</p>
                                <Table data={this.state.data}
                                       clickedfunc={this.clicked}
                                       onChangeFilter={this.onFilterChange
                                       } editClient={this.addClientEditor}
                                       value={this.getFromLocalStorage()}/>
                                <Pagination activePage={this.state.activePage}
                                            itemsCountPerPage={this.state.currNumOfClients}
                                            totalItemsCount={this.state.data.total}
                                            pageRangeDisplayed={5}
                                            onChange={this.changePages}/>
                            </div> : <p>loading</p>
                    }
                    {this.state.showPopup &&
                    <PopUP deatils={this.state.currPopup} closeMe={this.closePopUp}/>}
                    {this.state.showClientEditor &&
                    <Clienteditorwindow removeEditorClient={this.removeClientEditor}
                                        deatils={this.state.currEditor}/>}
                </div>


        )


    }
}

export default MainApp;