react-bootstrap#Jumbotron JavaScript Examples
The following examples show how to use
react-bootstrap#Jumbotron.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: HomePage.js From mern_library_nginx with MIT License | 6 votes |
|
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>
</>
);
}
Example #2
| Source File: App.js From ms-identity-javascript-react-spa-dotnetcore-webapi-obo with MIT License | 6 votes |
|
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>
);
}
Example #3
| Source File: hero.js From react-simple-boilerplate with MIT License | 6 votes |
|
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>
)
Example #4
| Source File: PopUpBox.jsx From SWEethearts-2.0 with MIT License | 5 votes |
|
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;
}
Example #5
| Source File: App.js From masakhane-web with MIT License | 5 votes |
|
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>
);
}
Example #6
| Source File: Dashboard.jsx From journey.io with MIT License | 5 votes |
|
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>
);
}
Example #7
| Source File: App.js From LinkedIn-Scraper with Apache License 2.0 | 5 votes |
|
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>
);
}
Example #8
| Source File: App.js From LinkedIn-Scraper with Apache License 2.0 | 5 votes |
|
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>
);
}
Example #9
| Source File: Profile.jsx From SWEethearts-2.0 with MIT License | 4 votes |
|
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>
);
}
Example #10
| Source File: UserPageComponent.js From project-s0-t1-budget with MIT License | 4 votes |
|
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>
);
}
Example #11
| Source File: index.js From project-s0-t1-budget with MIT License | 4 votes |
|
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>
);
}
