import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
    , document.getElementById('root'));
registerServiceWorker();

import React, { Component } from 'react';
import './App.css';
import Login from "./Components/Login/Login";
import FlightsList from "./Components/FlightsList/FlightsList";
import { Link, Route, Switch } from 'react-router-dom';
import { withRouter } from 'react-router-dom';

class App extends Component {
    handleLogin = (loginObject) => {
        if( loginObject.userName === 'user' && loginObject.password === 'pass') {
            this.props.history.push({
                pathname: '/flights',
            });
        }
    };

    render() {
        return (
                <Switch>
                    <Route exact path="/" component={() => <Login doLogin={this.handleLogin} />}/>
                    <Route path="/flights" component={FlightsList}/>
                </Switch>
        );
    }
}

export default withRouter(App);

import React from 'react';
import PropTypes from 'prop-types';
import './Login.css';
import { withRouter } from 'react-router-dom';

class Login extends React.Component {

    static propTypes = {
        doLogin: PropTypes.func.isRequired,
    };

    handleChangedInput = (e) => {
        this.setState({
            [e.target.name]: e.target.value,
        });
    };

    sendLoginInfo = () => {
        this.props.doLogin(this.state);
    };

    render() {
        return(
            <div className="login-div">
                <h2>Login</h2>
                <div>
                    <label>User Name: </label>
                    <input name="userName" type="text" onChange={this.handleChangedInput}/>
                </div>
                <div>
                    <label>Password: </label>
                    <input name="password" type="password" onChange={this.handleChangedInput} />
                </div>
                <button onClick={this.sendLoginInfo} className="login-btn" name="button">{'Login'}</button>
            </div>
        );
    }
}

export default withRouter(Login);

import React, { Component } from 'react';
import './FlightsList.css';
import getFlights from '../../helpers/api';
import { Table, Button } from 'react-bootstrap';
import Modal from 'react-modal';
const customStyles = {
    content : {
        top                   : '50%',
        left                  : '50%',
        right                 : 'auto',
        bottom                : 'auto',
        marginRight           : '-50%',
        transform             : 'translate(-50%, -50%)'
    }
};

export default class FlightsList extends Component {

    state = {
        flights: null,
        originalFlights: null,
        modalIsOpen: false,
    };
    componentDidMount() {
        getFlights()
            .then( flights => {
                this.setState({
                    flights,
                    originalFlights: flights,
                });
            });
    }

    openModal = () => {
        this.setState({modalIsOpen: true});
    };

    closeModal = () => {
        this.setState({modalIsOpen: false});
    };

    renderFlights() {
        return (
                this.state.flights.map( flight => (
                    <tr key={flight.id}>
                        <td>{flight.from}</td>
                        <td>{flight.to}</td>
                        <td>{flight.departureTime}</td>
                        <td>{flight.landingTime}</td>
                        <td>{flight.price}</td>
                    </tr>
                ))
        );
    }

    rednerNoFlights() {
        return (
            <tr colSpan={5}>{'No Flights'}</tr>
        );
    }

    renderLoading() {
        return (
            <tr colSpan={5}><td>{'Loading'}</td></tr>
        );
    }

    handleKeyPress = (e) => {

        if(e.key == 'Enter'){
            if( e.target.value === '') {
                this.setState({
                    flights: this.state.originalFlights,
                });
            }
            else {
                this.setState({
                    flights: this.state.flights.filter(flight => flight.to === e.target.value),
                    originalFlights: this.state.flights,
                });
            }
        }
    };

    handleDetailsSubmit = (e) => {
        const newFlight = {
            id: this.state.flights.length,
            from: this.refs.from.value,
            to: this.refs.to.value,
            departureTime: this.refs.departure.value,
            landingTime: this.refs.landing.value,
            price: this.refs.price.value,
        };
        this.setState({
            flights: [...this.state.flights, newFlight],
            originalFlights: [...this.state.flights, newFlight],
            modalIsOpen: false,
        });
    };

    renderModal = () => {
        return (
            <Modal
                isOpen={this.state.modalIsOpen}
                onRequestClose={this.closeModal}
                style={customStyles}
                contentLabel="Example Modal"
            >
                <div>
                    <form className="form_style">
                        <p>
                            <label>{'from:'}</label>
                            <input type="text" ref="from" name="from" />
                        </p>
                        <p>
                            <label>{'to: '}</label>
                            <input type="text" ref="to" name="to" />
                        </p>
                        <p>
                            <label>{'Departure Time: '}</label>
                            <input type="text" ref="departure" name="departure_time" />
                        </p>
                        <p>
                            <label>{'Landing Time: '}</label>
                            <input type="text" ref="landing" name="landing_time" />
                        </p>
                        <p>
                            <label>{'Price: '}</label>
                            <input min="0" ref="price" type="number" name="price" />
                        </p>
                        <div className="button_div">
                            <Button onClick={this.handleDetailsSubmit} bsStyle="primary" bsSize="small">
                                {'Save'}
                            </Button>
                        </div>
                    </form>
                </div>
            </Modal>
        );
    };

    render() {
        return (
            <div>
                <h1>Flights</h1>
                <div>
                    <label>{'Filter: '}</label>
                    <input type="text" onKeyPress={this.handleKeyPress}/>
                </div>
                <div>
                    <button onClick={this.openModal} >{'Add Flight'}</button>
                </div>
                {this.renderModal()}
                <Table striped bordered condensed hover>
                    <thead>
                    <tr>
                        <th>from</th>
                        <th>to</th>
                        <th>Departure Time</th>
                        <th>Landing Time</th>
                        <th>Price</th>
                    </tr>
                    </thead>
                    <tbody>
                        {!this.state.flights ? this.renderLoading() : ( this.state.flights.length > 0 ? this.renderFlights() : this.rednerNoFlights() )}
                    </tbody>
                </Table>
            </div>
        );
    }
}

export default function getFlights() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve([
            {
                id: 0,
                from: 'Tel-Aviv',
                to: 'New-York',
                departureTime: 55,
                landingTime: 55,
                price: 300,
            },
            {
                id: 1,
                from: 'Tel-Aviv',
                to: 'Amsterdam',
                departureTime: 55,
                landingTime: 55,
                price: 300,
            },
            {
                id: 2,
                from: 'Tel-Aviv',
                to: 'New-York',
                departureTime: 55,
                landingTime: 55,
                price: 300,
            }
        ]), 2000);
    });
}