fix: add localstate handling for vote for polls and quiz on disconnect

100mslive · Dec 9, 2024 · 3d09fe3 · 3d09fe3
1 parent d56ae09
commit 3d09fe3
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 7 deletions.
diff --git a/packages/roomkit-react/src/Prebuilt/components/Polls/Voting/QuestionCard.jsx b/packages/roomkit-react/src/Prebuilt/components/Polls/Voting/QuestionCard.jsx
@@ -11,6 +11,7 @@ import {
 } from '@100mslive/react-sdk';
 import { CheckCircleIcon, ChevronDownIcon, CrossCircleIcon } from '@100mslive/react-icons';
 import { Box, Button, Flex, Text } from '../../../../';
+import { isNotNullish } from '../../../../Stats/Stats';
 import { checkCorrectAnswer } from '../../../common/utils';
 import { MultipleChoiceOptions } from '../common/MultipleChoiceOptions';
 import { SingleChoiceOptions } from '../common/SingleChoiceOptions';
@@ -30,6 +31,7 @@ export const QuestionCard = ({
   answer,
   localPeerResponse,
   updateSavedResponses,
+  updateUnsavedResponses,
   rolesThatCanViewResponses,
 }) => {
   const actions = useHMSActions();
@@ -55,7 +57,6 @@ export const QuestionCard = ({
   const canRespond = isLive && !localPeerChoice;
   const startTime = useRef(Date.now());
   const isCorrectAnswer = checkCorrectAnswer(answer, localPeerChoice, type);
-
   const [singleOptionAnswer, setSingleOptionAnswer] = useState();
   const [multipleOptionAnswer, setMultipleOptionAnswer] = useState(new Set());
   const [showOptions, setShowOptions] = useState(true);
@@ -80,7 +81,15 @@ export const QuestionCard = ({
       options: Array.from(multipleOptionAnswer),
       duration: Date.now() - startTime.current,
     };
-    await actions.interactivityCenter.addResponsesToPoll(pollID, [submittedResponse]);
+    if (roomState === HMSRoomState.Connected) {
+      await actions.interactivityCenter.addResponsesToPoll(pollID, [submittedResponse]);
+    } else {
+      updateUnsavedResponses(prev => {
+        const prevCopy = { ...prev };
+        prevCopy[index] = { pollID: pollID, ...submittedResponse };
+        return prevCopy;
+      });
+    }
     updateSavedResponses(prev => {
       const prevCopy = { ...prev };
       prevCopy[index] = { option: singleOptionAnswer, options: Array.from(multipleOptionAnswer) };
@@ -92,9 +101,11 @@ export const QuestionCard = ({
     index,
     singleOptionAnswer,
     multipleOptionAnswer,
+    roomState,
+    updateSavedResponses,
     actions.interactivityCenter,
     pollID,
-    updateSavedResponses,
+    updateUnsavedResponses,
   ]);
 
   return (
@@ -191,7 +202,9 @@ export const QuestionCard = ({
       </Box>
       {isLive && (
         <QuestionActions
-          disableVote={roomState !== HMSRoomState.Connected}
+          disableVote={
+            isNotNullish(localPeerResponse?.[index]?.option) || localPeerResponse?.[index]?.options.length > 0
+          }
           isValidVote={isValidVote}
           onVote={handleVote}
           response={localPeerChoice}

diff --git a/packages/roomkit-react/src/Prebuilt/components/Polls/Voting/StandardVoting.tsx b/packages/roomkit-react/src/Prebuilt/components/Polls/Voting/StandardVoting.tsx
@@ -8,10 +8,12 @@ export const StandardView = ({
   poll,
   localPeerResponses,
   updateSavedResponses,
+  updateUnsavedResponses,
 }: {
   poll: HMSPoll;
   localPeerResponses: Record<number, number | number[] | undefined>;
   updateSavedResponses: Dispatch<SetStateAction<Record<any, any>>>;
+  updateUnsavedResponses: Dispatch<SetStateAction<Record<any, any>>>;
 }) => {
   if (!poll?.questions) {
     return null;
@@ -25,6 +27,7 @@ export const StandardView = ({
       {isQuiz && isStopped ? <PeerParticipationSummary quiz={poll} /> : null}
       {poll.questions?.map((question, index) => (
         <QuestionCard
+          updateUnsavedResponses={updateUnsavedResponses}
           pollID={poll.id}
           isQuiz={isQuiz}
           startedBy={poll.startedBy}

diff --git a/packages/roomkit-react/src/Prebuilt/components/Polls/Voting/TimedVoting.tsx b/packages/roomkit-react/src/Prebuilt/components/Polls/Voting/TimedVoting.tsx
@@ -9,10 +9,12 @@ export const TimedView = ({
   poll,
   localPeerResponses,
   updateSavedResponses,
+  updateUnsavedResponses,
 }: {
   poll: HMSPoll;
   localPeerResponses?: Record<number, number | number[] | undefined>;
   updateSavedResponses: Dispatch<SetStateAction<Record<any, any>>>;
+  updateUnsavedResponses: Dispatch<SetStateAction<Record<any, any>>>;
 }) => {
   const [currentIndex, setCurrentIndex] = useState(getIndexToShow(localPeerResponses));
   const activeQuestion = poll.questions?.find(question => question.index === currentIndex);
@@ -32,6 +34,7 @@ export const TimedView = ({
       {poll.questions.map(question => {
         return attemptedAll || activeQuestion?.index === question.index ? (
           <QuestionCard
+            updateUnsavedResponses={updateUnsavedResponses}
             key={question.index}
             pollID={poll.id}
             isQuiz={poll.type === 'quiz'}

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,9 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react';
 import {
+  HMSRoomState,
   selectLocalPeer,
   selectPeerNameByID,
   selectPermissions,
   selectPollByID,
+  selectRoomState,
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
@@ -31,16 +33,30 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
   const showSingleView = poll?.type === 'quiz' && poll.state === 'started';
   const fetchedInitialResponses = useRef(false);
   const [savedResponses, setSavedResponses] = useState<Record<any, any>>({});
+  const [unsavedResponses, setUnsavedResponses] = useState<Record<any, any>>({});
   const localPeer = useHMSStore(selectLocalPeer);
   const localPeerId = localPeer?.id;
   const customerUserId = localPeer?.customerUserId;
-
+  const roomState = useHMSStore(selectRoomState);
   // To reset whenever a different poll is opened
   useEffect(() => {
     fetchedInitialResponses.current = false;
     setSavedResponses({});
   }, [id, setSavedResponses]);
 
+  // To send whenever room is connected back
+  useEffect(() => {
+    const handleDisconnectedVote = async () => {
+      if (unsavedResponses && Object.keys(unsavedResponses).length > 0 && roomState === HMSRoomState.Connected) {
+        for (const key in unsavedResponses) {
+          await actions.interactivityCenter.addResponsesToPoll(unsavedResponses[key].pollID, [unsavedResponses[key]]);
+        }
+        setUnsavedResponses({});
+      }
+    };
+    handleDisconnectedVote();
+  }, [actions.interactivityCenter, roomState, setUnsavedResponses, unsavedResponses]);
+
   useEffect(() => {
     const getResponses = async () => {
       if (poll && actions.interactivityCenter && !fetchedInitialResponses.current) {
@@ -115,9 +131,19 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
         ) : null}
 
         {showSingleView ? (
-          <TimedView poll={poll} localPeerResponses={savedResponses} updateSavedResponses={setSavedResponses} />
+          <TimedView
+            updateUnsavedResponses={setUnsavedResponses}
+            poll={poll}
+            localPeerResponses={savedResponses}
+            updateSavedResponses={setSavedResponses}
+          />
         ) : (
-          <StandardView poll={poll} localPeerResponses={savedResponses} updateSavedResponses={setSavedResponses} />
+          <StandardView
+            updateUnsavedResponses={setUnsavedResponses}
+            poll={poll}
+            localPeerResponses={savedResponses}
+            updateSavedResponses={setSavedResponses}
+          />
         )}
       </Flex>
       <Flex