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

package/src/components/PollQuestions.tsx

@@ -5,14 +5,15 @@ import {
   StyleSheet,
   TouchableOpacity,
   ScrollView,
+  Keyboard,
 } from 'react-native';
 import { HMSPollQuestionType, HMSPollType } from '@100mslive/react-native-hms';
+import { batch, useDispatch, useSelector, useStore } from 'react-redux';
 
-import { AddIcon } from '../Icons';
+import { AddIcon, ChevronIcon, CloseIcon } from '../Icons';
 import { useHMSInstance, useHMSRoomStyleSheet } from '../hooks-util';
 import { HMSPrimaryButton } from './HMSPrimaryButton';
 import { PollQuestion } from './PollQuestion';
-import { batch, useDispatch, useSelector, useStore } from 'react-redux';
 import type { RootState } from '../redux';
 import {
   addPollQuestion,
@@ -20,6 +21,7 @@ import {
   cleaPollFormState,
   deletePollQuestionOption,
   editPollQuestionOption,
+  popFromNavigationStack,
   setLaunchingPoll,
   setPollQDeleteConfirmationVisible,
   setPollQuestionCorrectOption,
@@ -32,12 +34,20 @@ import {
   setSelectedPollQuestionIndex,
 } from '../redux/actions';
 import type { PollQuestionUI } from '../redux/actionTypes';
+import { PollQDeleteConfirmationSheetView } from './PollQDeleteConfirmationSheetView';
+import { BottomSheet } from './BottomSheet';
 
 export interface PollQuestionsProps {
+  currentIdx: number;
   dismissModal(): void;
+  unmountScreenWithAnimation?: (cb: Function) => void;
 }
 
-export const PollQuestions: React.FC<PollQuestionsProps> = ({}) => {
+export const PollQuestions: React.FC<PollQuestionsProps> = ({
+  currentIdx,
+  dismissModal,
+  unmountScreenWithAnimation,
+}) => {
   const dispatch = useDispatch();
   const hmsInstance = useHMSInstance();
   const reduxStore = useStore<RootState>();
@@ -50,6 +60,7 @@ export const PollQuestions: React.FC<PollQuestionsProps> = ({}) => {
   const pollType = useSelector(
     (state: RootState) => state.polls.pollConfig.type
   );
+  const headerTitle = useSelector((state: RootState) => state.polls.pollName);
   const questions = useSelector((state: RootState) => state.polls.questions);
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
@@ -57,6 +68,13 @@ export const PollQuestions: React.FC<PollQuestionsProps> = ({}) => {
       color: theme.palette.on_surface_medium,
       fontFamily: `${typography.font_family}-Regular`,
     },
+    headerText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    container: {
+      backgroundColor: theme.palette.surface_dim,
+    },
   }));
 
   const disableLaunchPoll =
@@ -185,60 +203,117 @@ export const PollQuestions: React.FC<PollQuestionsProps> = ({}) => {
     []
   );
 
+  const handleBackPress = () => {
+    Keyboard.dismiss();
+    if (typeof unmountScreenWithAnimation === 'function') {
+      unmountScreenWithAnimation(() => dispatch(popFromNavigationStack()));
+    } else {
+      dispatch(popFromNavigationStack());
+    }
+  };
+
+  const handleClosePress = () => {
+    Keyboard.dismiss();
+    dismissModal();
+  };
+
   return (
-    <ScrollView
-      style={styles.contentContainer}
-      contentContainerStyle={{ paddingTop: 24 }}
-    >
-      {questions.map((pollQuestion, idx, arr) => {
-        const isFirst = idx === 0;
-        return (
-          <React.Fragment key={idx}>
-            {isFirst ? null : <View style={{ height: 16 }} />}
+    <View style={[styles.fullView, hmsRoomStyles.container]}>
+      {/* Header */}
+      <View style={styles.header}>
+        <View style={styles.headerControls}>
+          {currentIdx > 0 ? (
+            <TouchableOpacity
+              onPress={handleBackPress}
+              disabled={launchingPoll}
+              hitSlop={styles.closeIconHitSlop}
+              style={[styles.backIcon, launchingPoll ? { opacity: 0.4 } : null]}
+            >
+              <ChevronIcon direction="left" />
+            </TouchableOpacity>
+          ) : null}
 
-            <PollQuestion
-              totalQuestions={arr.length}
-              currentQuestionIndex={idx}
-              pollQuestion={pollQuestion}
-              onAddPollQuestionOption={handleAddPollQuestionOption}
-              onDeletePollQuestionOption={handleDeletePollQuestionOption}
-              onEditPollQuestionOption={handleEditPollQuestionOption}
-              onSetPollQuestionCorrectOption={
-                handleSetPollQuestionCorrectOption
-              }
-              onQuestionFieldChange={onQuestionFieldChange}
-              onDelete={deleteQuestion}
-            />
-          </React.Fragment>
-        );
-      })}
+          <Text
+            numberOfLines={2}
+            style={[
+              styles.headerText,
+              { flexShrink: 1 },
+              hmsRoomStyles.headerText,
+            ]}
+          >
+            {headerTitle}
+          </Text>
+        </View>
 
-      <View style={[styles.addOptionWrapper, { marginTop: 16 }]}>
         <TouchableOpacity
-          onPress={addQuestion}
-          disabled={launchingPoll}
-          style={[
-            styles.addOptionContainer,
-            launchingPoll ? { opacity: 0.4 } : null,
-          ]}
+          onPress={handleClosePress}
+          hitSlop={styles.closeIconHitSlop}
+          style={{ marginLeft: 16 }}
         >
-          <View style={styles.addOptionIconWrapper}>
-            <AddIcon type="circle" />
-          </View>
-          <Text style={[styles.smallText, hmsRoomStyles.regularMediumText]}>
-            Add another question
-          </Text>
+          <CloseIcon />
         </TouchableOpacity>
       </View>
 
-      <HMSPrimaryButton
-        disabled={disableLaunchPoll || launchingPoll}
-        title={`Launch ${pollType === HMSPollType.quiz ? 'Quiz' : 'Poll'}`}
-        loading={launchingPoll}
-        onPress={launchPoll}
-        style={{ marginTop: 16, marginBottom: 56, alignSelf: 'flex-end' }}
-      />
-    </ScrollView>
+      {/* Divider */}
+      <BottomSheet.Divider style={styles.halfDivider} />
+
+      <ScrollView
+        style={styles.contentContainer}
+        contentContainerStyle={{ paddingTop: 24 }}
+      >
+        {questions.map((pollQuestion, idx, arr) => {
+          const isFirst = idx === 0;
+          return (
+            <React.Fragment key={idx}>
+              {isFirst ? null : <View style={{ height: 16 }} />}
+
+              <PollQuestion
+                totalQuestions={arr.length}
+                currentQuestionIndex={idx}
+                pollQuestion={pollQuestion}
+                onAddPollQuestionOption={handleAddPollQuestionOption}
+                onDeletePollQuestionOption={handleDeletePollQuestionOption}
+                onEditPollQuestionOption={handleEditPollQuestionOption}
+                onSetPollQuestionCorrectOption={
+                  handleSetPollQuestionCorrectOption
+                }
+                onQuestionFieldChange={onQuestionFieldChange}
+                onDelete={deleteQuestion}
+              />
+            </React.Fragment>
+          );
+        })}
+
+        <View style={[styles.addOptionWrapper, { marginTop: 16 }]}>
+          <TouchableOpacity
+            onPress={addQuestion}
+            disabled={launchingPoll}
+            style={[
+              styles.addOptionContainer,
+              launchingPoll ? { opacity: 0.4 } : null,
+            ]}
+          >
+            <View style={styles.addOptionIconWrapper}>
+              <AddIcon type="circle" />
+            </View>
+            <Text style={[styles.smallText, hmsRoomStyles.regularMediumText]}>
+              Add another question
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        <HMSPrimaryButton
+          disabled={disableLaunchPoll || launchingPoll}
+          title={`Launch ${pollType === HMSPollType.quiz ? 'Quiz' : 'Poll'}`}
+          loading={launchingPoll}
+          onPress={launchPoll}
+          style={{ marginTop: 16, marginBottom: 56, alignSelf: 'flex-end' }}
+        />
+      </ScrollView>
+
+      {/* Modal */}
+      <PollQDeleteConfirmationSheetView />
+    </View>
   );
 };
 
@@ -274,4 +349,51 @@ const styles = StyleSheet.create({
     marginRight: 8,
     padding: 8,
   },
+
+  // -------
+
+  // 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: {
+    marginHorizontal: 24,
+    marginVertical: 24,
+    width: undefined,
+  },
 });

