diff --git a/src/api/GametoolsApi.tsx b/src/api/GametoolsApi.tsx index 77d3365..3674b2a 100644 --- a/src/api/GametoolsApi.tsx +++ b/src/api/GametoolsApi.tsx @@ -81,6 +81,7 @@ interface ServerLeaderboard { interface ServerLeaderboardV2 { gameId: string; + playernameFilter: string; amount: string; sort: string; days: string; @@ -449,6 +450,7 @@ export class ApiProvider extends JsonClient { async serverLeaderboardV2({ gameId, + playernameFilter, amount, sort, days @@ -458,6 +460,7 @@ export class ApiProvider extends JsonClient { } return await this.getJsonMethod(`/manager/leaderboard/v2/`, { gameId: gameId, + player_name_filter: playernameFilter, amount: amount, sort: sort, days: days diff --git a/src/components/routes/Servers/Detailed/Leaderboard.tsx b/src/components/routes/Servers/Detailed/Leaderboard.tsx index 6ab205a..7251d2a 100644 --- a/src/components/routes/Servers/Detailed/Leaderboard.tsx +++ b/src/components/routes/Servers/Detailed/Leaderboard.tsx @@ -4,7 +4,7 @@ import { addDays, addSeconds } from "date-fns"; import * as React from "react"; import { useTranslation } from "react-i18next"; import { GametoolsApi } from "../../../../api/GametoolsApi"; -import { ServerLeaderboardList } from "../../../../api/ReturnTypes"; +import { ServerLeaderboardList, ServerLeaderboardReturn } from "../../../../api/ReturnTypes"; import "../../../../assets/scss/App.scss"; import "../../../../locales/config"; import { Box } from "../../../Materials"; @@ -20,50 +20,24 @@ export function ServerLeaderboard( const { t } = useTranslation(); const [days, setDays] = React.useState(30); const [sortType, setSortType] = React.useState("score"); - const getLanguage = () => window.localStorage.i18nextLng; - const numberFormat = new Intl.NumberFormat(getLanguage()); - const [adminMode] = useLocalStorage("adminMode", false); + const [searchTerm, setSearchTerm] = React.useState(""); const gameId = props.gameid; const { isLoading: loading, isError: error, data: stats, } = useQuery({ - queryKey: ["serverLeaderboardV2" + gameId + sortType + days], + queryKey: ["serverLeaderboardV2" + gameId + sortType + days + searchTerm], queryFn: () => GametoolsApi.serverLeaderboardV2({ gameId: gameId, + playernameFilter: searchTerm, amount: "50", sort: sortType, days: days.toString() }), }); - const players = stats?.data; - let playerIds: number[] = []; - playerIds = playerIds.concat( - players?.map((player) => { - return player?.playerId; - }), - ); - - const { - isLoading: checkBanLoading, - isError: checkBanError, - data: checkBanInfo, - } = useQuery({ - queryKey: ["managerCheckPlayers" + playerIds + "leaderboard"], - queryFn: () => GametoolsApi.managerCheckPlayers({ playerIds }), - }); - - if (loading || error) { - return ( -
-

{t("servers.leaderboard.main")}

-

{t("loading")}

-
- ); - } return (
@@ -102,119 +76,168 @@ export function ServerLeaderboard( })} })} + ): void => + setSearchTerm(ev.target.value) + } + />
- {players?.length !== 0 ? ( - - {players.map((key: ServerLeaderboardList, index: number) => { - return ( -
- -
-

{numberFormat.format(key.score)}

-

- {t("servers.leaderboard.row.score")} -

-
-
-

{numberFormat.format(key.killDeath)}

-

- {t("servers.leaderboard.row.killDeath")} -

-
-
-

{numberFormat.format(key.kills)}

-

- {t("servers.leaderboard.row.kills")} -

-
-
-

{numberFormat.format(key.deaths)}

-

- {t("servers.leaderboard.row.deaths")} -

-
-
-

{numberFormat.format(key.wins)}

-

- {t("servers.leaderboard.row.wins")} -

-
-
-

{numberFormat.format(key.losses)}

-

- {t("servers.leaderboard.row.losses")} -

-
-
-

- {key.timePlayed > 3600 - ? t("hourChange", { - change: addSeconds(new Date(), key.timePlayed), - }) - : t("change", { - change: addSeconds(new Date(), key.timePlayed), - })} + +

+ ); +} + +function ServerLeaderboardData( + props: Readonly<{ + stats: ServerLeaderboardReturn, + isLoading: boolean, + isError: boolean, + }> +) { + const getLanguage = () => window.localStorage.i18nextLng; + const numberFormat = new Intl.NumberFormat(getLanguage()); + const [adminMode] = useLocalStorage("adminMode", false); + const { t } = useTranslation(); + + const players = props.stats?.data; + let playerIds: number[] = []; + playerIds = playerIds.concat( + players?.map((player) => { + return player?.playerId; + }), + ); + + const { + isLoading: checkBanLoading, + isError: checkBanError, + data: checkBanInfo, + } = useQuery({ + queryKey: ["managerCheckPlayers" + playerIds + "leaderboard"], + queryFn: () => GametoolsApi.managerCheckPlayers({ playerIds }), + }); + + + if (props.isLoading || props.isError) { + return ( +

{t("loading")}

+ ); + } + + return (<> + {players?.length !== 0 ? ( + + {players.map((key: ServerLeaderboardList, index: number) => { + return ( + - ); - })} - - ) : ( - -

{t("servers.leaderboard.none")}

-
- )} -
- ); +
+

{numberFormat.format(key.score)}

+

+ {t("servers.leaderboard.row.score")} +

+
+
+

{numberFormat.format(key.killDeath)}

+

+ {t("servers.leaderboard.row.killDeath")} +

+
+
+

{numberFormat.format(key.kills)}

+

+ {t("servers.leaderboard.row.kills")} +

+
+
+

{numberFormat.format(key.deaths)}

+

+ {t("servers.leaderboard.row.deaths")} +

+
+
+

{numberFormat.format(key.wins)}

+

+ {t("servers.leaderboard.row.wins")} +

+
+
+

{numberFormat.format(key.losses)}

+

+ {t("servers.leaderboard.row.losses")} +

+
+
+

+ {key.timePlayed > 3600 + ? t("hourChange", { + change: addSeconds(new Date(), key.timePlayed), + }) + : t("change", { + change: addSeconds(new Date(), key.timePlayed), + })} +

+

+ {t("servers.leaderboard.row.timePlayed")} +

+
+ + ); + })} +
+ ) : ( + +

{t("servers.leaderboard.none")}

+
+ )}) }