PTB-fe/pages/app/index.js

import React, { Component } from "react";
import BasePage from "@/components/Layout/BasePage";
import { Row, Col, Navbar, NavItem, NavLink, NavbarBrand, NavbarToggler, Nav, Collapse, Jumbotron, Button } from "reactstrap";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import Link from "next/link";
import Login from "@/components/Main/Login";
import { connect } from "react-redux";
import { createPengunjung } from "@/actions/pengunjung";

const menu = [
	{
		title: "Home",
		path: "/app",
	},
	{
		title: "Buat Laporan",
		path: "/laporan/new",
	},
	{
		title: "Pemantauan",
		path: "/pemantauan",
	},
];
class App extends Component {
	constructor(props) {
		super(props);
		this.state = {
			isOpen: false,
		};
	}

	static getInitialProps = ({ pathname }) => ({ pathname });

	async componentDidMount() {
		const { token } = this.props;
		if (!token) {
			await createPengunjung();
		}
	}

	toggleCollapse = () => {
		this.setState({
			isOpen: !this.state.isOpen,
		});
	};

	render() {
		return (
			<div>
				<Navbar className="navbar-color" expand="md" dark>
					<NavbarBrand href="/">
						<img className="width-133" src="/static/img/Logo-Sidali.png" alt="App Logo" />
					</NavbarBrand>
					<NavbarToggler onClick={this.toggleCollapse} />
					<Collapse isOpen={this.state.isOpen} navbar>
						<Nav className="ml-auto" navbar>
							{menu.map((e) => (
								<NavItem active={e.path === this.props.pathname ? true : false}>
									<Link href={e.path}>
										<NavLink style={{ cursor: "pointer" }}>{e.title}</NavLink>
									</Link>
								</NavItem>
							))}
						</Nav>
					</Collapse>
				</Navbar>
				<ContentWrapper>
					<Jumbotron>
						<Row className="home-1">
							<Col lg={8} className="d-flex flex-column justify-content-center align-items-start">
								<h1 className="display-5 home-2 txt-size">Sistem Informasi Pengendalian Kelembagaan Perguruan Tinggi pada Pendidikan Tinggi Akademik</h1>
								<p className="lead txt-size">Layanan Pelaporan Pelanggaran Perguruan Tinggi Penyelenggara Pendidikan Tinggi Akademik</p>
								<hr className="my-4" />
								<p className="txt-size">Disediakan kepada masyarakat untuk melaporkan pelanggaran perguruan tinggi yang menyelenggarakan pendidikan tinggi akademik</p>
								<p className="lead">
									{/* <Link href="/laporan/new">
										<button className="btn btn-info btn-lg"><img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon"/>Buat Laporan</button>
									</Link> */}
									<Link href="/laporan/new">
										<span className="btn-radius">
											<Button color="" className="btn-labeled">
												<span className="btn-label">
													<img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon" />
												</span>
												<text className="text-button-home-1 font-color-white">Buat Laporan</text>
											</Button>
										</span>
									</Link>
									<Link href="/pemantauan">
										<span className="btn-radius">
											<Button color className="btn-labeled-2">
												<span className="btn-label">
													<img className="icon-pemantauan" src="/static/img/icon-pemantauan.png" alt="icon" />
												</span>
												<text className="text-button-home-1 font-color-white">Pemantauan</text>
											</Button>
										</span>
									</Link>
								</p>
								<div>
									<img className="ditbaga-logo" src="/static/img/ditbaga-logo.png" alt="applogo" />
								</div>
							</Col>
							<Col>
								<Login />
							</Col>
						</Row>
					</Jumbotron>
				</ContentWrapper>
			</div>
		);
	}
}

App.Layout = BasePage;

const MapStateToProps = (state) => ({ token: state.token });
export default connect(MapStateToProps)(App);