Commit 5df2d239 authored by Thor-Herman's avatar Thor-Herman
Browse files

Create PaginationButton #10

parent 7ada86cf
import { Button, Text } from 'native-base';
import { useDispatch, useSelector } from 'react-redux';
import { newPage } from '../actions';
import React from 'react';
import { View } from 'react-native';
import { RootState } from '../reducers';
const PaginationButton = () => {
const dispatch = useDispatch();
const current = useSelector((state: RootState) => state.page.current); // The current page
const total = useSelector((state: RootState) => state.page.total); // Total amount of pages
const determineRender = () => {
// Either show a button for loading more results or show nothing
if (current === total) return null;
return (
<Button
full
info
onPress={() => {
dispatch(newPage(current + 1, total));
}}
>
<Text>Load more...</Text>
</Button>
);
};
return <View>{determineRender()}</View>;
};
export default PaginationButton;
......@@ -5,12 +5,14 @@ import { useDispatch, useSelector } from 'react-redux';
import { Link } from 'react-router-native';
import { searchMovieTitles, searchMovies } from '../actions';
import { RootState } from '../reducers';
import history from '../history';
const SearchBar = () => {
const dispatch = useDispatch();
const handleChange = (e: NativeSyntheticEvent<TextInputChangeEventData>): void => {
e.preventDefault();
const term = e.nativeEvent.text;
dispatch(searchMovieTitles(term)); // Update the search term
}
......@@ -18,6 +20,7 @@ const SearchBar = () => {
const onSubmit = (e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => {
e.preventDefault();
dispatch(searchMovies(true)); // Perform search with current searchTerm
history.push('/');
}
return (
......
......@@ -2,8 +2,9 @@ import { Button, Card, Content } from 'native-base';
import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { newPage, searchMovies } from '../actions';
import { searchMovies } from '../actions';
import MovieCard from '../components/MovieCard';
import PaginationButton from '../components/PaginationButton';
import { selectMoviesByAllIdsOrdering } from '../selectors/movieSelector';
const BrowsePage = () => {
......@@ -34,7 +35,7 @@ const BrowsePage = () => {
return (
<Content>
{determineRender()}
<Button onPress={() => {dispatch(newPage(2, 10))}}><Text>Load more...</Text></Button>
<PaginationButton />
</Content>
);
};
......
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