Browse Source

Improved proximo screen

keplyx 4 years ago
parent
commit
893eca287e

+ 4
- 2
App.js View File

@@ -1,6 +1,6 @@
1 1
 import React from 'react';
2 2
 import {Dimensions, StyleSheet, View, Text} from 'react-native';
3
-import {StyleProvider} from 'native-base';
3
+import {StyleProvider, Root} from 'native-base';
4 4
 import AppNavigator from './navigation/AppNavigator';
5 5
 import ThemeManager from './utils/ThemeManager';
6 6
 import LocaleManager from './utils/LocaleManager';
@@ -48,7 +48,9 @@ export default class App extends React.Component {
48 48
         // console.log(this.state.currentTheme.variables.containerBgColor);
49 49
         return (
50 50
             <StyleProvider style={this.state.currentTheme}>
51
-                <AppNavigator/>
51
+                <Root>
52
+                    <AppNavigator/>
53
+                </Root>
52 54
             </StyleProvider>);
53 55
     }
54 56
 }

+ 33
- 8
components/CustomHeader.js View File

@@ -2,23 +2,48 @@ import React from "react";
2 2
 import {Body, Button, Header, Icon, Left, Right, Title} from "native-base";
3 3
 import {StyleSheet} from "react-native";
4 4
 import {getStatusBarHeight} from "react-native-status-bar-height";
5
+import Touchable from 'react-native-platform-touchable';
6
+
5 7
 
6 8
 export default class CustomHeader extends React.Component {
7 9
     render() {
10
+        let button;
11
+        let rightMenu;
12
+        if (this.props.backButton !== undefined && this.props.backButton === true)
13
+            button =
14
+                <Touchable
15
+                    style={{padding: 6}}
16
+                    onPress={() => this.props.navigation.goBack()}>
17
+                    <Icon
18
+                        style={{color: "#fff"}}
19
+                        name="arrow-left"
20
+                        type={'MaterialCommunityIcons'}/>
21
+                </Touchable>;
22
+        else
23
+            button =
24
+                <Touchable
25
+                    style={{padding: 6}}
26
+                    onPress={() => this.props.navigation.toggleDrawer()}>
27
+                    <Icon
28
+                        style={{color: "#fff"}}
29
+                        name="menu"
30
+                        type={'MaterialCommunityIcons'}/>
31
+                </Touchable>;
32
+
33
+        if (this.props.rightMenu)
34
+            rightMenu = this.props.rightMenu;
35
+        else
36
+            rightMenu = <Right/>;
37
+
8 38
         return (
9 39
             <Header style={styles.header}>
10 40
                 <Left>
11
-                    <Button
12
-                        transparent
13
-                        onPress={() => this.props.navigation.toggleDrawer()}
14
-                    >
15
-                        <Icon name="menu"/>
16
-                    </Button>
41
+                    {button}
17 42
                 </Left>
18 43
                 <Body>
19 44
                     <Title>{this.props.title}</Title>
20 45
                 </Body>
21
-                <Right/>
46
+                {rightMenu}
22 47
             </Header>);
23 48
     }
24 49
 };
@@ -30,4 +55,4 @@ const styles = StyleSheet.create({
30 55
         paddingTop: getStatusBarHeight(),
31 56
         height: 54 + getStatusBarHeight(),
32 57
     },
33
-});
58
+});

+ 2
- 3
components/SideMenu.js View File

@@ -1,7 +1,6 @@
1 1
 import React from 'react';
2
-import {Platform, Dimensions, ScrollView, StyleSheet, View, Image, FlatList} from 'react-native';
3
-import {Drawer} from 'react-native-paper';
4
-import {Badge, Text, Container, Content, Icon, Left, List, ListItem, Right} from "native-base";
2
+import {Platform, Dimensions, StyleSheet, Image, FlatList} from 'react-native';
3
+import {Badge, Text, Container, Content, Icon, Left, ListItem, Right} from "native-base";
5 4
 import i18n from "i18n-js";
6 5
 
7 6
 const deviceHeight = Dimensions.get("window").height;

+ 13
- 5
navigation/AppNavigator.js View File

@@ -1,9 +1,17 @@
1
-import { createAppContainer, createSwitchNavigator } from 'react-navigation';
1
+import {createAppContainer, createStackNavigator} from 'react-navigation';
2 2
 
