@100mslive/react-native-room-kit 1.1.1 → 1.1.3

package/src/redux/reducers/polls.ts

@@ -1,5 +1,8 @@
-import { HMSPollQuestionType } from '@100mslive/react-native-hms';
-import type { HMSPoll } from '@100mslive/react-native-hms';
+import { HMSPollQuestionType, HMSPollType } from '@100mslive/react-native-hms';
+import type {
+  HMSPoll,
+  PollLeaderboardResponse,
+} from '@100mslive/react-native-hms';
 
 import {
   PollsStateActionTypes,
@@ -12,21 +15,25 @@ import type {
   PollsActionType,
 } from '../actionTypes';
 
-function getDefaultQuestionObj() {
+function getDefaultQuestionObj(): PollQuestionUI {
   return {
     title: '',
     responseEditable: false,
     saved: false,
     skippable: false,
+    pointWeightage: '10',
     type: HMSPollQuestionType.singleChoice,
-    options: ['', ''],
+    options: [
+      [false, ''],
+      [false, ''],
+    ],
   };
 }
 
 type IntialStateType = {
   pollName: string;
   pollConfig: PollConfig;
-  stage: CreatePollStages;
+  navigationStack: CreatePollStages[];
   questions: PollQuestionUI[];
   deleteConfirmationVisible: boolean;
   selectedPollQuestionIndex: number | null;
@@ -35,15 +42,17 @@ type IntialStateType = {
   cuedPollIds: HMSPoll['pollId'][]; // In case of HLSViewer, pollIds should be aligned with onCue event
   polls: Record<string, HMSPoll>;
   pollsResponses: Record<string, Record<number, number | number[]>>;
+  leaderboards: Record<string, PollLeaderboardResponse>;
 };
 
 const INITIAL_STATE: IntialStateType = {
   pollName: '',
   pollConfig: {
+    type: HMSPollType.poll,
     voteCountHidden: false,
     resultsAnonymous: false,
   },
-  stage: CreatePollStages.POLL_CONFIG,
+  navigationStack: [CreatePollStages.POLL_CONFIG],
   questions: [getDefaultQuestionObj()],
   deleteConfirmationVisible: false,
   selectedPollQuestionIndex: null,
@@ -52,6 +61,7 @@ const INITIAL_STATE: IntialStateType = {
   cuedPollIds: [],
   polls: {},
   pollsResponses: {},
+  leaderboards: {},
 };
 
 const hmsStatesReducer = (
@@ -76,13 +86,36 @@ const hmsStatesReducer = (
           ...state.pollConfig,
           ...action.pollConfig,
         },
+        questions:
+          'type' in action.pollConfig
+            ? state.questions.map((ques) => ({ ...ques, saved: false }))
+            : state.questions,
         selectedPollQuestionIndex: null,
       };
-    case PollsStateActionTypes.SET_POLL_STAGE:
+    case PollsStateActionTypes.PUSH_TO_NAVIGATION_STACK:
       return {
         ...state,
-        stage: action.pollStage,
-        selectedPollQuestionIndex: null,
+        navigationStack: [...state.navigationStack, action.screen],
+      };
+    case PollsStateActionTypes.RESET_NAVIGATION_STACK:
+      return {
+        ...state,
+        navigationStack: INITIAL_STATE.navigationStack,
+      };
+    case PollsStateActionTypes.POP_FROM_NAVIGATION_STACK: {
+      const updatedNavigationStack = [...state.navigationStack];
+      updatedNavigationStack.pop();
+      return {
+        ...state,
+        navigationStack: updatedNavigationStack,
+      };
+    }
+    case PollsStateActionTypes.REPLACE_TOP_OF_NAVIGATION_STACK:
+      const updatedNavigationStack = [...state.navigationStack];
+      updatedNavigationStack[updatedNavigationStack.length - 1] = action.screen;
+      return {
+        ...state,
+        navigationStack: updatedNavigationStack,
       };
     case PollsStateActionTypes.ADD_POLL_QUESTION:
       return {
@@ -144,6 +177,18 @@ const hmsStatesReducer = (
             : question
         ),
       };
+    case PollsStateActionTypes.SET_POINT_WEIGHTAGE:
+      return {
+        ...state,
+        questions: state.questions.map((question, idx) =>
+          idx === action.questionIndex
+            ? {
+                ...question,
+                pointWeightage: action.pointWeightage,
+              }
+            : question
+        ),
+      };
     case PollsStateActionTypes.ADD_QUESTION_OPTION:
       return {
         ...state,
@@ -151,7 +196,7 @@ const hmsStatesReducer = (
           idx === action.questionIndex
             ? {
                 ...question,
-                options: [...(question.options || []), ''],
+                options: [...(question.options || []), [false, '']],
               }
             : question
         ),
@@ -180,12 +225,41 @@ const hmsStatesReducer = (
                 options:
                   question.options &&
                   question.options.map((option, idx) =>
-                    idx === action.optionIndex ? action.option : option
+                    idx === action.optionIndex
+                      ? [option[0], action.option]
+                      : option
                   ),
               }
             : question
         ),
       };
+    case PollsStateActionTypes.SET_QUESTION_CORRECT_OPTION:
+      return {
+        ...state,
+        questions: state.questions.map((question, idx) =>
+          idx === action.questionIndex
+            ? {
+                ...question,
+                options:
+                  question.options &&
+                  question.options.map((option, idx) => {
+                    if (
+                      action.correctOption === false ||
+                      question.type === HMSPollQuestionType.multipleChoice
+                    ) {
+                      return idx === action.optionIndex
+                        ? [action.correctOption, option[1]]
+                        : option;
+                    }
+                    return [
+                      idx === action.optionIndex ? true : false,
+                      option[1],
+                    ];
+                  }),
+              }
+            : question
+        ),
+      };
     case PollsStateActionTypes.SET_QUESTION_SKIPPABLE:
       return {
         ...state,
@@ -236,6 +310,51 @@ const hmsStatesReducer = (
         selectedPollId: action.pollId,
       };
     case PollsStateActionTypes.ADD_POLL:
+      const prevPoll = state.polls[action.poll.pollId];
+
+      // Hack: Restore previous state of poll if current poll has missing myResponses and voteCount
+      if (
+        prevPoll &&
+        Array.isArray(prevPoll.questions) &&
+        prevPoll.questions.length > 0
+      ) {
+        action.poll.questions?.forEach((question) => {
+          const prevQuestion = prevPoll.questions?.find(
+            (prevQuestion) => prevQuestion.index === question.index
+          );
+
+          //#region Restore previous responses on question if current question has no responses
+          const prevResponsesOnQuestion = prevQuestion?.myResponses;
+          if (
+            Array.isArray(prevResponsesOnQuestion) &&
+            prevResponsesOnQuestion.length > 0 &&
+            (!question.myResponses || question.myResponses.length <= 0)
+          ) {
+            question.myResponses = prevResponsesOnQuestion;
+          }
+          //#endregion
+
+          //#region Restore previous voteCount on question options if current question options has no voteCount
+          const prevOptions = prevQuestion?.options;
+
+          question.options?.forEach((option) => {
+            const prevOption = prevOptions?.find(
+              (prevOption) => prevOption.index === option.index
+            );
+
+            // Edge Case: User changes response on question, due to which new vountCount becomes 0, and we are treating as invalid value
+            if (
+              option.voteCount <= 0 &&
+              prevOption &&
+              prevOption?.voteCount > 0
+            ) {
+              option.voteCount = prevOption.voteCount;
+            }
+          });
+          //#endregion
+        });
+      }
+
       return {
         ...state,
         polls: {
@@ -310,6 +429,15 @@ const hmsStatesReducer = (
         cuedPollIds: [...state.cuedPollIds, action.pollId],
       };
     }
+    case PollsStateActionTypes.ADD_LEADERBOARD: {
+      return {
+        ...state,
+        leaderboards: {
+          ...state.leaderboards,
+          [action.pollId]: action.leaderboard,
+        },
+      };
+    }
     case PollsStateActionTypes.CLEAR_POLL_FORM_STATE: {
       return {
         ...INITIAL_STATE,

package/src/utils/functions.ts

@@ -12,9 +12,15 @@ import {
   HMSTrackSource,
   HMSVideoTrack,
   HMSRole,
-  HMSPollType,
+  HMSPollQuestionType,
+} from '@100mslive/react-native-hms';
+import type {
+  HMSPoll,
+  HMSPollQuestionAnswer,
+  HMSPollQuestionResponse,
+  HMSPollQuestion,
+  HMSPollQuestionOption,
 } from '@100mslive/react-native-hms';
-import type { HMSPoll } from '@100mslive/react-native-hms';
 
 import type { PeerTrackNode } from './types';
 
@@ -479,9 +485,87 @@ export const visiblePollsSelector = (
   isHLSViewer: boolean,
   hlsCuedPollIds: HMSPoll['pollId'][]
 ) => {
-  return polls.filter(
-    (poll) =>
-      poll.type !== HMSPollType.quiz &&
-      (isHLSViewer ? hlsCuedPollIds.includes(poll.pollId) : true) // Hiding quizzes from UI
+  return polls.filter((poll) =>
+    isHLSViewer ? hlsCuedPollIds.includes(poll.pollId) : true
   );
 };
+
+export function checkIsSelected(
+  pollQuestion: HMSPollQuestion,
+  option: HMSPollQuestionOption,
+  selectedOptions: number | number[] | null
+) {
+  return pollQuestion.myResponses.length > 0
+    ? pollQuestion.type === HMSPollQuestionType.singleChoice
+      ? !!pollQuestion.myResponses.find((r) => r.option === option.index)
+      : !!pollQuestion.myResponses.find((r) =>
+          r.options ? r.options.includes(option.index) : false
+        )
+    : Array.isArray(selectedOptions)
+      ? selectedOptions.includes(option.index)
+      : selectedOptions === option.index;
+}
+
+export function checkIsCorrectAnswer(
+  questionType: HMSPollQuestionType,
+  myResponses: HMSPollQuestionResponse[] | undefined,
+  answer: HMSPollQuestionAnswer | undefined
+) {
+  if (!myResponses || myResponses.length < 0 || !answer) {
+    return false;
+  }
+  const correctAnswer =
+    questionType === HMSPollQuestionType.multipleChoice
+      ? answer.options
+      : answer.option;
+
+  if (correctAnswer === undefined) {
+    return false;
+  }
+  if (Array.isArray(correctAnswer)) {
+    return myResponses.every(
+      (r) =>
+        r.options &&
+        r.options.length === correctAnswer.length &&
+        r.options.every((o) => correctAnswer.includes(o))
+    );
+  }
+  return myResponses.every((r) => r.option === correctAnswer);
+}
+
+export function checkIsCorrectOption(
+  questionType: HMSPollQuestionType,
+  option: HMSPollQuestionOption,
+  answer: HMSPollQuestionAnswer | undefined
+) {
+  if (!answer) {
+    return false;
+  }
+  const correctAnswer =
+    questionType === HMSPollQuestionType.multipleChoice
+      ? answer.options
+      : answer.option;
+
+  if (correctAnswer === undefined) {
+    return false;
+  }
+  if (Array.isArray(correctAnswer)) {
+    return correctAnswer.includes(option.index);
+  }
+  return option.index === correctAnswer;
+}
+
+export function getLabelFromPollQuestionType(
+  type: HMSPollQuestionType
+): string {
+  switch (type) {
+    case HMSPollQuestionType.singleChoice:
+      return 'Single Choice';
+    case HMSPollQuestionType.multipleChoice:
+      return 'Multiple Choice';
+    case HMSPollQuestionType.longAnswer:
+      return 'Long Answer';
+    case HMSPollQuestionType.shortAnswer:
+      return 'Short Answer';
+  }
+}

package/src/utils/hooks.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   HMSLocalAudioStats,
@@ -13,10 +13,12 @@ import {
   HMSTrackSource,
   HMSUpdateListenerActions,
 } from '@100mslive/react-native-hms';
+import type { HMSPoll } from '@100mslive/react-native-hms';
 
-import type { RootState } from '../redux';
-import { setRTCStats } from '../redux/actions';
 import { ModalTypes } from './types';
+import type { RootState } from '../redux';
+import { addLeaderboard, setRTCStats } from '../redux/actions';
+import { useHMSInstance } from '../hooks-util';
 
 export const useRTCStatsListeners = () => {
   const dispatch = useDispatch();
@@ -102,3 +104,188 @@ export const useRTCStatsListeners = () => {
     }
   }, [hmsInstance, addListeners]);
 };
+
+export const useFetchLeaderboardResponse = (
+  pollId: HMSPoll['pollId'] | undefined
+) => {
+  const dispatch = useDispatch();
+  const hmsInstance = useHMSInstance();
+
+  const hasPollWritePermission = useSelector((state: RootState) => {
+    const permissions = state.hmsStates.localPeer?.role?.permissions;
+    return permissions?.pollWrite;
+  });
+
+  const leaderboardData = useSelector((state: RootState) => {
+    if (!pollId) return null;
+    return state.polls.leaderboards[pollId] || null;
+  });
+
+  const leaderboardDataExist = !!leaderboardData;
+
+  useEffect(() => {
+    if (!!leaderboardData) return;
+
+    let mounted = true;
+
+    async function fetchLeaderboard() {
+      if (pollId) {
+        const response = await hmsInstance.interactivityCenter.fetchLeaderboard(
+          pollId,
+          5,
+          1, // Indexing starts from 1
+          !hasPollWritePermission // fetchCurrentUser only if user has only pollRead permission
+        );
+        if (mounted) {
+          dispatch(addLeaderboard(pollId, response));
+        }
+      }
+    }
+    fetchLeaderboard();
+
+    return () => {
+      mounted = false;
+    };
+  }, [pollId, leaderboardDataExist, hasPollWritePermission]);
+
+  return leaderboardData;
+};
+
+export const useLeaderboardSummaryData = (
+  pollId: HMSPoll['pollId'] | undefined
+): { label: string; value: any }[][] | null => {
+  const localPeerUserId = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.customerUserID
+  );
+  const localPeerPollInitiator = useSelector((state: RootState) => {
+    if (!pollId) return null;
+    const pollInitiatorUserID =
+      state.polls.polls[pollId]?.createdBy?.customerUserID;
+    return (
+      localPeerUserId &&
+      pollInitiatorUserID &&
+      localPeerUserId === pollInitiatorUserID
+    );
+  });
+  const canCreateOrEndPoll = useSelector((state: RootState) => {
+    const permissions = state.hmsStates.localPeer?.role?.permissions;
+    return permissions?.pollWrite;
+  });
+
+  const leaderboardData = useSelector((state: RootState) => {
+    if (!pollId) return null;
+    return state.polls.leaderboards[pollId] || null;
+  });
+  const pollQuestionsLength = useSelector((state: RootState) => {
+    if (!pollId) return null;
+    return state.polls.polls[pollId]?.questions?.length;
+  });
+  const leaderboardSummary = leaderboardData?.summary;
+
+  const pollInitiatorSummaryData = useMemo(() => {
+    if (!localPeerPollInitiator) {
+      return null;
+    }
+    return [
+      [
+        {
+          label: 'ANSWERED',
+          value:
+            leaderboardSummary &&
+            typeof leaderboardSummary.respondedPeersCount === 'number' &&
+            typeof leaderboardSummary.totalPeersCount === 'number'
+              ? `${Math.round((leaderboardSummary.respondedPeersCount / leaderboardSummary.totalPeersCount) * 100)}% (${leaderboardSummary.respondedPeersCount}/${leaderboardSummary.totalPeersCount})`
+              : '-',
+        },
+        {
+          label: 'CORRECT ANSWERS',
+          value:
+            leaderboardSummary &&
+            typeof leaderboardSummary.respondedCorrectlyPeersCount ===
+              'number' &&
+            typeof leaderboardSummary.totalPeersCount === 'number'
+              ? `${Math.round((leaderboardSummary.respondedCorrectlyPeersCount / leaderboardSummary?.totalPeersCount) * 100)}% (${leaderboardSummary.respondedCorrectlyPeersCount}/${leaderboardSummary.totalPeersCount})`
+              : '-',
+        },
+      ],
+      [
+        {
+          label: 'AVG. TIME TAKEN',
+          value:
+            leaderboardSummary &&
+            typeof leaderboardSummary.averageTime === 'number'
+              ? `${(leaderboardSummary.averageTime / 1000).toFixed(2)}s`
+              : '-', // averageTime is in milliseconds
+        },
+        {
+          label: 'AVG. SCORE',
+          value:
+            leaderboardSummary &&
+            typeof leaderboardSummary.averageScore === 'number'
+              ? leaderboardSummary.averageScore.toFixed(2)
+              : '-',
+        },
+      ],
+    ];
+  }, [leaderboardSummary, localPeerPollInitiator]);
+
+  const localLeaderboardEntry =
+    localPeerUserId && leaderboardData && Array.isArray(leaderboardData.entries)
+      ? leaderboardData.entries.find(
+          (entry) => entry.peer?.customerUserId === localPeerUserId
+        )
+      : null;
+
+  const voterSummaryData = useMemo(() => {
+    if (!localLeaderboardEntry || canCreateOrEndPoll) {
+      return null;
+    }
+    return [
+      [
+        {
+          label: 'YOUR RANK',
+          value:
+            localLeaderboardEntry &&
+            typeof localLeaderboardEntry.totalResponses === 'number' &&
+            leaderboardSummary &&
+            typeof leaderboardSummary.totalPeersCount === 'number'
+              ? `${localLeaderboardEntry.position}/${leaderboardSummary.totalPeersCount}`
+              : '-',
+        },
+        {
+          label: 'CORRECT ANSWERS',
+          value:
+            localLeaderboardEntry &&
+            typeof localLeaderboardEntry.correctResponses === 'number' &&
+            typeof pollQuestionsLength === 'number'
+              ? `${Math.round((localLeaderboardEntry.correctResponses / pollQuestionsLength) * 100)}% (${localLeaderboardEntry.correctResponses}/${pollQuestionsLength})`
+              : '-',
+        },
+      ],
+      [
+        {
+          label: 'TIME TAKEN',
+          value:
+            localLeaderboardEntry &&
+            typeof localLeaderboardEntry.duration === 'number'
+              ? `${(localLeaderboardEntry.duration / 1000).toFixed(2)}s`
+              : '-',
+        },
+        {
+          label: 'YOUR POINTS',
+          value:
+            localLeaderboardEntry &&
+            typeof localLeaderboardEntry.score === 'number'
+              ? localLeaderboardEntry.score
+              : '-',
+        },
+      ],
+    ];
+  }, [localLeaderboardEntry, leaderboardSummary?.totalPeersCount]);
+
+  return localPeerPollInitiator
+    ? pollInitiatorSummaryData
+    : voterSummaryData
+      ? voterSummaryData
+      : null;
+};