@100mslive/react-native-room-kit 1.1.2 → 1.1.4

package/src/redux/actionTypes.ts

@@ -3,6 +3,7 @@ import type {
   HMSPollQuestion,
   HMSPollQuestionType,
   HMSPollType,
+  PollLeaderboardResponse,
 } from '@100mslive/react-native-hms';
 
 const createRequests = (base: String) => {
@@ -195,6 +196,8 @@ export enum CreatePollStages {
   POLL_CONFIG,
   POLL_QUESTION_CONFIG,
   POLL_VOTING,
+  QUIZ_LEADERBOARD,
+  QUIZ_LEADERBOARD_ENTRIES,
 }
 
 export type PollConfig = {
@@ -217,7 +220,10 @@ export type PollsActionType =
   | SetDeleteConfirmationVisible
   | SetPollNameAction
   | SetPollConfigAction
-  | SetPollStageAction
+  | PushToNavigationStackAction
+  | ResetNavigationStackAction
+  | PopFromNavigationStackAction
+  | ReplaceTopOfNavigationStackAction
   | AddPollQuestionAction
   | DeletePollQuestionAction
   | SetSelectedQuestionIndexAction
@@ -241,6 +247,7 @@ export type PollsActionType =
   | AddPollQuestionResponseAction
   | RemovePollQuestionResponseAction
   | AddCuedPollIdAction
+  | AddLeaderboardAction
   | { type: HmsStateActionTypes.CLEAR_STATES };
 
 export type ClearPollFormStateAction = {
@@ -262,9 +269,22 @@ export type SetPollConfigAction = {
   pollConfig: Partial<PollConfig>;
 };
 
-export type SetPollStageAction = {
-  type: PollsStateActionTypes.SET_POLL_STAGE;
-  pollStage: CreatePollStages;
+export type PushToNavigationStackAction = {
+  type: PollsStateActionTypes.PUSH_TO_NAVIGATION_STACK;
+  screen: CreatePollStages;
+};
+
+export type ResetNavigationStackAction = {
+  type: PollsStateActionTypes.RESET_NAVIGATION_STACK;
+};
+
+export type PopFromNavigationStackAction = {
+  type: PollsStateActionTypes.POP_FROM_NAVIGATION_STACK;
+};
+
+export type ReplaceTopOfNavigationStackAction = {
+  type: PollsStateActionTypes.REPLACE_TOP_OF_NAVIGATION_STACK;
+  screen: CreatePollStages;
 };
 
 export type AddPollQuestionAction = {
@@ -391,12 +411,21 @@ export type AddCuedPollIdAction = {
   pollId: HMSPoll['pollId'];
 };
 
+export type AddLeaderboardAction = {
+  type: PollsStateActionTypes.ADD_LEADERBOARD;
+  pollId: HMSPoll['pollId'];
+  leaderboard: PollLeaderboardResponse;
+};
+
 export enum PollsStateActionTypes {
   CLEAR_POLL_FORM_STATE = 'CLEAR_POLL_FORM_STATE',
   SET_DELETE_CONFIRMATION_VISIBLE = 'SET_DELETE_CONFIRMATION_VISIBLE',
   SET_POLL_NAME = 'SET_POLL_NAME',
   SET_POLL_CONFIG = 'SET_POLL_CONFIG',
-  SET_POLL_STAGE = 'SET_POLL_STAGE',
+  PUSH_TO_NAVIGATION_STACK = 'PUSH_TO_NAVIGATION_STACK',
+  RESET_NAVIGATION_STACK = 'RESET_NAVIGATION_STACK',
+  POP_FROM_NAVIGATION_STACK = 'POP_FROM_NAVIGATION_STACK',
+  REPLACE_TOP_OF_NAVIGATION_STACK = 'REPLACE_TOP_OF_NAVIGATION_STACK',
   ADD_POLL_QUESTION = 'ADD_POLL_QUESTION',
   DELETE_POLL_QUESTION = 'DELETE_POLL_QUESTION',
   SET_SELECTED_QUESTION_INDEX = 'SET_SELECTED_QUESTION_INDEX',
@@ -419,4 +448,5 @@ export enum PollsStateActionTypes {
   REMOVE_POLL_QUESTION_RESPONSE = 'REMOVE_POLL_QUESTION_RESPONSE',
   ADD_POLL_QUESTION_RESPONSE = 'ADD_POLL_QUESTION_RESPONSE',
   ADD_CUED_POLL_ID = 'ADD_CUED_POLL_ID',
+  ADD_LEADERBOARD = 'ADD_LEADERBOARD',
 }

package/src/redux/actions/index.ts

@@ -32,7 +32,6 @@ import type {
   AddPollQuestionAction,
   SetPollConfigAction,
   SetPollNameAction,
-  SetPollStageAction,
   DeletePollQuestionAction,
   SetDeleteConfirmationVisible,
   SetSelectedQuestionIndexAction,
@@ -54,12 +53,18 @@ import type {
   RemovePollQuestionResponseAction,
   SetQuestionPointWeightageAction,
   SetQuestionCorrectOptionAction,
+  PushToNavigationStackAction,
+  PopFromNavigationStackAction,
+  ReplaceTopOfNavigationStackAction,
+  AddLeaderboardAction,
+  ResetNavigationStackAction,
 } from '../actionTypes';
 import { MeetingState } from '../../types';
 import type { ChatState, Notification, PinnedMessage } from '../../types';
 
 export const setPrebuiltData = (data: {
-  roomCode: string;
+  roomCode?: string;
+  token?: string;
   options?: {
     userName?: string;
     userId?: string;
@@ -160,9 +165,6 @@ export const clearPeerData = () => ({
 });
 
 export const saveUserData = (data: {
-  userName?: String;
-  roomID?: String;
-  roomCode?: String;
   hmsInstance?: HMSSDK;
   hmsSessionStore?: HMSSessionStore;
   spotlightTrackId?: string | null;
@@ -491,11 +493,26 @@ export const setPollConfig = (
   pollConfig,
 });
 
-export const setPollStage = (
-  pollStage: SetPollStageAction['pollStage']
-): SetPollStageAction => ({
-  type: PollsStateActionTypes.SET_POLL_STAGE,
-  pollStage,
+export const pushToNavigationStack = (
+  screen: PushToNavigationStackAction['screen']
+): PushToNavigationStackAction => ({
+  type: PollsStateActionTypes.PUSH_TO_NAVIGATION_STACK,
+  screen,
+});
+
+export const resetNavigationStack = (): ResetNavigationStackAction => ({
+  type: PollsStateActionTypes.RESET_NAVIGATION_STACK,
+});
+
+export const popFromNavigationStack = (): PopFromNavigationStackAction => ({
+  type: PollsStateActionTypes.POP_FROM_NAVIGATION_STACK,
+});
+
+export const replaceTopOfNavigationStack = (
+  screen: ReplaceTopOfNavigationStackAction['screen']
+): ReplaceTopOfNavigationStackAction => ({
+  type: PollsStateActionTypes.REPLACE_TOP_OF_NAVIGATION_STACK,
+  screen,
 });
 
 export const addPollQuestion = (): AddPollQuestionAction => ({
@@ -672,3 +689,12 @@ export const addCuedPollId = (pollId: string) => ({
   type: PollsStateActionTypes.ADD_CUED_POLL_ID,
   pollId,
 });
+
+export const addLeaderboard = (
+  pollId: AddLeaderboardAction['pollId'],
+  leaderboard: AddLeaderboardAction['leaderboard']
+): AddLeaderboardAction => ({
+  type: PollsStateActionTypes.ADD_LEADERBOARD,
+  pollId,
+  leaderboard,
+});

package/src/redux/reducers/polls.ts

@@ -1,5 +1,8 @@
 import { HMSPollQuestionType, HMSPollType } from '@100mslive/react-native-hms';
-import type { HMSPoll } from '@100mslive/react-native-hms';
+import type {
+  HMSPoll,
+  PollLeaderboardResponse,
+} from '@100mslive/react-native-hms';
 
 import {
   PollsStateActionTypes,
@@ -30,7 +33,7 @@ function getDefaultQuestionObj(): PollQuestionUI {
 type IntialStateType = {
   pollName: string;
   pollConfig: PollConfig;
-  stage: CreatePollStages;
+  navigationStack: CreatePollStages[];
   questions: PollQuestionUI[];
   deleteConfirmationVisible: boolean;
   selectedPollQuestionIndex: number | null;
@@ -39,6 +42,7 @@ 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 = {
@@ -48,7 +52,7 @@ const INITIAL_STATE: IntialStateType = {
     voteCountHidden: false,
     resultsAnonymous: false,
   },
-  stage: CreatePollStages.POLL_CONFIG,
+  navigationStack: [CreatePollStages.POLL_CONFIG],
   questions: [getDefaultQuestionObj()],
   deleteConfirmationVisible: false,
   selectedPollQuestionIndex: null,
@@ -57,6 +61,7 @@ const INITIAL_STATE: IntialStateType = {
   cuedPollIds: [],
   polls: {},
   pollsResponses: {},
+  leaderboards: {},
 };
 
 const hmsStatesReducer = (
@@ -87,11 +92,30 @@ const hmsStatesReducer = (
             : 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 {
@@ -286,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: {
@@ -360,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/redux/reducers/userState.ts

@@ -3,9 +3,11 @@ import type {
   HMSSDK,
   HMSSessionStore,
 } from '@100mslive/react-native-hms';
-import { getMeetingCode, getMeetingUrl } from '../../utils/functions';
 import ActionTypes, { HmsStateActionTypes } from '../actionTypes';
-import type { HMSIOSScreenShareConfig, OnLeaveHandler } from '../../utils/types';
+import type {
+  HMSIOSScreenShareConfig,
+  OnLeaveHandler,
+} from '../../utils/types';
 
 type ActionType = {
   payload: any;
@@ -15,13 +17,14 @@ type ActionType = {
 type IntialStateType = {
   userName: string;
   userId: string | undefined;
-  endPoints: { init: string; token: string; layout: string; } | undefined;
+  endPoints: { init: string; token: string; layout: string } | undefined;
   debugMode: boolean;
-  roomID: string;
+  roomID: string | undefined;
   hmsInstance?: HMSSDK;
   hmsSessionStore?: HMSSessionStore | null;
   spotlightTrackId?: string | null;
-  roomCode: string;
+  roomCode: string | undefined;
+  token: string | undefined;
   isHLSFlow: boolean;
   roles: HMSRole[];
   iosBuildConfig: HMSIOSScreenShareConfig | null;
@@ -34,8 +37,9 @@ const INITIAL_STATE: IntialStateType = {
   endPoints: undefined,
   debugMode: false,
   hmsInstance: undefined,
-  roomID: getMeetingUrl(),
-  roomCode: getMeetingCode(),
+  roomID: undefined,
+  roomCode: undefined,
+  token: undefined,
   isHLSFlow: true,
   roles: [],
   hmsSessionStore: null,
@@ -73,11 +77,12 @@ const userReducer = (
       };
     case HmsStateActionTypes.SET_PREBUILT_DATA:
       state.roomCode = action.payload.roomCode;
-      state.userName = action.payload.options.userName ?? '';
-      state.userId = action.payload.options.userId;
-      state.endPoints = action.payload.options.endPoints;
-      state.debugMode = action.payload.options.debugMode ?? false;
-      state.iosBuildConfig = action.payload.options.ios ?? null;
+      state.token = action.payload.token;
+      state.userName = action.payload.options?.userName ?? '';
+      state.userId = action.payload.options?.userId;
+      state.endPoints = action.payload.options?.endPoints;
+      state.debugMode = action.payload.options?.debugMode ?? false;
+      state.iosBuildConfig = action.payload.options?.ios ?? null;
 
       return state;
     case HmsStateActionTypes.SET_ON_LEAVE_HANDLER:

package/src/types.ts

@@ -9,8 +9,7 @@ export enum MeetingState {
   MEETING_ENDED,
   ERROR,
 }
-export interface HMSPrebuiltProps {
-  roomCode: string;
+export interface HMSPrebuiltCommonProps {
   options?: {
     userName?: string;
     userId?: string;
@@ -63,6 +62,19 @@ export interface HMSPrebuiltProps {
   autoEnterPipMode?: boolean;
 }
 
+export type HMSPrebuiltConditionalProps =
+  | {
+      roomCode: string;
+      token?: never;
+    }
+  | {
+      roomCode?: never;
+      token: string;
+    };
+
+export type HMSPrebuiltProps = HMSPrebuiltCommonProps &
+  HMSPrebuiltConditionalProps;
+
 export enum NotificationTypes {
   INFO = 'info',
   ROLE_CHANGE_DECLINED = 'role_change_declined',

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;
+};