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

package/src/components/QuizLeaderboardSummary.tsx

@@ -0,0 +1,207 @@
+import * as React from 'react';
+import { Text, StyleSheet, View } from 'react-native';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+
+export interface QuizLeaderboardSummaryProps {
+  data: { label: string; value: any }[][];
+}
+
+export const QuizLeaderboardSummary: React.FC<QuizLeaderboardSummaryProps> = ({
+  data,
+}) => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    regularHighText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+    regularMediumText: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+    semiBoldMediumText: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    semiBoldHighText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    headerText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    container: {
+      backgroundColor: theme.palette.surface_dim,
+    },
+    summaryContainer: {
+      backgroundColor: theme.palette.surface_default,
+    },
+    entriesCard: {
+      backgroundColor: theme.palette.surface_default,
+    },
+    divider: {
+      backgroundColor: theme.palette.border_bright,
+    },
+  }));
+
+  return (
+    <View style={{}}>
+      <Text
+        style={[
+          styles.normalText,
+          styles.marginBottom16,
+          hmsRoomStyles.semiBoldHighText,
+        ]}
+      >
+        Participation Summary
+      </Text>
+
+      <View style={styles.marginBottom16}>
+        {data.map((summaryMap, index) => (
+          <View key={index} style={{ marginBottom: 8, flexDirection: 'row' }}>
+            {summaryMap.map((summary, index) => (
+              <React.Fragment key={summary.label}>
+                {index > 0 ? <View style={{ width: 8 }} /> : null}
+
+                <View
+                  style={[
+                    styles.summaryWrapper,
+                    hmsRoomStyles.summaryContainer,
+                  ]}
+                >
+                  <Text
+                    style={[
+                      styles.tinyText,
+                      styles.marginBottom8,
+                      hmsRoomStyles.semiBoldMediumText,
+                    ]}
+                  >
+                    {summary.label}
+                  </Text>
+
+                  <Text
+                    style={[styles.normalText, hmsRoomStyles.semiBoldHighText]}
+                  >
+                    {summary.value}
+                  </Text>
+                </View>
+              </React.Fragment>
+            ))}
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  tinyText: {
+    fontSize: 10,
+    lineHeight: 16,
+    letterSpacing: 1.5,
+  },
+  smallerText: {
+    fontSize: 12,
+    lineHeight: 16,
+  },
+  smallText: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  normalText: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  marginBottom8: {
+    marginBottom: 8,
+  },
+  marginBottom16: {
+    marginBottom: 16,
+  },
+  contentContainer: {
+    paddingHorizontal: 24,
+  },
+  scrollViewContentContainer: {
+    flexGrow: 1,
+    paddingVertical: 24,
+  },
+  summaryWrapper: {
+    flexBasis: '50%',
+    flexGrow: 1,
+    flexShrink: 1,
+    padding: 16,
+    borderRadius: 12,
+  },
+  position: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    textAlign: 'center',
+    textAlignVertical: 'center',
+    marginRight: 12,
+  },
+  firstPosition: {
+    backgroundColor: '#D69516', // '#FFD700'
+  },
+  secondPosition: {
+    backgroundColor: '#3E3E3E', // '#C0C0C0'
+  },
+  thirdPosition: {
+    backgroundColor: '#583B0F', // '#CD7F32'
+  },
+  iconWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: 12,
+  },
+  // Utilities
+  fullView: {
+    flex: 1,
+  },
+  // Header
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop: 24,
+    marginHorizontal: 24,
+  },
+  headerControls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexShrink: 1,
+  },
+  headerText: {
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+    marginRight: 12,
+  },
+  closeIconHitSlop: {
+    bottom: 16,
+    left: 16,
+    right: 16,
+    top: 16,
+  },
+  backIcon: {
+    marginRight: 8,
+  },
+  // Divider
+  halfDivider: {
+    marginHorizontal: 24,
+    marginVertical: 0,
+    marginTop: 24,
+    width: undefined,
+  },
+  divider: { height: 1, width: '100%' },
+  viewAllBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+  },
+  leaderboardEntry: { marginBottom: 16, marginHorizontal: 16 },
+  entriesCard: { paddingTop: 12, borderRadius: 8 },
+});

package/src/components/VoterParticipationSummary.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import type { HMSPoll } from '@100mslive/react-native-hms';
+import { useSelector } from 'react-redux';
+
+import type { RootState } from '../redux';
+import { QuizLeaderboardSummary } from './QuizLeaderboardSummary';
+import { useFetchLeaderboardResponse } from '../utils/hooks';
+
+export interface VoterParticipationSummaryProps {
+  pollId: HMSPoll['pollId'];
+}
+
+export const VoterParticipationSummary: React.FC<
+  VoterParticipationSummaryProps
+> = ({ pollId }) => {
+  const localPeerUserId = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.customerUserID
+  );
+  const leaderboardData = useFetchLeaderboardResponse(pollId);
+  const totalQuestions = useSelector(
+    (state: RootState) => state.polls.polls[pollId]?.questions?.length
+  );
+
+  const localLeaderboardEntry =
+    localPeerUserId && leaderboardData && Array.isArray(leaderboardData.entries)
+      ? leaderboardData.entries.find(
+          (entry) => entry.peer?.customerUserId === localPeerUserId
+        )
+      : null;
+
+  const data = React.useMemo(() => {
+    return [
+      [
+        {
+          label: 'ANSWERED',
+          value:
+            localLeaderboardEntry &&
+            typeof localLeaderboardEntry.totalResponses === 'number' &&
+            typeof totalQuestions === 'number'
+              ? `${Math.round((localLeaderboardEntry.totalResponses / totalQuestions) * 100)}% (${localLeaderboardEntry.totalResponses}/${totalQuestions})`
+              : '-',
+        },
+        {
+          label: 'CORRECT ANSWERS',
+          value:
+            localLeaderboardEntry &&
+            typeof localLeaderboardEntry.correctResponses === 'number' &&
+            typeof totalQuestions === 'number'
+              ? `${Math.round((localLeaderboardEntry.correctResponses / totalQuestions) * 100)}% (${localLeaderboardEntry.correctResponses}/${totalQuestions})`
+              : '-',
+        },
+      ],
+      [
+        {
+          label: 'TIME TAKEN',
+          value:
+            localLeaderboardEntry &&
+            typeof localLeaderboardEntry.duration === 'number'
+              ? `${(localLeaderboardEntry.duration / 1000).toFixed(2)}s`
+              : '-',
+        },
+      ],
+    ];
+  }, [localLeaderboardEntry]);
+
+  return <QuizLeaderboardSummary data={data} />;
+};

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,6 +53,11 @@ import type {
   RemovePollQuestionResponseAction,
   SetQuestionPointWeightageAction,
   SetQuestionCorrectOptionAction,
+  PushToNavigationStackAction,
+  PopFromNavigationStackAction,
+  ReplaceTopOfNavigationStackAction,
+  AddLeaderboardAction,
+  ResetNavigationStackAction,
 } from '../actionTypes';
 import { MeetingState } from '../../types';
 import type { ChatState, Notification, PinnedMessage } from '../../types';
@@ -491,11 +495,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 +691,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,