From e12cf989fc0bf5212ed9c0b6e29509c7de8387d3 Mon Sep 17 00:00:00 2001 From: zikaeroh <48577114+zikaeroh@users.noreply.github.com> Date: Sat, 23 May 2020 21:44:08 -0700 Subject: [PATCH] Switch timer slider to a controlled component to have its value sync --- frontend/src/pages/gameView.tsx | 44 +++++++++++++++++++-------------- 1 file changed, 25 insertions(+), 19 deletions(-) diff --git a/frontend/src/pages/gameView.tsx b/frontend/src/pages/gameView.tsx index 585095c..a4d082c 100644 --- a/frontend/src/pages/gameView.tsx +++ b/frontend/src/pages/gameView.tsx @@ -168,51 +168,57 @@ const Header = ({ send, state, pState, pTeam }: GameViewProps) => { const sliderMarks = range(30, 301, 30).map((v) => ({ value: v })); interface TimerSliderProps { - id: string; + version: number; timer: StateTimer; onCommit: (value: number) => void; } -const TimerSlider = ({ timer, onCommit, id }: TimerSliderProps) => { - // Keep around the original value when this component is created. - // This prevents React from complaining about the defaultValue - // changing when the overall state changes. - const defaultValue = React.useRef(timer.turnTime); - const [value, setValue] = React.useState(timer.turnTime); +interface TimerValue { + version: number; + turnTime: number; +} + +const TimerSlider = ({ version, timer, onCommit }: TimerSliderProps) => { + const [value, setValue] = React.useState({ version, turnTime: timer.turnTime }); + + React.useEffect(() => { + if (version !== value.version) { + setValue({ version, turnTime: timer.turnTime }); + } + }, [version, value.version, timer.turnTime]); const valueStr = React.useMemo(() => { - switch (value) { + const turnTime = value.turnTime; + switch (turnTime) { case 30: return '30 seconds'; case 60: return '60 seconds'; default: - if (value % 60 === 0) { - return `${value / 60} minutes`; + if (turnTime % 60 === 0) { + return `${turnTime / 60} minutes`; } - return `${(value / 60).toFixed(1)} minutes`; + return `${(turnTime / 60).toFixed(1)} minutes`; } - }, [value]); + }, [value.turnTime]); return ( <> - + Timer: {valueStr} { assertTrue(!isArray(v)); - if (v !== value) { - setValue(v); - } + setValue({ version: value.version, turnTime: v }); }} onChangeCommitted={(_e, v) => { assertTrue(!isArray(v)); @@ -382,7 +388,7 @@ const Sidebar = ({ send, state, pState, pTeam }: GameViewProps) => { {!isDefined(state.timer) ? null : (
- +
)}