Skip to content

Commit 7509b8a

Browse files
vtm9vtm9
committed
Improve
1 parent 44071a7 commit 7509b8a

18 files changed

Lines changed: 867 additions & 760 deletions

File tree

‎apps/codebattle/assets/js/__tests__/UserName.test.jsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from "react";
2+
3+
import { render, screen } from "@testing-library/react";
4+
import "@testing-library/jest-dom";
5+
6+
import UserName from "../widgets/components/UserName";
7+
8+
jest.mock("@fortawesome/react-fontawesome", () => ({
9+
FontAwesomeIcon: "span",
10+
}));
11+
12+
jest.mock("../widgets/components/LanguageIcon", () => () => <span data-testid="language-icon" />);
13+
14+
describe("UserName", () => {
15+
test("renders the user name as-is", () => {
16+
render(
17+
<UserName
18+
user={{ id: 1, name: "A-211250(2011)", rank: 2011, isBot: false, lang: "js" }}
19+
hideLink
20+
hideOnlineIndicator
21+
/>,
22+
);
23+
24+
expect(screen.getByText("A-211250(2011)")).toBeInTheDocument();
25+
});
26+
27+
test("does not append rank to the rendered user name", () => {
28+
const { container } = render(
29+
<UserName
30+
user={{ id: 1, name: "A-211250", rank: 2011, isBot: false, lang: "js" }}
31+
hideLink
32+
hideOnlineIndicator
33+
/>,
34+
);
35+
36+
expect(screen.getByText("A-211250")).toBeInTheDocument();
37+
expect(container).toHaveTextContent("A-211250");
38+
expect(container).not.toHaveTextContent("A-211250(2011)");
39+
});
40+
41+
test("renders bot icon without language icon for bots", () => {
42+
const { container } = render(
43+
<UserName
44+
user={{ id: -1, name: "CasperDesigner", isBot: true, lang: "js" }}
45+
hideLink
46+
hideOnlineIndicator
47+
/>,
48+
);
49+
50+
expect(screen.getByText("CasperDesigner")).toBeInTheDocument();
51+
expect(screen.queryByTestId("language-icon")).not.toBeInTheDocument();
52+
expect(container.querySelectorAll("span").length).toBeGreaterThan(0);
53+
});
54+
});

