Add TVShows tab

willianrod · Aug 13, 2020 · f119c7e · f119c7e
1 parent cdb7499
commit f119c7e
Show file tree

Hide file tree

Showing 15 changed files with 598 additions and 119 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -6,6 +6,10 @@
     "plugin:react/recommended",
     "airbnb"
   ],
+  "globals": {
+    "__DEV__": false,
+    "window": false
+  },
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,7 +1,7 @@
 {
-  "eslint.enable": true,
   "editor.tabSize": 2,
   "editor.useTabStops": true,
+  "eslint.enable": true,
   "editor.detectIndentation": false,
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {

diff --git a/package.json b/package.json
@@ -11,42 +11,39 @@
     "postinstall": "jetify"
   },
   "dependencies": {
-    "@react-native-community/blur": "^3.6.0",
-    "@react-native-community/masked-view": "^0.1.10",
-    "@react-navigation/native": "^5.5.1",
-    "@react-navigation/stack": "^5.5.1",
-    "add": "^2.0.6",
-    "axios": "^0.19.2",
-    "moment": "^2.26.0",
+    "@react-native-community/masked-view": "0.1.10",
+    "@react-navigation/bottom-tabs": "5.7.3",
+    "@react-navigation/native": "5.5.1",
+    "@react-navigation/stack": "5.5.1",
+    "axios": "0.19.2",
+    "moment": "2.26.0",
     "react": "16.11.0",
     "react-native": "0.62.2",
-    "react-native-gesture-handler": "^1.6.1",
-    "react-native-linear-gradient": "^2.5.6",
-    "react-native-reanimated": "^1.9.0",
-    "react-native-safe-area-context": "^3.0.5",
-    "react-native-screens": "^2.8.0",
+    "react-native-gesture-handler": "1.6.1",
+    "react-native-linear-gradient": "2.5.6",
+    "react-native-reanimated": "1.9.0",
+    "react-native-safe-area-context": "3.0.5",
+    "react-native-screens": "2.8.0",
     "react-native-splash-screen": "3.2.0",
-    "react-native-vector-icons": "^6.6.0",
-    "react-redux": "^7.2.0",
-    "redux": "^4.0.5",
-    "redux-actions": "^2.6.5",
-    "redux-thunk": "^2.3.0",
-    "rn-placeholder": "^3.0.1",
-    "yarn": "^1.22.4"
+    "react-native-vector-icons": "6.6.0",
+    "react-redux": "7.2.0",
+    "redux": "4.0.5",
+    "redux-actions": "2.6.5",
+    "redux-thunk": "2.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.10.2",
-    "@babel/runtime": "^7.10.2",
-    "babel-jest": "^26.0.1",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.1.0",
-    "eslint-plugin-import": "^2.21.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-react-hooks": "^2.5.1",
-    "jest": "^26.0.1",
-    "jetifier": "^1.6.5",
-    "metro-react-native-babel-preset": "^0.59.0",
+    "@babel/core": "7.10.2",
+    "@babel/runtime": "7.10.2",
+    "babel-jest": "26.0.1",
+    "eslint": "6.8.0",
+    "eslint-config-airbnb": "18.1.0",
+    "eslint-plugin-import": "2.21.2",
+    "eslint-plugin-jsx-a11y": "6.2.3",
+    "eslint-plugin-react": "7.20.0",
+    "eslint-plugin-react-hooks": "2.5.1",
+    "jest": "26.0.1",
+    "jetifier": "1.6.5",
+    "metro-react-native-babel-preset": "0.59.0",
     "react-test-renderer": "16.11.0"
   },
   "jest": {

diff --git a/src/App.js b/src/App.js
@@ -4,14 +4,27 @@ import {
   Provider as ReduxProvider,
 } from 'react-redux';
 import { NavigationContainer } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createStackNavigator } from '@react-navigation/stack';
+import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 
-import Home from './pages/Home';
+import Movies from './pages/Movies';
+import TVShows from './pages/TVShows';
 
 import colors from './values/colors';
 import { store } from './redux';
 import Start from './pages/Start';
 import Movie from './pages/Movie';
+import TVShow from './pages/TVShow';
+
+const MovieTabIcon = ({ color, size }) => (
+  <MaterialCommunityIcon name="movie" size={size} color={color} />
+);
+
+const TVTabIcon = ({ color, size }) => (
+  <MaterialIcon name="tv" size={size} color={color} />
+);
 
 const APP_THEME = {
   dark: false,
@@ -25,20 +38,43 @@ const APP_THEME = {
 };
 
 const Stack = createStackNavigator();
+const Tab = createBottomTabNavigator();
 
-const MoviewStack = () => (
+const MovieStack = () => (
   <Stack.Navigator headerMode="none">
-    <Stack.Screen name="Home" component={Home} />
+    <Stack.Screen name="Movies" component={Movies} />
     <Stack.Screen name="Movie" component={Movie} />
   </Stack.Navigator>
 );
 
+const TVShowsStack = () => (
+  <Stack.Navigator headerMode="none">
+    <Stack.Screen name="TVShows" component={TVShows} />
+    <Stack.Screen name="TVShow" component={TVShow} />
+  </Stack.Navigator>
+);
+
+const AppTabs = () => (
+  <Tab.Navigator>
+    <Tab.Screen
+      options={{ tabBarIcon: MovieTabIcon, title: 'Filmes' }}
+      name="MoviesTab"
+      component={MovieStack}
+    />
+    <Tab.Screen
+      options={{ tabBarIcon: TVTabIcon, title: 'Séries' }}
+      name="TVShowsTab"
+      component={TVShowsStack}
+    />
+  </Tab.Navigator>
+);
+
 const App = () => (
   <ReduxProvider store={store}>
     <NavigationContainer theme={APP_THEME}>
       <Stack.Navigator headerMode="none">
         <Stack.Screen name="Start" component={Start} />
-        <Stack.Screen name="Home" component={MoviewStack} />
+        <Stack.Screen name="Home" component={AppTabs} />
       </Stack.Navigator>
     </NavigationContainer>
   </ReduxProvider>

diff --git a/src/components/Category.js b/src/components/Category.js
@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
 const Category = ({ id, categories }) => {
   const categoryName = useMemo(() => {
     if (!categories) return null;
-    return categories.find((category) => category.id === id).name;
+    return categories.find((category) => category.id === id)?.name || '';
   }, [categories]);
 
   return (

diff --git a/src/components/HorizontalMovieCoverList.js b/src/components/HorizontalMovieCoverList.js
@@ -45,11 +45,13 @@ const KEY_EXTRACTOR = (item) => String(item.id);
 
 const HorizontalSpacing = () => <View style={styles.horizontalSpacing} />;
 
-const MovieCard = memo(({ item, index, showIndex }) => {
+const MovieCard = memo(({
+  item, index, showIndex, mediaType,
+}) => {
   const navigation = useNavigation();
 
   const handleMoviePress = useCallback(() => {
-    navigation.push('Movie', { movie: item });
+    navigation.push(mediaType === 'movie' ? 'Movie' : 'TVShow', { item });
   }, [navigation, item]);
 
   return (
@@ -64,13 +66,14 @@ const MovieCard = memo(({ item, index, showIndex }) => {
 });
 
 const HorizontalMovieCoverList = ({
-  requestDataSource, showIndex = false, title, description,
+  requestDataSource, showIndex, title, description,
+  mediaType,
 }) => {
   const [dataSource, setDataSource] = useState(null);
   const [loading, setLoading] = useState(true);
 
   const renderCover = useCallback(({ item, index }) => (
-    <MovieCard item={item} index={index} showIndex={showIndex} />
+    <MovieCard item={item} index={index} showIndex={showIndex} mediaType={mediaType} />
   ), []);
 
   const requestListData = useCallback(async () => {
@@ -128,4 +131,8 @@ const HorizontalMovieCoverList = ({
   );
 };
 
+HorizontalMovieCoverList.defaultProps = {
+  showIndex: false,
+};
+
 export default memo(HorizontalMovieCoverList);
diff --git a/src/components/SliderItem.js b/src/components/SliderItem.js
@@ -48,18 +48,18 @@ const styles = StyleSheet.create({
 const BACKDROP_ASPECT_RATIO = 16 / 9;
 const LINEAR_GRADIENT_COLORS = ['#14151A00', '#14151A'];
 
-const SliderItem = memo(({ item }) => {
+const SliderItem = memo(({ item, mediaType }) => {
   const { width } = useWindowDimensions();
 
   const navigation = useNavigation();
 
   const {
-    backdrop_path: backdropPath, title,
+    backdrop_path: backdropPath, title, name,
     genre_ids: genreIds,
   } = item;
 
   const handlePress = useCallback(() => {
-    navigation.navigate('Movie', { movie: item });
+    navigation.navigate(mediaType === 'movie' ? 'Movie' : 'TVShow', { item });
   }, []);
 
   const blurredImageStyle = useMemo(() => ({
@@ -136,7 +136,7 @@ const SliderItem = memo(({ item }) => {
             style={styles.movieTitle}
             numberOfLines={1}
           >
-            {title}
+            {title || name}
           </Text>
           <View style={styles.categoryContainer}>
             {renderCategories()}
@@ -170,9 +170,7 @@ SliderItem.Placeholder = memo(() => {
 
   return (
     <View style={containerStyle}>
-      {/* <View style={styles.backdropContainer}> */}
       <PlaceHolder style={placeHolderStyles} />
-      {/* </View> */}
       <PlaceHolder style={styles.titlePlaceHolder} />
       <PlaceHolder style={styles.categoriesPlaceHolder} />
     </View>

diff --git a/src/pages/Movie.js b/src/pages/Movie.js
@@ -101,7 +101,7 @@ const LINEAR_GRADIENT_COLORS = ['#14151A00', '#14151A'];
 const KEY_EXTRACTOR = (item) => String(item.id);
 
 const Movie = ({ route }) => {
-  const movie = route.params?.movie;
+  const { item: movie } = route.params;
 
   const [movieDetails, setMovieDetails] = useState(movie);
   const [moviewCredits, setMovieCredits] = useState(null);
@@ -160,8 +160,8 @@ const Movie = ({ route }) => {
           style={styles.profileAvatar}
         />
       </View>
-      <Text style={styles.creditName}>{item.name}</Text>
-      <Text style={styles.creditCharacterName}>{item.character}</Text>
+      <Text style={styles.creditName} numberOfLines={2}>{item.name}</Text>
+      <Text style={styles.creditCharacterName} numberOfLines={2}>{item.character}</Text>
     </View>
   ), []);
 
@@ -263,6 +263,7 @@ const Movie = ({ route }) => {
               title="Relacionados"
               description="Filmes parecidos com este"
               requestDataSource={requestRelated}
+              mediaType="movie"
             />
           </>
         ) : null}

diff --git a/src/pages/Home.js → src/pages/Movies.js b/src/pages/Home.js → src/pages/Movies.js
@@ -40,7 +40,7 @@ const styles = StyleSheet.create({
 
 const KEY_EXTRACTOR = (item) => String(item.id);
 
-const Home = () => {
+const Movies = () => {
   const [trendingDay, setTrendingDay] = useState(null);
 
   const flatlistRef = useRef(null);
@@ -110,7 +110,7 @@ const Home = () => {
     }
   }, []);
 
-  const renderItem = useCallback(({ item }) => <SliderItem item={item} />, []);
+  const renderItem = useCallback(({ item }) => <SliderItem item={item} mediaType="movie" />, []);
 
   const renderEmptyComponent = () => (
     <View style={styles.placeholderContainer}>
@@ -141,19 +141,22 @@ const Home = () => {
         description="Veja quais são os melhores filmes da semana"
         showIndex
         requestDataSource={requestTrendingWeek}
+        mediaType="movie"
       />
       <HorizontalMovieCoverList
         title="Descubra"
         description="Descubra ótimos filmes para assistir"
         requestDataSource={requestDiscover}
+        mediaType="movie"
       />
       <HorizontalMovieCoverList
         title="Mais votados"
         description="Veja quais são os filmes mais bem votados no Brasil"
         requestDataSource={requestTopRated}
+        mediaType="movie"
       />
     </ScrollView>
   );
 };
 
-export default memo(Home);
+export default memo(Movies);