Skip to content

Commit

Permalink
feat(core): event list filter by acked at
Browse files Browse the repository at this point in the history
  • Loading branch information
Guillaume Louvigny committed Nov 7, 2018
1 parent f7db7f9 commit 30079ef
Show file tree
Hide file tree
Showing 19 changed files with 466 additions and 219 deletions.
72 changes: 72 additions & 0 deletions client/react-native/common/components/Library/Filters.js
@@ -0,0 +1,72 @@
import React from 'react'
import { StackActions } from 'react-navigation'
import ModalScreen from './ModalScreen'
import { Switch, Text } from 'react-native'
import { Rows, Cols } from './Flex'
import { Text as FlexText } from './Text'
import Button from './Button'
import { padding } from '../../styles'

export class FilterModal extends React.Component {
constructor (props) {
super(props)

this.state = {
...this.props.defaultData,
}
}

onDismiss = () => {
this.resetState()
this.close()
}

onFilter = () => {
const onSave = this.props.navigation.getParam('onSave')

if (!onSave) {
console.error('onSave is not defined')
}

onSave(this.state)

this.close()
}

close = () => {
this.props.navigation.dispatch(StackActions.pop({
n: 1,
}))
}

resetState = () => {
this.setState({
...this.state,
...this.props.defaultData,
})
}

render = () => <ModalScreen navigation={this.props.navigation} onDismiss={() => this.onDismiss()}>
<Rows style={[padding]} align='center'>
{this.props.title ? <Text>{this.props.title}</Text> : null}
{React.Children.map(this.props.children, child => React.cloneElement(child, {
onChange: value => this.setState({ [child.props.name]: value }),
value: this.state[child.props.name],
}))}
<Cols>
<Button onPress={() => this.onDismiss()}>Cancel</Button>
<Button onPress={() => this.onFilter()}>Filter</Button>
</Cols>
</Rows>
</ModalScreen>
}

