Use v2 stock list in proximo and display information in modal on click

package-lock.json

@@ -6104,6 +6104,14 @@
         }
       }
     },
+    "react-native-animatable": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/react-native-animatable/-/react-native-animatable-1.3.2.tgz",
+      "integrity": "sha512-rmah3KQ63ft8DxkzFUwJSuZeq+oSYwldoGF4DTOR5WM2WR5wiWLgBAtrAHlI3Di3by323uOR21s+MlqPcHz2Kw==",
+      "requires": {
+        "prop-types": "^15.5.10"
+      }
+    },
     "react-native-app-intro-slider": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-native-app-intro-slider/-/react-native-app-intro-slider-3.0.0.tgz",
@@ -6178,6 +6186,20 @@
         "prop-types": "^15.6.0"
       }
     },
+    "react-native-modal": {
+      "version": "11.3.1",
+      "resolved": "https://registry.npmjs.org/react-native-modal/-/react-native-modal-11.3.1.tgz",
+      "integrity": "sha512-3rRuXwvObknVijVNS8iamjMXWLjlb9xK90o+WtEcJ3C7HKuR2SOH578SoltIC6ZmVjO3vZwOApGVdSfR3LtPQg==",
+      "requires": {
+        "prop-types": "^15.6.2",
+        "react-native-animatable": "^1.3.1"
+      }
+    },
+    "react-native-modalize": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/react-native-modalize/-/react-native-modalize-1.2.1.tgz",
+      "integrity": "sha512-j3+uJB0UtlSeQbwDZ+DEcvyUYN4vfZt4bczwPdG2NAoMbePSNV4iWcD6co0UonDuHZAcD0G9xZU6PU/wSGjGRQ=="
+    },
     "react-native-paper": {
       "version": "2.16.0",
       "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-2.16.0.tgz",

package.json

@@ -23,6 +23,8 @@
     "react-native": "^0.59.9",
     "react-native-app-intro-slider": "^3.0.0",
     "react-native-autolink": "^1.8.1",
+    "react-native-modal": "^11.3.1",
+    "react-native-modalize": "^1.2.1",
     "react-native-paper": "^2.16.0",
     "react-native-platform-touchable": "^1.1.1",
     "react-native-side-menu": "^1.1.3",

screens/Proximo/ProximoListScreen.js

@@ -1,14 +1,15 @@
 // @flow
 
 import * as React from 'react';
-import {Body, Container, Content, Left, ListItem, Right, Text, Thumbnail} from 'native-base';
+import {Body, Container, Content, Left, ListItem, Right, Text, Thumbnail, H1, H3} from 'native-base';
 import CustomHeader from "../../components/CustomHeader";
-import {FlatList, Platform} from "react-native";
+import {FlatList, Platform, View, Image} from "react-native";
 import Touchable from 'react-native-platform-touchable';
 import Menu, {MenuItem} from 'react-native-material-menu';
 import i18n from "i18n-js";
 import CustomMaterialIcon from "../../components/CustomMaterialIcon";
 import ThemeManager from "../../utils/ThemeManager";
+import Modalize from 'react-native-modalize';
 
 const sortMode = {
     price: "0",
@@ -49,6 +50,7 @@ type State = {
     isSortReversed: boolean,
     sortPriceIcon: React.Node,
     sortNameIcon: React.Node,
+    modalCurrentDisplayItem: Object,
 };
 
 /**
@@ -56,12 +58,15 @@ type State = {
  */
 export default class ProximoListScreen extends React.Component<Props, State> {
 
+    modalRef = React.createRef();
+
     state = {
         navData: this.props.navigation.getParam('data', []).sort(sortPrice),
         currentSortMode: sortMode.price,
         isSortReversed: false,
         sortPriceIcon: '',
         sortNameIcon: '',
+        modalCurrentDisplayItem: {}
     };
 
     _menu: Menu;
@@ -182,13 +187,57 @@ export default class ProximoListScreen extends React.Component<Props, State> {
         }
     }
 
+    getModalContent() {
+        return (
+            <View style={{
+                flex: 1,
+                padding: 20
+            }}>
+                <H1>{this.state.modalCurrentDisplayItem.name}</H1>
+                <View style={{
+                    flexDirection: 'row',
+                    width: '100%',
+                    marginTop: 10,
+                }}>
+                    <H3 style={{
+                        color: this.getStockColor(parseInt(this.state.modalCurrentDisplayItem.quantity)),
+                    }}>
+                        {this.state.modalCurrentDisplayItem.quantity + ' ' + i18n.t('proximoScreen.inStock')}
+                    </H3>
+                    <H3 style={{marginLeft: 'auto'}}>{this.state.modalCurrentDisplayItem.price}€</H3>
+                </View>
+
+                <Content>
+                    <View style={{width: '100%', height: 150, marginTop: 20, marginBottom: 20}}>
+                        <Image style={{flex: 1, resizeMode: "contain"}}
+                               source={{uri: this.state.modalCurrentDisplayItem.image}}/>
+                    </View>
+                    <Text>{this.state.modalCurrentDisplayItem.description}</Text>
+                </Content>
+            </View>
+        );
+    }
+
+    showItemDetails(item: Object) {
+        this.setState({
+            modalCurrentDisplayItem: item
+        });
+        if (this.modalRef.current) {
+            this.modalRef.current.open();
+        }
+    }
     render() {
         const nav = this.props.navigation;
-        const navType = nav.getParam('type', 'Empty');
+        const navType = nav.getParam('type', '{name: "Error"}');
 
         return (
             <Container>
-                <CustomHeader hasBackButton={true} navigation={nav} title={navType} rightButton={
+                <Modalize ref={this.modalRef}
+                          adjustToContentHeight
+                          modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
+                    {this.getModalContent()}
+                </Modalize>
+                <CustomHeader hasBackButton={true} navigation={nav} title={navType.name} rightButton={
                     <Menu
                         ref={this.setMenuRef}
                         button={
@@ -220,13 +269,13 @@ export default class ProximoListScreen extends React.Component<Props, State> {
                     <FlatList
                         data={this.state.navData}
                         extraData={this.state.navData}
-                        keyExtractor={(item, index) => item.name}
+                        keyExtractor={(item) => item.name}
                         style={{minHeight: 300, width: '100%'}}
                         renderItem={({item}) =>
                             <ListItem
                                 thumbnail
                                 onPress={() => {
-                                    console.log(item.image)
+                                    this.showItemDetails(item);
                                 }}
                             >
                                 <Left>

screens/Proximo/ProximoMainScreen.js

@@ -9,15 +9,7 @@ import FetchedDataSectionList from "../../components/FetchedDataSectionList";
 import ThemeManager from "../../utils/ThemeManager";
 import Touchable from "react-native-platform-touchable";
 
-const DATA_URL = "https://srv-falcon.etud.insa-toulouse.fr/~proximo/data/stock.json";
+const DATA_URL = "https://srv-falcon.etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
-
-const typesIcons = {
-    Nouveau: "alert-decagram",
-    Alimentaire: "food",
-    Boissons: "bottle-wine",
-    Utilitaires: "notebook",
-    Default: "information-outline",
-};
 
 
 /**
@@ -71,7 +63,7 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
                     data: []
                 });
                 for (let k = 0; k < articles.length; k++) {
-                    if (articles[k]['type'].includes(types[i])) {
+                    if (articles[k]['type'].includes(types[i].id)) {
                         finalData[i].data.push(articles[k]);
                     }
                 }
@@ -104,13 +96,13 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
                 >
                     <Left>
                         <CustomMaterialIcon
-                            icon={typesIcons[item.type] ? typesIcons[item.type] : typesIcons.Default}
+                            icon={item.type.icon}
                             fontSize={30}
                         />
                     </Left>
                     <Body>
                         <Text>
-                            {item.type}
+                            {item.type.name}
                         </Text>
                         <Badge><Text>
                             {item.data.length} {item.data.length > 1 ? i18n.t('proximoScreen.articles') : i18n.t('proximoScreen.article')}