‎apps/codebattle/assets/js/widgets/components/UserName.jsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ function UserName({
1616
hovered,
1717
hideOnlineIndicator,
1818
hideLink,
19-
hideRank,
2019
displayName,
2120
}) {
2221
const commonClassName = "d-flex align-items-center";
@@ -39,19 +38,17 @@ function UserName({
3938
{!hideOnlineIndicator && !user.isBot && (
4039
<FontAwesomeIcon icon={faCircle} className={onlineIndicatorClassName} />
4140
)}
42-
<LanguageIcon className="mr-1" lang={lang} />
41+
{!user.isBot && <LanguageIcon className="mr-1" lang={lang} />}
4342
{user.isBot && (
4443
<FontAwesomeIcon className={botImgClassName} icon={faRobot} transform="up-1" />
4544
)}
4645
{hideLink ? (
47-
<span className={userClassName} title={user.name}>
46+
<span className={userClassName} title={shownName}>
4847
<span className={userNameClassName}>{shownName}</span>
49-
{user.rank && !hideRank && <span className={userNameClassName}>{`(${user.rank})`}</span>}
5048
</span>
5149
) : (
52-
<a href={`/users/${user.id}`} className={userClassName} title={user.name}>
50+
<a href={`/users/${user.id}`} className={userClassName} title={shownName}>
5351
<span className={userNameClassName}>{shownName}</span>
54-
{user.rank && !hideRank && <span className={userNameClassName}>{`(${user.rank})`}</span>}
5552
</a>
5653
)}
5754
</div>

‎apps/codebattle/assets/js/widgets/pages/tournament/ControlPanel.jsx‎

Lines changed: 10 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import React, { memo, useCallback, useContext } from "react";
22

3-
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
43
import cn from "classnames";
54
import i18next from "i18next";
6-
import { useSelector } from "react-redux";
75

86
import CustomEventStylesContext from "../../components/CustomEventStylesContext";
9-
import { tournamentPlayersSelector } from "../../selectors";
107

118
// %{"type" => "top_users_by_clan_ranking"} ->
129
// %{"type" => "tasks_ranking"} ->
@@ -45,54 +42,27 @@ export const mapPanelModeToTitle = {
4542
function ControlPanel({
4643
allowedPanelModes,
4744
isPlayer,
45+
leftContent = null,
4846
panelMode,
49-
panelHistory,
50-
setPanelHistory,
51-
setSearchOption,
5247
setPanelMode,
5348
}) {
54-
const allPlayers = useSelector(tournamentPlayersSelector);
5549
const hasCustomEventStyles = useContext(CustomEventStylesContext);
56-
57-
const onPanelBack = useCallback(() => {
58-
if (panelHistory.length === 0) return;
59-
60-
const [prev, ...rest] = panelHistory.reverse();
61-
62-
setPanelMode(prev);
63-
setPanelHistory(rest.reverse());
64-
65-
if (prev.userId) {
66-
setSearchOption(allPlayers[prev.userId]);
67-
}
68-
}, [panelHistory, setPanelHistory, setPanelMode, setSearchOption, allPlayers]);
6950
const onChangePanelMode = useCallback(
7051
(e) => {
7152
setPanelMode({ panel: e.target.value });
72-
setPanelHistory((items) => [...items, panelMode]);
7353
},
74-
[setPanelMode, setPanelHistory, panelMode],
54+
[setPanelMode],
7555
);
76-
const backBtnClassName = cn("btn text-nowrap cb-rounded mr-1 mb-2", {
77-
"btn-outline-secondary cb-btn-outline-secondary": !hasCustomEventStyles,
78-
"cb-custom-event-btn-outline-secondary": hasCustomEventStyles,
79-
});
8056

8157
return (
82-
<div className="d-flex flex-column flex-md-row flex-lg-row flex-xl-row justify-content-between">
83-
<div className="d-flex align-items-center w-50">
84-
<button
85-
type="button"
86-
className={backBtnClassName}
87-
onClick={onPanelBack}
88-
disabled={panelHistory.length === 0}
89-
>
90-
<FontAwesomeIcon icon="backward" className="mr-1" />
91-
{i18next.t("Back")}
92-
</button>
93-
<div />
94-
</div>
95-
<div className={cn("d-flex mb-2 text-nowrap justify-content-end")}>
58+
<div className="d-flex flex-column flex-md-row flex-lg-row flex-xl-row justify-content-between align-items-start gap-2">
59+
<div className="d-flex align-items-start flex-grow-1 min-w-0 mb-2 mb-md-0">{leftContent}</div>
60+
<div
61+
className={cn(
62+
"d-flex text-nowrap justify-content-end ml-md-3",
63+
hasCustomEventStyles && "cb-custom-event-text",
64+
)}
65+
>
9666
<select
9767
key="select_panel_mode"
9868
className="form-control custom-select cb-bg-panel cb-border-color text-white cb-rounded"

‎apps/codebattle/assets/js/widgets/pages/tournament/CustomTournamentInfoPanel.jsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import PlayersMatchesPanel from "./PlayersMatchesPanel";
1414
import PlayerStatsPanel from "./PlayerStatsPanel";
1515
import RatingClansPanel from "./RatingClansPanel";
1616
import ReportsPanel from "./ReportsPanel";
17+
import StatisticsCard from "./StatisticsCard";
1718
import TaskRankingAdvancedPanel from "./TaskRankingAdvancedPanel";
1819
import TaskRankingPanel from "./TaskRankingPanel";
1920
import TournamentGameCreatePanel from "./TournamentGameCreatePanel";
@@ -204,11 +205,19 @@ function CustomTournamentInfoPanel({
204205
<div ref={infoPanelRef}>
205206
<ControlPanel
206207
isPlayer={!!players[currentUserId]}
208+
leftContent={
209+
panelMode.panel === PanelModeCodes.playerMode ? (
210+
<StatisticsCard
211+
playerId={currentUserId}
212+
matchList={Object.values(matches).filter((match) =>
213+
match.playerIds.includes(currentUserId),
214+
)}
215+
compact
216+
/>
217+
) : null
218+
}
207219
panelMode={panelMode}
208-
panelHistory={panelHistory}
209-
setSearchOption={setSearchedUser}
210220
setPanelMode={setPanelMode}
211-
setPanelHistory={setPanelHistory}
212221
allowedPanelModes={allowedPanelModes}
213222
/>
214223
{panelMode.panel === PanelModeCodes.leaderboardMode && (

0 commit comments

Comments
 (0)