3 3
 import MainDrawerNavigator from './MainDrawerNavigator';
4
+import ProximoListScreen from '../screens/Proximo/ProximoListScreen';
5
+
4 6
 
5 7
 export default createAppContainer(
6
-    createSwitchNavigator({
7
-        Main: MainDrawerNavigator,
8
-    })
9
-);
8
+    createStackNavigator({
9
+            Main: MainDrawerNavigator,
10
+            ProximoListScreen: {screen: ProximoListScreen},
11
+        },
12
+        {
13
+            initialRouteName: "Main",
14
+            mode: 'card',
15
+            headerMode: "none"
16
+        })
17
+);

+ 6
- 2
navigation/MainDrawerNavigator.js View File

@@ -4,7 +4,7 @@ import {createDrawerNavigator} from 'react-navigation';
4 4
 import HomeScreen from '../screens/HomeScreen';
5 5
 import PlanningScreen from '../screens/PlanningScreen';
6 6
 import ProxiwashScreen from '../screens/ProxiwashScreen';
7
-import ProximoScreen from '../screens/ProximoScreen';
7
+import ProximoMainScreen from '../screens/Proximo/ProximoMainScreen';
8 8
 import SettingsScreen from '../screens/SettingsScreen';
9 9
 import AboutScreen from '../screens/AboutScreen';
10 10
 import SideMenu from "../components/SideMenu";
@@ -14,11 +14,15 @@ export default createDrawerNavigator({
14 14
         Home: {screen: HomeScreen},
15 15
         Planning: {screen: PlanningScreen,},
16 16
         Proxiwash: {screen: ProxiwashScreen,},
17
-        Proximo: {screen: ProximoScreen,},
17
+        Proximo: {screen: ProximoMainScreen,},
18 18
         Settings: {screen: SettingsScreen,},
19 19
         About: {screen: AboutScreen,},
20 20
     }, {
21 21
         contentComponent: SideMenu,
22
+        initialRouteName: 'Home',
23
+        backBehavior: 'initialRoute',
24
+        drawerType: 'front',
25
+        useNativeAnimations: true,
22 26
     }
23 27
 );
24 28
 

+ 14
- 0
package-lock.json View File

@@ -6264,6 +6264,15 @@
6264 6264
       "resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-0.24.2.tgz",
6265 6265
       "integrity": "sha512-1iNIDikp2dkCG+8DguaEviYZiMSYyvwqYT7pO2YTZvuFRDSc/P9jXMhTUnSh4wNDlEeQ47OJ09l0pwWVBZ7wxg=="
6266 6266
     },
6267
+    "react-native-material-menu": {
6268
+      "version": "0.6.2",
6269
+      "resolved": "https://registry.npmjs.org/react-native-material-menu/-/react-native-material-menu-0.6.2.tgz",
6270
+      "integrity": "sha512-xrWO1JhfB+9vlq13Y5qwAgxsD6RJvGLammjm1vJzTXHp1drtFwizga2TLwsryy0h/fo224H3INVSAxS4PWc7+A==",
6271
+      "dev": true,
6272
+      "requires": {
6273
+        "prop-types": "^15.6.0"
6274
+      }
6275
+    },
6267 6276
     "react-native-paper": {
6268 6277
       "version": "2.16.0",
6269 6278
       "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-2.16.0.tgz",
@@ -6296,6 +6305,11 @@
6296 6305
         }
6297 6306
       }
6298 6307
     },
6308
+    "react-native-platform-touchable": {
6309
+      "version": "1.1.1",
6310
+      "resolved": "https://registry.npmjs.org/react-native-platform-touchable/-/react-native-platform-touchable-1.1.1.tgz",
6311
+      "integrity": "sha1-/eSsxl7qWF0osWTQw3FqQhKaaOQ="
6312
+    },
6299 6313
     "react-native-ratings": {
6300 6314
       "version": "6.3.1",
6301 6315
       "resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-6.3.1.tgz",

+ 4
- 2
package.json View File

@@ -25,10 +25,12 @@
25 25
     "react-native-web": "^0.11.4",
26 26
     "react-native-week-view": "latest",
27 27
     "react-navigation": "latest",
28
-    "react-navigation-material-bottom-tabs": "latest"
28
+    "react-navigation-material-bottom-tabs": "latest",
29
+    "react-native-platform-touchable": "latest"
29 30
   },
