diff --git a/client/src/app/pages/dashboard/users/games/_game/_playtype/SpecificSessionPage.tsx b/client/src/app/pages/dashboard/users/games/_game/_playtype/SpecificSessionPage.tsx index 39d832117..0a3108e2c 100644 --- a/client/src/app/pages/dashboard/users/games/_game/_playtype/SpecificSessionPage.tsx +++ b/client/src/app/pages/dashboard/users/games/_game/_playtype/SpecificSessionPage.tsx @@ -50,7 +50,8 @@ export default function SpecificSessionPage({ reqUser, game, playtype }: Props) } function SessionPage({ data, game, playtype }: Props & { data: SessionReturns }) { - const { session, user, charts, scores, songs } = data; + const [sessionData, setSessionData] = useState(data); + const { session, user, charts, scores, songs } = sessionData; const { user: loggedInUser } = useContext(UserContext); @@ -105,7 +106,7 @@ function SessionPage({ data, game, playtype }: Props & { data: SessionReturns }) } return d; - }, [data]); + }, [sessionData]); const [highlight, setHighlight] = useState(session.highlight); const [showEditModal, setShowEditModal] = useState(false); @@ -215,7 +216,11 @@ function SessionPage({ data, game, playtype }: Props & { data: SessionReturns }) {view === "overview" ? ( - + ) : ( ; scoreDataset: ScoreDataset; }) { const { scores, session } = sessionData; + const setScores = (scores: ScoreDocument[]) => { + setSessionData({ + ...sessionData, + scores, + }); + }; + return ( <> @@ -32,7 +42,7 @@ export default function SessionOverview({ - + diff --git a/client/src/components/sessions/SessionRaiseBreakdown.tsx b/client/src/components/sessions/SessionRaiseBreakdown.tsx index d5bf7ac10..fa7c302e5 100644 --- a/client/src/components/sessions/SessionRaiseBreakdown.tsx +++ b/client/src/components/sessions/SessionRaiseBreakdown.tsx @@ -30,8 +30,19 @@ import { TableDocument, } from "tachi-common"; import { SessionReturns } from "types/api-returns"; +import { ModifyScore } from "components/tables/dropdowns/components/ScoreEditButtons"; +import { SetState } from "types/react"; +import { ScoreDataset } from "types/tables"; -export default function SessionRaiseBreakdown({ sessionData }: { sessionData: SessionReturns }) { +type SetScores = (scores: ScoreDocument[]) => void; + +export default function SessionRaiseBreakdown({ + sessionData, + setScores, +}: { + sessionData: SessionReturns; + setScores: SetScores; +}) { const game = sessionData.session.game; const playtype = sessionData.session.playtype; @@ -178,7 +189,7 @@ export default function SessionRaiseBreakdown({ sessionData }: { sessionData: Se - + ); } @@ -188,8 +199,10 @@ function SessionScoreStatBreakdown({ chartIDs, filter, view, + setScores, }: { sessionData: SessionReturns; + setScores: SetScores; chartIDs: string[] | null; filter: "folder" | "all" | "highlighted"; view: "lamps" | "both" | "grades"; @@ -255,6 +268,8 @@ function SessionScoreStatBreakdown({ className="table-sm" > ; gptConfig: GamePTConfig; songMap: Map>; @@ -331,6 +356,26 @@ function ElementStatTable({ game: Game; fullSize?: boolean; }) { + function makeModifyScoreFn(score: ScoreDocument) { + return ({ highlight, comment }: { highlight?: boolean; comment?: string }) => { + const scoreID = score.scoreID; + const filtered = scores.filter((e) => e.scoreID !== scoreID); + + ModifyScore(scoreID, { highlight, comment }); + + const newScore = { ...score }; + + if (highlight !== undefined) { + newScore.highlight = highlight; + } + if (comment !== undefined) { + newScore.comment = comment; + } + + setScores([...filtered, newScore]); + }; + } + const tableContents = useMemo(() => { // relements.. haha const relevantElements = @@ -350,6 +395,8 @@ function ElementStatTable({ const firstData = counts[element][0]; + const firstModify = makeModifyScoreFn(firstData.score); + tableContents.push( ); for (const data of counts[element]!.slice(1)) { + const modifyScore = makeModifyScoreFn(data.score); + tableContents.push( ); @@ -403,6 +453,7 @@ function BreakdownChartContents({ fullSize, gptConfig, type, + modifyScore, }: { score: ScoreDocument; scoreInfo: SessionScoreInfo; @@ -411,11 +462,24 @@ function BreakdownChartContents({ songMap: Map; chartMap: Map; gptConfig: GamePTConfig; + modifyScore: ({ highlight, comment }: { highlight?: boolean; comment?: string }) => void; type: "lamp" | "grade"; }) { const chart = chartMap.get(score.chartID)!; const song = songMap.get(score.songID)!; + const [highlight, setHighlight] = useState(score.highlight); + const [firstRun, setFirstRun] = useState(true); + + useEffect(() => { + if (firstRun) { + setFirstRun(false); + return; + } + + modifyScore({ highlight }); + }, [highlight]); + if (!chart || !song) { console.error(`No chart for ${score.chartID}/${score.songID}???`); return null; @@ -466,7 +530,7 @@ function BreakdownChartContents({ return ( <> - void 0} /> + ); @@ -474,18 +538,23 @@ function BreakdownChartContents({ function PseudHighlight({ highlight, - onHighlightChange, + setHighlight, }: { highlight: boolean; - onHighlightChange: (hl: boolean) => void; + setHighlight: (hl: boolean) => void; }) { return ( {highlight ? ( - + setHighlight(false)} + colour="warning" + type="star" + style={{ paddingTop: "0.1rem" }} + /> ) : ( - + setHighlight(true)} type="star" regular noPad /> )} diff --git a/client/src/components/tables/dropdowns/GenericSessionDropdown.tsx b/client/src/components/tables/dropdowns/GenericSessionDropdown.tsx index 8bff09349..ce1ee0c22 100644 --- a/client/src/components/tables/dropdowns/GenericSessionDropdown.tsx +++ b/client/src/components/tables/dropdowns/GenericSessionDropdown.tsx @@ -1,67 +1,71 @@ -import { APIFetchV1 } from "util/api"; -import SessionRaiseBreakdown from "components/sessions/SessionRaiseBreakdown"; -import DebugContent from "components/util/DebugContent"; -import HasDevModeOn from "components/util/HasDevModeOn"; -import Icon from "components/util/Icon"; -import Loading from "components/util/Loading"; -import SelectButton from "components/util/SelectButton"; -import React, { useState } from "react"; -import { useQuery } from "react-query"; -import { SessionReturns } from "types/api-returns"; -import { SessionDataset } from "../sessions/GenericSessionTable"; -import DropdownStructure from "./components/DropdownStructure"; +export {} -export default function GenericSessionDropdown({ data }: { data: SessionDataset[0] }) { - const { - isLoading, - error, - data: sessionData, - } = useQuery(`/sessions/${data.sessionID}`, async () => { - const res = await APIFetchV1(`/sessions/${data.sessionID}`); +// unused? - if (!res.success) { - throw new Error(res.description); - } +// import { APIFetchV1 } from "util/api"; +// import SessionRaiseBreakdown from "components/sessions/SessionRaiseBreakdown"; +// import DebugContent from "components/util/DebugContent"; +// import HasDevModeOn from "components/util/HasDevModeOn"; +// import Icon from "components/util/Icon"; +// import Loading from "components/util/Loading"; +// import SelectButton from "components/util/SelectButton"; +// import React, { useState } from "react"; +// import { useQuery } from "react-query"; +// import { SessionReturns } from "types/api-returns"; +// import { SessionDataset } from "../sessions/GenericSessionTable"; +// import DropdownStructure from "./components/DropdownStructure"; - return res.body; - }); +// export default function GenericSessionDropdown({ data }: { data: SessionDataset[0] }) { +// const { +// isLoading, +// error, +// data: sessionData, +// } = useQuery(`/sessions/${data.sessionID}`, async () => { +// const res = await APIFetchV1(`/sessions/${data.sessionID}`); - const [view, setView] = useState<"raises" | "debug">("raises"); +// if (!res.success) { +// throw new Error(res.description); +// } - if (error) { - return <>{(error as Error).message}; - } +// return res.body; +// }); - if (isLoading || !sessionData) { - return ; - } +// const [view, setView] = useState<"raises" | "debug">("raises"); - let content; +// if (error) { +// return <>{(error as Error).message}; +// } - if (view === "raises") { - content = ; - } else if (view === "debug") { - content = ; - } +// if (isLoading || !sessionData) { +// return ; +// } - return ( - - - - Raises - - - - - Debug Info - - - - } - > - {content} - - ); -} +// let content; + +// if (view === "raises") { +// content = ; +// } else if (view === "debug") { +// content = ; +// } + +// return ( +// +// +// +// Raises +// +// +// +// +// Debug Info +// +// +// +// } +// > +// {content} +// +// ); +// } diff --git a/client/src/components/tables/dropdowns/components/ScoreEditButtons.tsx b/client/src/components/tables/dropdowns/components/ScoreEditButtons.tsx index 11bafebf0..b3cae86ed 100644 --- a/client/src/components/tables/dropdowns/components/ScoreEditButtons.tsx +++ b/client/src/components/tables/dropdowns/components/ScoreEditButtons.tsx @@ -110,7 +110,7 @@ export default function ScoreEditButtons({ ); } -async function ModifyScore( +export async function ModifyScore( scoreID: string, content: { comment?: string | null; highlight?: boolean } ) {