reducer and ShareNavBarButton

reactNative.js

// src/action-alerts/reducer.js:

import * as types from 'action-alerts/constants';
import * as helpers from 'action-alerts/helpers/reducer-helpers';

const INITIAL_STATE = {
  alerts: [],
  email: '',
  error: null,
  loading: false,
  campaignLoading: false,
  selectedActionAlert: {},
  sendingMessage: false,
  sendingError: false,
  message: {
    subject: '',
    body: '',
    signature: '',
    closing: '',
    additionalQuestions: [],
    template: {},
    questionnaire: [],
  },
  recipients: [],
};

export default (state = INITIAL_STATE, {type, payload}) => {
  switch (type) {
    case types.RESET_ALERTS_STATE:
      return {...INITIAL_STATE};
    case types.RESET_STATE_KEEP_ALERTS:
      return {...INITIAL_STATE, alerts: state.alerts};
    case types.FETCH_CAMPAIGNS_STARTED:
      return {...state, loading: true, error: null};
    case types.FETCH_CAMPAIGNS_SUCCESS:
      return {...state, loading: false, alerts: payload};
    case types.FETCH_CAMPAIGNS_ERROR:
      return {...state, loading: false, error: payload};
    case types.SET_SELECTED_ACTION_ALERT:
      return {
        ...state,
        selectedActionAlert: payload,
        questionnaireLoading: true,
      };
    case types.FETCH_SELECTED_CAMPAIGN_STARTED:
      return {
        ...state,
        campaignLoading: true,
        error: null,
      };
    case types.FETCH_SELECTED_CAMPAIGN_SUCCESS:
      return {
        ...state,
        campaignLoading: false,
        recipients: payload,
      };
    case types.FETCH_SELECTED_CAMPAIGN_ERROR:
      return {...state, campaignLoading: false, error: payload};
    case types.MESSAGE_SUBJECT_CHANGED:
      return helpers.setMessageField('subject', state, payload);
    case types.MESSAGE_BODY_CHANGED:
      return helpers.setMessageField('body', state, payload);
    case types.MESSAGE_CLOSING_CHANGED:
      return helpers.setMessageField('closing', state, payload);
    case types.MESSAGE_SIGNATURE_CHANGED:
      return helpers.setMessageField('signature', state, payload);
    case types.MESSAGE_ADDITIONAL_RESPONSE_CHANGED:
      return helpers.setMessageAdditionalResponse(state, payload);
    case types.SET_MESSAGE_DEFAULTS:
      return {...state, message: payload};
    case types.SEND_CAMPAIGN_MESSAGE_STARTED:
      return {
        ...state,
        sendingMessage: true,
      };
    case types.SEND_CAMPAIGN_MESSAGE_SUCCESS:
      return {
        ...state,
        sendingError: null,
        sendingMessage: false,
      };
    case types.SEND_CAMPAIGN_MESSAGE_ERROR:
      return {
        ...state,
        sendingError: payload,
        sendingMessage: false,
      };
    default:
      return state;
  }
};

// src/utils/components/common/navigation/ShareNavBarButton.js:

import React from 'react';
import {
  View,
  TouchableOpacity,
  StyleSheet,
  Share,
  Platform,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import Ionicon from 'react-native-vector-icons/Ionicons';
import PropTypes from 'prop-types';
import {v2Colors} from 'theme';
import format from 'date-fns/format';
import {connect} from 'react-redux';
import sharingTexts from 'enums/sharingTexts';
import {calculateDifferenceInDays} from 'events/helpers/components-helpers';
import {getRecipientNames} from 'action-alerts/helpers/data-helpers';
import {moderateScale} from 'react-native-size-matters';

export const ShareNavBarButton = ({content, options, visible}) => {
  return visible ? (
    <TouchableOpacity
      onPress={() => {
        Share.share(content, options);
      }}
      style={styles.button}
    >
      {Platform.OS === 'ios' ? (
        <Ionicon
          size={moderateScale(28, 0.2)}
          color={v2Colors.white}
          name="ios-share"
        />
      ) : (
        <Icon
          size={moderateScale(21, 0.2)}
          color={v2Colors.white}
          name="share"
        />
      )}
    </TouchableOpacity>
  ) : (
    <View />
  );
};

ShareNavBarButton.propTypes = {
  content: PropTypes.object.isRequired,
  options: PropTypes.object.isRequired,
  type: PropTypes.string.isRequired,
  visible: PropTypes.bool,
};

const defaultProps = {
  content: {
    message: 'This is the mesage',
    title: 'This is the title',
  },
  options: {
    dialogTitle: 'Dialog Title',
  },
};
ShareNavBarButton.defaultProps = defaultProps;

const styles = StyleSheet.create({
  button: {
    marginRight: 18,
  },
});

const mapState2Props = (state, ownProps) => {
  const {type, selector} = ownProps;
  let visible = true;

  if (type) {
    const {title, message, dialogTitle, url} = sharingTexts[type];
    let shareMessage = message;

    if (type === 'registeredEvent' || type === 'events') {
      const reducer = state.events;
      const event =
        selector === 'selectedEvent'
          ? reducer[selector]
          : reducer[selector].details;

      const displayEndDate = calculateDifferenceInDays(event);
      const formattedStart = format(event.StartDateLocal, 'MMM D, YYYY h:mma');

      const endFormat = displayEndDate ? 'MMM D, YYYY h:mma' : 'h:mma';
      const formattedEnd = format(event.EndDateLocal, endFormat);
      const eventTime = `${formattedStart}-${formattedEnd}`;
      //prettier-ignore
      const locationSummary = `${event.Location.City}, ${event.Location.StateAbbreviation}`;

      shareMessage = shareMessage.replace('<EVENTNAME>', event.Title);
      shareMessage = shareMessage.replace('<EVENTDATE>', eventTime);
      shareMessage = shareMessage.replace('<EVENTLOCATION>', locationSummary);
    }

    if (type === 'articles') {
      const reducer = state.articles;
      const {selectedArticle} = reducer;
      shareMessage = shareMessage.replace(
        '<ARTICLEURL>',
        selectedArticle.FriendlyUrl
      );
    }

    if (type === 'alerts') {
      const {selectedActionAlert} = state.alerts;
      const {Headline} = selectedActionAlert;
      shareMessage = shareMessage.replace('<ALERTNAME>', Headline);
      visible = !selectedActionAlert.IsPrivate;
    }

    if (type === 'representatives') {
      const reducer = state.representatives;
      const {selectedRepresentative} = reducer;
      const {Title, FirstName, LastName} = selectedRepresentative;
      const repName = `${Title} ${FirstName} ${LastName}`;
      shareMessage = shareMessage.replace('<REPNAME>', repName);
    }

    if (type === 'thanksAlert') {
      const {selectedActionAlert, recipients} = state.alerts;
      const {Headline} = selectedActionAlert;
      shareMessage = shareMessage.replace('<ALERTNAME>', Headline);
      shareMessage = shareMessage.replace(
        '<REPNAME>',
        getRecipientNames(recipients)
      );
      visible = !selectedActionAlert.IsPrivate;
    }

    return {
      content: {
        message: shareMessage,
        title,
        url,
      },
      options: {
        dialogTitle,
      },
      visible,
    };
  }

  return defaultProps;
};

export default connect(mapState2Props)(ShareNavBarButton);