add pengunjung

actions/pengunjung.js

@@ -0,0 +1,30 @@
+import axios from "@/config/axios";
+import axios2 from "axios";
+
+export const createPengunjung = async () => {
+	try {
+		const jsonip = await axios2.get("http://ip-api.com/json");
+		const res = await axios.post("/pengunjung/create", {
+			os: navigator.userAgentData.platform,
+			ipv4: jsonip.data.query,
+			location: {
+				...jsonip.data,
+				region: jsonip.data.regionName,
+			},
+		});
+		return res.data;
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};
+
+export const getPengunjung = async (token) => {
+	try {
+		const res = await axios.get(`/pengunjung`, { headers: { Authorization: token } });
+		return res.data;
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};

components/Riwayat/ChartData.js

@@ -4,88 +4,101 @@ import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";
 
 import Sparkline from "@/components/Common/Sparklines.js";
 import FlotChart from "@/components/Charts/Flot.js";
+import { connect } from "react-redux";
+import { getPengunjung } from "@/actions/pengunjung";
+class ChartData extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			dataPengunjung: [],
+		};
+	}
 
-const ChartSpline = {
-  data: [
-    {
-      // label: "Uniques",
-      color: "#3e3a8e",
-      data: [
-        ["Jan", 20],
-        ["Feb", 90],
-        ["Mar", 40],
-        ["Apr", 85],
-        ["Mei", 59],
-        ["Jun", 93],
-        ["Jul", 66],
-        ["Agu", 86],
-        ["Sep", 60],
-        ["Okt", 70],
-        ["Nov", 60],
-        ["Des", 30],
-      ],
-    },
-  ],
+	async componentDidMount() {
+		const { token } = this.props;
+		const dataPengunjung = await getPengunjung(token);
+		this.setState({ dataPengunjung: dataPengunjung.data.map((e) => [e._id.bulan, e.jumlah_pengunjung]) });
+	}
 
-  options: {
-    series: {
-      lines: {
-        show: false,
-      },
-      points: {
-        show: true,
-        radius: 4,
-      },
-      splines: {
-        show: true,
-        tension: 0.4,
-        lineWidth: 1,
-        fill: 0.5,
-      },
-    },
-    grid: {
-      borderColor: "#eee",
-      borderWidth: 1,
-      hoverable: true,
-      backgroundColor: "#fcfcfc",
-    },
-    tooltip: true,
-    tooltipOpts: {
-      content: (label, x, y) => x + " : " + y,
-    },
-    xaxis: {
-      tickColor: "#fcfcfc",
-      mode: "categories",
-    },
-    yaxis: {
-      min: 0,
-      max: 150, // optional: use it for a clear represetation
-      tickColor: "#eee",
-      //position: 'right' or 'left',
-      tickFormatter: (v) => v /* + ' visitors'*/,
-    },
-    shadowSize: 0,
-  },
-};
-class ChartData extends Component {
-  render() {
-    return (
-      <Col lg={12}>
-        <Card className="card-default">
-          <CardBody>
-            <FlotChart
-              options={ChartSpline.options}
-              data={ChartSpline.data}
-              className="flot-chart"
-              height="250px"
-            />
-          </CardBody>
-          <div align="center">
-            <span>Data Statistik Pengunjung Tahun 2022</span>
-          </div>
-        </Card>
-      </Col>
-    );
-  }
+	ChartSpline = {
+		data: [
+			{
+				// label: "Uniques",
+				color: "#3e3a8e",
+				data: [
+					["Jan", 20],
+					["Feb", 90],
+					["Mar", 40],
+					["Apr", 85],
+					["Mei", 59],
+					["Jun", 93],
+					["Jul", 66],
+					["Agu", 86],
+					["Sep", 60],
+					["Okt", 70],
+					["Nov", 60],
+					["Des", 30],
+				],
+			},
+		],
+
+		options: {
+			series: {
+				lines: {
+					show: false,
+				},
+				points: {
+					show: true,
+					radius: 4,
+				},
+				splines: {
+					show: true,
+					tension: 0.4,
+					lineWidth: 1,
+					fill: 0.5,
+				},
+			},
+			grid: {
+				borderColor: "#eee",
+				borderWidth: 1,
+				hoverable: true,
+				backgroundColor: "#fcfcfc",
+			},
+			tooltip: true,
+			tooltipOpts: {
+				content: (label, x, y) => x + " : " + y,
+			},
+			xaxis: {
+				tickColor: "#fcfcfc",
+				mode: "categories",
+			},
+			yaxis: {
+				min: 0,
+				max: 150, // optional: use it for a clear represetation
+				tickColor: "#eee",
+				//position: 'right' or 'left',
+				tickFormatter: (v) => v /* + ' visitors'*/,
+			},
+			shadowSize: 0,
+		},
+	};
+
+	render() {
+		console.log(this.state.dataPengunjung);
+		return (
+			<Col lg={12}>
+				<Card className="card-default">
+					<CardBody>
+						<FlotChart options={this.ChartSpline.options} data={this.ChartSpline.data} className="flot-chart" height="250px" />
+					</CardBody>
+					<div align="center">
+						<span>Data Statistik Pengunjung Tahun 2022</span>
+					</div>
+				</Card>
+			</Col>
+		);
+	}
 }
-export default ChartData;
+
+const mapStateToProps = (state) => ({ token: state.token });
+export default connect(mapStateToProps)(ChartData);

pages/app/index.js

@@ -1,153 +1,118 @@
 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 { 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",
-  },
+	{
+		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,
-    };
-  }
+	constructor(props) {
+		super(props);
+		this.state = {
+			isOpen: false,
+		};
+	}
 
-  static getInitialProps = ({ pathname }) => ({ pathname });
+	static getInitialProps = ({ pathname }) => ({ pathname });
 
-  toggleCollapse = () => {
-    this.setState({
-      isOpen: !this.state.isOpen,
-    });
-  };
+	async componentDidMount() {
+		const { token } = this.props;
+		if (!token) {
+			await createPengunjung();
+		}
+	}
 
-  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">
+	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>
-    );
-  }
+									<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;
 
-export default App;
+const MapStateToProps = (state) => ({ token: state.token });
+export default connect(MapStateToProps)(App);