react-bootstrap#Jumbotron JavaScript Examples

HomePage = () => {
   return (
      <>
         <Jumbotron>
            <h1 className="text-center">Welcome to My Library!</h1>
            <p className="text-center">
               This is a simple Fullstack MERN Application to demonstrate how
               Nginx and Docker can be used in this workflow
            </p>
            <p className="text-center">
               <LinkContainer to="/books">
                  <Button variant="success" size="lg">
                     My Books
                  </Button>
               </LinkContainer>
            </p>
         </Jumbotron>
      </>
   );
}

render() {
        return (
            <div className="app">
                <Navbar className="navbar" bg="dark" variant="dark">
                    <Navbar.Brand href="/">Microsoft identity platform</Navbar.Brand>
                    <Nav className="mr-auto">

                    </Nav>
                    {
                        this.props.isAuthenticated ?
                            <Button variant="info" onClick={this.handleSignOut}>Logout</Button>
                            :
                            <Button variant="outline-info" onClick={this.handleSignIn}>Login</Button>
                    }
                </Navbar>
                {
                    this.props.isAuthenticated ?
                        <ProfileContainer
                            acquireToken={this.props.acquireToken}
                            updateToken={this.props.updateToken}
                        />
                        :
                        <Jumbotron className="welcome">
                            <h1>Azure AD On-Behalf-Of Flow</h1>
                            <p>A React & Redux single-page application authorizing an ASP.NET Core web API
                        to call the Microsoft Graph API on-behalf-of a user via Microsoft Graph SDK.</p>
                            <Button variant="primary"
                                onClick={() => window.open("https://docs.microsoft.com/azure/active-directory/develop/v2-oauth2-on-behalf-of-flow", "_blank")}
                            >Learn More</Button>

                        </Jumbotron>
                }
            </div>
        );
    }

Hero = () => (
  <Jumbotron fluid>
    <Container>
      <h1>React Simple Boilerplate</h1>
      <p>
        Start your next react project in seconds.
      </p>
      <Button variant='outline-primary' onClick={() => Router.push('/docs/getting-started')}>Get started</Button>
    </Container>
  </Jumbotron>
)

PopUpBox = ({ currentName, creatorName, creatorEmail, currentEmail, projectName }) => {
  const [message, setMessage] = useState({
    subjectText: '',
    messageText: '',
  });

  const [show, setShow] = useState(false);

  const sendData = () => {
    setShow(true);
    const body = {
      email: currentEmail,
      subject: message.subjectText,
      message: message.messageText,
    };
    fetch('/api/sendEmail', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(body),
    });
  };

  const form = currentName ? (
    currentEmail ? (
      <Fragment>
        <Jumbotron className="jumbo">
          <h1>Let's get started on {projectName}</h1>
          <hr></hr>
          <h3>Contact {creatorName}!</h3>
          <br></br>
          <Form>
            <Form.Group controlId="Subject">
              <Form.Label>Subject</Form.Label>
              <Form.Control
                type="username"
                placeholder="Re:"
                onChange={(e) => setMessage({ ...message, subjectText: e.target.value })}
              />
              {/* onChange={setInput} /> */}
            </Form.Group>
            <Form.Group controlId="Message">
              <Form.Label>Message</Form.Label>
              <Form.Control
                as="textarea"
                rows="3"
                placeholder="Show off your skills here..."
                onChange={(e) => setMessage({ ...message, messageText: e.target.value })}
              />
            </Form.Group>
            <Button onClick={() => sendData()}>Submit</Button>
          </Form>
          {show && (
            <>
              <br></br>
              <Alert variant="success">Message sent!</Alert>
            </>
          )}
        </Jumbotron>
      </Fragment>
    ) : (
      <Fragment>
        <h1>Let's get started on {projectName}</h1>
        <br></br>
        <h3>Contact {creatorName}!</h3>
        <h3> You are {currentName}</h3>
        <br></br>
        <h1>Please register an email with your account to access messaging features!</h1>
        <Nav.Link href="/profile">Add Email Here</Nav.Link>
      </Fragment>
    )
  ) : (
    <Fragment>
      <h1> Please login first! </h1>
    </Fragment>
  );
  return form;
}

