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

package/src/components/PollAndQuizVoting.tsx

@@ -5,22 +5,43 @@ import {
   ScrollView,
   findNodeHandle,
   UIManager,
+  View,
+  Keyboard,
+  TouchableOpacity,
 } from 'react-native';
-import { useSelector } from 'react-redux';
-import { HMSPollState } from '@100mslive/react-native-hms';
+import { useDispatch, useSelector } from 'react-redux';
+import { HMSPollState, HMSPollType } from '@100mslive/react-native-hms';
 
 import { useHMSInstance, useHMSRoomStyleSheet } from '../hooks-util';
 import type { RootState } from '../redux';
-import { PollAndQuizQuestionResponseCard } from './PollAndQuizQuestionResponseCard';
 import { HMSDangerButton } from './HMSDangerButton';
+import { PollAndQuizQuestionResponseCards } from './PollAndQuizQuestionResponseCards';
+import {
+  popFromNavigationStack,
+  pushToNavigationStack,
+} from '../redux/actions';
+import { BottomSheet } from './BottomSheet';
+import { ChevronIcon, CloseIcon } from '../Icons';
+import { PollAndQuizzStateLabel } from './PollAndQuizzStateLabel';
+import { HMSPrimaryButton } from './HMSPrimaryButton';
+import { CreatePollStages } from '../redux/actionTypes';
+import { VoterParticipationSummary } from './VoterParticipationSummary';
 
 export interface PollAndQuizVotingProps {
+  currentIdx: number;
   dismissModal(): void;
+  unmountScreenWithAnimation?(cb: Function): void;
 }
 
