Commit 60e39e09 authored by Thor-Herman's avatar Thor-Herman
Browse files

Add navigation to MoviePage on press #12 #11

parent d025594e
import { Body, Card, H2, CardItem, View } from 'native-base';
import { Body, Card, H2, CardItem, View, Text } from 'native-base';
import { Image, StyleSheet } from 'react-native';
import React from 'react';
import { Link } from 'react-router-native';
import { TouchableNativeFeedback } from 'react-native-gesture-handler';
type Props = {
id: number;
title: string;
image: string;
onPress: () => void;
};
const MovieCard = (props: Props) => {
return (
<Link to={`/movie/${props.id}`}>
<TouchableNativeFeedback
onPress={props.onPress}
>
<CardItem bordered style={styles.cardItem}>
<View style={styles.imageView}>
<Image source={{ uri: props.image }} style={styles.image} />
......@@ -20,7 +23,7 @@ const MovieCard = (props: Props) => {
<H2>{props.title}</H2>
</Body>
</CardItem>
</Link>
</TouchableNativeFeedback>
);
};
......
import { StackNavigationProp } from '@react-navigation/stack';
import { Button, Card, Content } from 'native-base';
import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import { TouchableNativeFeedback } from 'react-native-gesture-handler';
import { useDispatch, useSelector } from 'react-redux';
import { searchMovies } from '../actions';
import { StackParamList } from '../components/App';
import MovieCard from '../components/MovieCard';
import PaginationButton from '../components/PaginationButton';
import { selectMoviesByAllIdsOrdering } from '../selectors/movieSelector';
const BrowsePage = () => {
type BrowseScreenNavigationProp = StackNavigationProp<StackParamList, 'Movie'>;
type Props = {
navigation: BrowseScreenNavigationProp;
};
const BrowsePage = ({navigation}: Props) => {
const dispatch = useDispatch();
const movies = useSelector(selectMoviesByAllIdsOrdering);
const movieElements = Object.values(movies).map((movie) => ( // List of all the movies that returned from the search
......@@ -16,6 +24,7 @@ const BrowsePage = () => {
image={movie.image}
title={movie.title}
key={movie.id}
onPress={() => navigation.navigate('Movie', {id: movie.id})}
/>
));
const determineRender = () => {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment