FilterScreen.tsx 1.54 KB
Newer Older
1
import React from 'react';
2
3
4
5
6
7
8
9
10
11
12
13
14
import {
  Button,
  Form,
  Text,
  View,
} from 'native-base';
import { StackParamList } from '../components/App';
import { StackNavigationProp } from '@react-navigation/stack';
import _ from 'lodash';
import FilterList from '../components/FilterList';
import OrderingPicker from '../components/OrderingPicker';
import { StyleSheet } from 'react-native';
import { useDispatch } from 'react-redux';
15
import { searchMovies } from '../actions';
16
17
18
19
20
21

type FilterScreenNavigationProp = StackNavigationProp<StackParamList, 'Filter'>;
type Props = {
  navigation: FilterScreenNavigationProp;
};

22
// Shows the different available filter options in its own page
Thor-Herman's avatar
Thor-Herman committed
23
const FilterScreen = ({ navigation }: Props) => {
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
  const dispatch = useDispatch();
  return (
    <View>
      <View style={styles.filteringView}>
        <Form>
          <FilterList />
          <OrderingPicker />
        </Form>
      </View>
      <View style={styles.buttonView}>
        <Button
          info
          onPress={() => {
            dispatch(searchMovies(true));
            navigation.goBack();
          }}
          style={styles.button}
        >
          <Text>Apply</Text>
        </Button>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  filteringView: { display: 'flex', justifyContent: 'space-between' },
  buttonView: {
    flexDirection: 'row',
    justifyContent: 'center',
    paddingTop: 160,
  },
  button: {
    display: 'flex',
    justifyContent: 'center',
    padding: 15,
    borderRadius: 10,
  },
});

Thor-Herman's avatar
Thor-Herman committed
64
export default FilterScreen;