function App() {
  return (
    <Router>
      <div>
        <Navbar style={{ backgroundColor: '#F2F0E9', width: '100%' }} >
          <Navbar.Brand href="#home" variant="dark" style={{ fontFamily: 'lato', color: 'grey'}}>Masakhane</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav" className="justify-content-start">
            <Nav className="ml-auto">
            <Nav.Link href="/">Home</Nav.Link>
                <Nav.Link href="/about">About</Nav.Link>
                <Nav.Link href="/faq">FAQ</Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        <Jumbotron xs={12} style={{ backgroundColor: '#F2F0E9', paddingTop: '50px', paddingBottom: '50px',backgroundSize: 'cover', backgroundSize: 'cover'}} fluid>
          <Container style={{display:'flex', flexDirection:'row', alignItems:'center', justifyContent:'center'}}>
            <Image src={image}  className="d-none d-sm-block" width='240' height='250' roundedCircle style={{position:"absolute", left:0, right:0}}/>
            <Row xs={12} md={8} style={{display:'flex', flexDirection:'column' ,justifyContent:'center', alignItems:'center'}}>
              <h1 style={{ fontFamily: 'lato, sans-serif', fontWeight: 'lighter', fontSize: 80 }}>Masakhane</h1>
              <p>Machine translation service for African languages</p>
            </Row>
          </Container>
        </Jumbotron>

        <Switch>
            <Route exact path="/">
              <Home />
            </Route>
            <Route path="/about">
              <About />
            </Route>
            <Route path="/faq">
              <FAQPage />
            </Route>
          </Switch>
        {/* <Container className="my-4">
          <br />
          <br />
          <TranslateCard />
          <br />
          <p style={{fontSize: 12, color: 'gray'}}>This is a community research project. Read more about it <span style={{color: 'blue'}}>here</span></p>
        </Container> */}
      </div>
    </Router>
  );
}

render() {
    const { campaigns } = this.state;
    const cards = campaigns.map((campaign, i) => {
      //only render active cards for active campaigns
      if (campaign.active) {
        return (
          <ActiveCard
            key={campaign.id}
            id={campaign.id}
            name={campaign.name}
            artistName={this.state.artistName}
            show={this.state.showDetailsModal}
            onClick={this.assignCurrentCampaign}
            showDetails={this.assignCurrentCampaignDetails}
            toggleDetailsModal={this.toggleDetailsModal}
            deactivate={this.deactivateCampaign}
          />
        );
      } else {
        return (
          //only render inactive cards for inactive campaigns
          <InactiveCard
            key={campaign.id}
            id={campaign.id}
            name={campaign.name}
            show={this.state.showDetailsModal}
            onClick={this.assignCurrentCampaign}
            showDetails={this.assignCurrentCampaignDetails}
            toggleDetailsModal={this.toggleDetailsModal}
          />
        );
      }
    });

    return (
      //title
      <div className="dashboard">
        <Jumbotron fluid>
          <h1>My Dashboard</h1>
        </Jumbotron>
        <div className="d-flex row">
          {cards}
          <Button
            className="createCampaign"
            onClick={() => {
              this.toggleCreateModal(true);
            }}
          >
            Create Campaign
          </Button>
        </div>
        {/* edit modal */}
        <EditCampaign
          show={this.state.showEditModal}
          currentCampaign={this.state.currentCampaign}
          toggleEditModal={this.toggleEditModal}
          loadArtistCampaigns={this.loadArtistCampaigns}
        />
        {/* create modal */}
        <CreateCampaign
          show={this.state.showCreateModal}
          artistId={this.props.artistId}
          toggleCreateModal={this.toggleCreateModal}
          loadArtistCampaigns={this.loadArtistCampaigns}
        />
      </div>
    );
  }

