Merge pull request #22 from TriPSs/feature/shows-recommendations

Feature/shows recommendations

android/app/build.gradle

@@ -107,8 +107,8 @@ android {
         applicationId "com.popcorn"
         minSdkVersion 16
         targetSdkVersion 26
-        versionCode 12
-        versionName "v0.9.0"
+        versionCode 13
+        versionName "v0.10.0"
         ndk {
             abiFilters "armeabi-v7a", "x86"
         }

app/components/Card/Card.js

@@ -1,22 +1,29 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { StyleSheet, View, Image } from 'react-native'
+import { StyleSheet, View, Image, Dimensions } from 'react-native'
 
 import posterHolder from 'images/posterholder.png'
 
 import BaseButton from '../BaseButton'
 
+const { width } = Dimensions.get('window')
+
 const styles = StyleSheet.create({
 
   root: {
     height     : 190,
-    width      : 121,
-    marginLeft : 8,
-    marginRight: 8,
+    width      : (width - 32) / 3,
+    marginLeft : 4,
+    marginRight: 4,
     alignSelf  : 'stretch',
     position   : 'relative',
   },
 
+  small: {
+    height: 180,
+    width : 115,
+  },
+
   image: {
     height: '100%',
     width : '100%',
@@ -45,6 +52,7 @@ export default class Card extends React.Component {
   static defaultProps = {
     item : null,
     empty: false,
+    small: false,
   }
 
   constructor(props) {
@@ -64,21 +72,21 @@ export default class Card extends React.Component {
   }
 
   render() {
-    const { item, empty, ...rest } = this.props
+    const { item, small, empty, ...rest } = this.props
     const { showPlaceholder } = this.state
 
     return (
       <BaseButton
         // onLongPress={() => console.warn(item.title)}
         // onPress={() => this.openItem(item)}
         {...rest}>
-        <View style={styles.root}>
+        <View style={[styles.root, small ? styles.small : {}]}>
           <Image
             style={styles.image}
             defaultSource={posterHolder}
             onError={this.handleImageError}
             source={
-              !showPlaceholder
+              !showPlaceholder && !empty
                 ? { uri: item.images.poster.thumb }
                 : posterHolder
             }

app/components/CardList/CardList.js

@@ -1,75 +1,47 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import { StyleSheet, View, ScrollView } from 'react-native'
+import { View, FlatList } from 'react-native'
+import { withNavigation } from 'react-navigation'
+
+import Card from 'components/Card'
+
+export class CardList extends React.Component {
+
+  handleItemOpen = (item) => {
+    const { handleItemOpen, navigation } = this.props
+
+    if (handleItemOpen) {
+      handleItemOpen(item)
+
+    } else {
+      navigation.navigate('Item', item)
+    }
+  }
+
+  renderCard = ({ item }) => (
+    <Card
+      item={item}
+      onPress={() => this.handleItemOpen(item)}
+    />
+  )
+
+  render() {
+    const { items, handleItemOpen, ...props } = this.props
+
+    return (
+      <FlatList
+        columnWrapperStyle={{ margin: 4 }}
+        data={items}
+        numColumns={3}
+        initialNumToRender={12}
+        renderItem={this.renderCard}
+        keyExtractor={(item, index) => `${item.id}-${index}`}
+        onEndReachedThreshold={100}
+        ListFooterComponent={() => <View style={{ marginBottom: 16 }} />}
+        {...props}
+      />
+    )
+  }
 
-import Card from '../Card'
-import Typography from '../Typography'
-
-const styles = StyleSheet.create({
-
-  root: {
-    height     : 190,
-    width      : 120,
-    marginLeft : 10,
-    marginRight: 10,
-    alignSelf  : 'stretch',
-    position   : 'relative',
-    display    : 'flex',
-    alignItems : 'center',
-  },
-
-  title: {
-    marginLeft: 8,
-    marginTop : 8,
-  },
-
-  image: {
-    height    : '100%',
-    width     : '100%',
-    resizeMode: 'cover',
-  },
-
-})
-
-export const CardList = ({ loading, title, items, onPress, style }) => (
-  <View style={style}>
-    <Typography
-      style={styles.title}
-      variant={'title'}>
-      {title}
-    </Typography>
-
-    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-      {items.map(item => (
-        <Card
-          key={item.id}
-          item={item}
-          onPress={() => onPress(item)}
-        />
-      ))}
-
-      {(loading || items.length === 0) && (
-        <React.Fragment>
-          <Card empty />
-          <Card empty />
-          <Card empty />
-        </React.Fragment>
-      )}
-    </ScrollView>
-
-  </View>
-)
-
-CardList.propTypes = {
-  title  : PropTypes.string.isRequired,
-  items  : PropTypes.array.isRequired,
-  onPress: PropTypes.func.isRequired,
-  loading: PropTypes.bool.isRequired,
-  style  : PropTypes.object,
-}
-
-CardList.defaultProps = {
-  style: null,
 }
 
-export default CardList
+export default withNavigation(CardList)

app/components/CardSlider/CardSlider.js

@@ -0,0 +1,82 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, View, ScrollView } from 'react-native'
+
+import Card from '../Card'
+import Typography from '../Typography'
+
+const styles = StyleSheet.create({
+
+  root: {
+    height     : 190,
+    width      : 120,
+    marginLeft : 10,
+    marginRight: 10,
+    alignSelf  : 'stretch',
+    position   : 'relative',
+    display    : 'flex',
+    alignItems : 'center',
+  },
+
+  title: {
+    marginLeft: 8,
+    marginTop : 8,
+  },
+
+  image: {
+    height    : '100%',
+    width     : '100%',
+    resizeMode: 'cover',
+  },
+
+  scrollView: {
+    margin: 4,
+  }
+})
+
+export const CardSlider = ({ loading, title, items, onPress, style }) => (
+  <View style={style}>
+    <Typography
+      style={styles.title}
+      variant={'title'}>
+      {title}
+    </Typography>
+
+    <ScrollView
+      horizontal
+      style={styles.scrollView}
+      showsHorizontalScrollIndicator={false}>
+      {items.map(item => (
+        <Card
+          small
+          key={item.id}
+          item={item}
+          onPress={() => onPress(item)}
+        />
+      ))}
+
+      {(loading || items.length === 0) && (
+        <React.Fragment>
+          <Card empty />
+          <Card empty />
+          <Card empty />
+        </React.Fragment>
+      )}
+    </ScrollView>
+
+  </View>
+)
+
+CardSlider.propTypes = {
+  title  : PropTypes.string.isRequired,
+  items  : PropTypes.array.isRequired,
+  onPress: PropTypes.func.isRequired,
+  loading: PropTypes.bool.isRequired,
+  style  : PropTypes.object,
+}
+
+CardSlider.defaultProps = {
+  style: null,
+}
+
+export default CardSlider

app/components/CardSlider/index.js

@@ -0,0 +1 @@
+export { default } from './CardSlider'

app/components/IconButton/IconButton.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { View, StyleSheet } from 'react-native'
+import { StyleSheet } from 'react-native'
+import * as Animatable from 'react-native-animatable'
 
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 
@@ -19,9 +20,9 @@ export const styles = StyleSheet.create({
 
 })
 
-export const IconButton = ({ onPress, buttonProps, children, ...rest }) => (
+export const IconButton = ({ onPress, animatable, buttonProps, children, ...rest }) => (
   <BaseButton onPress={onPress} {...buttonProps}>
-    <View style={styles.container}>
+    <Animatable.View {...animatable} style={styles.container}>
       <Icon
         {...rest}
       />
@@ -31,18 +32,20 @@ export const IconButton = ({ onPress, buttonProps, children, ...rest }) => (
           {children}
         </Typography>
       )}
-    </View>
+    </Animatable.View>
   </BaseButton>
 )
 
 IconButton.propTypes = {
   onPress    : PropTypes.func,
   children   : PropTypes.string,
   buttonProps: PropTypes.object,
+  animatable : PropTypes.object,
 }
 
 IconButton.defaultProps = {
   buttonProps: {},
+  animatable : {},
   onPress    : null,
   children   : null,
 }

app/components/MainCover/MainCover.js

@@ -36,6 +36,7 @@ export const MainCover = ({ item, onPress, children, onLoad }) => {
           style={styles.image}
           source={{ uri: item.images.poster.high }}
           onLoad={onLoad}
+          onError={onLoad}
         />
 
         <CoverGradient />

app/components/ScrollViewWithStatusBar/ScrollViewWithStatusBar.js

@@ -50,7 +50,10 @@ export default class ScrollViewWithStatusBar extends React.Component {
           animated
         />
 
-        <ScrollView onScroll={this.handleScroll}>
+        <ScrollView
+          showsHorizontalScrollIndicator={false}
+          showsVerticalScrollIndicator={false}
+          onScroll={this.handleScroll}>
           {children}
         </ScrollView>
       </SafeAreaView>

app/components/Typography/Typography.js

@@ -13,20 +13,24 @@ export const Typography = ({ variant, style, color, children }) => (
 )
 
 Typography.propTypes = {
-  variant : PropTypes.oneOf([
+  variant: PropTypes.oneOf([
     'display1',
     'headline',
     'title',
+    'subheading',
     'body1',
     'body2',
     'caption',
     'button',
   ]),
-  color   : PropTypes.oneOf(['white', '']),
-  style   : PropTypes.oneOfType([
+
+  color: PropTypes.oneOf(['white', '']),
+
+  style: PropTypes.oneOfType([
     PropTypes.number,
     PropTypes.object,
   ]),
+
   children: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.arrayOf(PropTypes.string),