import * as React from 'react';
import Select from 'react-select';

import { Link } from 'react-router-dom';
import { Button } from '../controls/Button/Button';
import { ISelectedItem } from '../../interfaces/ISelectedItem';

import * as service from "../../helpers/service";

export interface IProps{
    onClickRender: (selectedItem: ISelectedItem) => void;
}

export interface IState {
    customerData: ISelectedItem[];
    selectedItem: ISelectedItem;
}

export class DropDownSearch extends React.Component<{}, IState>{
    constructor(props: any) {
        super(props);
        this.state = ({
            customerData: [],
            selectedItem: { shortName: '', description: '' }
        });
    }

    componentDidMount() {
        service.fetchJson<ISelectedItem[]>("/api/customers")
            .then((json) =>{
                this.setState({
                    customerData: json
                });
            });
    }

    handleChange = (selectedItem: any) => {
        this.setState({
            selectedItem
        });
    }

    render() {
        const { selectedItem } = this.state;
        const value = selectedItem && selectedItem;

        return (
            <div>
                <Select
                    name="form-field-name"
                    value={this.state.selectedItem}
                    onChange={this.handleChange}
                    options={this.state.customerData}
                    labelKey="shortName"
                />
                <Link to={"/dashboard/" + this.state.selectedItem.shortName}>
                    <Button type="button" className="btn btn-primary" caption="Search" />
                </Link>
            </div>
        );
    }
}

import * as React from 'react';

import { Navbar } from './Navbar/Navbar';
import { ShortNameSelector } from './ShortNameSelector/ShortNameSelector';
import { Dashboard } from './Dashboard/Dashboard';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

export class App extends React.Component<{},{}>{
    render(){
        return(
            <BrowserRouter>
                <div className="container">
                    <Navbar />
                    <div className="col-lg-12">
                        <Switch>
                            <Route exact path="/" component={ShortNameSelector} />
                            <Route path="/dashboard" component={Dashboard} />
                        </Switch>
                    </div>
                </div>
            </BrowserRouter>
        );
    }
}