From cea6035b1be2455da8c8a628b181e911cf29f25c Mon Sep 17 00:00:00 2001
From: zkldi <ktchidev@gmail.com>
Date: Sat, 31 Jul 2021 00:20:51 +0100
Subject: [PATCH] more push

---
 .../src/components/layout/header/Topbar.tsx   |  7 ++----
 .../tables/components/DropdownRow.tsx         | 24 +++++++++++++++++++
 .../tables/components/SelectableRating.tsx    |  9 ++++---
 .../src/components/tables/pbs/IIDXPBTable.tsx | 24 +++++++++----------
 .../tables/scores/IIDXScoreTable.tsx          |  1 +
 .../src/components/util/table/useZTable.tsx   |  2 +-
 client/src/types/react.ts                     |  5 ++--
 7 files changed, 48 insertions(+), 24 deletions(-)
 create mode 100644 client/src/components/tables/components/DropdownRow.tsx

diff --git a/client/src/components/layout/header/Topbar.tsx b/client/src/components/layout/header/Topbar.tsx
index f88b0784c..bba9889a0 100644
--- a/client/src/components/layout/header/Topbar.tsx
+++ b/client/src/components/layout/header/Topbar.tsx
@@ -1,7 +1,4 @@
 import React, { useContext } from "react";
-import SVG from "react-inlinesvg";
-import { OverlayTrigger, Tooltip } from "react-bootstrap";
-import { toAbsoluteUrl } from "../../../_metronic/_helpers";
 import { UserNotificationsDropdown } from "../../../_metronic/layout/components/extras/dropdowns/UserNotificationsDropdown";
 import { UserProfileDropdown } from "components/layout/header/UserProfileDropdown";
 import { UserContext } from "context/UserContext";