package/src/components/PollsAndQuizBottomSheet.tsx

@@ -1,22 +1,17 @@
 import * as React from 'react';
 import { Platform, StyleSheet } from 'react-native';
-import { useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 
 import { BottomSheet } from './BottomSheet';
-import {
-  useHMSRoomStyleSheet,
-  useIsHLSViewer,
-  useModalType,
-} from '../hooks-util';
+import { useHMSRoomStyleSheet, useModalType } from '../hooks-util';
 import { useHeaderHeight } from './Header';
 import { useIsLandscapeOrientation } from '../utils/dimension';
 import { PollsAndQuizzesModalContent } from './PollsAndQuizzesModalContent';
 import { ModalTypes } from '../utils/types';
-import type { RootState } from '../redux';
-import { CreatePollStages } from '../redux/actionTypes';
-import { visiblePollsSelector } from '../utils/functions';
+import { resetNavigationStack } from '../redux/actions';
 
 export const PollsAndQuizBottomSheet = () => {
+  const dispatch = useDispatch();
   const headerHeight = useHeaderHeight();
   const isLandscapeOrientation = useIsLandscapeOrientation();
   const {
@@ -24,40 +19,26 @@ export const PollsAndQuizBottomSheet = () => {
     handleModalVisibleType: setModalVisible,
   } = useModalType();
 
-  const isPollQuestionStage = useSelector(
-    (state: RootState) =>
-      state.polls.stage === CreatePollStages.POLL_QUESTION_CONFIG
-  );
-  const isHLSViewer = useIsHLSViewer();
-  const havePolls = useSelector(
-    (state: RootState) =>
-      visiblePollsSelector(
-        Object.values(state.polls.polls),
-        isHLSViewer,
-        state.polls.cuedPollIds
-      ).length > 0
-  );
-
   const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
     contentContainer: {
       backgroundColor: theme.palette.surface_dim,
     },
   }));
 
