2019-06-29 13:37:21 +02:00
|
|
|
// @flow
|
|
|
|
|
|
|
|
|
|
import * as React from 'react';
|
2019-08-08 18:25:13 +02:00
|
|
|
import {Platform, View} from 'react-native'
|
2019-07-26 14:14:01 +02:00
|
|
|
import {Badge, Body, H2, Left, ListItem, Right, Text} from 'native-base';
|
2019-06-27 10:17:51 +02:00
|
|
|
import i18n from "i18n-js";
|
2019-06-28 11:35:15 +02:00
|
|
|
import CustomMaterialIcon from "../../components/CustomMaterialIcon";
|
2019-07-26 14:14:01 +02:00
|
|
|
import FetchedDataSectionList from "../../components/FetchedDataSectionList";
|
2019-08-08 18:25:13 +02:00
|
|
|
import ThemeManager from "../../utils/ThemeManager";
|
|
|
|
|
import Touchable from "react-native-platform-touchable";
|
2019-06-27 10:17:51 +02:00
|
|
|
|
2019-09-12 12:01:01 +02:00
|
|
|
const DATA_URL = "https://srv-falcon.etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
|
2019-06-27 10:17:51 +02:00
|
|
|
|
2019-06-29 13:37:21 +02:00
|
|
|
|
2019-06-29 15:43:57 +02:00
|
|
|
/**
|
|
|
|
|
* Class defining the main proximo screen. This screen shows the different categories of articles
|
|
|
|
|
* offered by proximo.
|
|
|
|
|
*/
|
2019-07-26 14:14:01 +02:00
|
|
|
export default class ProximoMainScreen extends FetchedDataSectionList {
|
|
|
|
|
|
2019-07-30 20:40:17 +02:00
|
|
|
constructor() {
|
2019-07-31 19:11:30 +02:00
|
|
|
super(DATA_URL, 0);
|
2019-07-26 14:14:01 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
getHeaderTranslation() {
|
|
|
|
|
return i18n.t("screens.proximo");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
getUpdateToastTranslations() {
|
|
|
|
|
return [i18n.t("proximoScreen.listUpdated"), i18n.t("proximoScreen.listUpdateFail")];
|
|
|
|
|
}
|
2019-06-29 13:37:21 +02:00
|
|
|
|
2019-07-26 14:14:01 +02:00
|
|
|
getKeyExtractor(item: Object) {
|
2019-07-28 12:40:35 +02:00
|
|
|
return item !== undefined ? item.type : undefined;
|
2019-07-26 14:14:01 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
createDataset(fetchedData: Object) {
|
|
|
|
|
return [
|
|
|
|
|
{
|
2019-09-16 18:54:50 +02:00
|
|
|
title: '',
|
2019-07-26 14:14:01 +02:00
|
|
|
data: ProximoMainScreen.generateData(fetchedData),
|
|
|
|
|
extraData: super.state,
|
2019-07-31 14:22:36 +02:00
|
|
|
keyExtractor: this.getKeyExtractor
|
2019-07-26 14:14:01 +02:00
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
}
|
2019-06-27 10:17:51 +02:00
|
|
|
|
2019-06-29 15:43:57 +02:00
|
|
|
/**
|
2019-07-26 14:14:01 +02:00
|
|
|
* Generate the data using types and FetchedData.
|
2019-06-29 15:43:57 +02:00
|
|
|
* This will group items under the same type.
|
|
|
|
|
*
|
2019-07-26 14:14:01 +02:00
|
|
|
* @param fetchedData The array of articles represented by objects
|
2019-06-29 15:43:57 +02:00
|
|
|
* @returns {Array} The formatted dataset
|
|
|
|
|
*/
|
2019-07-26 14:14:01 +02:00
|
|
|
static generateData(fetchedData: Object) {
|
2019-06-27 10:17:51 +02:00
|
|
|
let finalData = [];
|
2019-07-26 14:14:01 +02:00
|
|
|
if (fetchedData.types !== undefined && fetchedData.articles !== undefined) {
|
|
|
|
|
let types = fetchedData.types;
|
|
|
|
|
let articles = fetchedData.articles;
|
|
|
|
|
for (let i = 0; i < types.length; i++) {
|
|
|
|
|
finalData.push({
|
|
|
|
|
type: types[i],
|
|
|
|
|
data: []
|
|
|
|
|
});
|
|
|
|
|
for (let k = 0; k < articles.length; k++) {
|
2019-09-12 12:01:01 +02:00
|
|
|
if (articles[k]['type'].includes(types[i].id)) {
|
2019-07-26 14:14:01 +02:00
|
|
|
finalData[i].data.push(articles[k]);
|
|
|
|
|
}
|
2019-06-27 10:17:51 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2019-09-17 11:07:58 +02:00
|
|
|
finalData.sort(ProximoMainScreen.sortFinalData);
|
2019-06-27 10:17:51 +02:00
|
|
|
return finalData;
|
|
|
|
|
}
|
|
|
|
|
|
2019-09-17 11:07:58 +02:00
|
|
|
static sortFinalData(a: Object, b: Object) {
|
|
|
|
|
return a.type.id - b.type.id;
|
|
|
|
|
}
|
|
|
|
|
|
2019-08-08 18:25:13 +02:00
|
|
|
getRightButton() {
|
|
|
|
|
return (
|
|
|
|
|
<Touchable
|
|
|
|
|
style={{padding: 6}}
|
|
|
|
|
onPress={() => this.props.navigation.navigate('ProximoAboutScreen')}>
|
|
|
|
|
<CustomMaterialIcon
|
|
|
|
|
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
|
|
|
|
|
icon="information"/>
|
|
|
|
|
</Touchable>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2019-08-06 13:28:11 +02:00
|
|
|
getRenderItem(item: Object, section: Object, data: Object) {
|
2019-08-01 11:04:27 +02:00
|
|
|
if (item.data.length > 0) {
|
|
|
|
|
return (
|
|
|
|
|
<ListItem
|
|
|
|
|
button
|
|
|
|
|
thumbnail
|
|
|
|
|
onPress={() => {
|
|
|
|
|
this.props.navigation.navigate('ProximoListScreen', item);
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<Left>
|
|
|
|
|
<CustomMaterialIcon
|
2019-09-12 12:01:01 +02:00
|
|
|
icon={item.type.icon}
|
2019-08-01 11:04:27 +02:00
|
|
|
fontSize={30}
|
|
|
|
|
/>
|
|
|
|
|
</Left>
|
|
|
|
|
<Body>
|
|
|
|
|
<Text>
|
2019-09-12 12:01:01 +02:00
|
|
|
{item.type.name}
|
2019-08-01 11:04:27 +02:00
|
|
|
</Text>
|
|
|
|
|
<Badge><Text>
|
|
|
|
|
{item.data.length} {item.data.length > 1 ? i18n.t('proximoScreen.articles') : i18n.t('proximoScreen.article')}
|
|
|
|
|
</Text></Badge>
|
|
|
|
|
</Body>
|
|
|
|
|
<Right>
|
|
|
|
|
<CustomMaterialIcon icon="chevron-right"/>
|
|
|
|
|
</Right>
|
|
|
|
|
</ListItem>
|
|
|
|
|
);
|
|
|
|
|
} else {
|
|
|
|
|
return <View/>;
|
|
|
|
|
}
|
|
|
|
|
|
2019-06-27 10:17:51 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
