BrowsePage.tsx 1.84 KB
Newer Older
1
import { StackNavigationProp } from '@react-navigation/stack';
2
import { Button, Card, Content } from 'native-base';
3
import React, { useEffect, useState } from 'react';
4
import { View, Text } from 'react-native';
5
import { TouchableNativeFeedback } from 'react-native-gesture-handler';
6
7
import { useDispatch, useSelector } from 'react-redux';
import { searchMovies } from '../actions';
8
import { StackParamList } from '../components/App';
9
import MovieCard from '../components/MovieCard';
10
import PaginationButton from '../components/PaginationButton';
11
import SearchBar from '../components/SearchBar';
12
import { selectMoviesByAllIdsOrdering } from '../selectors/movieSelector';
13

14
type BrowseScreenNavigationProp = StackNavigationProp<StackParamList, 'Browse'>;
15
16
17
18
19
type Props = {
  navigation: BrowseScreenNavigationProp;
};

const BrowsePage = ({navigation}: Props) => {
20
  const dispatch = useDispatch();
21
  const movies = useSelector(selectMoviesByAllIdsOrdering);
22
23
24
25
26
27
  const movieElements = Object.values(movies).map((movie) => ( // List of all the movies that returned from the search
    <MovieCard
      id={movie.id}
      image={movie.image}
      title={movie.title}
      key={movie.id}
28
      onPress={() => navigation.navigate('Movie', {id: movie.id})}
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
    />
  ));
  const determineRender = () => {
    return movieElements.length === 0 ? (
      <Text>No movies could be found for those criteria :-(</Text>
    ) : (
      <Card>
        {movieElements}
      </Card>
    );
  };

  useEffect(() => { // Does an initial search for all movies when page launches
    dispatch(searchMovies(true));
  }, []);

45
  return (
46
    <Content>
47
      <View>
48
      <SearchBar />
49
50
51
52
      <Button onPress={() => navigation.navigate('Filter')}>
        <Text>Filter</Text>
      </Button>
      </View>
53
      {determineRender()}
54
      <PaginationButton />
55
    </Content>
56
57
58
59
  );
};

export default BrowsePage;