diff --git a/App/Components/Avatar.tsx b/App/Components/Avatar.tsx index 0da8a252f..9297868b9 100644 --- a/App/Components/Avatar.tsx +++ b/App/Components/Avatar.tsx @@ -26,6 +26,7 @@ type Props = OwnProps & StateProps & Partial interface State { borderRadius: number showIcon: boolean + defaultSize: number } class Avatar extends React.Component { @@ -34,7 +35,8 @@ class Avatar extends React.Component { super(props) this.state = { borderRadius: 0, - showIcon: false + showIcon: false, + defaultSize: 100 } } @@ -53,9 +55,8 @@ class Avatar extends React.Component { render () { const { style, icon, target, local, started, color } = this.props - const defaultSize = 100 - let width: string | number = defaultSize - let height: string | number = defaultSize + let width: string | number = this.state.defaultSize + let height: string | number = this.state.defaultSize if (style) { if (style.width) { width = height = style.width @@ -64,27 +65,55 @@ class Avatar extends React.Component { } } const { borderRadius: radius } = this.state + // avoid 0 + const borderRadius = radius || Number(width) / 2 if (icon || !started || !target) { - const heightNumber = typeof height === 'number' ? height as number : defaultSize + const heightNumber = typeof height === 'number' ? height as number : this.state.defaultSize + const borderWidth = this.props.style && this.props.style.borderWidth ? this.props.style.borderWidth as number : 0 return ( - + + + ) + + const tintColor = { tintColor: color } + return ( + ) } // local means the target belongs to the local node if (local) { - const widthNumber = typeof width === 'number' ? width as number : defaultSize + const widthNumber = typeof width === 'number' ? width as number : this.state.defaultSize return ( - + { { if (state.textileSearchResults.error) { textileData = [{ key: 'textile_error', type: 'error', data: state.textileSearchResults.error }] } else if (state.textileSearchResults.results && state.textileSearchResults.results.length > 0) { - textileData = state.textileSearchResults.results.map((result) => { - const selector = makeIsKnown(result.id) - const isContact = selector(state) - const adding = Object.keys(state.addingContacts).indexOf(result.id) > -1 - const textileResult: TextileSearchResult = { key: result.id, type: 'textile', data: { contact: result, isContact, adding } } - return textileResult - }) + textileData = state.textileSearchResults.results + .filter((current, index, arr) => { + const sames = arr.filter((el) => el.id === current.id) + if (sames.length === 1) { + return true + } + // If there is a newer entry, filter this one + return !(sames.find((el) => el.updated.seconds > current.updated.seconds || (el.updated.seconds === current.updated.seconds && el.updated.nanos > current.updated.nanos))) + }) + .map((result) => { + const selector = makeIsKnown(result.id) + const isContact = selector(state) + const adding = Object.keys(state.addingContacts).indexOf(result.id) > -1 + const textileResult: TextileSearchResult = { key: result.id, type: 'textile', data: { contact: result, isContact, adding } } + return textileResult + }) } else if (state.textileSearchResults.results && state.textileSearchResults.results.length === 0) { textileData = [{ key: 'textile_empty', type: 'empty' }] }