-export const PollAndQuizVoting: React.FC<PollAndQuizVotingProps> = () => {
+export const PollAndQuizVoting: React.FC<PollAndQuizVotingProps> = ({
+  currentIdx,
+  dismissModal,
+  unmountScreenWithAnimation,
+}) => {
   const scrollViewRef = React.useRef<ScrollView>(null);
   const hmsInstance = useHMSInstance();
+  const dispatch = useDispatch();
+
   const selectedPoll = useSelector((state: RootState) => {
     const pollsData = state.polls;
     if (pollsData.selectedPollId !== null) {
@@ -32,16 +53,34 @@ export const PollAndQuizVoting: React.FC<PollAndQuizVotingProps> = () => {
     const permissions = state.hmsStates.localPeer?.role?.permissions;
     return permissions?.pollWrite;
   });
+  const headerTitle = useSelector((state: RootState) => {
+    const pollsData = state.polls;
+    if (pollsData.selectedPollId !== null) {
+      return pollsData.polls[pollsData.selectedPollId]?.title || null;
+    }
+    return null;
+  });
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     regularMediumText: {
       color: theme.palette.on_surface_medium,
       fontFamily: `${typography.font_family}-Regular`,
     },
+    semiBoldHighText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
     semiBoldMediumText: {
       color: theme.palette.on_surface_medium,
       fontFamily: `${typography.font_family}-SemiBold`,
     },
+    headerText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    container: {
+      backgroundColor: theme.palette.surface_dim,
+    },
   }));
 
   const endPoll = async () => {
@@ -78,42 +117,134 @@ export const PollAndQuizVoting: React.FC<PollAndQuizVotingProps> = () => {
     );
   };
 
+  const viewLeaderboard = () => {
+    dispatch(pushToNavigationStack(CreatePollStages.QUIZ_LEADERBOARD));
+  };
+
+  const handleBackPress = () => {
+    Keyboard.dismiss();
+    if (typeof unmountScreenWithAnimation === 'function') {
+      unmountScreenWithAnimation(() => dispatch(popFromNavigationStack()));
+    } else {
+      dispatch(popFromNavigationStack());
+    }
+  };
+
+  const handleClosePress = () => {
+    Keyboard.dismiss();
+    dismissModal();
+  };
+
   return (
-    <ScrollView
-      ref={scrollViewRef}
-      style={styles.contentContainer}
-      contentContainerStyle={{ paddingVertical: 24 }}
-    >
-      <Text style={[styles.normalText, hmsRoomStyles.semiBoldMediumText]}>
-        {selectedPoll?.createdBy?.name} started a Poll
-      </Text>
-
-      {selectedPoll?.questions
-        ?.sort((a, b) => a.index - b.index)
-        .map((question, _, arr) => (
-          <PollAndQuizQuestionResponseCard
-            key={question.index}
-            pollState={selectedPoll.state}
-            pollId={selectedPoll.pollId}
-            totalQuestions={arr.length}
-            pollQuestion={question}
-            containerStyle={{ marginBottom: 16 }}
-            onSubmit={handleVote}
+    <View style={[styles.fullView, hmsRoomStyles.container]}>
+      {/* Header */}
+      <View style={styles.header}>
+        <View style={styles.headerControls}>
+          {currentIdx > 0 ? (
+            <TouchableOpacity
+              onPress={handleBackPress}
+              hitSlop={styles.closeIconHitSlop}
+              style={styles.backIcon}
+            >
+              <ChevronIcon direction="left" />
+            </TouchableOpacity>
+          ) : null}
+
+          <Text
+            numberOfLines={2}
+            style={[
+              styles.headerText,
+              { flexShrink: 1 },
+              hmsRoomStyles.headerText,
+            ]}
+          >
+            {headerTitle}
+          </Text>
+
+          {selectedPoll?.state ? (
+            <PollAndQuizzStateLabel state={selectedPoll?.state} />
+          ) : null}
+        </View>
+
+        <TouchableOpacity
+          onPress={handleClosePress}
+          hitSlop={styles.closeIconHitSlop}
+          style={{ marginLeft: 16 }}
+        >
+          <CloseIcon />
+        </TouchableOpacity>
+      </View>
+
+      {/* Divider */}
+      <BottomSheet.Divider style={styles.halfDivider} />
+
+      {/* Content */}
+      <ScrollView
+        ref={scrollViewRef}
+        style={styles.contentContainer}
+        contentContainerStyle={{ flexGrow: 1, paddingVertical: 24 }}
+      >
+        {selectedPoll &&
+        selectedPoll.type === HMSPollType.quiz &&
+        selectedPoll.state === HMSPollState.stopped &&
+        !canCreateOrEndPoll ? (
+          <React.Fragment>
+            <VoterParticipationSummary pollId={selectedPoll.pollId} />
+
+            <Text style={[styles.normalText, hmsRoomStyles.semiBoldHighText]}>
+              Questions
+            </Text>
+          </React.Fragment>
+        ) : (
+          <Text style={[styles.normalText, hmsRoomStyles.semiBoldMediumText]}>
+            {selectedPoll?.createdBy?.name} started a{' '}
+            {selectedPoll?.type === HMSPollType.quiz ? 'quiz' : 'poll'}
+          </Text>
+        )}
+
+        {selectedPoll ? (
+          <PollAndQuizQuestionResponseCards
+            poll={selectedPoll}
+            onVote={handleVote}
           />
-        ))}
+        ) : null}
+      </ScrollView>
 
       {selectedPoll &&
       selectedPoll.state === HMSPollState.started &&
       canCreateOrEndPoll ? (
         <HMSDangerButton
           disabled={!selectedPoll}
-          title="End Poll"
+          title={
+            selectedPoll?.type === HMSPollType.quiz ? 'End Quiz' : 'End Poll'
+          }
           loading={false}
           onPress={endPoll}
-          style={{ marginTop: 16, marginBottom: 16, alignSelf: 'flex-end' }}
+          style={{
+            marginTop: 16,
+            marginBottom: 16,
+            marginRight: 24,
+            alignSelf: 'flex-end',
+          }}
+        />
+      ) : null}
+
+      {selectedPoll &&
+      selectedPoll.state === HMSPollState.stopped &&
+      selectedPoll.type === HMSPollType.quiz ? (
+        <HMSPrimaryButton
+          title={'View Leaderboard'}
+          loading={false}
+          onPress={viewLeaderboard}
+          style={{
+            marginTop: 16,
+            marginBottom: 16,
+            marginRight: 24,
+            alignSelf: 'flex-end',
+          }}
         />
       ) : null}
-    </ScrollView>
+    </View>
   );
 };
 
@@ -154,4 +285,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/PollQuestion.tsx

@@ -1,16 +1,23 @@
 import * as React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
-import { HMSPollQuestionType } from '@100mslive/react-native-hms';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Platform,
+} from 'react-native';
+import { HMSPollQuestionType, HMSPollType } from '@100mslive/react-native-hms';
 import { useSelector } from 'react-redux';
 
 import { useHMSRoomStyleSheet } from '../hooks-util';
 import { BottomSheet } from './BottomSheet';
