80 lines
2.9 KiB
JavaScript
80 lines
2.9 KiB
JavaScript
import React, {useEffect} from "react";
|
|
import Sidebar from "../../components/navigation/Sidebar";
|
|
import {Outlet, useOutletContext, useParams} from "react-router-dom";
|
|
import ColorSelectorModal from "../../components/modal/ColorSelectorModal";
|
|
import {fetchPlayer} from "../../service/playerService";
|
|
import {faCampground, faCubes, faInfoCircle, faNetworkWired} from "@fortawesome/free-solid-svg-icons";
|
|
import Header from "../../components/navigation/Header";
|
|
import {useNavigation} from "../../hooks/navigationHook";
|
|
import {useTranslation} from "react-i18next";
|
|
import {faCalendarCheck} from "@fortawesome/free-regular-svg-icons";
|
|
import {useDataRequest} from "../../hooks/dataFetchHook";
|
|
import ErrorPage from "./ErrorPage";
|
|
|
|
|
|
const PlayerPage = () => {
|
|
const {t, i18n} = useTranslation();
|
|
|
|
const {sidebarItems, setSidebarItems} = useNavigation();
|
|
|
|
const {identifier} = useParams();
|
|
const {currentTab, finishUpdate} = useNavigation();
|
|
|
|
const {data: player, loadingError} = useDataRequest(fetchPlayer, [identifier])
|
|
|
|
useEffect(() => {
|
|
if (!player) return;
|
|
|
|
const items = [
|
|
{name: 'html.label.playerOverview', icon: faInfoCircle, href: "overview"},
|
|
{name: 'html.label.sessions', icon: faCalendarCheck, href: "sessions"},
|
|
{name: 'html.label.pvpPve', icon: faCampground, href: "pvppve"},
|
|
{name: 'html.label.servers', icon: faNetworkWired, href: "servers"}
|
|
]
|
|
|
|
player.extensions.map(extension => {
|
|
return {
|
|
name: `${t('html.label.plugins')} (${extension.serverName})`,
|
|
icon: faCubes,
|
|
href: `plugins/${encodeURIComponent(extension.serverName)}`
|
|
}
|
|
}).forEach(item => items.push(item));
|
|
|
|
setSidebarItems(items);
|
|
window.document.title = `Plan | ${player.info.name}`;
|
|
|
|
finishUpdate(player.timestamp, player.timestamp_f);
|
|
}, [player, t, i18n, finishUpdate, setSidebarItems])
|
|
|
|
if (loadingError) return <ErrorPage error={loadingError}/>;
|
|
|
|
return player ? (
|
|
<>
|
|
<Sidebar page={player.info.name} items={sidebarItems}/>
|
|
<div className="d-flex flex-column" id="content-wrapper">
|
|
<Header page={player.info.name} tab={currentTab}/>
|
|
<div id="content" style={{display: 'flex'}}>
|
|
<main className="container-fluid mt-4">
|
|
<Outlet context={{player: player}}/>
|
|
</main>
|
|
<aside>
|
|
<ColorSelectorModal/>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : <>
|
|
<div className="page-loader">
|
|
<div className="loader-container">
|
|
<span className="loader"/>
|
|
<p className="loader-text">Please wait..</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
}
|
|
|
|
export const usePlayer = () => {
|
|
return useOutletContext();
|
|
}
|
|
|
|
export default PlayerPage; |