Commit 8c05863e authored by ErlendHer's avatar ErlendHer
Browse files

#4 Make list update more smoothly and add loading spinner.

parent 85a2f04c
......@@ -46,6 +46,7 @@ const styles = StyleSheet.create({
},
card: {
flex: 1,
marginHorizontal: 4,
minWidth: 175,
boxShadow: '0 2px 4px 0 rgba(0,0,0,0.2)',
borderRadius: 5,
......@@ -58,6 +59,7 @@ const styles = StyleSheet.create({
padding: 4,
textAlign: 'center',
maxWidth: 175,
minHeight: 75,
},
rating: {
// maxWidth: 150,
......
import React, { useEffect, useState } from 'react';
import { FlatList, StyleSheet } from 'react-native';
import { FlatList, StyleSheet, Text } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useDispatch, useSelector } from 'react-redux';
import { fetchMovies } from '../store/ducks/movies/actions';
import { FetchMovieParams, MovieEntity } from '../store/ducks/movies/types';
......@@ -7,7 +8,7 @@ import { ApplicationState } from '../store/interface';
import MovieCard from './MovieCard';
const baseQuery: FetchMovieParams = {
perPage: 10,
perPage: 12,
page: 0,
orderBy: 'title',
order: 'desc',
......@@ -39,6 +40,7 @@ const MovieTable = ({ path }: { path: string }): JSX.Element => {
// Fetch movies on page change
useEffect(() => {
if (!error && !loading) {
console.log(movies);
setMovies([...movies, ...data]);
}
}, [data]);
......@@ -47,12 +49,14 @@ const MovieTable = ({ path }: { path: string }): JSX.Element => {
<FlatList
contentContainerStyle={styles.movieList}
data={movies}
keyExtractor={(movie) => movie.id.toString()}
numColumns={2}
keyExtractor={(movie) => movie.id}
onEndReached={({ distanceFromEnd }) => {
// Prevent bug where onEndReached is called multiple times
if (distanceFromEnd < 0) return;
// Prevent fetching if all movies are loaded
if (prevPageLoaded + 1 === documentCount / baseQuery.perPage) return;
if (prevPageLoaded + 1 >= Math.ceil(documentCount / baseQuery.perPage))
return;
fetchByPage(prevPageLoaded + 1);
setPageLoaded(prevPageLoaded + 1);
......@@ -61,21 +65,26 @@ const MovieTable = ({ path }: { path: string }): JSX.Element => {
initialNumToRender={baseQuery.perPage}
showsVerticalScrollIndicator={false}
renderItem={({ item }) => <MovieCard movie={item} />}
ListFooterComponent={() => (
<>{loading && <Text style={styles.loading}>Loading...</Text>}</>
)}
/>
);
};
const styles = StyleSheet.create({
movieList: {
marginTop: 8,
textAlign: 'center',
justifyContent: 'center',
// justifyContent: 'center',
display: 'flex',
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
height: '100%',
width: '100%',
gap: 10,
flexDirection: 'column',
gap: 8,
},
loading: {
fontWeight: 'bold',
marginBottom: 8,
},
});
......
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