{
"arrivals": [
{
"id": 118927,
"time": "11:05",
"date": "2018-10-20",
"expected": "15:00",
"airline": "Norwegian",
"arriving_from": "Prague, Czechia - Vaclav Havel Airport Prague",
"flight_no": "D83581",
"gate": "A20",
"terminal": "",
"status": "Baggage"
},

import React from 'react';
import FilterableTable from 'react-filterable-table';

const FlightComponent = (props) => {
    const renderTime = (props) => {
        if (!props.value) {
            return null;
        }
        const date = new Date(props.value);
        const formatTime = ('0' + date.getUTCHours()).slice(-2) + ":" + ('0' + date.getUTCHours()).slice(-2);

        return (
            <span>{formatTime}</span>
        );
    };

    const fields = [
        { name: 'time', displayName: "Time", inputFilterable: true, sortable: true, render: renderTime },
        { name: 'airline', displayName: "Airline", inputFilterable: true, sortable: true },
        { name: 'destination', displayName: "Destination", inputFilterable: true},
        { name: 'status', displayName: "Status", inputFilterable: true}
    ];
    return (
        <FilterableTable
            namespace="Flights"
            data={props.flights}
            pagersVisible={false}
            fields={fields}
            noRecordsMessage="There are no flights to display"
            noFilteredRecordsMessage="No flights match your filters!"
        />
    )
};

export default FlightComponent;

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { TabContent, TabPane, Nav, NavItem, NavLink, Row, Col } from 'reactstrap';
import classnames from 'classnames';
import { loadFlights } from '../actions/action';
import FlightsComponent from '../components/FlightsComponent';

class FlightsContainer extends  Component {
    constructor(props) {
        super(props);
        this.state = {
            activeTab: '1'
        };
        this.props.loadFlights('departure');
    }

    toggle(tab) {
        const filterType = tab === '1' ? 'departure' : 'arrival';
        if (this.state.activeTab !== tab) {
            this.setState({
                activeTab: tab
            });
            this.props.loadFlights(filterType);
        }
    }

    render() {
        return(
            <div>
                <h2 className='App'>Copenhagen Airport's Flights</h2>
                <div sm="12" className="tab-section">
                    <Nav tabs className="m-3">
                        <NavItem>
                            <NavLink
                                className={classnames({ active: this.state.activeTab === '1' })}
                                onClick={() => { this.toggle('1'); }}
                            >
                                Departures
                            </NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink
                                className={classnames({ active: this.state.activeTab === '2' })}
                                onClick={() => { this.toggle('2'); }}
                            >
                                Arrivals
                            </NavLink>
                        </NavItem>
                    </Nav>
                    <TabContent activeTab={this.state.activeTab}>
                        <TabPane tabId="1">
                            <Row>
                                <Col sm="12">
                                    <FlightsComponent {...this.props}/>
                                </Col>
                            </Row>
                        </TabPane>
                        <TabPane tabId="2">
                            <Row>
                                <Col sm="12">
                                    <FlightsComponent {...this.props}/>
                                </Col>
                            </Row>
                        </TabPane>
                    </TabContent>
                </div>
            </div>
        )
    }
}
const mapDispatchToProps = {
    loadFlights
};
const mapStateToProps = (state) => {
    return {
        flights: state.flightReducer.flights
    }
};
export default connect(mapStateToProps, mapDispatchToProps)(FlightsContainer);