49 lines
1.9 KiB
JavaScript
49 lines
1.9 KiB
JavaScript
import {useTranslation} from "react-i18next";
|
|
import {useDataRequest} from "../../../../hooks/dataFetchHook";
|
|
import {fetchPlayerbaseDevelopmentGraph} from "../../../../service/serverService";
|
|
import {ErrorViewCard} from "../../../../views/ErrorView";
|
|
import {Card} from "react-bootstrap";
|
|
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
|
|
import {faChartLine} from "@fortawesome/free-solid-svg-icons";
|
|
import React, {useCallback} from "react";
|
|
import PlayerbaseGraph from "../../../graphs/PlayerbaseGraph";
|
|
import {CardLoader} from "../../../navigation/Loader";
|
|
import {faQuestionCircle} from "@fortawesome/free-regular-svg-icons";
|
|
import {useNavigation} from "../../../../hooks/navigationHook";
|
|
|
|
export const PlayerbaseDevelopmentCardWithData = ({data, title}) => {
|
|
const {t} = useTranslation();
|
|
const {setHelpModalTopic} = useNavigation();
|
|
|
|
const openHelp = useCallback(() => setHelpModalTopic('activity-index'), [setHelpModalTopic]);
|
|
return (
|
|
<Card>
|
|
<Card.Header>
|
|
<h6 className="col-black" style={{width: "100%"}}>
|
|
<Fa className="col-amber"
|
|
icon={faChartLine}/> {t(title ? title : 'html.label.playerbaseDevelopment')}
|
|
<button className={"float-end"} onClick={openHelp}>
|
|
<Fa className={"col-blue"}
|
|
icon={faQuestionCircle}/>
|
|
</button>
|
|
</h6>
|
|
</Card.Header>
|
|
<PlayerbaseGraph data={data}/>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
const PlayerbaseDevelopmentCard = ({identifier}) => {
|
|
const {data, loadingError} = useDataRequest(
|
|
fetchPlayerbaseDevelopmentGraph,
|
|
[identifier])
|
|
|
|
if (loadingError) return <ErrorViewCard error={loadingError}/>
|
|
if (!data) return <CardLoader/>;
|
|
|
|
return (
|
|
<PlayerbaseDevelopmentCardWithData data={data}/>
|
|
)
|
|
}
|
|
|
|
export default PlayerbaseDevelopmentCard; |