@100mslive/react-native-room-kit/lib/module/components/HMSPollsQuizzesNotification.js

100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.

import * as React from 'react';
import { batch, useDispatch } from 'react-redux';
import { StyleSheet, Text, TouchableHighlight } from 'react-native';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import { HMSPollType, HMSPollUpdateType } from '@100mslive/react-native-hms';
import { PollVoteIcon } from '../Icons';
import { useHMSRoomColorPalette, useHMSRoomStyleSheet, useModalType } from '../hooks-util';
import { HMSNotification } from './HMSNotification';
import { ModalTypes } from '../utils/types';
import { pushToNavigationStack, removeNotification, setSelectedPollId } from '../redux/actions';
import { CreatePollStages } from '../redux/actionTypes';
export const HMSPollsQuizzesNotification = ({
  id,
  payload
}) => {
  const {
    poll,
    pollUpdateType
  } = payload;
  const dispatch = useDispatch();
  const {
    handleModalVisibleType
  } = useModalType();
  const {
    secondary_dim: secondaryDimColor
  } = useHMSRoomColorPalette();
  // const canVoteOnPoll = useSelector((state: RootState) => {
  //   const permissions = state.hmsStates.localPeer?.role?.permissions;
  //   return permissions?.pollRead;
  // });

  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
    button: {
      backgroundColor: theme.palette.secondary_default
    },
    buttonText: {
      color: theme.palette.on_secondary_high,
      fontFamily: `${typography.font_family}-SemiBold`
    }
  }));
  const handleVotePress = () => {
    // if (!canVoteOnPoll) {
    //   return;
    // }
    batch(() => {
      dispatch(pushToNavigationStack(CreatePollStages.POLL_VOTING));
      dispatch(setSelectedPollId(poll.pollId));
      handleModalVisibleType(ModalTypes.POLLS_AND_QUIZZES);
      dispatch(removeNotification(id));
    });
  };
  return /*#__PURE__*/React.createElement(HMSNotification, {
    id: id,
    icon: /*#__PURE__*/React.createElement(PollVoteIcon, null),
    text: poll.createdBy ? `${poll.createdBy.name} ${pollUpdateType === HMSPollUpdateType.started ? 'started' : ''} a new ${poll.type === HMSPollType.poll ? 'poll' : 'quiz'}` : `A new ${poll.type === HMSPollType.poll ? 'poll' : 'quiz'} has started`,
    autoDismiss: false,
    dismissable: true,
    cta:
    /*#__PURE__*/
    // canVoteOnPoll ? (
    React.createElement(GestureDetector, {
      gesture: Gesture.Tap()
    }, /*#__PURE__*/React.createElement(TouchableHighlight, {
      underlayColor: secondaryDimColor,
      style: [styles.button, hmsRoomStyles.button],
      onPress: handleVotePress
    }, /*#__PURE__*/React.createElement(Text, {
      style: [styles.buttonText, hmsRoomStyles.buttonText]
    }, poll.type === HMSPollType.quiz ? 'Answer' : 'Vote')))
    // ) : undefined
  });
};
const styles = StyleSheet.create({
  button: {
    paddingVertical: 8,
    paddingHorizontal: 16,
    borderRadius: 8,
    marginRight: 16
  },
  buttonText: {
    fontSize: 14,
    lineHeight: 20,
    letterSpacing: 0.25
  }
});
//# sourceMappingURL=HMSPollsQuizzesNotification.js.map