function App() {
  return (
    <div>
      <Navbar bg="dark" variant="dark" expand="lg">
        <Navbar.Brand href="#home">
          <span role="img" aria-label="logo">
            ?
          </span>
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <Nav.Link href="https://github.com/xtstc131/LinkedIn-Scraper">
              About
            </Nav.Link>
            <Nav.Link href="#home">Contact</Nav.Link>
            <Nav.Link href="https://github.com/xtstc131/LinkedIn-Scraper">
              Contribute
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
      <Jumbotron className="text-center">
        <Container>
          <Row>
            <Col></Col>
            <Col xs={6}>
              <div className="tiper-js-container">
                <h1 className="jumbotron-heading">MalloCat</h1>
                {/* <p className="lead"> */}
                <Typist avgTypingDelay={40} startDelay={2000}>
                  MalloCat is a platform for displaying the latest Software
                  Engineer job information to the new graduates. Supported by
                  automatic running crawlers targeting on LinkedIn.
                </Typist>
                {/* </p> */}
              </div>
              <p>
                <Button
                  className="rounded-pill"
                  variant="outline-dark"
                  href="https://github.com/xtstc131/LinkedIn-Scraper"
                >
                  Github
                  <img className="btn_logo" src={github_logo} alt="" />
                </Button>
              </p>
            </Col>
            <Col></Col>
          </Row>
        </Container>
      </Jumbotron>
      <Container>
        <Table source="linkedin"></Table>
        <p>© 2020. All rights reserved.</p>
        <img
          src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Flinkedin-spider.netlify.app"
          alt=""
        />
      </Container>
    </div>
  );
}

function App() {
  return (
    <div>
      <Navbar bg="dark" variant="dark" expand="lg">
        <Navbar.Brand href="#home">
          <span role="img" aria-label="logo">
            ?
          </span>
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <Nav.Link href="https://github.com/xtstc131/LinkedIn-Scraper">
              About
            </Nav.Link>
            <Nav.Link href="#home">Contact</Nav.Link>
            <Nav.Link href="https://github.com/xtstc131/LinkedIn-Scraper">
              Contribute
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
      <Jumbotron className="text-center jumbotron">
        <Container>
          <Row>
            <Col></Col>
            <Col xs={6}>
              <h1 className="my-head">
                {/* <span
                  className="typer"
                  id="main"
                  data-words=""
                  data-delay="100"
                  data-colors="#FFFFFF,#9ac4f8"
                  data-delete-delay="1000"
                ></span>
                <span className="cursor" data-owner="main"></span> */}
                MalloCat, A LinkedIn Scraper
              </h1>
              <p className="lead ">
                MalloCat is a platform for displaying the latest Software
                Engineer job information to the new graduates. Supported by
                automatic running crawlers targeting on LinkedIn.
              </p>
              <p>
                <Button
                  className="rounded-pill"
                  variant="outline-light"
                  href="https://github.com/xtstc131/LinkedIn-Scraper"
                >
                  Github
                  <img className="btn_logo" src={github_logo} alt="" />
                </Button>
              </p>
            </Col>
            <Col></Col>
          </Row>
        </Container>
      </Jumbotron>
      <hr className="my-4"></hr>
      <div className="content">
        <Container>
          <Tabs>
            <Tab eventKey="linkedin_fulltime" title="Full-time">
              <Table source="linkedin_fulltime"></Table>
            </Tab>
            <Tab eventKey="linkedin_intern" title="Intern">
              <Table source="linkedin_intern"></Table>
            </Tab>
          </Tabs>
          <p>© 2020. All rights reserved.</p>
          <img
            src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Flinkedin-spider.netlify.app"
            alt=""
          />
        </Container>
      </div>
    </div>
  );
}

