palmpay.mx-website/src/components/App.js

85 lines
1.9 KiB
JavaScript

import React from 'react';
import { Events, animateScroll as scroll, scrollSpy } from 'react-scroll';
import { Route, Switch } from 'react-router-dom';
// Custom components
import {
AmbassadorsPage,
HomePage,
MarketingPage,
MerchantsPage,
NotFoundPage
} from './pages';
/**
* The main App component - Route all the pages.
*/
class App extends React.Component {
constructor(props) {
super(props);
this.state = { showmenu: true };
this.state = {
collapse: false,
modal2: false
};
this.onClick = this.onClick.bind(this);
this.handleNavbarClick = this.handleNavbarClick.bind(this);
}
onClick() {
this.setState({
collapse: !this.state.collapse
});
}
handleNavbarClick() {
this.setState({
collapse: false
});
}
componentDidMount() {
scrollSpy.update();
}
componentWillUnmount() {
Events.scrollEvent.remove("begin");
Events.scrollEvent.remove("end");
}
scrollToTop() {
scroll.scrollToTop();
}
scrollToBottom() {
scroll.scrollToBottom();
}
scrollTo() {
scroll.scrollTo(100);
}
scrollMore() {
scroll.scrollMore(100);
}
render() {
const collapsed = this.state.collapsed;
const overlay = (
<div
id="sidenav-overlay"
style={{ backgroundColor: "transparent" }}
onClick={this.handleNavbarClick}
/>
);
return (
<span id="apppage">
<Switch>
<Route exact path="/" title="Palmpay" component={HomePage} />
<Route exact path="/ambs" title="PalmPay Ambassadors" component={AmbassadorsPage} />
<Route exact path="/marketing" title="PalmPay Marketing" component={MarketingPage} />
<Route exact path="/merchants" title="PalmPay Merchants" component={MerchantsPage} />
<Route title="PalmPay Page Not Found" component={NotFoundPage} />
</Switch>
{collapsed && overlay}
</span>
);
}
}
export default App;