Added a search feature in the Proximo articles + fixed typos in translations

components/SearchHeader.js

@@ -0,0 +1,92 @@
+// @flow
+
+import * as React from "react";
+import {Header} from "native-base";
+import {Platform, StyleSheet} from "react-native";
+import {getStatusBarHeight} from "react-native-status-bar-height";
+import Touchable from 'react-native-platform-touchable';
+import ThemeManager from "../utils/ThemeManager";
+import CustomMaterialIcon from "./CustomMaterialIcon";
+import {TextInput} from "react-native-paper";
+import i18n from "i18n-js";
+
+
+type Props = {
+    navigation: Object,
+    searchFunction: Function
+};
+
+type State = {
+    searchString: string
+}
+
+
+/**
+ * Custom component defining a search header using native base
+ */
+export default class SearchHeader extends React.Component<Props, State> {
+    state = {
+        searchString: "Test",
+    };
+
+    render() {
+        /* TODO:
+            - hard coded color (not theme-specific),
+            - bugs with placeHolder and underlineColorAndroid (do not work),
+            - subtle offset of the text to fix in the inputText
+            - not tested on iOS
+         */
+        return (
+            <Header style={styles.header}>
+                <Touchable
+                    style={{
+                        alignItems: "center",
+                        flexDirection: "row",
+                        padding: 7,
+                    }}
+                    onPress={() => this.props.navigation.goBack()}>
+                    <CustomMaterialIcon
+                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
+                        icon="arrow-left" />
+                </Touchable>
+
+                <TextInput
+                    style={{
+                        flex: 1,
+                        backgroundColor: "#CA535D",
+                        margin: 7,
+                    }}
+                    underlineColorAndroid={"transparent"}
+                    placeHolder={i18n.t("proximoScreen.search")}
+                    autoFocus={true}
+                    onChangeText={text => this.setState({searchString: text})}
+                    onSubmitEditing={text => {
+                        this.setState({searchString: text});
+                        this.props.searchFunction(this.state.searchString);
+                    }}
+                />
+
+                <Touchable
+                    style={{
+                        alignItems: "center",
+                        flexDirection: "row",
+                        padding: 7,
+                    }}
+                    onPress={() => this.props.searchFunction(this.state.searchString)}>
+                    <CustomMaterialIcon
+                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
+                        icon="magnify"/>
+                </Touchable>
+            </Header>
+        );
+    }
+};
+
+
+// Fix header in status bar on Android
+const styles = StyleSheet.create({
+    header: {
+        paddingTop: getStatusBarHeight(),
+        height: 54 + getStatusBarHeight(),
+    },
+});

navigation/AppNavigator.js

@@ -5,6 +5,7 @@ import {createMaterialBottomTabNavigatorWithInitialRoute} from './MainTabNavigat
 import SettingsScreen from '../screens/SettingsScreen';
 import AboutScreen from '../screens/About/AboutScreen';
 import ProximoListScreen from '../screens/Proximo/ProximoListScreen';
+import ProximoSearchScreen from "../screens/Proximo/ProximoSearchScreen";
 import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
 import ProxiwashAboutScreen from '../screens/Proxiwash/ProxiwashAboutScreen';
 import ProximoAboutScreen from '../screens/Proximo/ProximoAboutScreen';
@@ -26,6 +27,7 @@ function createAppContainerWithInitialRoute(initialRoute: string) {
                 Main: createMaterialBottomTabNavigatorWithInitialRoute(initialRoute),
                 // Drawer: MainDrawerNavigator,
                 ProximoListScreen: {screen: ProximoListScreen},
+                ProximoSearchScreen: {screen: ProximoSearchScreen},
                 SettingsScreen: {screen: SettingsScreen},
                 AboutScreen: {screen: AboutScreen},
                 AboutDependenciesScreen: {screen: AboutDependenciesScreen},
@@ -42,7 +44,7 @@ function createAppContainerWithInitialRoute(initialRoute: string) {
                 initialRouteName: "Main",
                 mode: 'card',
                 headerMode: "none",
-                transitionConfig: () => fromRight(),
+                // transitionConfig: () => fromRight(),
             })
     );
 }

screens/Proximo/ProximoMainScreen.js