30 31
   "devDependencies": {
31
-    "babel-preset-expo": "^5.1.1"
32
+    "babel-preset-expo": "^5.1.1",
33
+    "react-native-material-menu": "^0.6.2"
32 34
   },
33 35
   "private": true
34 36
 }

+ 20
- 10
screens/AboutScreen.js View File

@@ -53,7 +53,8 @@ export default class AboutScreen extends React.Component {
53 53
                                 <Text>{Platform.OS === "ios" ? i18n.t('aboutScreen.appstore') : i18n.t('aboutScreen.playstore')}</Text>
54 54
                             </Left>
55 55
                             <Right>
56
-                                <Icon name="arrow-forward"/>
56
+                                <Icon name="chevron-right"
57
+                                      type={'MaterialCommunityIcons'}/>
57 58
                             </Right>
58 59
                         </CardItem>
59 60
                         <CardItem button
@@ -66,7 +67,8 @@ export default class AboutScreen extends React.Component {
66 67
                                 <Text>Gitlab</Text>
67 68
                             </Left>
68 69
                             <Right>
69
-                                <Icon name="arrow-forward"/>
70
+                                <Icon name="chevron-right"
71
+                                      type={'MaterialCommunityIcons'}/>
70 72
                             </Right>
71 73
                         </CardItem>
72 74
                         <CardItem button
@@ -79,7 +81,8 @@ export default class AboutScreen extends React.Component {
79 81
                                 <Text>{i18n.t('aboutScreen.bugs')}</Text>
80 82
                             </Left>
81 83
                             <Right>
82
-                                <Icon name="arrow-forward"/>
84
+                                <Icon name="chevron-right"
85
+                                      type={'MaterialCommunityIcons'}/>
83 86
                             </Right>
84 87
                         </CardItem>
85 88
                         <CardItem button
@@ -94,7 +97,8 @@ export default class AboutScreen extends React.Component {
94 97
                                 </Text>
95 98
                             </Left>
96 99
                             <Right>
97
-                                <Icon name="arrow-forward"/>
100
+                                <Icon name="chevron-right"
101
+                                      type={'MaterialCommunityIcons'}/>
98 102
                             </Right>
99 103
                         </CardItem>
100 104
                         <CardItem button
@@ -109,7 +113,8 @@ export default class AboutScreen extends React.Component {
109 113
                                 </Text>
110 114
                             </Left>
111 115
                             <Right>
112
-                                <Icon name="arrow-forward"/>
116
+                                <Icon name="chevron-right"
117
+                                      type={'MaterialCommunityIcons'}/>
113 118
                             </Right>
114 119
                         </CardItem>
115 120
                     </Card>
@@ -140,7 +145,8 @@ export default class AboutScreen extends React.Component {
140 145
                                 </Text>
141 146
                             </Left>
142 147
                             <Right>
143
-                                <Icon name="arrow-forward"/>
148
+                                <Icon name="chevron-right"
149
+                                      type={'MaterialCommunityIcons'}/>
144 150
                             </Right>
145 151
                         </CardItem>
146 152
                         <CardItem button
@@ -155,7 +161,8 @@ export default class AboutScreen extends React.Component {
155 161
                                 </Text>
156 162
                             </Left>
157 163
                             <Right>
158
-                                <Icon name="arrow-forward"/>
164
+                                <Icon name="chevron-right"
165
+                                      type={'MaterialCommunityIcons'}/>
159 166
                             </Right>
160 167
                         </CardItem>
161 168
                         <CardItem button
@@ -170,7 +177,8 @@ export default class AboutScreen extends React.Component {
170 177
                                 </Text>
171 178
                             </Left>
172 179
                             <Right>
173
-                                <Icon name="arrow-forward"/>
180
+                                <Icon name="chevron-right"
181
+                                      type={'MaterialCommunityIcons'}/>
174 182
                             </Right>
175 183
                         </CardItem>
176 184
                     </Card>
@@ -191,7 +199,8 @@ export default class AboutScreen extends React.Component {
191 199
                                 </Text>
192 200
                             </Left>
193 201
                             <Right>
194
-                                <Icon name="arrow-forward"/>
202
+                                <Icon name="chevron-right"
203
+                                      type={'MaterialCommunityIcons'}/>
195 204
                             </Right>
196 205
                         </CardItem>
197 206
                         <CardItem button
@@ -206,7 +215,8 @@ export default class AboutScreen extends React.Component {
206 215
                                 </Text>
207 216
                             </Left>
208 217
                             <Right>
209
-                                <Icon name="arrow-forward"/>
218
+                                <Icon name="chevron-right"
219
+                                      type={'MaterialCommunityIcons'}/>
210 220
                             </Right>
211 221
                         </CardItem>
212 222
                     </Card>

+ 1
- 1
screens/HomeScreen.js View File

@@ -12,7 +12,7 @@ export default class HomeScreen extends React.Component {
12 12
         return (
13 13
             <Container>
14 14
                 <CustomHeader navigation={nav} title={i18n.t('screens.home')}/>
15
-                <Content>
15
+                <Content padder>
16 16
                     <Button>
17 17
                         <Icon
18 18
                             active

+ 199
- 0
screens/Proximo/ProximoListScreen.js View File

@@ -0,0 +1,199 @@
1
+import React from 'react';
2
+import {Container, Text, Content, ListItem, Left, Thumbnail, Right, Button, Icon} from 'native-base';
3
+import CustomHeader from "../../components/CustomHeader";
4
+import {AsyncStorage, FlatList, View} from "react-native";
5
+import Touchable from 'react-native-platform-touchable';
6
+import Menu, {MenuItem, MenuDivider} from 'react-native-material-menu';
7
+import i18n from "i18n-js";
8
+
9
+const IMG_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/img/";
10
+const defaultImage = require('../../assets/image-missing.png');
11
+
12
+const sortMode = {
13
+    price: "0",
14
+    name: '1',
15
+};
16
+
17
+
18
+function sortPrice(a, b) {
19
+    return a.price - b.price;
20
+}
21
+
22
+function sortPriceReverse(a, b) {
23
+    return b.price - a.price;
24
+}
25
+
26
+function sortName(a, b) {
27
+    if (a.name < b.name)
28
+        return -1;
29
+    if (a.name > b.name)
30
+        return 1;
31
+    return 0;
32
+}
33
+
34
+function sortNameReverse(a, b) {
35
+    if (a.name < b.name)
36
+        return 1;
37
+    if (a.name > b.name)
38
+        return -1;
39
+    return 0;
40
+}
41
+
42
+
43
+export default class ProximoMainScreen extends React.Component {
44
+    constructor(props) {
45
+        super(props);
46
+        this.state = {
47
+            navData: this.props.navigation.getParam('data', []).sort(sortPrice),
48
+            currentSortMode: sortMode.price,
49
+            isSortReversed: false,
50
+            sortPriceIcon: '',
51
+            sortNameIcon: '',
52
+        };
53
+    }
54
+
55
+    setMenuRef = ref => {
56
+        this._menu = ref;
57
+    };
58
+
59
+    toggleSortMode(mode) {
60
+        let isReverse = this.state.isSortReversed;
61
+        if (mode === this.state.currentSortMode) // reverse mode
62
+            isReverse = !isReverse; // this.state not updating on this function cycle
63
+        else
64
+            isReverse = false;
65
+        this.setSortMode(mode, isReverse);
66
+    }
67
+
68
+    setSortMode(mode, isReverse) {
69
+        this.setState({
70
+            currentSortMode: mode,
71
+            isSortReversed: isReverse
72
+        });
73
+        let data = this.state.navData;
74
+        switch (mode) {
75
+            case sortMode.price:
76
+                if (isReverse) {
77
+                    data.sort(sortPriceReverse);
78
+                } else {
79
+                    data.sort(sortPrice);
80
+                }
81
+                break;
82
+            case sortMode.name:
83
+                if (isReverse) {
84
+                    data.sort(sortNameReverse);
85
+                } else {
86
+                    data.sort(sortName);
87
+                }
88
+                break;
89
+        }
90
+        this.setState({
91
+            navData: data,
92
+        });
93
+        this.setupSortIcons(mode, isReverse);
94
+        this._menu.hide();
95
+    }
96
+
97
+    componentDidMount() {
98
+        this.setSortMode(this.state.currentSortMode, this.state.isSortReversed);
99
+    }
100
+
101
+    setupSortIcons(mode, isReverse) {
102
+        const downSortIcon =
103
+            <Icon
104
+                active
105
+                name={'sort-descending'}
106
+                type={'MaterialCommunityIcons'}/>;
107
+        const upSortIcon =
108
+            <Icon
109
+                active
110
+                name={'sort-ascending'}
111
+                type={'MaterialCommunityIcons'}/>;
112
+        switch (mode) {
113
+            case sortMode.price:
114
+                this.setState({sortNameIcon: ''});
115
+                if (isReverse) {
116
+                    this.setState({sortPriceIcon: upSortIcon});
117
+                } else {
118
+                    this.setState({sortPriceIcon: downSortIcon});
119
+                }
120
+                break;
121
+            case sortMode.name:
122
+                this.setState({sortPriceIcon: ''});
123
+                if (isReverse) {
124
+                    this.setState({sortNameIcon: upSortIcon});
125
+                } else {
126
+                    this.setState({sortNameIcon: downSortIcon});
127
+                }
128
+                break;
129
+        }
130
+    }
131
+
132
+    render() {
133
+        const nav = this.props.navigation;
134
+        const navType = nav.getParam('type', 'Empty');
135
+
136
+        return (
137
+            <Container>
138
+                <CustomHeader backButton={true} navigation={nav} title={navType} rightMenu={
139
+                    <Right>
140
+                        <Menu
141
+                            ref={this.setMenuRef}
142
+                            button={
143
+                                <Touchable
144
+                                    style={{padding: 6}}
145
+                                    onPress={() =>
146
+                                        this._menu.show()
147
+                                    }>
148
+                                    <Icon
149
+                                        style={{color: "#fff"}}
150
+                                        name="sort"
151
+                                        type={'MaterialCommunityIcons'}/>
152
+                                </Touchable>
153
+                            }
154
+                        >
155
+                            <MenuItem
156
+                                onPress={() => this.toggleSortMode(sortMode.name)}>
157
+                                {this.state.sortNameIcon}
158
+                                {i18n.t('proximoScreen.sortName')}
159
+                            </MenuItem>
160
+                            <MenuItem
161
+                                onPress={() => this.toggleSortMode(sortMode.price)}>
162
+                                {this.state.sortPriceIcon}
163
+                                {i18n.t('proximoScreen.sortPrice')}
164
+                            </MenuItem>
165
+                        </Menu>
166
+                    </Right>
167
+                }/>
168
+
169
+                <Content>
170
+                    <FlatList
171
+                        data={this.state.navData}
172
+                        extraData={this.state.navData}
173
+                        keyExtractor={(item, index) => item.name}
174
+                        style={{minHeight: 300, width: '100%'}}
175
+                        renderItem={({item}) =>
176
+                            <ListItem
177
+                                thumbnail
178
+                                onPress={() => {
179
+                                    console.log(IMG_URL + item.name + '.jpg')
180
+                                }}
181
+                            >
182
+                                <Left>
183
+                                    <Thumbnail square source={{uri: IMG_URL + item.name + '.jpg'}}/>
184
+                                    <Text style={{marginLeft: 20}}>
185
+                                        {item.name}
186
+                                    </Text>
187
+                                </Left>
188
+                                <Right style={{flex: 1}}>
189
+                                    <Text>
190
+                                        {item.price}€
191
+                                    </Text>
192
+                                </Right>
193
+                            </ListItem>}
194
+                    />
195
+                </Content>
196
+            </Container>
197
+        );
198
+    }
199
+}

+ 134
- 0
screens/Proximo/ProximoMainScreen.js View File

@@ -0,0 +1,134 @@
1
+import React from 'react';
2
+import {StyleSheet, RefreshControl, FlatList} from 'react-native';
3
+import {Container, Text, Content, ListItem, Left, Right, Body, Badge, Icon, Toast} from 'native-base';
4
+import CustomHeader from "../../components/CustomHeader";
5
+import i18n from "i18n-js";
6
+
7
+const DATA_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/dataProximo.json";
8
+
9
+const typesIcons = {
10
+    Nouveau: "alert-decagram",
11
+    Alimentaire: "food",
12
+    Boissons: "bottle-wine",
13
+    Utilitaires: "notebook",
14
+    Default: "information-outline",
15
+};
16
+
17
+export default class ProximoMainScreen extends React.Component {
18
+
19
+    constructor(props) {
20
+        super(props);
21
+        this.state = {
22
+            refreshing: false,
23
+            data: {},
24
+        };
25
+    }
26
+
27
+    static generateDataset(types, data) {
28
+        let finalData = [];
29
+        for (let i = 0; i < types.length; i++) {
30
+            finalData.push({
31
+                type: types[i],
32
+                data: []
33
+            });
34
+            for (let k = 0; k < data.length; k++) {
35
+                if (data[k]['type'].includes(types[i])) {
36
+                    finalData[i].data.push(data[k]);
37
+                }
38
+            }
39
+        }
40
+        return finalData;
41
+    }
42
+
43
+    async readData() {
44
+        try {
45
+            let response = await fetch(DATA_URL);
46
+            let responseJson = await response.json();
47
+
48
+            if (responseJson['articles'].length !== 0 && responseJson['types'].length !== 0) {
49
+                let data = ProximoMainScreen.generateDataset(responseJson['types'], responseJson['articles']);
50
+                this.setState({
51
+                    data: data
52
+                });
53
+            } else
54
+                this.setState({data: undefined});
55
+        } catch (error) {
56
+            console.error(error);
57
+            return undefined;
58
+        }
59
+    }
60
+
61
+    componentDidMount() {
62
+        this._onRefresh();
63
+    }
64
+
65
+    _onRefresh = () => {
66
+        this.setState({refreshing: true});
67
+        this.readData().then(() => {
68
+            this.setState({refreshing: false});
69
+            Toast.show({
70
+                text: i18n.t('proximoScreen.listUpdated'),
71
+                buttonText: 'OK',
72
+                type: "success",
73
+                duration: 2000
74
+            })
75
+        });
76
+    };
77
+
78
+
79
+    render() {
80
+        const nav = this.props.navigation;
81
+        return (
82
+            <Container>
83
+                <CustomHeader navigation={nav} title={'Proximo'}/>
84
+                <Content>
85
+                    <FlatList
86
+                        data={this.state.data}
87
+                        extraData={this.state}
88
+                        keyExtractor={(item, index) => item.type}
89
+                        refreshControl={
90
+                            <RefreshControl
91
+                                refreshing={this.state.refreshing}
92
+                                onRefresh={this._onRefresh}
93
+                            />
94
+                        }
95
+                        style={{minHeight: 300, width: '100%'}}
96
+                        renderItem={({item}) =>
97
+                            <ListItem
98
+                                button
99
+                                thumbnail
100
+                                onPress={() => {
101
+                                    nav.navigate('ProximoListScreen', item);
102
+                                }}
103
+                            >
104
+                                <Left>
105
+                                    <Icon name={typesIcons[item.type] ? typesIcons[item.type] : typesIcons.Default}
106
+                                          type={'MaterialCommunityIcons'}
107
+                                          style={styles.icon}/>
108
+                                </Left>
109
+                                <Body>
110
+                                    <Text>
111
+                                        {item.type}
112
+                                    </Text>
113
+                                    <Badge><Text>
114
+                                        {item.data.length} {item.data.length > 1 ? i18n.t('proximoScreen.articles') : i18n.t('proximoScreen.article')}
115
+                                    </Text></Badge>
116
+                                </Body>
117
+                                <Right>
118
+                                    <Icon name="chevron-right"
119
+                                          type={'MaterialCommunityIcons'}/>
120
+                                </Right>
121
+                            </ListItem>}
122
+                    />
123
+                </Content>
124
+            </Container>
125
+        );
126
+    }
127
+}
128
+
129
+const styles = StyleSheet.create({
130
+    icon: {
131
+        fontSize: 30,
132
+        width: 30
133
+    }
134
+});

+ 0
- 113
screens/ProximoScreen.js View File

@@ -1,113 +0,0 @@
1
-import React from 'react';
2
-import {StyleSheet, View, Alert, ScrollView, RefreshControl, FlatList} from 'react-native';
3
-import {Container, Text, Content, ListItem, Left, Thumbnail, Right, Badge} from 'native-base';
4
-import CustomHeader from "../components/CustomHeader";
5
-
6
-const DATA_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/data.txt";
7
-const IMG_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/img/";
8
-
9
-const defaultImage = require('../assets/image-missing.png');
10
-
11
-export default class ProximoScreen extends React.Component {
12
-
13
-    constructor(props) {
14
-        super(props);
15
-        this.state = {
16
-            refreshing: false,
17
-            data: undefined
18
-        };
19
-    }
20
-
21
-    async readData() {
22
-        try {
23
-            let response = await fetch(
24
-                'https://etud.insa-toulouse.fr/~vergnet/appli-amicale/data.txt',
25
-            );
26
-            let responseText = await response.text();
27
-            let responseArray = responseText.split('\n');
28
-            let responseFinal = [];
29
-            for (let i = 0; i < responseArray.length; i++) {
30
-                if (responseArray[i] !== "") {
31
-                    let itemArray = responseArray[i]
32
-                        .replace('[', '')
33
-                        .replace(']', '')
34
-                        .split(',')[1]
35
-                        .split(';');
36
-                    let object = {
37
-                        name: itemArray[0],
38
-                        price: itemArray[1],
39
-                        image: defaultImage
40
-                    };
41
-                    responseFinal.push(object);
42
-                }
43
-            }
44
-            this.setState({data: responseFinal});
45
-        } catch (error) {
46
-            console.error(error);
47
-            return undefined;
48
-        }
49
-    }
50
-
51
-    componentDidMount() {
52
-        this._onRefresh();
53
-    }
54
-
55
-    _onRefresh = () => {
56
-        this.setState({refreshing: true});
57
-        this.readData().then(() => {
58
-            this.setState({refreshing: false});
59
-            // console.log(this.state.data);
60
-        });
61
-    };
62
-
63
-
64
-    render() {
65
-        const nav = this.props.navigation;
66
-        return (
67
-            <Container>
68
-                <CustomHeader navigation={nav} title={'Proximo'}/>
69
-                <Content>
70
-                    <FlatList
71
-                        data={this.state.data}
72
-                        extraData={this.state}
73
-                        keyExtractor={(item, index) => item.name}
74
-                        refreshControl={
75
-                            <RefreshControl
76
-                                refreshing={this.state.refreshing}
77
-                                onRefresh={this._onRefresh}
78
-                            />
79
-                        }
80
-                        style={{minHeight: 300, width: '100%'}}
81
-                        renderItem={({item}) =>
82
-                            <ListItem
83
-                                onPress={() => {
84
-                                    console.log(IMG_URL + item.name + '.jpg')
85
-                                }}
86
-                            >
87
-                                <Left>
88
-                                    <Thumbnail square source={{ uri: IMG_URL + item.name + '.jpg' }} />
89
-                                    <Text style={{marginLeft: 20}}>
90
-                                        {item.name}
91
-                                    </Text>
92
-                                </Left>
93
-                                <Right style={{ flex: 1 }}>
94
-                                    <Text>
95
-                                        {item.price}€
96
-                                    </Text>
97
-                                </Right>
98
-                            </ListItem>}
99
-                        />
100
-                </Content>
101
-            </Container>
102
-        );
103
-    }
104
-}
105
-
106
-const styles = StyleSheet.create({
107
-    container: {
108
-        flex: 1,
109
-        backgroundColor: '#fff',
110
-        alignItems: 'center',
111
-        justifyContent: 'center',
112
-    },
113
-});

+ 8
- 0
translations/en.json View File

@@ -21,4 +21,12 @@
21 21
     "reactNative": "Made with React Native",
22 22
     "libs": "Libraries used"
23 23
   },
24
+  "proximoScreen": {
25
+    "emptyList": "Empty List",
26
+    "article": "Article",
27
+    "articles": "Articles",
28
+    "sortName": "Sort by name",
29
+    "sortPrice": "Sort by price",
30
+    "listUpdated": "Article list updated!"
31
+  }
24 32
 }

+ 8
- 0
translations/fr.json View File

@@ -20,5 +20,13 @@
20 20
     "technologies": "Technologies",
21 21
     "reactNative": "Créé avec React Native",
22 22
     "libs": "Librairies utilisées"
23
+  },
24
+  "proximoScreen": {
25
+    "emptyList": "Liste Vide",
26
+    "article": "Article",
27
+    "articles": "Articles",
28
+    "sortName": "Trier par nom",
29
+    "sortPrice": "Trier par prix",
30
+    "listUpdated": "Liste des articles mise à jour !"
23 31
   }
24 32
 }

Loading…
Cancel
Save