From b31269586b6e9b20253cd1a1b803ddf486710892 Mon Sep 17 00:00:00 2001
From: Arnaud Vergnet <vergnet@etud.insa-toulouse.fr>
Date: Wed, 22 Apr 2020 12:08:23 +0200
Subject: [PATCH] Use card items when viewing the section

---
 src/components/Lists/CardList/CardList.js     | 29 ++++++-----
 src/components/Lists/CardList/CardListItem.js | 36 +++++--------
 .../Lists/CardList/ImageListItem.js           | 52 +++++++++++++++++++
 3 files changed, 81 insertions(+), 36 deletions(-)
 create mode 100644 src/components/Lists/CardList/ImageListItem.js

diff --git a/src/components/Lists/CardList/CardList.js b/src/components/Lists/CardList/CardList.js
index 7de85d5..338ecc0 100644
--- a/src/components/Lists/CardList/CardList.js
+++ b/src/components/Lists/CardList/CardList.js
@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import {Animated} from "react-native";
+import ImageListItem from "./ImageListItem";
 import CardListItem from "./CardListItem";
 
 type Props = {
@@ -26,25 +27,25 @@ export default class CardList extends React.Component<Props> {
     }
 
     renderItem = ({item}: { item: cardItem }) => {
-        return (
-            <CardListItem item={item} key={item.title}/>
-        );
+        if (this.props.isHorizontal)
+            return <ImageListItem item={item} key={item.title}/>;
+        else
+            return <CardListItem item={item} key={item.title}/>;
     };
 
     keyExtractor = (item: cardItem) => item.title;
 
     render() {
-        let containerStyle = {
-            ...this.props.contentContainerStyle,
-            height: 150,
-            justifyContent: 'space-around',
-        };
-        if (!this.props.isHorizontal) {
+        let containerStyle;
+        if (this.props.isHorizontal) {
             containerStyle = {
-                ...containerStyle,
-                marginLeft: 'auto',
-                marginRight: 'auto',
-                height: 'auto',
+                ...this.props.contentContainerStyle,
+                height: 150,
+                justifyContent: 'space-around',
+            };
+        } else {
+            containerStyle = {
+                ...this.props.contentContainerStyle,
             }
         }
         return (
@@ -53,7 +54,7 @@ export default class CardList extends React.Component<Props> {
                 data={this.props.dataset}
                 renderItem={this.renderItem}
                 keyExtractor={this.keyExtractor}
-                numColumns={this.props.isHorizontal ? undefined : 3}
+                numColumns={this.props.isHorizontal ? undefined : 2}
                 horizontal={this.props.isHorizontal}
                 contentContainerStyle={containerStyle}
             />
diff --git a/src/components/Lists/CardList/CardListItem.js b/src/components/Lists/CardList/CardListItem.js
index 086d9d5..4d44c7b 100644
--- a/src/components/Lists/CardList/CardListItem.js
+++ b/src/components/Lists/CardList/CardListItem.js
@@ -1,8 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Text, TouchableRipple} from 'react-native-paper';
-import {Image, View} from 'react-native';
+import {Caption, Card, Paragraph} from 'react-native-paper';
 import type {cardItem} from "./CardList";
 
 type Props = {
@@ -22,31 +21,24 @@ export default class CardListItem extends React.Component<Props> {
             ? item.image
             : {uri: item.image};
         return (
-            <TouchableRipple
+            <Card
                 style={{
-                    width: 100,
-                    height: 150,
+                    width: '40%',
                     margin: 5,
+                    marginLeft: 'auto',
+                    marginRight: 'auto',
                 }}
                 onPress={item.onPress}
             >
-                <View>
-                    <Image
-                        style={{
-                            width: 100,
-                            height: 100,
-                            marginLeft: 'auto',
-                            marginRight: 'auto',
-                        }}
-                        source={source}
-                    />
-                    <Text style={{
-                        marginTop: 5,
-                        marginLeft: 'auto',
-                        marginRight: 'auto',
-                    }}>{item.title}</Text>
-                </View>
-            </TouchableRipple>
+                <Card.Cover
+                    style={{height: 80}}
+                    source={source}
+                />
+                <Card.Content>
+                    <Paragraph>{item.title}</Paragraph>
+                    <Caption>{item.subtitle}</Caption>
+                </Card.Content>
+            </Card>
         );
     }
 }
\ No newline at end of file
diff --git a/src/components/Lists/CardList/ImageListItem.js b/src/components/Lists/CardList/ImageListItem.js
new file mode 100644
index 0000000..ed2904e
--- /dev/null
+++ b/src/components/Lists/CardList/ImageListItem.js
@@ -0,0 +1,52 @@
+// @flow
+
+import * as React from 'react';
+import {Text, TouchableRipple} from 'react-native-paper';
+import {Image, View} from 'react-native';
+import type {cardItem} from "./CardList";
+
+type Props = {
+    item: cardItem,
+}
+
+export default class ImageListItem extends React.Component<Props> {
+
+    shouldComponentUpdate() {
+        return false;
+    }
+
+    render() {
+        const props = this.props;
+        const item = props.item;
+        const source = typeof item.image === "number"
+            ? item.image
+            : {uri: item.image};
+        return (
+            <TouchableRipple
+                style={{
+                    width: 100,
+                    height: 150,
+                    margin: 5,
+                }}
+                onPress={item.onPress}
+            >
+                <View>
+                    <Image
+                        style={{
+                            width: 100,
+                            height: 100,
+                            marginLeft: 'auto',
+                            marginRight: 'auto',
+                        }}
+                        source={source}
+                    />
+                    <Text style={{
+                        marginTop: 5,
+                        marginLeft: 'auto',
+                        marginRight: 'auto',
+                    }}>{item.title}</Text>
+                </View>
+            </TouchableRipple>
+        );
+    }
+}
\ No newline at end of file