@@ -79,13 +79,25 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
 
     getRightButton() {
         return (
-            <Touchable
+            <View
-                style={{padding: 6}}
+                style={{
-                onPress={() => this.props.navigation.navigate('ProximoAboutScreen')}>
+                    flexDirection:'row'
-                <CustomMaterialIcon
+                }}>
-                    color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
+                <Touchable
-                    icon="information"/>
+                    style={{padding: 6}}
-            </Touchable>
+                    onPress={() => this.props.navigation.navigate('ProximoSearchScreen', {data: this.state.fetchedData})}>
+                    <CustomMaterialIcon
+                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
+                        icon="magnify" />
+                </Touchable>
+                <Touchable
+                    style={{padding: 6}}
+                    onPress={() => this.props.navigation.navigate('ProximoAboutScreen')}>
+                    <CustomMaterialIcon
+                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
+                        icon="information"/>
+                </Touchable>
+            </View>
         );
     }
 

screens/Proximo/ProximoSearchScreen.js

@@ -0,0 +1,111 @@
+// @flow
+
+import * as React from 'react';
+import {Body, Container, Content, Left, ListItem, Right, Text, Thumbnail,} from 'native-base';
+import {FlatList} from "react-native";
+import i18n from "i18n-js";
+import ThemeManager from "../../utils/ThemeManager";
+import SearchHeader from "../../components/SearchHeader";
+
+type Props = {
+    navigation: Object,
+};
+
+type State = {
+    filteredData: Array<Object>,
+};
+
+/**
+ * Class defining proximo's article list of a certain category.
+ */
+export default class ProximoSearchScreen extends React.Component<Props, State> {
+    state = {
+        filteredData: this.props.navigation.getParam('data', {articles: [{name: "Error"}]}).articles,
+    };
+
+
+    /**
+     * get color depending on quantity available
+     *
+     * @param availableStock
+     * @return
+     */
+    getStockColor(availableStock: number) {
+        let color: string;
+        if (availableStock > 3)
+            color = ThemeManager.getCurrentThemeVariables().brandSuccess;
+        else if (availableStock > 0)
+            color = ThemeManager.getCurrentThemeVariables().brandWarning;
+        else
+            color = ThemeManager.getCurrentThemeVariables().brandDanger;
+        return color;
+    }
+
+
+    showItemDetails(item: Object) {
+        //TODO: implement onClick function (copy-paste from ProximoListScreen)
+    }
+
+    /**
+     * Returns only the articles whose name contains str. Case and accents insensitive.
+     * @param str
+     * @returns {[]}
+     */
+    filterData(str: string) {
+        let filteredData = [];
+        const testStr: String = str.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+        const articles: Object = this.props.navigation.getParam('data', {articles: [{name: "Error"}]}).articles;
+        for (const article: Object of articles) {
+            const name: String = String(article.name.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""));
+            if (name.includes(testStr)) {
+                filteredData.push(article)
+            }
+        }
+        return filteredData;
+    }
+
+    search(str: string) {
+        this.setState({
+            filteredData: this.filterData(str)
+        })
+    }
+
+    render() {
+        return (
+            <Container>
+                <SearchHeader searchFunction={this.search.bind(this)} navigation={this.props.navigation}/>
+                <Content>
+                    <FlatList
+                        data={this.state.filteredData}
+                        keyExtractor={(item) => item.name + item.code}
+                        style={{minHeight: 300, width: '100%'}}
+                        renderItem={({item}) =>
+                            <ListItem
+                                thumbnail
+                                onPress={() => {this.showItemDetails(item);}} >
+                                <Left>
+                                    <Thumbnail square source={{uri: item.image}}/>
+                                </Left>
+                                <Body>
+                                    <Text style={{marginLeft: 20}}>
+                                        {item.name}
+                                    </Text>
+                                    <Text note style={{
+                                        marginLeft: 20,
+                                        color: this.getStockColor(parseInt(item.quantity))
+                                    }}>
+                                        {item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
+                                    </Text>
+                                </Body>
+                                <Right>
+                                    <Text style={{fontWeight: "bold"}}>
+                                        {item.price}€
+                                    </Text>
+                                </Right>
+                            </ListItem>}
+                    />
+                </Content>
+            </Container>
+        );
+    }
+}

translations/en.json

