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

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,8 +21,11 @@ import {
   cleaPollFormState,
   deletePollQuestionOption,
   editPollQuestionOption,
+  popFromNavigationStack,
   setLaunchingPoll,
   setPollQDeleteConfirmationVisible,
+  setPollQuestionCorrectOption,
+  setPollQuestionPointWeightage,
   setPollQuestionResponseEditable,
   setPollQuestionSaved,
   setPollQuestionSkippable,
@@ -29,13 +33,21 @@ import {
   setPollQuestionType,
   setSelectedPollQuestionIndex,
 } from '../redux/actions';
-import type { PollQuestionUI } from 'src/redux/actionTypes';
+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>();
@@ -45,6 +57,10 @@ export const PollQuestions: React.FC<PollQuestionsProps> = ({}) => {
   const launchingPoll = useSelector(
     (state: RootState) => state.polls.launchingPoll
   );
+  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) => ({
@@ -52,31 +68,22 @@ 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 =
-    questions.length <= 0 ||
-    questions.some(
-      (question) =>
-        !question.title ||
-        !question.saved ||
-        (Array.isArray(question.options) &&
-          (question.options.length <= 1 ||
-            question.options.some((option) => !option)))
-    );
+    questions.length <= 0 || questions.some((question) => !question.saved);
 
   const launchPoll = async () => {
     try {
       const pollsData = reduxStore.getState().polls;
-
-      if (
-        !pollsData.pollName ||
-        pollsData.questions.some(
-          (question) =>
-            !question.title ||
-            (question.options && question.options.some((option) => !option))
-        )
-      ) {
+      if (!pollsData.pollName || disableLaunchPoll) {
         console.log('Incorrect data!');
         return;
       }
@@ -84,19 +91,32 @@ export const PollQuestions: React.FC<PollQuestionsProps> = ({}) => {
 
       const result = await hmsInstance.interactivityCenter.startPoll({
         title: pollsData.pollName,
-        type: HMSPollType.poll,
+        type: pollType,
         rolesThatCanViewResponses:
-          pollsData.pollConfig.voteCountHidden && localPeerRole
+          pollType === HMSPollType.poll &&
+          pollsData.pollConfig.voteCountHidden &&
+          localPeerRole
             ? [localPeerRole]
             : undefined,
         // mode: HMSPollUserTrackingMode.customerUserID, // mode: null, // `pollsData.pollConfig.resultsAnonymous` Make results anonymous set user tracking mode to none
-        questions: pollsData.questions.map((question) => ({
-          skippable: question.skippable,
-          once: !question.responseEditable,
-          text: question.title,
-          type: question.type,
-          options: question.options?.map((option) => ({ text: option })),
-        })),
+        questions: pollsData.questions.map((question) => {
+          const weight = parseInt(question.pointWeightage);
+          return {
+            skippable: question.skippable,
+            once: !question.responseEditable,
+            text: question.title,
+            type: question.type,
+            weight:
+              pollType === HMSPollType.quiz && !isNaN(weight)
+                ? weight
+                : undefined,
+            options: question.options?.map((option) =>
+              pollType === HMSPollType.quiz
+                ? { text: option[1], isCorrectAnswer: option[0] }
+                : { text: option[1] }
+            ),
+          };
+        }),
       });
 
       console.log('quickStartPoll result > ', result);
@@ -144,6 +164,10 @@ export const PollQuestions: React.FC<PollQuestionsProps> = ({}) => {
             setPollQuestionType(questionIndex, value as HMSPollQuestionType)
           );
           break;
+        case 'pointWeightage':
+          const cleanNumber = (value as string).replace(/[^0-9]/g, '');
+          dispatch(setPollQuestionPointWeightage(questionIndex, cleanNumber));
+          break;
       }
     },
     []
@@ -170,57 +194,126 @@ export const PollQuestions: React.FC<PollQuestionsProps> = ({}) => {
     []
   );
 
+  const handleSetPollQuestionCorrectOption = React.useCallback(
+    (questionIndex: number, optionIndex: number, corectOption: boolean) => {
+      dispatch(
+        setPollQuestionCorrectOption(questionIndex, optionIndex, corectOption)
+      );
+    },
+    []
+  );
+
+  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}
-              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 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>
   );
 };
 
@@ -256,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));
     });
   };