Profile = (props) => {
  /*
   * Possible Props:
   * creatorUsername (possibly) passed in from IdeaPage
   * authStatus always passed in from App
   */
  let { ideaCreator, authStatus } = props;

  let { username } = authStatus;

  const [registrationInputs, setRegistrationInputs] = useState({
    firstname: '',
    lastname: '',
    username: authStatus.username,
    password: '',
    confirmPassword: '',
    email: '',
    linkedin: '',
    githubhandle: '',
    personalpage: '',
    about: '',
    userTechStack: [],
  });

  // Set up user data to display on Profile

  const handleEditFormSubmit = async (e) => {
    e.preventDefault();

    const { linkedin, githubhandle, personalpage, about } = registrationInputs;

    const body = { linkedin, githubhandle, personalpage, about };

    await fetch(`/api/profile/${authStatus.username}`, {
      method: 'PUT', // or 'PUT'
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(body),
    })
      .then((response) => response.json())
      .then((data) => {
        const {
          firstname,
          lastname,
          username,
          email,
          linkedin,
          githubhandle,
          personalpage,
          about,
        } = data;

        setRegistrationInputs({
          ...registrationInputs,
          firstname: firstname,
          lastname: lastname,
          username: username,
          email: email,
          linkedin: linkedin,
          githubhandle: githubhandle,
          personalpage: personalpage,
          about: about,
        });
      })
      .catch((error) => {
        console.error('Error:', error);
      });
    window.location.reload(false);
  };

  const setInput = (e) => {
    //   setUserData({
    //   ...userData,
    //   [e.target.id]: e.target.value,
    // });
    setRegistrationInputs({
      ...registrationInputs,
      [e.target.id]: e.target.value,
    });
  };

  // componentDidMount() functional equivalent
  useEffect(() => {
    const getUser = async () => {
      // Get all existing user data, sending username as a parameter

      const loggedInStatus = await axios.get('/api/loginstatus');
      const userLogin = loggedInStatus.data[1];

      const res = await axios.get(`/api/profile/${userLogin.username}`);
      // Expect in response an object with all User table column properties
      // const userTableData = await res.json();
      // setUserData(userTableData);
      const {
        firstname,
        lastname,
        username,
        email,
        linkedin,
        githubhandle,
        personalpage,
        about,
      } = res.data;

      setRegistrationInputs({
        firstname: firstname,
        lastname: lastname,
        username: username,
        linkedin: linkedin,
        githubhandle: githubhandle,
        personalpage: personalpage,
        about: about,
      });
    };
    getUser();
  }, []);

  /* 
   * PROFILE COMPONENT USER FLOW:
  
   *   Case 1: Viewing your own profile (READ and WRITE)
   *       On first render, display all data in this DB row (distinguished by `username`)
   *       
   *       If current User clicks edit, then submit:
   *         1a. Send all data stored from initial GET request
   *         1b. Except for the modified fields, whose values will be set to User input
   * 
   *   Case 2: Viewing another User's profile (whether or not you're a registered user)
   *     Same page without edit button functionality (READ-ONLY)
  */

  // if (!Object.keys(userData).length) {
  //   return <Spinner />;
  // } else if (userData.err) {
  //   return <Container>Could not load user</Container>;
  // }

  return (
    <Container id="userProfileContainer">
      <Row className="mb-4" id="row1">
        <h3>{authStatus.username}'s Developer Profile</h3>
        <img
          id="profilePic"
          src="https://www.clker.com/cliparts/Z/j/o/Z/g/T/turquoise-anonymous-man-hi.png"
        />
      </Row>
      <Row id="row2">
        <Col className="cardHeader" id="bioCard">
          <Fragment>Bio</Fragment>
        </Col>
        <Col className="cardHeader ml-5" id="contactInfoCard">
          <Fragment>Where else can your future teammates contact you?</Fragment>
        </Col>
      </Row>
      {/* <div className="row">
        <div className="col">Full Name: {userData.username}</div>
        <div className="col">Github: {userData.githubhandle}</div>
      </div>
      <div className="row">
        <div className="col">About: {userData.about}</div>
        <div className="col">LinkedIn: {userData.linkedin}</div>
      </div> */}
      <div className="row">
        <div className="col">Full Name: {registrationInputs.username}</div>
        <div className="col">Github: {registrationInputs.githubhandle}</div>
      </div>
      <div className="row">
        <div className="col">About: {registrationInputs.about}</div>
        <div className="col">LinkedIn: {registrationInputs.linkedin}</div>
      </div>
      <div className="row">
        <div className="col">Tech Stack:</div>
        <div className="col">
          Personal Site/Portfolio:{registrationInputs.personalpage}
        </div>
      </div>

      <Popup trigger={<button> Edit Profile</button>} modal>
        {(close) => (
          <Jumbotron>
            <h1>Update Your Peronal Info</h1>
            <div>
              <Form onSubmit={handleEditFormSubmit}>
                <Form.Group controlId="linkedin">
                  <Form.Label>LinkedIn</Form.Label>
                  <Form.Control
                    type="linkedin"
                    placeholder="LinkedIn URL"
                    value={registrationInputs.linkedin}
                    onChange={setInput}
                  />
                </Form.Group>

                <Form.Group controlId="githubhandle">
                  <Form.Label>GitHub</Form.Label>
                  <Form.Control
                    type="githubhandle"
                    placeholder="gitHubHandle URL"
                    value={registrationInputs.githubhandle}
                    onChange={setInput}
                  />
                </Form.Group>

                <Form.Group controlId="personalpage">
                  <Form.Label>Personal Page</Form.Label>
                  <Form.Control
                    type="personalpage"
                    placeholder="Personal Page URL"
                    value={registrationInputs.personalpage}
                    onChange={setInput}
                  />
                </Form.Group>

                <Form.Group controlId="about">
                  <Form.Label>About</Form.Label>
                  <Form.Control
                    type="about"
                    placeholder="About you"
                    value={registrationInputs.about}
                    onChange={setInput}
                  />
                </Form.Group>

                <Button variant="primary" type="submit">
                  Submit
                </Button>
              </Form>
            </div>
          </Jumbotron>
        )}
      </Popup>
      {/* <button onClick={handleformsubmit}> 
          <EditProfile />
          // we fill out the form
          // hit submit and do a post request to database
          // .then window.location profile page to automatically do get request
        </button>  */}
    </Container>
  );
}

