From 77d0730dec4940c02cdf8d14d061b8ed51c08c7b Mon Sep 17 00:00:00 2001 From: KaustubhKumar05 Date: Tue, 21 May 2024 16:33:30 +0530 Subject: [PATCH] fix: simplify state mgmt --- .../src/Prebuilt/common/constants.ts | 1 - .../Prebuilt/components/AppData/AppData.tsx | 1 - .../components/Polls/Voting/QuestionCard.jsx | 6 ++- .../Polls/Voting/StandardVoting.tsx | 4 +- .../components/Polls/Voting/TimedVoting.tsx | 4 +- .../components/Polls/Voting/Voting.tsx | 38 +++++++------------ 6 files changed, 23 insertions(+), 31 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/common/constants.ts b/packages/roomkit-react/src/Prebuilt/common/constants.ts index 3784e5577c..b79ae78487 100644 --- 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 index d4822f6efd..5390608332 100644 --- 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 index 29cddeafc4..fcedf91f95 100644 --- 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 index 5bd0fc755d..16a6ef2f46 100644 --- 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; - updateSavedResponses: (questionIndex: number, option?: number, options?: number[]) => void; + updateSavedResponses: Dispatch>>; }) => { 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 index 83f1bf0db8..5de4e28c2c 100644 --- 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; - updateSavedResponses: (questionIndex: number, option?: number, options?: number[]) => void; + updateSavedResponses: Dispatch>>; }) => { 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 index d67fad3813..9fa9fc2916 100644 --- 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>({}); 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,16 +47,7 @@ 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) { @@ -64,11 +55,14 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v // @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 ? ( - + ) : ( - + )}