import React from "react";
import { Button, InputGroup, FormControl } from "react-bootstrap";
import "../styles/Dashboard.css";
import { apiClient } from "../utils/httpClients";

export default class Dashboard extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            displayedMatches: [],
        };
    }
    async getFirstName(){
        let user = await apiClient.get("/user");
        return user.firstName;
    }
    render() {
        return(
            <React.Fragment>
                <h1>Welcome {this.getFirstName()}</h1>
                <InputGroup className="w-50">
                    <FormControl
                        placeholder="Search for Matches"
                        aria-label="Search Bar"
                        aria-describedby="basic-addon2"
                    />
                    <Button variant="outline-secondary" id="button-addon2">
                Search
                    </Button>
                </InputGroup>
            </React.Fragment>
            
        );
    }
}