-import { AddIcon, ChevronIcon, TrashBinIcon } from '../Icons';
+import { AddIcon, CheckBoxIcon, ChevronIcon, TrashBinIcon } from '../Icons';
 import { HMSTextInput } from './HMSTextInput';
 import { HMSBaseButton } from './HMSBaseButton';
 import { PressableIcon } from './PressableIcon';
 import type { PollQuestionUI } from '../redux/actionTypes';
 import type { RootState } from '../redux';
+import { RadioInput } from './RadioInput';
 
 export interface PollQuestionProps {
   totalQuestions: number;
@@ -23,6 +30,11 @@ export interface PollQuestionProps {
     optionIndex: number,
     option: string
   ): void;
+  onSetPollQuestionCorrectOption(
+    questionIndex: number,
+    optionIndex: number,
+    correctOption: boolean
+  ): void;
   onQuestionFieldChange: <K extends keyof Omit<PollQuestionUI, 'options'>>(
     questionIndex: number,
     questionField: K,
@@ -61,6 +73,7 @@ export const PollQuestion: React.FC<PollQuestionProps> = ({
   onAddPollQuestionOption,
   onDeletePollQuestionOption,
   onEditPollQuestionOption,
+  onSetPollQuestionCorrectOption,
   onQuestionFieldChange,
   onDelete,
 }) => {
@@ -68,6 +81,9 @@ export const PollQuestion: React.FC<PollQuestionProps> = ({
   const launchingPoll = useSelector(
     (state: RootState) => state.polls.launchingPoll
   );
+  const pollType = useSelector(
+    (state: RootState) => state.polls.pollConfig.type
+  );
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     container: {
@@ -122,12 +138,16 @@ export const PollQuestion: React.FC<PollQuestionProps> = ({
   }));
 
   const saveButtonDisabled =
-    !pollQuestion.title ||
+    // Disable save button if:
+    !pollQuestion.title || // title is not vaild, OR
+    !pollQuestion.pointWeightage || // pointWeightage is not valid, OR
     ((pollQuestion.type === HMSPollQuestionType.singleChoice ||
-      pollQuestion.type === HMSPollQuestionType.multipleChoice) &&
-      pollQuestion.options &&
-      (pollQuestion.options.length <= 1 ||
-        pollQuestion.options.some((option) => !option)));
+      pollQuestion.type === HMSPollQuestionType.multipleChoice) && // If question type is singleChoice or multipleChoice, AND
+      pollQuestion.options && // options are defined
+      (pollQuestion.options.length <= 1 || // options are less than or equal to 1, OR
+        pollQuestion.options.some((option) => !option[1]) || // some options are not valid, OR
+        (pollType === HMSPollType.quiz &&
+          pollQuestion.options.every((option) => !option[0])))); // If poll type is quiz, all options are marked as not correct
 
   if (pollQuestion.saved) {
     return (
@@ -148,14 +168,11 @@ export const PollQuestion: React.FC<PollQuestionProps> = ({
           <TouchableOpacity
             activeOpacity={0.8}
             onPress={() => setQuestionTypesVisible((prev) => !prev)}
-            style={[
-              {
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-              },
-              { marginBottom: 16 },
-            ]}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+            }}
           >
             <Text style={[styles.normalText, hmsRoomStyles.regularHighText]}>
               {pollQuestion.title}
@@ -163,19 +180,26 @@ export const PollQuestion: React.FC<PollQuestionProps> = ({
             <ChevronIcon direction={questionTypesVisible ? 'top' : 'down'} />
           </TouchableOpacity>
         ) : (
+          <Text style={[styles.normalText, hmsRoomStyles.regularHighText]}>
+            {pollQuestion.title}
+          </Text>
+        )}
+
+        {pollType === HMSPollType.quiz ? (
           <Text
             style={[
-              styles.normalText,
-              hmsRoomStyles.regularHighText,
-              { marginBottom: 16 },
+              styles.smallerText,
+              hmsRoomStyles.regularMediumText,
+              { marginTop: 4 },
             ]}
           >
-            {pollQuestion.title}
+            {pollQuestion.pointWeightage}{' '}
+            {parseInt(pollQuestion.pointWeightage) <= 1 ? 'point' : 'points'}
           </Text>
-        )}
+        ) : null}
 
         {questionTypesVisible && pollQuestion.options ? (
-          <View style={{ marginBottom: 8 }}>
+          <View style={{ marginTop: 16 }}>
             {pollQuestion.options.map((option, idx) => (
               <Text
                 key={idx}
@@ -185,13 +209,13 @@ export const PollQuestion: React.FC<PollQuestionProps> = ({
                   hmsRoomStyles.regularMediumText,
                 ]}
               >
-                {option}
+                {option[1]}
               </Text>
             ))}
           </View>
         ) : null}
 
-        <View style={styles.saveContainer}>
+        <View style={[styles.saveContainer, { marginTop: 16 }]}>
           <PressableIcon
             disabled={launchingPoll}
             style={[styles.deleteIcon, launchingPoll ? { opacity: 0.4 } : null]}
@@ -230,6 +254,15 @@ export const PollQuestion: React.FC<PollQuestionProps> = ({
     );
   }
 
+  const InputComponent =
+    pollType === HMSPollType.quiz
+      ? pollQuestion.type === HMSPollQuestionType.singleChoice
+        ? RadioInput
+        : pollQuestion.type === HMSPollQuestionType.multipleChoice
+          ? CheckBoxIcon
+          : null
+      : null;
+
   return (
     <View style={[styles.container, hmsRoomStyles.container]}>
       <Text
@@ -361,10 +394,30 @@ export const PollQuestion: React.FC<PollQuestionProps> = ({
                     isFirst ? null : styles.topSpace,
                   ]}
                 >
+                  {!InputComponent ? null : (
+                    <View style={{ marginRight: 8 }}>
+                      <InputComponent
+                        selected={option[0]}
+                        type={option[0] ? 'checked' : 'unchecked'}
+                        onChange={(data) => {
+                          onSetPollQuestionCorrectOption(
+                            currentQuestionIndex,
+                            idx,
+                            data === 'checked'
+                              ? true
+                              : data === 'unchecked'
+                                ? false
+                                : data
+                          );
+                        }}
+                      />
+                    </View>
+                  )}
+
                   <HMSTextInput
                     placeholder={`Option ${idx + 1}`}
                     style={hmsRoomStyles.optionText}
-                    value={option}
+                    value={option[1]}
                     autoCapitalize="none"
                     autoCompleteType="off"
                     autoFocus={false}
@@ -405,6 +458,64 @@ export const PollQuestion: React.FC<PollQuestionProps> = ({
 
       <BottomSheet.Divider style={hmsRoomStyles.divider} />
 
+      {/* {[
+        {
+          id: 'skippable' as const,
+          label: 'Allow to skip',
+          enabled: pollQuestion.skippable,
+        },
+        {
+          id: 'responseEditable' as const,
+          label: 'Allow to vote again',
+          enabled: pollQuestion.responseEditable,
+        },
+      ].map((item) => {
+        return (
+          <SwitchRow
+            key={item.id}
+            text={item.label}
+            containerStyle={styles.config}
+            textStyle={[styles.smallText, hmsRoomStyles.regularMediumText]}
+            value={item.enabled}
+            onChange={(value) => {
+              onQuestionFieldChange(currentQuestionIndex, item.id, value);
+            }}
+          />
+        );
+      })} */}
+
+      {pollType === HMSPollType.quiz ? (
+        <View
+          style={{
+            marginBottom: 16,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}
+        >
+          <Text style={[styles.smallText, hmsRoomStyles.regularMediumText]}>
+            Point Weightage
+          </Text>
+
+          <HMSTextInput
+            placeholder=""
+            style={[hmsRoomStyles.optionText, { maxWidth: 88, marginLeft: 12 }]}
+            value={pollQuestion.pointWeightage}
+            autoFocus={false}
+            autoCapitalize="none"
+            autoCompleteType="off"
+            keyboardType={Platform.OS === 'android' ? 'numeric' : 'number-pad'}
+            onChangeText={(value) =>
+              onQuestionFieldChange(
+                currentQuestionIndex,
+                'pointWeightage',
+                value
+              )
+            }
+          />
+        </View>
+      ) : null}
+
       <View style={styles.saveContainer}>
         <PressableIcon
           style={styles.deleteIcon}
@@ -453,6 +564,10 @@ const styles = StyleSheet.create({
     lineHeight: 16,
     letterSpacing: 1.5,
   },
+  smallerText: {
+    fontSize: 12,
+    lineHeight: 16,
+  },
   smallText: {
     fontSize: 14,
     lineHeight: 20,