/
List.js
101 lines (91 loc) · 2.57 KB
/
List.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
// TODO: create generic contact list with pagination
import React, { PureComponent } from 'react'
import { Screen, Header, ContactList } from '../../Library'
import { colors } from '../../../constants'
import { QueryReducer } from '../../../relay'
import { queries, subscriptions } from '../../../graphql'
// TODO: implement pagination
export default class List extends PureComponent {
static navigationOptions = ({ navigation }) => ({
header: (
<Header
navigation={navigation}
title='Contacts'
titleIcon='feather-users'
rightBtnIcon='user-plus'
onPressRightBtn={() => navigation.push('Add')}
searchBar
searchHandler={navigation.getParam('searchHandler')}
/>
),
tabBarVisible: true,
})
componentDidMount () {
this.subscribers = [
subscriptions.contactRequest.subscribe({
updater: (store, data) => this.retry && this.retry(),
}),
subscriptions.contactRequestAccepted.subscribe({
updater: (store, data) => this.retry && this.retry(),
}),
]
}
componentWillUnmount () {
this.subscribers.forEach(subscriber => subscriber.unsubscribe())
}
render () {
const { navigation } = this.props
return (
<Screen style={[{ backgroundColor: colors.white }]}>
<QueryReducer query={queries.ContactList}>
{(state, retry) =>
(this.retry = retry) && (
<ContactListWrapper
state={state}
retry={retry}
navigation={navigation}
/>
)
}
</QueryReducer>
</Screen>
)
}
}
class ContactListWrapper extends PureComponent {
state = {
list: [].concat(this.props.state.data.ContactList || []),
filtered: [].concat(this.props.state.data.ContactList || []),
}
searchHandler = text => {
if (text === '') {
this.setState(state => {
return { filtered: state.list }
})
} else {
this.setState({
filtered: this.state.list.filter(
entry =>
entry.displayName.toLowerCase().indexOf(text.toLowerCase()) > -1
),
})
}
}
componentDidMount () {
this.props.navigation.setParams({ searchHandler: this.searchHandler })
}
render () {
const { state, retry, navigation } = this.props
return (
<ContactList
list={this.state.filtered}
sortBy='displayName'
state={state}
retry={retry}
subtitle='Last seen 3 hours ago ...' // Placeholder
action='Detail'
navigation={navigation}
/>
)
}
}