-  const dismissModal = () => setModalVisible(ModalTypes.DEFAULT);
-
-  const fullHeight = isPollQuestionStage || havePolls;
-  const containerStyles = fullHeight
-    ? [
-        styles.bottomSheet,
-        {
-          marginTop: isLandscapeOrientation
-            ? 0
-            : headerHeight + (Platform.OS === 'android' ? 24 : 0),
-        },
-        hmsRoomStyles.contentContainer,
-      ]
-    : [hmsRoomStyles.contentContainer];
+  const dismissModal = () => {
+    setModalVisible(ModalTypes.DEFAULT);
+    dispatch(resetNavigationStack());
+  };
+
+  const containerStyles = [
+    styles.bottomSheet,
+    {
+      marginTop: isLandscapeOrientation
+        ? 0
+        : headerHeight + (Platform.OS === 'android' ? 24 : 0),
+    },
+    hmsRoomStyles.contentContainer,
+  ];
 
   return (
     <BottomSheet
@@ -66,12 +47,9 @@ export const PollsAndQuizBottomSheet = () => {
       isVisible={modalVisible === ModalTypes.POLLS_AND_QUIZZES}
       avoidKeyboard={true}
       containerStyle={containerStyles}
-      bottomOffsetSpace={fullHeight ? 0 : undefined}
+      bottomOffsetSpace={0}
     >
-      <PollsAndQuizzesModalContent
-        fullHeight={fullHeight}
-        dismissModal={dismissModal}
-      />
+      <PollsAndQuizzesModalContent dismissModal={dismissModal} />
     </BottomSheet>
   );
 };

package/src/components/PollsAndQuizzesCard.tsx