// Impl for this is really bad, move to radio buttons instead
export const PickerFilter = ({ value, onChange, choices }) => <Rows style={{ flex: 1, width: '100%' }}>
{choices.map(({ value: choiceValue, label }) =>
<Cols size={1} key={choiceValue}>
<Switch value={value === choiceValue} onValueChange={() => onChange(choiceValue)} style={{ width: 50 }} />
<FlexText>{label}</FlexText>
</Cols>,
)}
</Rows>
36 changes: 10 additions & 26 deletions client/react-native/common/components/Library/Header.js
@@ -1,10 +1,8 @@
import React, { PureComponent } from 'react'
import { TextInput, View, Platform } from 'react-native'
import { Button, Flex, Text } from '.'
import { View } from 'react-native'
import { Button, Flex, Text, SearchBar } from '.'
import { colors } from '../../constants'
import {
paddingLeft,
paddingRight,
padding,
borderBottom,
paddingBottom,
Expand Down Expand Up @@ -42,6 +40,13 @@ export default class Header extends PureComponent {
? defaultTextColor
: this.props.colorBtnRight

let searchBarComponent = null
if (searchBar === true) {
searchBarComponent = <SearchBar onChangeText={text => searchHandler(text)} />
} else if (searchBar !== undefined && searchBar !== false) {
searchBarComponent = searchBar
}

return (
<View
style={[
Expand Down Expand Up @@ -91,28 +96,7 @@ export default class Header extends PureComponent {
)}
</Flex.Cols>

{searchBar === true && (
<Flex.Cols size={1} style={[paddingBottom]}>
<TextInput
underlineColorAndroid='transparent'
autoCorrect={false}
style={[
{
height: 36,
flex: 1,
backgroundColor: colors.grey7,
borderWidth: 0,
borderRadius: 18,
...(Platform.OS === 'web' ? { outline: 'none' } : {}),
},
paddingLeft,
paddingRight,
]}
placeholder='Search...'
onChangeText={text => searchHandler(text)}
/>
</Flex.Cols>
)}
{searchBarComponent}
</Flex.Rows>
</View>
)
Expand Down
13 changes: 9 additions & 4 deletions client/react-native/common/components/Library/ModalScreen.js
Expand Up @@ -27,10 +27,15 @@ const ModalScreen = props => {
backgroundColor: colors.white,
flex: 1,
}}>
<Button onPress={() => navigation.dispatch(StackActions.pop({
n: 1,
}))
}>Dismiss</Button>
<Button onPress={() => {
navigation.dispatch(StackActions.pop({
n: 1,
}))

if (this.props.onDismiss !== undefined) {
this.props.onDismiss()
}
}}>Dismiss</Button>
</View>
{children}
</View>
Expand Down
28 changes: 28 additions & 0 deletions client/react-native/common/components/Library/SearchBar.js
@@ -0,0 +1,28 @@
import { paddingBottom, paddingLeft, paddingRight } from '../../styles'
import { TextInput, Platform } from 'react-native'
import { colors } from '../../constants'
import React from 'react'
import { Flex } from '.'

export default props => <Flex.Cols size={1} style={[paddingBottom]}>
<TextInput
underlineColorAndroid='transparent'
autoCorrect={(props.autoCorrect !== undefined && props.autoCorrect) || false}
style={[
...(props.style || []),
{
height: 36,
flex: 1,
backgroundColor: colors.grey7,
borderWidth: 0,
borderRadius: 18,
...(Platform.OS === 'web' ? { outline: 'none' } : {}),
},
paddingLeft,
paddingRight,
]}
placeholder={props.placeholder !== undefined ? props.placeholder : 'Search...'}
onChangeText={props.onChangeText}
/>
{props.children}
</Flex.Cols>
1 change: 1 addition & 0 deletions client/react-native/common/components/Library/index.js
Expand Up @@ -12,3 +12,4 @@ export Button from './Button'
export CustomTextInput from './CustomTextInput.js'
export Badge from './Badge'
export ModalScreen from './ModalScreen'
export SearchBar from './SearchBar'
@@ -1,16 +1,12 @@
import {
ActivityIndicator,
FlatList,
Text,
TouchableOpacity,
} from 'react-native'
import { ActivityIndicator, FlatList, Text, TouchableOpacity } from 'react-native'
import React, { PureComponent } from 'react'

import { Flex, Header, Screen, Separator } from '../../../Library'
import { Flex, Header, Icon, Screen, SearchBar, Separator } from '../../../Library'
import { QueryReducer } from '../../../../relay'
import { colors } from '../../../../constants'
import { marginLeft, padding } from '../../../../styles'
import { queries, fragments } from '../../../../graphql'
import { fragments, queries } from '../../../../graphql'
import { FilterModal, PickerFilter } from '../../../Library/Filters'

const Item = fragments.Event(({ data, navigation }) => (
<TouchableOpacity
Expand Down Expand Up @@ -78,7 +74,7 @@ const List = fragments.EventList(
entry =>
entry.id.toLowerCase().indexOf(search.toLowerCase()) > -1 ||
entry.kind.toLowerCase().indexOf(search.toLowerCase()) > -1 ||
entry.createdAt.toLowerCase().indexOf(search.toLowerCase()) > -1
entry.createdAt.toLowerCase().indexOf(search.toLowerCase()) > -1,
)
}
}
Expand Down Expand Up @@ -115,28 +111,63 @@ const List = fragments.EventList(
/>
)
}
}
},
)
export default class EventList extends PureComponent {
static navigationOptions = ({ navigation }) => ({
header: (
<Header
navigation={navigation}
title='List events'
titleIcon='list'
searchBar
searchHandler={navigation.getParam('searchHandler')}
backBtn
/>
),
})
constructor (props) {
super(props)

this.state = {
filters: {},
}
}

componentWillMount () {
this.props.navigation.setParams({
component: this,
})
}

static navigationOptions ({ navigation }) {
return {
header: (
<Header
navigation={navigation}
title='List events'
titleIcon='list'
searchBar={
<SearchBar onChangeText={navigation.getParam('searchHandler')}>
<TouchableOpacity onPress={() => {
navigation.push('modal/devtools/event/list/filters', {
defaultData: navigation.getParam('component').state.filters,
onSave: filters => navigation.getParam('component').setState({ filters: filters }),
})
}}>
<Icon name={'filter'} style={{ fontSize: 24 }} />
</TouchableOpacity>
</SearchBar>
}
backBtn
/>
),
}
}

render () {
console.log(['EventListFilter', {
...queries.EventList.defaultVariables,
...this.state.filters,
}])

const { navigation } = this.props
return (
<Screen style={{ backgroundColor: colors.white }}>
<QueryReducer
query={queries.EventList}
variables={queries.EventList.defaultVariables}
variables={{
...queries.EventList.defaultVariables,
...this.state.filters,
}}
>
{(state, retry) => {
console.log(state)
Expand Down Expand Up @@ -166,3 +197,14 @@ export default class EventList extends PureComponent {
)
}
}

export const EventListFilterModal = ({ navigation }) =>
<FilterModal title={'Filter events'} navigation={navigation} defaultData={navigation.getParam('defaultData')}>
<PickerFilter
name='onlyWithoutAckedAt'
choices={[
{ value: 0, label: 'All values' },
{ value: 1, label: 'Acked at is defined' },
{ value: 2, label: 'Acked at is not defined' },
]} />
</FilterModal>
Expand Up @@ -2,7 +2,7 @@ import { createSubStackNavigator } from '../../../../helpers/react-navigation'
import List from './List'
import Database from './Database'
import Network from './Network'
import EventList from './EventList'
import EventList, { EventListFilterModal } from './EventList'
import EventDetails from './EventDetails'
import DeviceInfos from './DeviceInfos'
import Tests from './Tests'
Expand All @@ -14,6 +14,7 @@ export default createSubStackNavigator(
'devtools/database': Database,
'devtools/network': Network,
'devtools/eventlist': EventList,
'devtools/eventlistfilter': EventListFilterModal,
'devtools/eventdetails': EventDetails,
'devtools/deviceinfos': DeviceInfos,
'devtools/tests': Tests,
Expand Down
14 changes: 7 additions & 7 deletions client/react-native/common/components/Screens/Settings/List.js
Expand Up @@ -29,6 +29,13 @@ export default class List extends PureComponent {
onPress={() => navigation.push('settings/my-account')}
/>
</Menu.Section>
<Menu.Section>
<Menu.Item
icon='terminal'
title='Dev tools'
onPress={() => navigation.push('settings/devtools')}
/>
</Menu.Section>
<Menu.Section>
<Menu.Item
icon='lock'
Expand Down Expand Up @@ -70,13 +77,6 @@ export default class List extends PureComponent {
onPress={() => navigation.push('settings/legal')}
/>
</Menu.Section>
<Menu.Section>
<Menu.Item
icon='terminal'
title='Dev tools'
onPress={() => navigation.push('settings/devtools')}
/>
</Menu.Section>
</Menu>
)

Expand Down
4 changes: 4 additions & 0 deletions client/react-native/common/components/Screens/index.js
Expand Up @@ -7,6 +7,7 @@ import Settings from './Settings'
import { colors } from '../../constants'
import { borderTop, shadow } from '../../styles'
import { ByPublicKeyModal } from './Contacts/Add/ByPublicKey'
import { EventListFilterModal } from './Settings/Devtools/EventList'

export const mainTabs = createTabNavigator(
{
Expand Down Expand Up @@ -46,6 +47,9 @@ export default createStackNavigator(
'modal/contacts/add/by-public-key': {
screen: ByPublicKeyModal,
},
'modal/devtools/event/list/filters': {
screen: EventListFilterModal,
},
},
{
mode: 'card',
Expand Down
3 changes: 2 additions & 1 deletion client/react-native/common/graphql/queries/EventList.js
Expand Up @@ -6,8 +6,9 @@ const EventList = graphql`
$filter: BertyP2pEventInput
$count: Int32
$cursor: String
$onlyWithoutAckedAt: Enum
) {
...EventList @arguments(filter: $filter, count: $count, cursor: $cursor)
...EventList @arguments(filter: $filter, count: $count, cursor: $cursor, onlyWithoutAckedAt: $onlyWithoutAckedAt)
}
`

Expand Down
2 changes: 2 additions & 0 deletions client/react-native/common/schema.graphql

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 30079ef

Please sign in to comment.