render() {
    return (
      <Container>
        {this.state.dataLoaded ? (
          <div>
            {this.state.dataFound ? (
              <div>
                <br />
                <Form.Row>
                  <Form.Group as={Col} md="2" controlId="Month">
                    <Form.Control
                      as="select"
                      name="Month"
                      onChange={this.handleChange}
                      value={this.state.selectMonth}
                    >
                      <option value="1">January</option>
                      <option value="2">February</option>
                      <option value="3">March</option>
                      <option value="4">April</option>
                      <option value="5">May</option>
                      <option value="6">June</option>
                      <option value="7">July</option>
                      <option value="8">August</option>
                      <option value="9">September</option>
                      <option value="10">October</option>
                      <option value="11">November</option>
                      <option value="12">December</option>
                    </Form.Control>
                  </Form.Group>
                  <Form.Group as={Col} md="2" controlId="Year">
                    <Form.Control
                      as="select"
                      name="Year"
                      onChange={this.handleChange2}
                      value={this.state.selectYear}
                    >
                      <option value="2020">2020</option>
                      <option value="2019">2019</option>
                      <option value="2018">2018</option>
                      <option value="2017">2017</option>
                      <option value="2016">2016</option>
                      <option value="2015">2015</option>
                      <option value="2014">2014</option>
                      <option value="2013">2013</option>
                      <option value="2012">2012</option>
                      <option value="2011">2011</option>
                      <option value="2010">2010</option>
                    </Form.Control>
                  </Form.Group>
                </Form.Row>
                {this.state.dataModify ? (
                  <div>
                    <Row>
                      <Col md="6">
                        <Jumbotron>
                          <UserPageUpdateComponent
                            user={this.props.user}
                            month={this.state.selectMonth}
                            year={this.state.selectYear}
                            update={this.update}
                            currData={this.state.data}
                          />
                          <br />
                          <Button onClick={this.cancelModifyBudget}>
                            Cancel
                          </Button>
                        </Jumbotron>
                      </Col>
                      <Col md="6">
                        <TableComponent
                          category={this.state.data.labels}
                          price={this.state.data.data}
                        />
                      </Col>
                    </Row>
                  </div>
                ) : (
                  <div>
                    <ButtonToolbar>
                      <ButtonGroup className="mr-2">
                        <Button variant="danger" onClick={this.deleteBudget}>
                          Delete Month's Finances
                        </Button>
                      </ButtonGroup>
                      <ButtonGroup className="mr-2">
                        <Button onClick={this.modifyBudget}>
                          Modify Month's Finances
                        </Button>
                      </ButtonGroup>
                      <ButtonGroup className="mr-2">
                        <DropdownButton
                          id="dropdown-item-button"
                          title="Graphs"
                        >
                          <Dropdown.Item as="button" onClick={this.handleBar}>
                            Bar Graph
                          </Dropdown.Item>
                          <Dropdown.Item
                            as="button"
                            onClick={this.handlePieIncome}
                          >
                            Income Pie Chart
                          </Dropdown.Item>
                          <Dropdown.Item
                            as="button"
                            onClick={this.handlePieExpense}
                          >
                            Expenses Pie Chart
                          </Dropdown.Item>
                          <Dropdown.Item
                            as="button"
                            onClick={this.handleBarGoals}
                          >
                            Goal Chart
                          </Dropdown.Item>
                          <Dropdown.Item as="button" onClick={this.handleRadar}>
                            Expense Variance Chart
                          </Dropdown.Item>
                        </DropdownButton>
                      </ButtonGroup>
                    </ButtonToolbar>
                    <Form.Switch
                      checked={this.state.colorMode}
                      id="custom-switch"
                      label="Colorblind Mode"
                      onChange={this.handleSwitchChange}
                    />
                    <br />
                    {this.state.showTable ? (
                      <div>
                        <Button onClick={this.toggleTable}>
                          Hide Finances Table
                        </Button>
                        <br />
                        <br />
                        <TableComponent
                          category={this.state.data.labels}
                          price={this.state.data.data}
                        />
                      </div>
                    ) : (
                      <div>
                        <Button onClick={this.toggleTable}>
                          Show Finances Table
                        </Button>
                        <br />
                        <br />
                      </div>
                    )}
                  </div>
                )}

                <CardColumns>
                  <Card
                    border="none"
                    style={
                      this.state.barActive
                        ? { border: "none" }
                        : { display: "none" }
                    }
                  >
                    <ChartCardComponent
                      handleBar={this.handleBar}
                      labels={this.state.data.labels}
                      data={this.state.data.data}
                      Component={"BarChart"}
                    />
                  </Card>

                  <Card
                    border="none"
                    style={
                      this.state.incomePieActive
                        ? { border: "none" }
                        : { display: "none" }
                    }
                  >
                    <ChartCardComponent
                      handlePieIncome={this.handlePieIncome}
                      labels={this.state.data.labels}
                      data={this.state.data.data}
                      color={this.state.colorMode}
                      Component={"IncomePie"}
                    />
                  </Card>

                  <Card
                    border="none"
                    style={
                      this.state.expensePieActive
                        ? { border: "none" }
                        : { display: "none" }
                    }
                  >
                    <ChartCardComponent
                      handlePieExpense={this.handlePieExpense}
                      labels={this.state.data.labels}
                      data={this.state.data.data}
                      color={this.state.colorMode}
                      Component={"ExpensePie"}
                    />
                  </Card>

                  <Card
                    border="none"
                    style={
                      this.state.barGoalsPieActive
                        ? { border: "none" }
                        : { display: "none" }
                    }
                  >
                    <ChartCardComponent
                      handleBarGoals={this.handleBarGoals}
                      data={this.state.data.data}
                      goal={this.state.data.goal}
                      color={this.state.colorMode}
                      Component={"BarGoal"}
                    />
                  </Card>
                  <Card
                    style={
                      this.state.radarActive
                        ? { border: "none" }
                        : { display: "none" }
                    }
                  >
                    <ChartCardComponent
                      handleRadar={this.handleRadar}
                      labels={this.state.data.labels}
                      data={this.state.data.data}
                      Component={"RadarPie"}
                    />
                  </Card>
                </CardColumns>
              </div>
            ) : (
              <div>
                <br />
                <Form.Row>
                  <Form.Group as={Col} md="2" controlId="Month2">
                    <Form.Control
                      as="select"
                      name="Month"
                      onChange={this.handleChange}
                      value={this.state.selectMonth}
                    >
                      <option value="1">January</option>
                      <option value="2">February</option>
                      <option value="3">March</option>
                      <option value="4">April</option>
                      <option value="5">May</option>
                      <option value="6">June</option>
                      <option value="7">July</option>
                      <option value="8">August</option>
                      <option value="9">September</option>
                      <option value="10">October</option>
                      <option value="11">November</option>
                      <option value="12">December</option>
                    </Form.Control>
                  </Form.Group>
                  <Form.Group as={Col} md="2" controlId="Year2">
                    <Form.Control
                      as="select"
                      name="Year"
                      onChange={this.handleChange2}
                      value={this.state.selectYear}
                    >
                      <option value="2020">2020</option>
                      <option value="2019">2019</option>
                      <option value="2018">2018</option>
                      <option value="2017">2017</option>
                      <option value="2016">2016</option>
                      <option value="2015">2015</option>
                      <option value="2014">2014</option>
                      <option value="2013">2013</option>
                      <option value="2012">2012</option>
                      <option value="2011">2011</option>
                      <option value="2010">2010</option>
                    </Form.Control>
                  </Form.Group>
                </Form.Row>

                <h3>No Data for this month :(</h3>
                <br />
                <h4>Would you like to add some?</h4>
                <Jumbotron>
                  <UserPageFormComponent
                    user={this.props.user}
                    month={this.state.selectMonth}
                    year={this.state.selectYear}
                    update={this.update}
                  />
                </Jumbotron>
              </div>
            )}
            <LineGraphComponent
              year={this.state.selectYear}
              user={this.props.user}
            />
          </div>
        ) : (
          <Spinner animation="border" variant="primary">
            <span className="sr-only">Loading...</span>
          </Spinner>
        )}
      </Container>
    );
  }

render() {
    return (
      <Layout user={this.props.user}>
        {this.props.user ? (
          <UserPageComponent user={this.props.user} />
        ) : (
          <Container>
            <br />
            <Row>
              <Col md="5">
                <Jumbotron>
                  <ChartFormComponent
                    handleFormUpdate={this.handleFormUpdate.bind(this)}
                  />
                  <br />
                  <ButtonToolbar>
                    <ButtonGroup className="mr-2">
                      <Button
                        variant="secondary"
                        onClick={this.handleResetUpdate}
                      >
                        Reset
                      </Button>
                    </ButtonGroup>

                    <ButtonGroup className="mr-2">
                      <DropdownButton id="dropdown-item-button" title="Graphs">
                        <Dropdown.Item as="button" onClick={this.handleBar}>
                          Bar Graph
                        </Dropdown.Item>
                        <Dropdown.Item
                          as="button"
                          onClick={this.handlePieIncome}
                        >
                          Income Pie Chart
                        </Dropdown.Item>
                        <Dropdown.Item
                          as="button"
                          onClick={this.handlePieExpense}
                        >
                          Expenses Pie Chart
                        </Dropdown.Item>
                        <Dropdown.Item as="button" onClick={this.handleRadar}>
                          Expense Variance Chart
                        </Dropdown.Item>
                      </DropdownButton>
                    </ButtonGroup>
                  </ButtonToolbar>
                  <br />
                  <Form.Switch
                    checked={this.state.colorMode}
                    id="custom-switch"
                    label="Colorblind Mode"
                    onChange={this.handleSwitchChange}
                  />
                </Jumbotron>
              </Col>
              <Col md="7">
                <TableComponent
                  category={this.state.labels}
                  price={this.state.data}
                />
              </Col>
            </Row>

            <CardColumns>
              <Card
                border="none"
                style={
                  this.state.barActive
                    ? { border: "none" }
                    : { display: "none" }
                }
              >
                <ChartCardComponent
                  handleBar={this.handleBar}
                  labels={this.state.labels}
                  data={this.state.data}
                  Component={"BarChart"}
                />
              </Card>
              <Card
                border="none"
                style={
                  this.state.incomePieActive
                    ? { border: "none" }
                    : { display: "none" }
                }
              >
                <ChartCardComponent
                  handlePieIncome={this.handlePieIncome}
                  labels={this.state.labels}
                  data={this.state.data}
                  color={this.state.colorMode}
                  Component={"IncomePie"}
                />
              </Card>
              <Card
                style={
                  this.state.expensePieActive
                    ? { border: "none" }
                    : { display: "none" }
                }
              >
                <ChartCardComponent
                  handlePieExpense={this.handlePieExpense}
                  labels={this.state.labels}
                  data={this.state.data}
                  color={this.state.colorMode}
                  Component={"ExpensePie"}
                />
              </Card>

              <Card
                style={
                  this.state.radarActive
                    ? { border: "none" }
                    : { display: "none" }
                }
              >
                <ChartCardComponent
                  handleRadar={this.handleRadar}
                  labels={this.state.labels}
                  data={this.state.data}
                  Component={"RadarPie"}
                />
              </Card>
            </CardColumns>
          </Container>
        )}
      </Layout>
    );
  }