@@ -5,7 +5,7 @@ import type { HMSPoll } from '@100mslive/react-native-hms';
 
 import { useHMSRoomStyleSheet } from '../hooks-util';
 import { HMSPrimaryButton } from './HMSPrimaryButton';
-import { setPollStage, setSelectedPollId } from '../redux/actions';
+import { pushToNavigationStack, setSelectedPollId } from '../redux/actions';
 import { CreatePollStages } from '../redux/actionTypes';
 import { PollAndQuizzStateLabel } from './PollAndQuizzStateLabel';
 
@@ -36,7 +36,7 @@ export const PollsAndQuizzesCard: React.FC<PollsAndQuizzesCardProps> = ({
 
   const viewPoll = () => {
     batch(() => {
-      dispatch(setPollStage(CreatePollStages.POLL_VOTING));
+      dispatch(pushToNavigationStack(CreatePollStages.POLL_VOTING));
       dispatch(setSelectedPollId(poll.pollId));
     });
   };

package/src/components/PollsAndQuizzesModalContent.tsx

@@ -1,62 +1,27 @@
 import * as React from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  Keyboard,
-} from 'react-native';
-import { useDispatch, useSelector } from 'react-redux';
+import { View, StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
 
 import type { RootState } from '../redux';
-import { useHMSRoomStyleSheet } from '../hooks-util';
-import { BottomSheet } from './BottomSheet';
-import { ChevronIcon, CloseIcon } from '../Icons';
-import { TestIds } from '../utils/constants';
 import { PollQuestions } from './PollQuestions';
 import { CreatePollStages } from '../redux/actionTypes';
-import { setPollStage } from '../redux/actions';
-import { PollQDeleteConfirmationSheetView } from './PollQDeleteConfirmationSheetView';
 import { PollsConfigAndList } from './PollsConfigAndList';
 import { PollAndQuizVoting } from './PollAndQuizVoting';
-import { PollAndQuizzStateLabel } from './PollAndQuizzStateLabel';
+import { PollAndQuizSheetScreen } from './PollAndQuizSheetScreen';
+import { QuizLeaderboardScreen } from './QuizLeaderboardScreen';
+import { QuizLeaderboardEntriesScreen } from './QuizLeaderboardEntriesScreen';
 
 export interface PollsAndQuizzesModalContentProps {
-  fullHeight: boolean;
   dismissModal(): void;
 }
 
 export const PollsAndQuizzesModalContent: React.FC<
   PollsAndQuizzesModalContentProps
-> = ({ fullHeight, dismissModal }) => {
-  const dispatch = useDispatch();
-  const headerTitle = useSelector((state: RootState) => {
-    const pollsData = state.polls;
-    if (pollsData.stage === CreatePollStages.POLL_QUESTION_CONFIG) {
-      return pollsData.pollName;
-    }
-    if (
-      pollsData.stage === CreatePollStages.POLL_VOTING &&
-      pollsData.selectedPollId !== null
-    ) {
-      return pollsData.polls[pollsData.selectedPollId]?.title || null;
-    }
-    return null;
-  });
-  const selectedPoll = useSelector((state: RootState) => {
-    const pollsData = state.polls;
-    if (
-      pollsData.stage === CreatePollStages.POLL_VOTING &&
-      pollsData.selectedPollId !== null
-    ) {
-      return pollsData.polls[pollsData.selectedPollId] || null;
-    }
-    return null;
-  });
-  const pollsStage = useSelector((state: RootState) => state.polls.stage);
-  const launchingPoll = useSelector(
-    (state: RootState) => state.polls.launchingPoll
+> = ({ dismissModal }) => {
+  const pollsNavigationStack = useSelector(
+    (state: RootState) => state.polls.navigationStack
   );
+
   const canCreateOrEndPoll = useSelector((state: RootState) => {
     const permissions = state.hmsStates.localPeer?.role?.permissions;
     return permissions?.pollWrite;
@@ -66,133 +31,45 @@ export const PollsAndQuizzesModalContent: React.FC<
     return permissions?.pollRead;
   });
 
-  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
-    headerText: {
-      color: theme.palette.on_surface_high,
-      fontFamily: `${typography.font_family}-SemiBold`,
-    },
-  }));
-
-  const handleBackPress = () => {
-    Keyboard.dismiss();
-    dispatch(setPollStage(CreatePollStages.POLL_CONFIG));
-  };
-
-  const handleClosePress = () => {
-    Keyboard.dismiss();
-    dismissModal();
-  };
-
   return (
-    <View style={fullHeight ? styles.fullView : null}>
-      {/* Header */}
-      <View style={styles.header}>
-        <View style={styles.headerControls}>
-          {headerTitle ? (
-            <TouchableOpacity
-              onPress={handleBackPress}
-              disabled={launchingPoll}
-              hitSlop={styles.closeIconHitSlop}
-              style={[styles.backIcon, launchingPoll ? { opacity: 0.4 } : null]}
-            >
-              <ChevronIcon direction="left" />
-            </TouchableOpacity>
-          ) : null}
-
-          <Text
-            testID={TestIds.change_name_modal_heading}
-            numberOfLines={2}
-            style={[
-              styles.headerText,
-              { flexShrink: 1 },
-              hmsRoomStyles.headerText,
-            ]}
-          >
-            {headerTitle ?? 'Polls and Quizzes'}
-          </Text>
-
-          {selectedPoll?.state ? (
-            <PollAndQuizzStateLabel state={selectedPoll?.state} />
-          ) : null}
-        </View>
-
-        <TouchableOpacity
-          testID={TestIds.change_name_modal_close_btn}
-          onPress={handleClosePress}
-          hitSlop={styles.closeIconHitSlop}
-          style={{ marginLeft: 16 }}
+    <View style={[styles.relative, styles.fullView]}>
+      {pollsNavigationStack.map((stage, index) => (
+        <PollAndQuizSheetScreen
+          key={stage}
+          zIndex={index}
+          disableAnimation={index === 0}
         >
-          <CloseIcon />
-        </TouchableOpacity>
-      </View>
-
-      {/* Divider */}
-      <BottomSheet.Divider
-        style={fullHeight ? styles.halfDivider : styles.divider}
-      />
-
-      {/* Content */}
-      <View style={fullHeight ? styles.fullView : null}>
-        {pollsStage === CreatePollStages.POLL_CONFIG ? (
-          <PollsConfigAndList />
-        ) : pollsStage === CreatePollStages.POLL_QUESTION_CONFIG &&
-          canCreateOrEndPoll ? (
-          <PollQuestions dismissModal={dismissModal} />
-        ) : pollsStage === CreatePollStages.POLL_VOTING &&
-          (canVoteOnPoll || canCreateOrEndPoll) ? (
-          <PollAndQuizVoting dismissModal={dismissModal} />
-        ) : null}
-      </View>
-
-      {/* Modal */}
-      <PollQDeleteConfirmationSheetView />
+          {stage === CreatePollStages.POLL_CONFIG ? (
+            <PollsConfigAndList dismissModal={dismissModal} />
+          ) : stage === CreatePollStages.POLL_QUESTION_CONFIG &&
+            canCreateOrEndPoll ? (
+            <PollQuestions currentIdx={index} dismissModal={dismissModal} />
+          ) : stage === CreatePollStages.POLL_VOTING &&
+            (canVoteOnPoll || canCreateOrEndPoll) ? (
+            <PollAndQuizVoting currentIdx={index} dismissModal={dismissModal} />
+          ) : stage === CreatePollStages.QUIZ_LEADERBOARD ? (
+            <QuizLeaderboardScreen
+              currentIdx={index}
+              dismissModal={dismissModal}
+            />
+          ) : stage === CreatePollStages.QUIZ_LEADERBOARD_ENTRIES ? (
+            <QuizLeaderboardEntriesScreen
+              currentIdx={index}
+              dismissModal={dismissModal}
+            />
+          ) : null}
+        </PollAndQuizSheetScreen>
+      ))}
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  // Utilities
+  relative: {
+    position: 'relative',
+    overflow: 'hidden',
+  },
   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: {
-    marginHorizontal: 24,
-    marginVertical: 24,
-    width: undefined,
-  },
 });