- Fixing pagination and added placeholder (#2)

* - Fixing pagination and added placeholder * - Fixing pagination and added placeholder * - Fixing pagination and added placeholder
piashcse · May 28, 2023 · db82662 · db82662
1 parent af7e622
commit db82662
Show file tree

Hide file tree

Showing 9 changed files with 850 additions and 475 deletions.
diff --git a/package.json b/package.json
@@ -30,9 +30,9 @@
     "redux-saga": "^1.2.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@babel/preset-env": "^7.20.0",
-    "@babel/runtime": "^7.20.0",
+    "@babel/core": "^7.22.1",
+    "@babel/preset-env": "^7.22.1",
+    "@babel/runtime": "^7.22.1",
     "@react-native-community/eslint-config": "^3.0.0",
     "@tsconfig/react-native": "^2.0.2",
     "@types/jest": "^29.2.1",

diff --git a/src/assets/placeholder.jpeg b/src/assets/placeholder.jpeg
diff --git a/src/components/movielist/MovieList.tsx b/src/components/movielist/MovieList.tsx
@@ -1,18 +1,28 @@
-import React from 'react';
-import {FlatList, Image, View, TouchableOpacity} from "react-native";
+import React, {useState} from 'react';
+import {FlatList, Image, View, TouchableOpacity, ImageBackground} from "react-native";
 import styles from "./MovieListStyle";
 import {Constants} from "../../appconstants/AppConstants";
 
 
 const MovieList = ({movies, onPress, loadMoreData}) => {
+    const [isLoading, setIsLoading] = useState(true)
     // movie items for movie list
     const movieItem = ({item}) => {
         return (<TouchableOpacity style={styles.movieItemContainer} onPress={() => onPress(item)}>
-            <Image
-                style={styles.imageView}
-                source={{
-                    uri: `${Constants.IMAGE_URL}${item.poster_path}`,
-                }}/>
+            <ImageBackground
+                imageStyle={{borderRadius: 18}}
+                source={isLoading ? require('../../assets/placeholder.jpeg') : {uri: `${Constants.IMAGE_URL}${item.poster_path}`}}
+            >
+                <Image
+                    style={styles.imageView}
+                    source={{
+                        uri: `${Constants.IMAGE_URL}${item.poster_path}`,
+                    }}
+                    onLoadEnd={() => {
+                        setIsLoading(false)
+                    }}
+                />
+            </ImageBackground>
         </TouchableOpacity>)
     };
 

diff --git a/src/redux/sagas/movielist/index.ts b/src/redux/sagas/movielist/index.ts
@@ -12,7 +12,8 @@ import {getArtistDetail, artistDetailSuccess, artistDetailFailure} from '../../r
 
 function* movieListApi(action: any) {
     try {
-        const response = yield call(AxiosService.getServiceData, ApiUrls.MOVIE_LIST, action.payload.page);
+        console.log('>> List >> ', action);
+        const response = yield call(AxiosService.getServiceData, ApiUrls.MOVIE_LIST, action.payload);
         const result = response.data;
         yield put(movieListSuccess(result));
     } catch (error) {
@@ -22,7 +23,7 @@ function* movieListApi(action: any) {
 
 function* popularMovieListApi(action: any) {
     try {
-        const response = yield call(AxiosService.getServiceData, ApiUrls.POPULAR_MOVIE_LIST, action.payload.page);
+        const response = yield call(AxiosService.getServiceData, ApiUrls.POPULAR_MOVIE_LIST, action.payload);
         const result = response.data;
         yield put(popularMovieSuccess(result));
     } catch (error) {
@@ -32,7 +33,7 @@ function* popularMovieListApi(action: any) {
 
 function* topRatedMovieListApi(action: any) {
     try {
-        const response = yield call(AxiosService.getServiceData, ApiUrls.TOP_RATED_MOVIE_LIST, action.payload.movieId);
+        const response = yield call(AxiosService.getServiceData, ApiUrls.TOP_RATED_MOVIE_LIST, action.payload);
         const result = response.data;
         yield put(topRatedMovieSuccess(result));
     } catch (error) {
@@ -42,7 +43,7 @@ function* topRatedMovieListApi(action: any) {
 
 function* upComingMovieListApi(action: any) {
     try {
-        const response = yield call(AxiosService.getServiceData, ApiUrls.UP_COMING_MOVIE_LIST, action.payload.movieId);
+        const response = yield call(AxiosService.getServiceData, ApiUrls.UP_COMING_MOVIE_LIST, action.payload);
         const result = response.data;
         yield put(upcomingMovieSuccess(result));
     } catch (error) {
@@ -62,7 +63,7 @@ function* movieDetailApi(action: any) {
 
 function* similarMovieApi(action: any) {
     try {
-        const response = yield call(AxiosService.getServiceData, ApiUrls.SIMILAR_MOVIE(action.payload.movieId));
+        const response = yield call(AxiosService.getServiceData, ApiUrls.SIMILAR_MOVIE(action.payload.movieId), {});
         const result = response.data;
         yield put(similarMovieSuccess(result));
     } catch (error) {

diff --git a/src/screens/home/Home.tsx b/src/screens/home/Home.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import {useSelector, useDispatch} from 'react-redux';
 import Loading from '../../components/loading/Loading';
 import MovieList from '../../components/movielist/MovieList';
@@ -10,18 +10,19 @@ let pageNum = 1
 const Home = ({navigation}) => {
     //communicate with redux
     const {isLoading, movieList} = useSelector(state => state.movieListReducer);
+    const [pageNumber, setPageNumber] = useState(1)
     const dispatch = useDispatch();
 
     // Api call
     useEffect(() => {
-        dispatch(getMovieList({page: pageNum}))
-    }, [])
+        dispatch(getMovieList({page: pageNumber}))
+    }, [pageNumber])
 
     return (<View style={styles.mainView}>
         <MovieList
             movies={movieList}
             loadMoreData={() => {
-                dispatch(getMovieList({page: ++pageNum}))
+                setPageNumber( pageNumber + 1)
             }}
             onPress={(item) => navigation.navigate('MovieDetail', {movieId: item.id})}/>
         {isLoading && <Loading/>}

diff --git a/src/screens/popular/Popular.tsx b/src/screens/popular/Popular.tsx
@@ -1,28 +1,28 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import {useSelector, useDispatch} from 'react-redux';
 import Loading from '../../components/loading/Loading';
 import MovieList from '../../components/movielist/MovieList';
 import styles from './PopularStyle'
 import {View} from "react-native";
 import {getPopularMovie} from "../../redux/reducer/popularmovie";
 
-let pageNum = 1
 const Popular = ({navigation}) => {
     //communicate with redux
     const {isLoading, movieList} = useSelector(state => state.popularMovieReducer);
+    const [pageNumber, setPageNumber] = useState(1)
     const dispatch = useDispatch();
 
     // Api call
     useEffect(() => {
-        dispatch(getPopularMovie({page: pageNum}))
-    }, [])
+        dispatch(getPopularMovie({page: pageNumber}))
+    }, [pageNumber])
 
     // main view with loading while api call is going on
     return (<View style={styles.mainView}>
         <MovieList
             movies={movieList}
             loadMoreData={() => {
-                dispatch(getPopularMovie({page: ++pageNum}))
+                setPageNumber( pageNumber + 1)
             }}
             onPress={(item) => navigation.navigate('MovieDetail', {movieId: item.id})}/>
         {isLoading && <Loading/>}

diff --git a/src/screens/toprated/TopRated.tsx b/src/screens/toprated/TopRated.tsx
@@ -1,28 +1,28 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import {useSelector, useDispatch} from 'react-redux';
 import Loading from '../../components/loading/Loading';
 import MovieList from '../../components/movielist/MovieList';
 import styles from './TopRatedStyle'
 import {View} from "react-native";
 import {getTopRatedMovie} from "../../redux/reducer/toprated";
 
-let pageNum = 1
 const TopRated = ({navigation}) => {
     //communicate with redux
     const {isLoading, movieList} = useSelector(state => state.topRatedMovieReducer);
+    const [pageNumber, setPageNumber] = useState(1)
     const dispatch = useDispatch();
 
     // Api call
     useEffect(() => {
-        dispatch(getTopRatedMovie({page: pageNum}))
-    }, [])
+        dispatch(getTopRatedMovie({page: pageNumber}))
+    }, [pageNumber])
 
     // main view with loading while api call is going on
     return (<View style={styles.mainView}>
         <MovieList
             movies={movieList}
             loadMoreData={() => {
-                dispatch(getTopRatedMovie({page: ++pageNum}))
+                setPageNumber( pageNumber + 1)
             }}
             onPress={(item) => navigation.navigate('MovieDetail', {movieId: item.id})}/>
         {isLoading && <Loading/>}

diff --git a/src/screens/upcoming/UpComing.tsx b/src/screens/upcoming/UpComing.tsx
@@ -1,28 +1,28 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import {useSelector, useDispatch} from 'react-redux';
 import Loading from '../../components/loading/Loading';
 import MovieList from '../../components/movielist/MovieList';
 import styles from './UpComingStyle'
 import {View} from "react-native";
 import {getUpComingMovie} from "../../redux/reducer/upcoming";
 
-let pageNum = 1
 const UpComing = ({navigation}) => {
     //communicate with redux
     const {isLoading, movieList} = useSelector(state => state?.upComingMovieReducer);
+    const [pageNumber, setPageNumber] = useState(1)
     const dispatch = useDispatch();
 
     // Api call
     useEffect(() => {
-        dispatch(getUpComingMovie({pageNum: pageNum}))
-    }, [])
+        dispatch(getUpComingMovie({page: pageNumber}))
+    }, [pageNumber])
 
     // main view with loading while api call is going on
     return (<View style={styles.mainView}>
         <MovieList
             movies={movieList}
             loadMoreData={() => {
-                dispatch(getUpComingMovie({page: ++pageNum}))
+                setPageNumber( pageNumber + 1)
             }}
             onPress={(item) => navigation.navigate('MovieDetail', {movieId: item?.id})}/>
         {isLoading && <Loading/>}