Skip to content

Commit db82662

Browse files
piashcsepiashcse
authored
- Fixing pagination and added placeholder (#2)
* - Fixing pagination and added placeholder * - Fixing pagination and added placeholder * - Fixing pagination and added placeholder
1 parent af7e622 commit db82662

File tree

9 files changed

+850
-475
lines changed

9 files changed

+850
-475
lines changed

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,9 @@
3030
"redux-saga": "^1.2.2"
3131
},
3232
"devDependencies": {
33-
"@babel/core": "^7.20.0",
34-
"@babel/preset-env": "^7.20.0",
35-
"@babel/runtime": "^7.20.0",
33+
"@babel/core": "^7.22.1",
34+
"@babel/preset-env": "^7.22.1",
35+
"@babel/runtime": "^7.22.1",
3636
"@react-native-community/eslint-config": "^3.0.0",
3737
"@tsconfig/react-native": "^2.0.2",
3838
"@types/jest": "^29.2.1",

‎src/assets/placeholder.jpeg‎

38 KB
Loading

‎src/components/movielist/MovieList.tsx‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,28 @@
1-
import React from 'react';
2-
import {FlatList, Image, View, TouchableOpacity} from "react-native";
1+
import React, {useState} from 'react';
2+
import {FlatList, Image, View, TouchableOpacity, ImageBackground} from "react-native";
33
import styles from "./MovieListStyle";
44
import {Constants} from "../../appconstants/AppConstants";
55

66

77
const MovieList = ({movies, onPress, loadMoreData}) => {
8+
const [isLoading, setIsLoading] = useState(true)
89
// movie items for movie list
910
const movieItem = ({item}) => {
1011
return (<TouchableOpacity style={styles.movieItemContainer} onPress={() => onPress(item)}>
11-
<Image
12-
style={styles.imageView}
13-
source={{
14-
uri: `${Constants.IMAGE_URL}${item.poster_path}`,
15-
}}/>
12+
<ImageBackground
13+
imageStyle={{borderRadius: 18}}
14+
source={isLoading ? require('../../assets/placeholder.jpeg') : {uri: `${Constants.IMAGE_URL}${item.poster_path}`}}
15+
>
16+
<Image
17+
style={styles.imageView}
18+
source={{
19+
uri: `${Constants.IMAGE_URL}${item.poster_path}`,
20+
}}
21+
onLoadEnd={() => {
22+
setIsLoading(false)
23+
}}
24+
/>
25+
</ImageBackground>
1626
</TouchableOpacity>)
1727
};
1828

‎src/redux/sagas/movielist/index.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ import {getArtistDetail, artistDetailSuccess, artistDetailFailure} from '../../r
1212

1313
function* movieListApi(action: any) {
1414
try {
15-
const response = yield call(AxiosService.getServiceData, ApiUrls.MOVIE_LIST, action.payload.page);
15+
console.log('>> List >> ', action);
16+
const response = yield call(AxiosService.getServiceData, ApiUrls.MOVIE_LIST, action.payload);
1617
const result = response.data;
1718
yield put(movieListSuccess(result));
1819
} catch (error) {
@@ -22,7 +23,7 @@ function* movieListApi(action: any) {
2223

2324
function* popularMovieListApi(action: any) {
2425
try {
25-
const response = yield call(AxiosService.getServiceData, ApiUrls.POPULAR_MOVIE_LIST, action.payload.page);
26+
const response = yield call(AxiosService.getServiceData, ApiUrls.POPULAR_MOVIE_LIST, action.payload);
2627
const result = response.data;
2728
yield put(popularMovieSuccess(result));
2829
} catch (error) {
@@ -32,7 +33,7 @@ function* popularMovieListApi(action: any) {
3233

3334
function* topRatedMovieListApi(action: any) {
3435
try {
35-
const response = yield call(AxiosService.getServiceData, ApiUrls.TOP_RATED_MOVIE_LIST, action.payload.movieId);
36+
const response = yield call(AxiosService.getServiceData, ApiUrls.TOP_RATED_MOVIE_LIST, action.payload);
3637
const result = response.data;
3738
yield put(topRatedMovieSuccess(result));
3839
} catch (error) {
@@ -42,7 +43,7 @@ function* topRatedMovieListApi(action: any) {
4243

4344
function* upComingMovieListApi(action: any) {
4445
try {
45-
const response = yield call(AxiosService.getServiceData, ApiUrls.UP_COMING_MOVIE_LIST, action.payload.movieId);
46+
const response = yield call(AxiosService.getServiceData, ApiUrls.UP_COMING_MOVIE_LIST, action.payload);
4647
const result = response.data;
4748
yield put(upcomingMovieSuccess(result));
4849
} catch (error) {
@@ -62,7 +63,7 @@ function* movieDetailApi(action: any) {
6263

6364
function* similarMovieApi(action: any) {
6465
try {
65-
const response = yield call(AxiosService.getServiceData, ApiUrls.SIMILAR_MOVIE(action.payload.movieId));
66+
const response = yield call(AxiosService.getServiceData, ApiUrls.SIMILAR_MOVIE(action.payload.movieId), {});
6667
const result = response.data;
6768
yield put(similarMovieSuccess(result));
6869
} catch (error) {

‎src/screens/home/Home.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {useEffect} from 'react';
1+
import React, {useEffect, useState} from 'react';
22
import {useSelector, useDispatch} from 'react-redux';
33
import Loading from '../../components/loading/Loading';
44
import MovieList from '../../components/movielist/MovieList';
@@ -10,18 +10,19 @@ let pageNum = 1
1010
const Home = ({navigation}) => {
1111
//communicate with redux
1212
const {isLoading, movieList} = useSelector(state => state.movieListReducer);
13+
const [pageNumber, setPageNumber] = useState(1)
1314
const dispatch = useDispatch();
1415

1516
// Api call
1617
useEffect(() => {
17-
dispatch(getMovieList({page: pageNum}))
18-
}, [])
18+
dispatch(getMovieList({page: pageNumber}))
19+
}, [pageNumber])
1920

2021
return (<View style={styles.mainView}>
2122
<MovieList
2223
movies={movieList}
2324
loadMoreData={() => {
24-
dispatch(getMovieList({page: ++pageNum}))
25+
setPageNumber( pageNumber + 1)
2526
}}
2627
onPress={(item) => navigation.navigate('MovieDetail', {movieId: item.id})}/>
2728
{isLoading && <Loading/>}

‎src/screens/popular/Popular.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
import React, {useEffect} from 'react';
1+
import React, {useEffect, useState} from 'react';
22
import {useSelector, useDispatch} from 'react-redux';
33
import Loading from '../../components/loading/Loading';
44
import MovieList from '../../components/movielist/MovieList';
55
import styles from './PopularStyle'
66
import {View} from "react-native";
77
import {getPopularMovie} from "../../redux/reducer/popularmovie";
88

9-
let pageNum = 1
109
const Popular = ({navigation}) => {
1110
//communicate with redux
1211
const {isLoading, movieList} = useSelector(state => state.popularMovieReducer);
12+
const [pageNumber, setPageNumber] = useState(1)
1313
const dispatch = useDispatch();
1414

1515
// Api call
1616
useEffect(() => {
17-
dispatch(getPopularMovie({page: pageNum}))
18-
}, [])
17+
dispatch(getPopularMovie({page: pageNumber}))
18+
}, [pageNumber])
1919

2020
// main view with loading while api call is going on
2121
return (<View style={styles.mainView}>
2222
<MovieList
2323
movies={movieList}
2424
loadMoreData={() => {
25-
dispatch(getPopularMovie({page: ++pageNum}))
25+
setPageNumber( pageNumber + 1)
2626
}}
2727
onPress={(item) => navigation.navigate('MovieDetail', {movieId: item.id})}/>
2828
{isLoading && <Loading/>}

‎src/screens/toprated/TopRated.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
import React, {useEffect} from 'react';
1+
import React, {useEffect, useState} from 'react';
22
import {useSelector, useDispatch} from 'react-redux';
33
import Loading from '../../components/loading/Loading';
44
import MovieList from '../../components/movielist/MovieList';
55
import styles from './TopRatedStyle'
66
import {View} from "react-native";
77
import {getTopRatedMovie} from "../../redux/reducer/toprated";
88

9-
let pageNum = 1
109
const TopRated = ({navigation}) => {
1110
//communicate with redux
1211
const {isLoading, movieList} = useSelector(state => state.topRatedMovieReducer);
12+
const [pageNumber, setPageNumber] = useState(1)
1313
const dispatch = useDispatch();
1414

1515
// Api call
1616
useEffect(() => {
17-
dispatch(getTopRatedMovie({page: pageNum}))
18-
}, [])
17+
dispatch(getTopRatedMovie({page: pageNumber}))
18+
}, [pageNumber])
1919

2020
// main view with loading while api call is going on
2121
return (<View style={styles.mainView}>
2222
<MovieList
2323
movies={movieList}
2424
loadMoreData={() => {
25-
dispatch(getTopRatedMovie({page: ++pageNum}))
25+
setPageNumber( pageNumber + 1)
2626
}}
2727
onPress={(item) => navigation.navigate('MovieDetail', {movieId: item.id})}/>
2828
{isLoading && <Loading/>}

‎src/screens/upcoming/UpComing.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
import React, {useEffect} from 'react';
1+
import React, {useEffect, useState} from 'react';
22
import {useSelector, useDispatch} from 'react-redux';
33
import Loading from '../../components/loading/Loading';
44
import MovieList from '../../components/movielist/MovieList';
55
import styles from './UpComingStyle'
66
import {View} from "react-native";
77
import {getUpComingMovie} from "../../redux/reducer/upcoming";
88

9-
let pageNum = 1
109
const UpComing = ({navigation}) => {
1110
//communicate with redux
1211
const {isLoading, movieList} = useSelector(state => state?.upComingMovieReducer);
12+
const [pageNumber, setPageNumber] = useState(1)
1313
const dispatch = useDispatch();
1414

1515
// Api call
1616
useEffect(() => {
17-
dispatch(getUpComingMovie({pageNum: pageNum}))
18-
}, [])
17+
dispatch(getUpComingMovie({page: pageNumber}))
18+
}, [pageNumber])
1919

2020
// main view with loading while api call is going on
2121
return (<View style={styles.mainView}>
2222
<MovieList
2323
movies={movieList}
2424
loadMoreData={() => {
25-
dispatch(getUpComingMovie({page: ++pageNum}))
25+
setPageNumber( pageNumber + 1)
2626
}}
2727
onPress={(item) => navigation.navigate('MovieDetail', {movieId: item?.id})}/>
2828
{isLoading && <Loading/>}

0 commit comments

Comments
 (0)