diff --git a/app/components/HistoryCard.js b/app/components/HistoryCard.js index 1250c0f..6ebc3b5 100644 --- a/app/components/HistoryCard.js +++ b/app/components/HistoryCard.js @@ -1,240 +1,261 @@ import React, { Component} from 'react'; import { View } from 'react-native'; import autoBind from 'auto-bind'; import PropTypes from 'prop-types'; import moment from 'moment'; import momentFormat from 'moment-duration-format'; import { Card, IconButton, Button, Caption, Title, Subheading } from 'react-native-paper'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import styles from '../assets/styles/blink/_HistoryCard.scss'; import UserIcon from './UserIcon'; function toTitleCase(str) { return str.replace( /\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); } ); } class HistoryCard extends Component { constructor(props) { super(props); autoBind(this); this.state = { id: this.props.contact.id, displayName: this.props.contact.displayName, uri: this.props.contact.remoteParty, participants: this.props.contact.participants, conference: this.props.contact.conference, type: this.props.contact.type, photo: this.props.contact.photo, label: this.props.contact.label, orientation: this.props.orientation, isTablet: this.props.isTablet, favorite: (this.props.contact.tags.indexOf('favorite') > -1)? true : false, blocked: (this.props.contact.tags.indexOf('blocked') > -1)? true : false } } shouldComponentUpdate(nextProps) { //https://medium.com/sanjagh/how-to-optimize-your-react-native-flatlist-946490c8c49b return true; } setBlockedUri() { let newBlockedState = this.props.setBlockedUri(this.state.uri); this.setState({blocked: newBlockedState}); } deleteHistoryEntry() { this.props.deleteHistoryEntry(this.state.uri); } setFavoriteUri() { let newFavoriteState = this.props.setFavoriteUri(this.state.uri); this.setState({favorite: newFavoriteState}); } setTargetUri(uri, contact) { + if (this.isAnonymous(this.state.uri)) { + return; + } + this.props.setTargetUri(this.state.uri, this.props.contact); } + isAnonymous(uri) { + if (uri.search('@guest.') > -1 || uri.search('@anonymous.') > -1) { + return true + } + + return false; + } + render () { let containerClass = styles.portraitContainer; let cardClass = styles.card; //console.log('Render card', this.state.uri, this.state.orientation); let showActions = this.props.contact.showActions && this.props.contact.tags.indexOf('test') === -1; + let uri = this.state.uri; + let displayName = this.state.displayName; + let buttonMode = 'text'; - let showBlockButton = this.state.uri.search('@videoconference.') === -1 ? true : false; + let showBlockButton = uri.search('@videoconference.') === -1 ? true : false; let showFavoriteButton = true; let showDeleteButton = this.props.contact.tags.indexOf('local') > -1 ? true: false; let blockTextbutton = 'Block'; let favoriteTextbutton = 'Favorite'; let deleteTextbutton = 'Delete'; + if (this.isAnonymous(uri)) { + uri = 'anonymous@anonymous.invalid'; + displayName = displayName + ' - from the Web'; + let showFavoriteButton = false; + } + if (this.state.favorite) { favoriteTextbutton = 'Remove favorite'; if (!this.state.blocked) { showBlockButton = false; } } - if (this.state.uri.search('3333@') === -1) { + if (uri.search('3333@') === -1) { showBlockButton = false; } - if (this.state.uri.search('4444@') === -1) { + if (uri.search('4444@') === -1) { showBlockButton = false; } - if (this.state.displayName === 'Myself') { + if (displayName === 'Myself') { showBlockButton = false; } if (this.state.blocked) { blockTextbutton = 'Unblock'; showFavoriteButton = false; } if (this.state.isTablet) { containerClass = (this.state.orientation === 'landscape') ? styles.landscapeTabletContainer : styles.portraitTabletContainer; } else { containerClass = (this.state.orientation === 'landscape') ? styles.landscapeContainer : styles.portraitContainer; } if (showActions) { cardClass = styles.expandedCard; } let color = {}; - let title = this.state.displayName || this.state.uri.split('@')[0]; - let subtitle = this.state.uri; + let title = displayName || uri.split('@')[0]; + let subtitle = uri; let description = this.props.contact.startTime; - if (this.state.displayName === this.state.uri) { - title = toTitleCase(this.state.uri.split('@')[0]); + if (displayName === uri) { + title = toTitleCase(uri.split('@')[0]); } if (this.state.type === 'history') { let duration = moment.duration(this.props.contact.duration, 'seconds').format('hh:mm:ss', {trim: false}); if (this.props.contact.direction === 'received' && this.props.contact.duration === 0) { color.color = '#a94442'; duration = 'missed'; } else if (this.props.contact.direction === 'placed' && this.props.contact.duration === 0) { duration = 'cancelled'; } if (this.state.conference) { if (this.state.participants && this.state.participants.length) { subtitle = 'With: '; let i = 0; this.state.participants.forEach((participant) => { if (i > 0) { subtitle = subtitle + ', ' + participant.split('@')[0]; } else { subtitle = subtitle + participant.split('@')[0]; } }); } else { subtitle = 'No participants'; } } - if (!this.state.displayName) { - title = this.state.uri; + if (!displayName) { + title = uri; if (duration === 'missed') { subtitle = 'Last call missed'; } else if (duration === 'cancelled') { subtitle = 'Last call cancelled'; } else { subtitle = 'Last call duration ' + duration ; } } description = description + ' (' + duration + ')'; return ( {this.setTargetUri(this.state.uri, this.props.contact)}} + onPress={() => {this.setTargetUri(uri, this.props.contact)}} style={[containerClass, cardClass]} > {title} {subtitle} {description} {showActions ? {showDeleteButton? : null} {showBlockButton? : null} {showFavoriteButton?: null} : null} ); } else { return ( {this.props.setTargetUri(this.state.uri, this.props.contact)}} + onPress={() => {this.props.setTargetUri(uri, this.props.contact)}} style={[containerClass, cardClass]} > {title} - {this.state.uri} + {uri} {this.state.label} {showActions ? {showBlockButton? : null} {showFavoriteButton?: null} : null} ); } } } HistoryCard.propTypes = { id : PropTypes.string, contact : PropTypes.object, setTargetUri : PropTypes.func, setBlockedUri : PropTypes.func, setFavoriteUri : PropTypes.func, deleteHistoryEntry : PropTypes.func, orientation : PropTypes.string, isTablet : PropTypes.bool }; export default HistoryCard;