2022-04-06 16:37:23 +02:00
|
|
|
import React from "react";
|
2023-02-06 18:01:33 +01:00
|
|
|
import {Col, Row} from "react-bootstrap";
|
2022-05-23 17:58:06 +02:00
|
|
|
import OnlineActivityGraphsCard from "../../components/cards/server/graphs/OnlineActivityGraphsCard";
|
|
|
|
import OnlineActivityAsNumbersCard from "../../components/cards/server/tables/OnlineActivityAsNumbersCard";
|
2022-05-21 19:25:49 +02:00
|
|
|
import {useParams} from "react-router-dom";
|
2022-05-23 17:58:06 +02:00
|
|
|
import {useDataRequest} from "../../hooks/dataFetchHook";
|
|
|
|
import {fetchOnlineActivityOverview} from "../../service/serverService";
|
2022-08-19 18:03:02 +02:00
|
|
|
import ErrorView from "../ErrorView";
|
2022-05-23 17:58:06 +02:00
|
|
|
import OnlineActivityInsightsCard from "../../components/cards/server/insights/OnlineActivityInsightsCard";
|
2022-08-19 18:03:02 +02:00
|
|
|
import LoadIn from "../../components/animation/LoadIn";
|
2022-04-06 16:37:23 +02:00
|
|
|
|
2022-05-23 17:58:06 +02:00
|
|
|
const OnlineActivity = () => {
|
2022-05-21 19:25:49 +02:00
|
|
|
const {identifier} = useParams();
|
|
|
|
|
|
|
|
const {data, loadingError} = useDataRequest(fetchOnlineActivityOverview, [identifier])
|
|
|
|
|
2022-08-19 18:03:02 +02:00
|
|
|
if (loadingError) return <ErrorView error={loadingError}/>
|
2022-05-21 19:25:49 +02:00
|
|
|
|
2022-04-06 16:37:23 +02:00
|
|
|
return (
|
2022-08-19 18:03:02 +02:00
|
|
|
<LoadIn>
|
|
|
|
<section className="server_online_activity_overview">
|
|
|
|
<Row>
|
|
|
|
<Col lg={12}>
|
|
|
|
<OnlineActivityGraphsCard/>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
<Row>
|
|
|
|
<Col lg={8}>
|
|
|
|
<OnlineActivityAsNumbersCard data={data?.numbers}/>
|
|
|
|
</Col>
|
|
|
|
<Col lg={4}>
|
|
|
|
<OnlineActivityInsightsCard data={data?.insights}/>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</section>
|
|
|
|
</LoadIn>
|
2022-04-06 16:37:23 +02:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-05-23 17:58:06 +02:00
|
|
|
export default OnlineActivity
|