@@ -19,7 +16,7 @@ export function Topbar() {
 				<>
 					<UserNotificationsDropdown />
 
-					<OverlayTrigger
+					{/* <OverlayTrigger
 						placement="bottom"
 						overlay={<Tooltip id="quick-panel-tooltip">Quick panel</Tooltip>}
 					>
@@ -42,7 +39,7 @@ export function Topbar() {
 								</span>
 							</div>
 						</div>
-					</OverlayTrigger>
+					</OverlayTrigger> */}
 
 					<UserProfileDropdown user={user} />
 				</>
diff --git a/client/src/components/tables/components/DropdownRow.tsx b/client/src/components/tables/components/DropdownRow.tsx
new file mode 100644
index 000000000..722da5884
--- /dev/null
+++ b/client/src/components/tables/components/DropdownRow.tsx
@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import { Collapse } from "react-bootstrap";
+import { JustChildren } from "types/react";
+
+export default function DropdownRow({
+	children,
+	dropdown,
+}: { dropdown: React.ReactNode } & JustChildren) {
+	const [showDropdown, setShowDropdown] = useState(false);
+	return (
+		<>
+			<tr onClick={() => setShowDropdown(!showDropdown)}>{children}</tr>
+			<tr className="expandable-pseudo-row">
+				<td colSpan={100}>
+					<Collapse in={showDropdown}>
+						<div className="tr-dropdown-container">{dropdown}</div>
+					</Collapse>
+				</td>
+			</tr>
+			{/* Fake row to ensure striping stays consistent */}
+			<tr className="fake-row"></tr>
+		</>
+	);
+}
diff --git a/client/src/components/tables/components/SelectableRating.tsx b/client/src/components/tables/components/SelectableRating.tsx
index 24bf80475..1b655f08b 100644
--- a/client/src/components/tables/components/SelectableRating.tsx
+++ b/client/src/components/tables/components/SelectableRating.tsx
@@ -8,20 +8,23 @@ import {
 } from "tachi-common";
 import { SetState } from "types/react";
 
-export default function SelectableRating<T extends IDStrings>({
+export default function SelectableRating<I extends IDStrings>({
 	game,
 	playtype,
+	rating,
 	setRating,
 }: {
 	game: Game;
 	playtype: Playtypes[Game];
-	setRating: SetState<ScoreCalculatedDataLookup[T]>;
+	rating: ScoreCalculatedDataLookup[I];
+	setRating: SetState<ScoreCalculatedDataLookup[I]>;
 }) {
 	const gptConfig = GetGamePTConfig(game, playtype);
 	return (
 		<th>
 			<select
-				onChange={v => setRating(v.target.value as ScoreCalculatedDataLookup[T])}
+				onChange={v => setRating(v.target.value as ScoreCalculatedDataLookup[I])}
+				value={rating}
 				style={{
 					backgroundColor: "#131313",
 					border: "none",
diff --git a/client/src/components/tables/pbs/IIDXPBTable.tsx b/client/src/components/tables/pbs/IIDXPBTable.tsx
index 422f98310..2cfa4c477 100644
--- a/client/src/components/tables/pbs/IIDXPBTable.tsx
+++ b/client/src/components/tables/pbs/IIDXPBTable.tsx
@@ -3,7 +3,6 @@ import { FormatDifficulty } from "tachi-common/js/utils/util";
 import TitleCell from "../cells/TitleCell";
 import RankingCell from "../cells/RankingCell";
 import TimestampCell from "../cells/TimestampCell";
-import BPICell from "../cells/BPICell";
 import { ChangeOpacity } from "util/color-opacity";
 import { NumericSOV, StrSOV } from "util/sorts";
 import SelectableRating from "../components/SelectableRating";
@@ -16,6 +15,7 @@ import IndexCell from "../cells/IndexCell";
 import DeltaCell from "../cells/DeltaCell";
 import { HumanFriendlyStrToGradeIndex, HumanFriendlyStrToLampIndex } from "util/str-to-num";
 import { nanoid } from "nanoid";
+import DropdownRow from "../components/DropdownRow";
 
 export default function IIDXPBTable({
 	dataset,
@@ -45,6 +45,7 @@ export default function IIDXPBTable({
 					key={nanoid()}
 					game="iidx"
 					playtype="SP"
+					rating={rating}
 					setRating={setRating}
 				/>
 			),
@@ -81,7 +82,10 @@ export default function IIDXPBTable({
 			}}
 			defaultSortMode={indexCol ? "#" : undefined}
 			rowFunction={pb => (
-				<tr key={pb.chartID}>
+				<DropdownRow
+					dropdown={<div style={{ height: "200px" }}>{pb.chartID}</div>}
+					key={pb.chartID}
+				>
 					{indexCol && <IndexCell index={pb.__related.index} />}
 					<DifficultyCell chart={pb.__related.chart} game={"iidx"} />
 					<TitleCell artist={pb.__related.song.artist} title={pb.__related.song.title} />
@@ -105,18 +109,14 @@ export default function IIDXPBTable({
 						<br />
 						<small>[BP: {pb.scoreData.hitMeta.bp ?? "No Data"}]</small>
 					</td>
-					{rating === "BPI" ? (
-						<BPICell bpi={pb.calculatedData.BPI} />
-					) : (
-						<td>
-							{pb.calculatedData[rating]
-								? pb.calculatedData[rating]!.toFixed(2)
-								: "No Data."}
-						</td>
-					)}
+					<td>
+						{pb.calculatedData[rating]
+							? pb.calculatedData[rating]!.toFixed(2)
+							: "No Data."}
+					</td>
 					<RankingCell rankingData={pb.rankingData} />
 					<TimestampCell time={pb.timeAchieved} />
-				</tr>
+				</DropdownRow>
 			)}
 		/>
 	);
diff --git a/client/src/components/tables/scores/IIDXScoreTable.tsx b/client/src/components/tables/scores/IIDXScoreTable.tsx
index 288a6867e..16f6dff9c 100644
--- a/client/src/components/tables/scores/IIDXScoreTable.tsx
+++ b/client/src/components/tables/scores/IIDXScoreTable.tsx
@@ -47,6 +47,7 @@ export default function IIDXScoreTable({
 							key={nanoid()}
 							game="iidx"
 							playtype="SP"
+							rating={rating}
 							setRating={setRating}
 						/>
 					),
diff --git a/client/src/components/util/table/useZTable.tsx b/client/src/components/util/table/useZTable.tsx
index 0435acf81..cef7a5834 100644
--- a/client/src/components/util/table/useZTable.tsx
+++ b/client/src/components/util/table/useZTable.tsx
@@ -92,7 +92,7 @@ export function useZTable<D>(originalDataset: D[], providedOptions?: Partial<ZTa
 		return `Displaying ${(page - 1) * pageLen + 1} to ${Math.min(
 			page * pageLen,
 			dataset.length
-		)} of ${dataset.length} ${entryName.toLowerCase()}${search !== "" && " (Filtered)"}.`;
+		)} of ${dataset.length} ${entryName.toLowerCase()}${search !== "" ? " (Filtered)" : ""}.`;
 	}, [page, dataset]);
 
 	// Create a sliding window that can be used for pagination.
diff --git a/client/src/types/react.ts b/client/src/types/react.ts
index cea3d8d73..fd0e1e979 100644
--- a/client/src/types/react.ts
+++ b/client/src/types/react.ts
@@ -6,13 +6,12 @@ import {
 	FormikErrors,
 	FormikState,
 	FormikTouched,
-	useFormik,
 } from "formik";
-import { Dispatch, SetStateAction } from "react";
+import React, { Dispatch, SetStateAction } from "react";
 import { Game, Playtypes } from "tachi-common";
 
 export interface JustChildren {
-	children: (JSX.Element | string)[] | JSX.Element | string;
+	children: React.ReactNode;
 }
 
 export type SetState<T> = Dispatch<SetStateAction<T>>;