@@ -25,7 +25,7 @@
     },
     "slide4": {
       "title": "Proximo",
-      "text": "Are you short on pasta? Or you maybe you feel a little peckish, then look up your INSA shop's stock in real time"
+      "text": "Are you short on pasta? Or maybe you feel a little peckish, then look up your INSA shop's stock in real time"
     },
     "slide5": {
       "title": "Planex",
@@ -129,7 +129,8 @@
     "description": "The Proximo is your small grocery store maintained by students directly on the campus. Open every day from 18h30 to 19h30, we welcome you when you are short on pastas or sodas ! Different products for different problems, everything at cost price. You can pay by Lydia or cash.",
     "openingHours": "Openning Hours",
     "paymentMethods": "Payment Methods",
-    "paymentMethodsDescription": "Cash or Lydia"
+    "paymentMethodsDescription": "Cash or Lydia",
+    "search": "Search"
   },
   "proxiwashScreen": {
     "dryer": "Dryer",
@@ -141,7 +142,7 @@
     "listUpdateFail": "Error while updating machines state",
     "error": "Could not update machines state. Pull down to retry.",
     "loading": "Loading...",
-    "description": "This is the washing service operated by Promologis for INSA's residences (We don't mind if you do not live on the campus and you do your laundry here). The room is right next to the R2, with 3 dryers and 9 washers, is open 7d/7 24h/24 ! Here you can check their availability ! You can bring your own detergent, use the one given on site or buy it at the Proximo (cheaper than the one given by the machines ). You can pay b credit card or cash.",
+    "description": "This is the washing service operated by Promologis for INSA's residences (We don't mind if you do not live on the campus and you do your laundry here). The room is right next to the R2, with 3 dryers and 9 washers, is open 7d/7 24h/24 ! Here you can check their availability ! You can bring your own detergent, use the one given on site or buy it at the Proximo (cheaper than the one given by the machines ). You can pay by credit card or cash.",
     "informationTab": "Information",
     "paymentTab": "Payment",
     "tariffs": "Tariffs",

translations/fr.json

@@ -21,11 +21,11 @@
     },
     "slide3": {
       "title": "N'oubliez plus votre linge !",
-      "text": "CAMPUS vous informe de la disponibilité des machines et vous permet d'être notifiés lorsque la vôtre se termine bientôt !"
+      "text": "CAMPUS vous informe de la disponibilité des machines et vous permet d'être notifié lorsque la vôtre se termine bientôt !"
     },
     "slide4": {
       "title": "Proximo",
-      "text": "Il vous manque des pâtes ? Ou un petit creux au gouter, regardez les stocks de votre supérette insaienne en temps réel"
+      "text": "Il vous manque des pâtes ? Ou un petit creux au goûter, regardez les stocks de votre supérette insaienne en temps réel"
     },
     "slide5": {
       "title": "Planex",
@@ -75,7 +75,7 @@
     "dashboard": {
       "seeMore": "Cliquez pour plus d'infos",
       "todayEventsTitle": "Événements aujourd'hui",
-      "todayEventsSubtitleNA": "Pas d'événements",
+      "todayEventsSubtitleNA": "Pas d'événement",
       "todayEventsSubtitle": " événement aujourd'hui",
       "todayEventsSubtitlePlural": " événements aujourd'hui",
       "proximoTitle": "Proximo",
@@ -126,10 +126,11 @@
     "listUpdateFail": "Erreur lors de la mise à jour de la list d'articles",
     "loading": "Chargement...",
     "inStock": "en stock",
-    "description": "Le Proximo c’est ta petite épicerie étudiante tenu par les étudiants directement sur le campus. Ouvert tous les jours de 18h30 à 19h30, nous t’accueillons et te souvent quand tu n’as plus de pâtes ou de diluant ! Différents produits pour différentes galère, le tout à prix coûtant. Tu peux payer par Lydia ou par espèce.",
+    "description": "Le Proximo c’est ta petite épicerie étudiante tenue par les étudiants directement sur le campus. Ouverte tous les jours de 18h30 à 19h30, nous t’accueillons et te sauvons quand tu n’as plus de pâtes ou de diluant ! Différents produits pour différentes galères, le tout à prix coûtant. Tu peux payer par Lydia ou par espèce.",
     "openingHours": "Horaires d'ouverture",
     "paymentMethods" : "Moyens de Paiement",
-    "paymentMethodsDescription" : "Espèce ou Lydia"
+    "paymentMethodsDescription" : "Espèce ou Lydia",
+    "search": "Rechercher"
   },
   "proxiwashScreen": {
     "dryer": "Sèche-Linge",
@@ -137,9 +138,9 @@
     "washer": "Lave-Linge",
     "washers": "Lave-Linges",
     "min": "min",
-    "listUpdated": "Etat des machines mis à jour",
+    "listUpdated": "État des machines mis à jour",
-    "listUpdateFail": "Erreur lors de la mise à jour del'état des machines",
+    "listUpdateFail": "Erreur lors de la mise à jour de l'état des machines",
-    "error": "Impossible de mettre a jour l'état des machines. Tirez vers le bas pour reessayer.",
+    "error": "Impossible de mettre a jour l'état des machines. Tirez vers le bas pour réessayer.",
     "loading": "Chargement...",
     "description": "C'est le service de laverie proposé par promologis pour les résidences INSA (On t'en voudra pas si tu loges pas sur le campus et que tu fais ta machine ici). Le local situé au pied du R2 avec ses 3 sèche-linges et 9 machines est ouvert 7J/7 24h/24 ! Ici tu peux vérifier leur disponibilité ! Tu peux amener ta lessive, la prendre sur place ou encore mieux l'acheter au Proximo (moins chère qu'à la laverie directement). Tu peux payer par CB ou espèces.",
     "informationTab": "Informations",
@@ -152,7 +153,7 @@
     "washerProcedure": "Déposer le linge dans le tambour sans le tasser et en respectant les charges.\n\nFermer la porte de l'appareil.\n\nSélectionner un programme avec l'une des quatre touches de programme favori standard.\n\nAprès avoir payé à la centrale de commande, appuyer sur le bouton marqué START du lave-linge.\n\nDès que le programme est terminé, l’afficheur indique 'Programme terminé', appuyer sur le bouton jaune d’ouverture du hublot pour récupérer le linge.",
     "washerTips": "Programme blanc/couleur : 6kg de linge sec (textiles en coton, lin, linge de corps, draps, jeans,serviettes de toilettes).\n\nProgramme nonrepassable : 3,5 kg de linge sec (textiles en fibres synthétiques, cotonet polyester mélangés).\n\nProgramme fin 30°C : 2,5 kg de linge sec (textiles délicats en fibres synthétiques, rayonne).\n\nProgramme laine 30°C : 2,5 kg de linge sec (textiles en laine et lainages lavables).",
     "dryerProcedure": "Déposer le linge dans le tambour sans le tasser et en respectant les charges.\n\nFermer la porte de l'appareil.\n\nSélectionner un programme avec l'une des quatre touches de programme favori standard.\n\nAprès avoir payé à la centrale de commande, appuyer sur le bouton marqué START du lave-linge.",
-    "dryerTips": "La durée conseillée est de 35 minutes pour 14kg de linge. Vous pouvez choisir une durée plus courte si le seche-linge n'est pas chargé.",
+    "dryerTips": "La durée conseillée est de 35 minutes pour 14kg de linge. Vous pouvez choisir une durée plus courte si le sèche-linge n'est pas chargé.",
     "procedure": "Procédure",
     "tips": "Conseils",
 
@@ -161,7 +162,7 @@
       "disableNotifications": "Désactiver les  notifications",
       "ok": "OK",
       "cancel": "Annuler",
-      "finished": "Cette machine est terminée. Si vous l'avez l'avez démarée, vous pouvez récupérer votre linge.",
+      "finished": "Cette machine est terminée. Si vous l'avez démarrée, vous pouvez récupérer votre linge.",
       "ready": "Cette machine est vide et prête à être utilisée.",
       "running": "Cette machine a démarré à %{start} et terminera à %{end}.\nTemps restant : %{remaining} min",
       "broken": "Cette machine est hors service. Merci pour votre compréhension.",
@@ -171,7 +172,7 @@
 
     },
     "states": {
-      "finished": "TERMINE",
+      "finished": "TERMINÉ",
       "ready": "DISPONIBLE",
       "running": "EN COURS",
       "broken": "HORS SERVICE",
@@ -195,7 +196,7 @@
   },
   "general": {
     "loading": "Chargement...",
-    "networkError": "Impossible de contacter les serveurs. Assurez vous d'être connecté à internet."
+    "networkError": "Impossible de contacter les serveurs. Assurez-vous d'être connecté à internet."
   },
   "date": {
     "daysOfWeek": {