From 870cbfdadf26ae586b3fdc7970ab4f79d00a106b Mon Sep 17 00:00:00 2001
From: Arnaud Vergnet <vergnet@etud.insa-toulouse.fr>
Date: Tue, 14 Jul 2020 22:28:23 +0200
Subject: [PATCH] Improved services list display and enabled paging for easier
 navigation

---
 src/components/Lists/CardList/CardList.js     | 21 +++++++++++++++----
 .../Lists/CardList/ImageListItem.js           | 18 +++++++++-------
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/components/Lists/CardList/CardList.js b/src/components/Lists/CardList/CardList.js
index 957434b..da09a12 100644
--- a/src/components/Lists/CardList/CardList.js
+++ b/src/components/Lists/CardList/CardList.js
@@ -1,13 +1,15 @@
 // @flow
 
 import * as React from 'react';
-import {Animated} from "react-native";
+import {Animated, Dimensions} from "react-native";
 import ImageListItem from "./ImageListItem";
 import CardListItem from "./CardListItem";
+import type {ViewStyle} from "react-native/Libraries/StyleSheet/StyleSheet";
 
 type Props = {
     dataset: Array<cardItem>,
     isHorizontal: boolean,
+    contentContainerStyle?: ViewStyle,
 }
 
 export type cardItem = {
@@ -26,9 +28,18 @@ export default class CardList extends React.Component<Props> {
         isHorizontal: false,
     }
 
+    windowWidth: number;
+    horizontalItemSize: number;
+
+    constructor(props: Props) {
+        super(props);
+        this.windowWidth = Dimensions.get('window').width;
+        this.horizontalItemSize = this.windowWidth/4; // So that we can fit 3 items and a part of the 4th => user knows he can scroll
+    }
+
     renderItem = ({item}: { item: cardItem }) => {
         if (this.props.isHorizontal)
-            return <ImageListItem item={item} key={item.title}/>;
+            return <ImageListItem item={item} key={item.title} width={this.horizontalItemSize}/>;
         else
             return <CardListItem item={item} key={item.title}/>;
     };
@@ -39,7 +50,7 @@ export default class CardList extends React.Component<Props> {
         let containerStyle = {};
         if (this.props.isHorizontal) {
             containerStyle = {
-                height: 150,
+                height: this.horizontalItemSize + 50,
                 justifyContent: 'space-around',
             };
         }
@@ -51,7 +62,9 @@ export default class CardList extends React.Component<Props> {
                 keyExtractor={this.keyExtractor}
                 numColumns={this.props.isHorizontal ? undefined : 2}
                 horizontal={this.props.isHorizontal}
-                contentContainerStyle={containerStyle}
+                contentContainerStyle={this.props.isHorizontal ? containerStyle : this.props.contentContainerStyle}
+                pagingEnabled={this.props.isHorizontal}
+                snapToInterval={this.props.isHorizontal ? (this.horizontalItemSize+5)*3 : null}
             />
         );
     }
diff --git a/src/components/Lists/CardList/ImageListItem.js b/src/components/Lists/CardList/ImageListItem.js
index bedde23..dd17110 100644
--- a/src/components/Lists/CardList/ImageListItem.js
+++ b/src/components/Lists/CardList/ImageListItem.js
@@ -7,6 +7,7 @@ import type {cardItem} from "./CardList";
 
 type Props = {
     item: cardItem,
+    width: number,
 }
 
 export default class ImageListItem extends React.Component<Props> {
@@ -16,16 +17,15 @@ export default class ImageListItem extends React.Component<Props> {
     }
 
     render() {
-        const props = this.props;
-        const item = props.item;
+        const item = this.props.item;
         const source = typeof item.image === "number"
             ? item.image
             : {uri: item.image};
         return (
             <TouchableRipple
                 style={{
-                    width: 100,
-                    height: 150,
+                    width: this.props.width,
+                    height: this.props.width + 40,
                     margin: 5,
                 }}
                 onPress={item.onPress}
@@ -33,8 +33,8 @@ export default class ImageListItem extends React.Component<Props> {
                 <View>
                     <Image
                         style={{
-                            width: 80,
-                            height: 80,
+                            width: this.props.width - 20,
+                            height: this.props.width - 20,
                             marginLeft: 'auto',
                             marginRight: 'auto',
                         }}
@@ -45,9 +45,11 @@ export default class ImageListItem extends React.Component<Props> {
                         marginLeft: 'auto',
                         marginRight: 'auto',
                         textAlign: 'center'
-                    }}>{item.title}</Text>
+                    }}>
+                        {item.title}
+                    </Text>
                 </View>
             </TouchableRipple>
         );
     }
-}
\ No newline at end of file
+}