fix: simplify state mgmt

100mslive · May 21, 2024 · 77d0730 · 77d0730
1 parent 0cd3a6e
commit 77d0730
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 31 deletions.
diff --git a/packages/roomkit-react/src/Prebuilt/common/constants.ts b/packages/roomkit-react/src/Prebuilt/common/constants.ts
@@ -49,7 +49,6 @@ export const APP_DATA = {
   sheet: 'sheet',
   caption: 'caption',
   loadingEffects: 'loadingEffects',
-  savedPollResponses: 'savedPollResponses',
 };
 
 export const UI_SETTINGS = {

diff --git a/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.tsx b/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.tsx
@@ -70,7 +70,6 @@ const initialAppData = {
   },
   // by default off, so it will not appear in beam bots
   [APP_DATA.caption]: false,
-  [APP_DATA.savedPollResponses]: {},
 };
 
 export const AppData = React.memo(() => {

diff --git a/packages/roomkit-react/src/Prebuilt/components/Polls/Voting/QuestionCard.jsx b/packages/roomkit-react/src/Prebuilt/components/Polls/Voting/QuestionCard.jsx
@@ -74,7 +74,11 @@ export const QuestionCard = ({
       duration: Date.now() - startTime.current,
     };
     await actions.interactivityCenter.addResponsesToPoll(pollID, [submittedResponse]);
-    updateSavedResponses(index, singleOptionAnswer, Array.from(multipleOptionAnswer));
+    updateSavedResponses(prev => {
+      const prevCopy = { ...prev };
+      prevCopy[index] = { option: singleOptionAnswer, options: Array.from(multipleOptionAnswer) };
+      return prevCopy;
+    });
     startTime.current = Date.now();
   }, [
     isValidVote,

diff --git a/packages/roomkit-react/src/Prebuilt/components/Polls/Voting/StandardVoting.tsx b/packages/roomkit-react/src/Prebuilt/components/Polls/Voting/StandardVoting.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import { HMSPoll } from '@100mslive/react-sdk';
 import { PeerParticipationSummary } from './PeerParticipationSummary';
 // @ts-ignore
@@ -11,7 +11,7 @@ export const StandardView = ({
 }: {
   poll: HMSPoll;
   localPeerResponses: Record<number, number | number[] | undefined>;
-  updateSavedResponses: (questionIndex: number, option?: number, options?: number[]) => void;
+  updateSavedResponses: Dispatch<SetStateAction<Record<any, any>>>;
 }) => {
   if (!poll?.questions) {
     return null;

diff --git a/packages/roomkit-react/src/Prebuilt/components/Polls/Voting/TimedVoting.tsx b/packages/roomkit-react/src/Prebuilt/components/Polls/Voting/TimedVoting.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { HMSPoll } from '@100mslive/react-sdk';
 // @ts-ignore
 import { QuestionCard } from './QuestionCard';
@@ -12,7 +12,7 @@ export const TimedView = ({
 }: {
   poll: HMSPoll;
   localPeerResponses?: Record<number, number | number[] | undefined>;
-  updateSavedResponses: (questionIndex: number, option?: number, options?: number[]) => void;
+  updateSavedResponses: Dispatch<SetStateAction<Record<any, any>>>;
 }) => {
   const [currentIndex, setCurrentIndex] = useState(getIndexToShow(localPeerResponses));
   const activeQuestion = poll.questions?.find(question => question.index === currentIndex);

diff --git a/packages/roomkit-react/src/Prebuilt/components/Polls/Voting/Voting.tsx b/packages/roomkit-react/src/Prebuilt/components/Polls/Voting/Voting.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   selectLocalPeerID,
   selectPeerNameByID,
@@ -14,11 +14,11 @@ import { Container } from '../../Streaming/Common';
 import { StandardView } from './StandardVoting';
 import { TimedView } from './TimedVoting';
 // @ts-ignore
-import { usePollViewState, useSetAppDataByKey } from '../../AppData/useUISettings';
+import { usePollViewState } from '../../AppData/useUISettings';
 // @ts-ignore
 import { getPeerResponses } from '../../../common/utils';
 import { StatusIndicator } from '../common/StatusIndicator';
-import { APP_DATA, POLL_VIEWS } from '../../../common/constants';
+import { POLL_VIEWS } from '../../../common/constants';
 
 export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => void }) => {
   const actions = useHMSActions();
@@ -30,14 +30,14 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
   // Sets view - linear or vertical, toggles timer indicator
   const showSingleView = poll?.type === 'quiz' && poll.state === 'started';
   const fetchedInitialResponses = useRef(false);
-  const [savedPollResponses, setSavedPollResponses] = useSetAppDataByKey(APP_DATA.savedPollResponses);
+  const [savedResponses, setSavedResponses] = useState<Record<any, any>>({});
   const localPeerId = useHMSStore(selectLocalPeerID);
 
   // To reset whenever a different poll is opened
   useEffect(() => {
     fetchedInitialResponses.current = false;
-    setSavedPollResponses('');
-  }, [id, setSavedPollResponses]);
+    setSavedResponses({});
+  }, [id, setSavedResponses]);
 
   useEffect(() => {
     const getResponses = async () => {
@@ -47,28 +47,22 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
       }
     };
     getResponses();
-  }, [poll, actions.interactivityCenter, setSavedPollResponses]);
-
-  const updateSavedResponses = (questionIndex: number, option?: number, options?: number[]) => {
-    if (!option && !options) {
-      return;
-    }
-    const savedPollResponsesCopy = { ...savedPollResponses };
-    savedPollResponsesCopy[questionIndex] = { option, options };
-    setSavedPollResponses(savedPollResponsesCopy);
-  };
+  }, [poll, actions.interactivityCenter]);
 
   useEffect(() => {
     if (poll?.questions) {
       const localPeerResponses = getPeerResponses(poll.questions, localPeerId);
       // @ts-ignore
       localPeerResponses?.forEach(response => {
         if (response) {
-          updateSavedResponses(response[0]?.questionIndex, response[0]?.option, response[0]?.options);
+          setSavedResponses(prev => {
+            const prevCopy = { ...prev };
+            prevCopy[response[0]?.questionIndex] = { option: response[0]?.option, options: response[0]?.options };
+            return prevCopy;
+          });
         }
       });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [localPeerId, poll?.questions, id]);
 
   if (!poll) {
@@ -119,13 +113,9 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
         ) : null}
 
         {showSingleView ? (
-          <TimedView poll={poll} localPeerResponses={savedPollResponses} updateSavedResponses={updateSavedResponses} />
+          <TimedView poll={poll} localPeerResponses={savedResponses} updateSavedResponses={setSavedResponses} />
         ) : (
-          <StandardView
-            poll={poll}
-            localPeerResponses={savedPollResponses}
-            updateSavedResponses={updateSavedResponses}
-          />
+          <StandardView poll={poll} localPeerResponses={savedResponses} updateSavedResponses={setSavedResponses} />
         )}
       </Flex>
       <Flex