From d257f733b2bad13f42fa3636ea016edd548eaf7c Mon Sep 17 00:00:00 2001 From: Drikus Roor Date: Wed, 27 Nov 2024 13:45:47 +0100 Subject: [PATCH] refactor: remove setRound and update currentAction handling in Block and Histogram components --- frontend/src/components/Block/Block.test.tsx | 1 - frontend/src/components/Block/Block.tsx | 7 ++--- .../src/components/Histogram/Histogram.tsx | 2 +- frontend/src/stories/Playback.stories.tsx | 6 ++-- frontend/src/util/stores.ts | 28 ++++++------------- 5 files changed, 13 insertions(+), 31 deletions(-) diff --git a/frontend/src/components/Block/Block.test.tsx b/frontend/src/components/Block/Block.test.tsx index b5fa9facb..b36d2e501 100644 --- a/frontend/src/components/Block/Block.test.tsx +++ b/frontend/src/components/Block/Block.test.tsx @@ -51,7 +51,6 @@ vi.mock('../../util/stores', () => ({ setHeadData: vi.fn(), resetHeadData: vi.fn(), setBlock: vi.fn(), - setRound: vi.fn(), setCurrentAction: vi.fn(), }; diff --git a/frontend/src/components/Block/Block.tsx b/frontend/src/components/Block/Block.tsx index ecabdc200..c8b7b2568 100644 --- a/frontend/src/components/Block/Block.tsx +++ b/frontend/src/components/Block/Block.tsx @@ -39,9 +39,7 @@ const Block = () => { const setTheme = useBoundStore((state) => state.setTheme); const resetTheme = useBoundStore((state) => state.resetTheme); const setBlock = useBoundStore((state) => state.setBlock); - const setRound = useBoundStore((state) => state.setRound); const setCurrentAction = useBoundStore((state) => state.setCurrentAction); - const currentActionIndex = useBoundStore((state) => state.currentActionIndex); const setHeadData = useBoundStore((state) => state.setHeadData); const resetHeadData = useBoundStore((state) => state.resetHeadData); @@ -69,8 +67,9 @@ const Block = () => { const updateActions = useCallback((currentActions: Round) => { const newActions = currentActions; setActions(newActions); - setCurrentAction(0); const newState = newActions.shift(); + const currentAction = newState ? newState : null; + setCurrentAction(currentAction); updateState(newState); }, [updateState]); @@ -80,7 +79,6 @@ const Block = () => { session: activeSession }); if (round) { - setRound({ ...round.next_round }); // Make a deep copy of the round as the 'round' object will be mutated by the updateActions updateActions(round.next_round); } else { setError( @@ -94,7 +92,6 @@ const Block = () => { const onNext = async (doBreak = false) => { if (!doBreak && actions.length) { updateActions(actions); - setCurrentAction(currentActionIndex! + 1); // Increment current action index } else { continueToNextRound(session as Session); } diff --git a/frontend/src/components/Histogram/Histogram.tsx b/frontend/src/components/Histogram/Histogram.tsx index b7c3d8244..519180887 100644 --- a/frontend/src/components/Histogram/Histogram.tsx +++ b/frontend/src/components/Histogram/Histogram.tsx @@ -32,7 +32,7 @@ const Histogram: React.FC = ({ }) => { const [frequencyData, setFrequencyData] = useState(new Uint8Array(bars)); - const currentAction = useBoundStore((state) => state.currentAction()); + const currentAction = useBoundStore((state) => state.currentAction); const isBuffer = currentAction?.playback?.play_method === 'BUFFER'; const shouldRandomize = random || !isBuffer; diff --git a/frontend/src/stories/Playback.stories.tsx b/frontend/src/stories/Playback.stories.tsx index efccd80be..10a00c8e5 100644 --- a/frontend/src/stories/Playback.stories.tsx +++ b/frontend/src/stories/Playback.stories.tsx @@ -18,9 +18,8 @@ export default { const createCommonDecorator = (play_method: "BUFFER" | "EXTERNAL") => (Story: StoryFn) => { const [initialized, setInitialized] = useState(false); - const setRound = useBoundStore((state) => state.setRound); const setCurrentAction = useBoundStore((state) => state.setCurrentAction); - setRound([{ + setCurrentAction({ view: "TRIAL_VIEW", playback: { view: AUTOPLAY, @@ -32,8 +31,7 @@ const createCommonDecorator = (play_method: "BUFFER" | "EXTERNAL") => (Story: St play_from: 0.0, resume_play: false, } - }]); - setCurrentAction(0); + }); if (!initialized) { return ( diff --git a/frontend/src/util/stores.ts b/frontend/src/util/stores.ts index 312cd9859..eadb46e1d 100644 --- a/frontend/src/util/stores.ts +++ b/frontend/src/util/stores.ts @@ -97,26 +97,14 @@ const createParticipantSlice: StateCreator = (set) => ({ setParticipantLoading: (participantLoading: boolean) => set(() => ({ participantLoading })) }); -interface RoundSlice { - round: Round; - setRound: (round: Round) => void; - currentActionIndex: number | null; - setCurrentAction: (index: number) => void; - currentAction: () => Action | null; +interface ActionSlice { + currentAction: Action | null; + setCurrentAction: (action: Action) => void; } -const createRoundSlice: StateCreator = (set, get) => ({ - round: [], - setRound: (round: Round) => set(() => ({ round })), - currentActionIndex: null, - setCurrentAction: (index: number) => set(() => ({ currentActionIndex: index })), - currentAction: () => { - const index = get().currentActionIndex; - if (index === null) { - return null; - } - return get().round[index]; - }, +const createActionSlice: StateCreator = (set, get) => ({ + setCurrentAction: (action: Action) => set(() => ({ currentAction: action })), + currentAction: null, }); interface SessionSlice { @@ -141,12 +129,12 @@ const createThemeSlice: StateCreator = (set) => ({ resetTheme: () => set(() => ({ theme: null })), }); -export const useBoundStore = create((...args) => ({ +export const useBoundStore = create((...args) => ({ ...createBlockSlice(...args), ...createDocumentHeadSlice(...args), ...createErrorSlice(...args), ...createParticipantSlice(...args), - ...createRoundSlice(...args), + ...createActionSlice(...args), ...createSessionSlice(...args), ...createThemeSlice(...args), }));