diff --git a/app/components/HistoryCard.js b/app/components/HistoryCard.js
index ae96e17..e965160 100644
--- a/app/components/HistoryCard.js
+++ b/app/components/HistoryCard.js
@@ -1,401 +1,432 @@
import React, { Component, Fragment} from 'react';
import { View, SafeAreaView, FlatList } 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, List, Text} from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import uuid from 'react-native-uuid';
import EditConferenceModal from './EditConferenceModal';
import styles from '../assets/styles/blink/_HistoryCard.scss';
import UserIcon from './UserIcon';
import utils from '../utils';
function toTitleCase(str) {
return str.replace(
/\w\S*/g,
function(txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
}
);
}
const Item = ({ nr, uri, displayName }) => (
{displayName !== uri?
{displayName} ({uri})
:
{uri}
}
);
const renderItem = ({ item }) => (
-
);
+function isIp(ipaddress) {
+ if (/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ipaddress)) {
+ return (true)
+ }
+ return (false)
+}
class HistoryCard extends Component {
constructor(props) {
super(props);
autoBind(this);
this.state = {
id: this.props.contact.id,
contact: this.props.contact,
displayName: this.props.contact.displayName,
uri: this.props.contact.remoteParty,
invitedParties: this.props.invitedParties,
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,
confirmed: false,
showEditConferenceModal: false
}
-
}
UNSAFE_componentWillReceiveProps(nextProps) {
this.setState({
id: nextProps.contact.id,
contact: nextProps.contact,
displayName: nextProps.contact.displayName,
uri: nextProps.contact.remoteParty,
invitedParties: nextProps.invitedParties,
participants: nextProps.contact.participants,
conference: nextProps.contact.conference,
type: nextProps.contact.type,
photo: nextProps.contact.photo,
label: nextProps.contact.label,
orientation: nextProps.orientation,
favorite: (nextProps.contact.tags.indexOf('favorite') > -1)? true : false,
blocked: (nextProps.contact.tags.indexOf('blocked') > -1)? true : false,
});
}
shouldComponentUpdate(nextProps) {
//https://medium.com/sanjagh/how-to-optimize-your-react-native-flatlist-946490c8c49b
return true;
}
toggleEditConferenceModal() {
this.setState({showEditConferenceModal: !this.state.showEditConferenceModal});
}
saveInvitedParties(uris) {
this.setState({invitedParties: uris});
this.props.saveInvitedParties(this.state.uri.split('@')[0], uris);
}
handleParticipant() {
}
findObjectByKey(array, key, value) {
for (var i = 0; i < array.length; i++) {
if (array[i][key] === value) {
return array[i];
}
}
return null;
}
setBlockedUri() {
let newBlockedState = this.props.setBlockedUri(this.state.uri);
this.setState({blocked: newBlockedState});
}
setBlockedDomain() {
let newBlockedState = this.props.setBlockedUri('@' + this.state.uri.split('@')[1]);
this.setState({blocked: newBlockedState});
}
editConference() {
this.toggleEditConferenceModal();
}
deleteHistoryEntry() {
this.props.deleteHistoryEntry(this.state.uri);
}
undo() {
this.setState({confirmed: false, action: null});
}
setFavoriteUri() {
if (this.state.favorite) {
if (this.state.confirmed) {
let newFavoriteState = this.props.setFavoriteUri(this.state.uri);
this.setState({favorite: newFavoriteState, action: null, confirmed: false});
this.props.setTargetUri(this.state.uri);
} else {
this.setState({confirmed: true});
}
} else {
let newFavoriteState = this.props.setFavoriteUri(this.state.uri);
this.setState({favorite: newFavoriteState});
}
}
setTargetUri(uri, contact) {
this.props.setTargetUri(uri, this.state.contact);
}
render () {
let containerClass = styles.portraitContainer;
let cardClass = styles.card;
let showActions = this.props.contact.showActions && this.props.contact.tags.indexOf('test') === -1;
let uri = this.state.uri;
let username = uri.split('@')[0];
+ let domain = uri.split('@')[1];
+ let isPhoneNumber = username.match(/^(\+|0)(\d+)$/);
+
let displayName = this.state.displayName;
let buttonMode = 'text';
let showBlockButton = !this.state.conference;
let showBlockDomainButton = false;
let showFavoriteButton = true;
let showUndoButton = this.state.confirmed ? true : false;
let showDeleteButton = (this.props.contact.tags.indexOf('local') > -1 && !this.state.favorite ) ? true: false;
let showEditButton = (this.state.conference && this.state.favorite && !this.state.confirmed ) ? true: false;
let blockTextbutton = 'Block';
let blockDomainTextbutton = 'Block domain';
let editTextbutton = 'Edit';
let favoriteTextbutton = 'Favorite';
let undoTextbutton = 'Undo';
let deleteTextbutton = 'Delete';
let participantsData = [];
- if (utils.isAnonymous(uri)) {
- //uri = 'anonymous@anonymous.invalid';
- displayName = 'Anonymous';
- showFavoriteButton = false;
- showBlockButton = true;
- showBlockDomainButton = true;
- }
-
if (this.state.favorite) {
favoriteTextbutton = this.state.confirmed ? 'Confirm' : 'Remove';
if (!this.state.blocked) {
showBlockButton = false;
}
}
if (uri.indexOf('3333@') > -1) {
showBlockButton = false;
}
if (uri.indexOf('4444@') > -1) {
showBlockButton = false;
}
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 = displayName || username;
let subtitle = uri;
let description = this.props.contact.startTime;
if (displayName === uri) {
title = toTitleCase(username);
}
+ if (isPhoneNumber && isIp(domain)) {
+ title = 'Tel ' + username;
+ subtitle = 'From @' + domain;
+ showBlockDomainButton = true;
+ showFavoriteButton = false;
+ }
+
+ if (utils.isAnonymous(uri)) {
+ //uri = 'anonymous@anonymous.invalid';
+ displayName = 'Anonymous';
+ if (uri.indexOf('@guest.') > -1) {
+ subtitle = 'From the Web';
+ }
+ showFavoriteButton = false;
+ showBlockDomainButton = true;
+ if (!this.state.blocked) {
+ showBlockButton = false;
+ }
+ blockDomainTextbutton = 'Block Web calls';
+ }
+
+ if (!username || username.length === 0) {
+ if (isIp(domain)) {
+ title = 'IP domain';
+ } else if (domain.indexOf('guest.') > -1) {
+ title = 'Calls from the Web';
+ } else {
+ title = 'Domain';
+ }
+ }
+
if (this.props.contact.tags.indexOf('history') > -1) {
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) {
let participants = (this.state.invitedParties && this.state.invitedParties.length > 0) ? this.state.invitedParties: this.state.participants;
if (participants && participants.length > 0) {
const p_text = participants.length > 1 ? 'participants' : 'participant';
subtitle = 'With ' + participants.length + ' ' + p_text;
let i = 1;
let contact_obj;
let dn;
let _item;
participants.forEach((participant) => {
contact_obj = this.findObjectByKey(this.props.contacts, 'remoteParty', participant);
dn = contact_obj ? contact_obj.displayName : participant;
_item = {nr: i, id: uuid.v4(), uri: participant, displayName: dn};
participantsData.push(_item);
i = i + 1;
});
} else {
subtitle = 'With no participants';
}
let dn;
if (participantsData.length > 4 || participantsData.length < 2) {
title = username.length > 10 ? 'Conference' : 'Conference ' + toTitleCase(username);
} else if (participantsData.length > 1 || participantsData.length <= 4 ) {
let j = 0;
title = '';
participantsData.forEach((participant) => {
if (participant.displayName === participant.uri) {
dn = toTitleCase(participant.uri.split('@')[0]);
} else {
dn = participant.displayName.split(' ')[0];
}
title = title + dn;
if (j < participantsData.length - 1) {
title = title + ' & ';
}
j = j + 1;
});
}
}
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(uri, this.props.contact)}}
style={[containerClass, cardClass]}
>
{title}
{subtitle}
{description}
{participantsData && participantsData.length && showActions ?
item.id}
key={item => item.id}
/>
: null}
{showActions ?
{showEditButton? : null}
{showDeleteButton? : null}
{showBlockButton? : null}
{showBlockDomainButton? : null}
{showFavoriteButton?: null}
{showUndoButton?: null}
: null}
);
} else {
return (
{this.props.setTargetUri(uri, this.props.contact)}}
style={[containerClass, cardClass]}
>
{title}
{uri}
{this.state.label}
{showActions ?
{showBlockButton? : null}
{showFavoriteButton?: null}
{showUndoButton?: null}
: null}
);
}
}
}
HistoryCard.propTypes = {
id : PropTypes.string,
contact : PropTypes.object,
setTargetUri : PropTypes.func,
setBlockedUri : PropTypes.func,
setFavoriteUri : PropTypes.func,
saveInvitedParties : PropTypes.func,
deleteHistoryEntry : PropTypes.func,
orientation : PropTypes.string,
isTablet : PropTypes.bool,
contacts : PropTypes.array,
defaultDomain : PropTypes.string
};
export default HistoryCard;