refactor: remove setRound and update currentAction handling in Block …

…and Histogram components
Amsterdam-Music-Lab · Nov 27, 2024 · d257f73 · d257f73
1 parent 3c02835
commit d257f73
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 31 deletions.
diff --git 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
@@ -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
@@ -32,7 +32,7 @@ const Histogram: React.FC<HistogramProps> = ({
 }) => {
     const [frequencyData, setFrequencyData] = useState<Uint8Array>(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
@@ -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
@@ -97,26 +97,14 @@ const createParticipantSlice: StateCreator<ParticipantSlice> = (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<RoundSlice> = (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<ActionSlice> = (set, get) => ({
+    setCurrentAction: (action: Action) => set(() => ({ currentAction: action })),
+    currentAction: null,
 });
 
 interface SessionSlice {
@@ -141,12 +129,12 @@ const createThemeSlice: StateCreator<ThemeSlice> = (set) => ({
     resetTheme: () => set(() => ({ theme: null })),
 });
 
-export const useBoundStore = create<BlockSlice & DocumentHeadSlice & ErrorSlice & ParticipantSlice & RoundSlice & SessionSlice & ThemeSlice>((...args) => ({
+export const useBoundStore = create<BlockSlice & DocumentHeadSlice & ErrorSlice & ParticipantSlice & ActionSlice & SessionSlice & ThemeSlice>((...args) => ({
     ...createBlockSlice(...args),
     ...createDocumentHeadSlice(...args),
     ...createErrorSlice(...args),
     ...createParticipantSlice(...args),
-    ...createRoundSlice(...args),
+    ...createActionSlice(...args),
     ...createSessionSlice(...args),
     ...createThemeSlice(...args),
 }));