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

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' || '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,
-  },
 });

package/src/components/PollsConfigAndList.tsx

@@ -1,14 +1,38 @@
 import * as React from 'react';
-import { ScrollView } from 'react-native';
+import {
+  Keyboard,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useSelector } from 'react-redux';
 
 import { CreatePoll } from './CreatePoll';
 import { PreviousPollsAndQuizzesList } from './PreviousPollsAndQuizzesList';
-import { useSelector } from 'react-redux';
-import type { RootState } from 'src/redux';
+import type { RootState } from '../redux';
+import { BottomSheet } from './BottomSheet';
+import { CloseIcon } from '../Icons';
+import { useHMSRoomStyleSheet } from '../hooks-util';
 
-export interface PollsConfigAndListProps {}
+export interface PollsConfigAndListProps {
+  dismissModal(): void;
+}
+
+export const PollsConfigAndList: React.FC<PollsConfigAndListProps> = ({
+  dismissModal,
+}) => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      backgroundColor: theme.palette.surface_dim,
+    },
+    headerText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
 
-export const PollsConfigAndList: React.FC<PollsConfigAndListProps> = ({}) => {
   const canCreateOrEndPoll = useSelector((state: RootState) => {
     const permissions = state.hmsStates.localPeer?.role?.permissions;
     return permissions?.pollWrite;
@@ -18,12 +42,84 @@ export const PollsConfigAndList: React.FC<PollsConfigAndListProps> = ({}) => {
     return permissions?.pollRead;
   });
 
+  const handleClosePress = () => {
+    Keyboard.dismiss();
+    dismissModal();
+  };
+
   return (
-    <ScrollView contentContainerStyle={{ paddingBottom: 24 }}>
-      {canCreateOrEndPoll ? <CreatePoll /> : null}
-      {canVoteOnPoll || canCreateOrEndPoll ? (
-        <PreviousPollsAndQuizzesList />
-      ) : null}
-    </ScrollView>
+    <View style={hmsRoomStyles.container}>
+      {/* Header */}
+      <View style={styles.header}>
+        <Text style={[styles.headerText, hmsRoomStyles.headerText]}>
+          Polls and Quizzes
+        </Text>
+
+        <TouchableOpacity
+          onPress={handleClosePress}
+          hitSlop={styles.closeIconHitSlop}
+          style={{ marginLeft: 16 }}
+        >
+          <CloseIcon />
+        </TouchableOpacity>
+      </View>
+
+      {/* Divider */}
+      <BottomSheet.Divider style={styles.halfDivider} />
+
+      {/* Content */}
+      <ScrollView contentContainerStyle={{ paddingBottom: 24 }}>
+        {canCreateOrEndPoll ? <CreatePoll /> : null}
+        {canVoteOnPoll || canCreateOrEndPoll ? (
+          <PreviousPollsAndQuizzesList />
+        ) : null}
+      </ScrollView>
+    </View>
   );
 };
+
+const styles = StyleSheet.create({
+  // 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,
+  },
+  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/PreviousPollsAndQuizzesList.tsx

@@ -18,11 +18,6 @@ export const PreviousPollsAndQuizzesList: React.FC<
     (state: RootState) => state.polls.cuedPollIds
   );
 
-  const canCreateOrEndPoll = useSelector((state: RootState) => {
-    const permissions = state.hmsStates.localPeer?.role?.permissions;
-    return permissions?.pollWrite;
-  });
-
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     surfaceHighSemiBoldText: {
       color: theme.palette.on_surface_high,
@@ -40,44 +35,42 @@ export const PreviousPollsAndQuizzesList: React.FC<
     hlsCuedPollIds
   );
 
-  if (pollsList.length === 0 && !canCreateOrEndPoll) {
-    return (
-      <View style={styles.contentContainer}>
-        <Text
-          style={[
-            styles.subtitle,
-            hmsRoomStyles.surfaceHighRegularText,
-            styles.emptyList,
-          ]}
-        >
-          No Polls to show
-        </Text>
-      </View>
-    );
-  }
-
   return (
     <View style={styles.contentContainer}>
-      {pollsList.length > 0 && (
-        <Text style={[styles.title, hmsRoomStyles.surfaceHighSemiBoldText]}>
-          Previous Polls
-        </Text>
-      )}
+      <Text style={[styles.title, hmsRoomStyles.surfaceHighSemiBoldText]}>
+        Previous Polls And Quizzes
+      </Text>
 
-      {pollsList
-        .sort((a, b) => {
-          return a.state === b.state // If polls have same state, then sort as per startedAt
-            ? a.startedAt !== undefined && b.startedAt !== undefined
-              ? b.startedAt.getTime() - a.startedAt.getTime()
-              : 0
-            : // If polls have different state, then sort as per state
-              a.state !== undefined && b.state !== undefined
-              ? a.state - b.state
-              : 0;
-        })
-        .map((poll) => (
-          <PollsAndQuizzesCard key={poll.pollId} poll={poll} />
-        ))}
+      {pollsList.length <= 0 ? (
+        <View style={styles.contentContainer}>
+          <Text
+            style={[
+              styles.subtitle,
+              hmsRoomStyles.surfaceHighRegularText,
+              styles.emptyList,
+            ]}
+          >
+            No Polls or Quizzes to show
+          </Text>
+        </View>
+      ) : (
+        <>
+          {pollsList
+            .sort((a, b) => {
+              return a.state === b.state // If polls have same state, then sort as per startedAt
+                ? a.startedAt !== undefined && b.startedAt !== undefined
+                  ? b.startedAt.getTime() - a.startedAt.getTime()
+                  : 0
+                : // If polls have different state, then sort as per state
+                  a.state !== undefined && b.state !== undefined
+                  ? a.state - b.state
+                  : 0;
+            })
+            .map((poll) => (
+              <PollsAndQuizzesCard key={poll.pollId} poll={poll} />
+            ))}
+        </>
+      )}
     </View>
   );
 };

package/src/components/QuizEndOptionsView.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import type { HMSPollQuestionOption } from '@100mslive/react-native-hms';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import { CheckIcon } from '../Icons';
+
+interface QuizEndOptionsViewProps {
+  option: HMSPollQuestionOption;
+  isSelected: boolean;
+  isCorrect: boolean;
+}
+
+export const QuizEndOptionsView: React.FC<QuizEndOptionsViewProps> = ({
+  option,
+  isSelected,
+  isCorrect,
+}) => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    surfaceHighRegularText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+    surfaceMediumRegularText: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.textWrapper}>
+        {isCorrect ? <CheckIcon style={styles.icon} type="in-circle" /> : null}
+
+        <Text style={[styles.smallText, hmsRoomStyles.surfaceHighRegularText]}>
+          {option.text}
+        </Text>
+      </View>
+
+      {isSelected ? (
+        <Text
+          style={[styles.smallText, hmsRoomStyles.surfaceMediumRegularText]}
+        >
+          Your Answer
+        </Text>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  textWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    width: 20,
+    height: 20,
+    marginRight: 8,
+  },
+  smallText: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+});