application-amicale/screens/About/AboutScreen.js

419 lines
14 KiB
JavaScript
Raw Normal View History

// @flow
import * as React from 'react';
import {FlatList, Linking, Platform, View} from 'react-native';
2019-09-17 11:51:26 +02:00
import {Body, Card, CardItem, Container, Content, H1, Left, Right, Text, Thumbnail, Button} from 'native-base';
2019-06-27 11:08:56 +02:00
import CustomHeader from "../../components/CustomHeader";
2019-06-25 22:20:24 +02:00
import i18n from "i18n-js";
2019-06-27 11:08:56 +02:00
import appJson from '../../app';
import packageJson from '../../package';
2019-06-28 11:35:15 +02:00
import CustomMaterialIcon from "../../components/CustomMaterialIcon";
import AsyncStorageManager from "../../utils/AsyncStorageManager";
import {Modalize} from "react-native-modalize";
2019-09-17 11:51:26 +02:00
import ThemeManager from "../../utils/ThemeManager";
2019-06-25 22:20:24 +02:00
const links = {
2019-08-31 10:55:56 +02:00
appstore: 'https://apps.apple.com/us/app/campus-amicale-insat/id1477722148',
2019-08-24 19:17:21 +02:00
playstore: 'https://play.google.com/store/apps/details?id=fr.amicaleinsat.application',
2019-08-09 11:47:44 +02:00
git: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/README.md',
2019-09-17 11:51:26 +02:00
bugsMail: 'mailto:vergnet@etud.insa-toulouse.fr?' +
'subject=' +
'[BUG] Application Amicale INSA Toulouse' +
'&body=' +
'Coucou Arnaud ça bug c\'est nul,\n\n' +
'Informations sur ton système si tu sais (iOS ou Android, modèle du tel, version):\n\n\n' +
'Nature du problème :\n\n\n' +
'Étapes pour reproduire ce pb :\n\n\n\n' +
'Stp corrige le pb, bien cordialement.',
bugsGit: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/issues',
changelog: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/Changelog.md',
license: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/LICENSE',
2019-11-16 12:55:47 +01:00
authorMail: "mailto:vergnet@etud.insa-toulouse.fr?" +
2019-09-17 11:51:26 +02:00
"subject=" +
"Application Amicale INSA Toulouse" +
"&body=" +
"Coucou !\n\n",
2019-11-16 12:55:47 +01:00
authorLinkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/',
2019-11-16 13:19:28 +01:00
yohanMail: "mailto:ysimard@etud.insa-toulouse.fr?" +
2019-11-16 12:55:47 +01:00
"subject=" +
"Application Amicale INSA Toulouse" +
"&body=" +
"Coucou !\n\n",
yohanLinkedin: 'https://www.linkedin.com/in/yohan-simard',
2019-06-25 22:20:24 +02:00
react: 'https://facebook.github.io/react-native/',
};
type Props = {
navigation: Object,
};
type State = {
isDebugUnlocked: boolean,
};
2019-06-29 15:43:57 +02:00
/**
* Opens a link in the device's browser
* @param link The link to open
*/
2019-06-28 11:35:15 +02:00
function openWebLink(link) {
Linking.openURL(link).catch((err) => console.error('Error opening link', err));
}
2019-06-25 22:20:24 +02:00
2019-06-29 15:43:57 +02:00
/**
* Class defining an about screen. This screen shows the user information about the app and it's author.
*/
export default class AboutScreen extends React.Component<Props, State> {
debugTapCounter = 0;
2019-09-17 11:51:26 +02:00
modalRef: { current: null | Modalize };
state = {
isDebugUnlocked: AsyncStorageManager.getInstance().preferences.debugUnlocked.current === '1'
};
2019-06-25 22:20:24 +02:00
2019-09-17 11:51:26 +02:00
constructor(props: any) {
super(props);
this.modalRef = React.createRef();
}
2019-06-29 15:43:57 +02:00
/**
* Data to be displayed in the app card
*/
appData: Array<Object> = [
2019-06-28 11:35:15 +02:00
{
onPressCallback: () => openWebLink(Platform.OS === "ios" ? links.appstore : links.playstore),
icon: Platform.OS === "ios" ? 'apple' : 'google-play',
text: Platform.OS === "ios" ? i18n.t('aboutScreen.appstore') : i18n.t('aboutScreen.playstore'),
showChevron: true
},
{
2019-09-17 11:51:26 +02:00
onPressCallback: () => this.openBugReportModal(),
icon: 'bug',
text: i18n.t('aboutScreen.bugs'),
2019-08-05 15:10:20 +02:00
showChevron: true
},
{
onPressCallback: () => openWebLink(links.git),
2019-06-28 11:35:15 +02:00
icon: 'git',
2019-08-05 15:10:20 +02:00
text: 'Git',
2019-06-28 11:35:15 +02:00
showChevron: true
},
{
onPressCallback: () => openWebLink(links.changelog),
icon: 'refresh',
text: i18n.t('aboutScreen.changelog'),
showChevron: true
},
{
onPressCallback: () => openWebLink(links.license),
icon: 'file-document',
text: i18n.t('aboutScreen.license'),
showChevron: true
},
{
onPressCallback: () => this.props.navigation.navigate('DebugScreen'),
icon: 'bug-check',
text: i18n.t('aboutScreen.debug'),
showChevron: true,
showOnlyDebug: true
},
2019-06-28 11:35:15 +02:00
];
2019-06-29 15:43:57 +02:00
/**
* Data to be displayed in the author card
*/
authorData: Array<Object> = [
2019-06-28 11:35:15 +02:00
{
onPressCallback: () => this.tryUnlockDebugMode(),
2019-06-28 11:35:15 +02:00
icon: 'account-circle',
text: 'Arnaud VERGNET',
showChevron: false
},
{
2019-11-16 12:55:47 +01:00
onPressCallback: () => openWebLink(links.authorMail),
2019-06-28 11:35:15 +02:00
icon: 'email',
2019-11-16 12:55:47 +01:00
text: i18n.t('aboutScreen.authorMail'),
2019-06-28 11:35:15 +02:00
showChevron: true
},
{
2019-11-16 12:55:47 +01:00
onPressCallback: () => openWebLink(links.authorLinkedin),
2019-06-28 11:35:15 +02:00
icon: 'linkedin',
text: 'Linkedin',
showChevron: true
},
2019-11-16 12:55:47 +01:00
];
/**
* Data to be displayed in the additional developer card
*/
additionalDevData: Array<Object> = [
{
onPressCallback: () => console.log('Meme this'),
icon: 'account',
text: 'Yohan SIMARD',
showChevron: false
},
{
onPressCallback: () => openWebLink(links.yohanMail),
icon: 'email',
text: i18n.t('aboutScreen.authorMail'),
showChevron: true
},
2019-06-28 11:35:15 +02:00
{
2019-11-16 12:55:47 +01:00
onPressCallback: () => openWebLink(links.yohanLinkedin),
icon: 'linkedin',
text: 'Linkedin',
2019-06-28 11:35:15 +02:00
showChevron: true
},
];
2019-06-29 15:43:57 +02:00
/**
* Data to be displayed in the technologies card
*/
technoData: Array<Object> = [
2019-06-28 11:35:15 +02:00
{
onPressCallback: () => openWebLink(links.react),
icon: 'react',
text: i18n.t('aboutScreen.reactNative'),
showChevron: true
2019-06-28 11:35:15 +02:00
},
{
onPressCallback: () => this.props.navigation.navigate('AboutDependenciesScreen', {data: packageJson.dependencies}),
icon: 'developer-board',
text: i18n.t('aboutScreen.libs'),
showChevron: true
},
];
dataOrder: Array<Object> = [
{
id: 'app',
},
{
id: 'team',
},
{
id: 'techno',
},
];
getAppCard() {
return (
<Card>
<CardItem>
<Left>
<Thumbnail square source={require('../../assets/icon.png')}/>
<Body>
<H1>{appJson.expo.name}</H1>
<Text note>
v.{appJson.expo.version}
</Text>
</Body>
</Left>
</CardItem>
<FlatList
data={this.appData}
extraData={this.state}
keyExtractor={(item) => item.icon}
listKey={(item) => "app"}
renderItem={({item}) =>
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
}
/>
</Card>
);
}
getTeamCard() {
return (
<Card>
<CardItem>
<Left>
<CustomMaterialIcon
icon={'account-multiple'}
fontSize={40}
width={40}
color={ThemeManager.getCurrentThemeVariables().brandPrimary}/>
<Body>
<H1>{i18n.t('aboutScreen.team')}</H1>
</Body>
</Left>
</CardItem>
<CardItem header>
<Text>{i18n.t('aboutScreen.author')}</Text>
</CardItem>
<FlatList
data={this.authorData}
extraData={this.state}
keyExtractor={(item) => item.icon}
listKey={(item) => "team1"}
renderItem={({item}) =>
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
}
/>
<CardItem header>
<Text>{i18n.t('aboutScreen.additionalDev')}</Text>
</CardItem>
<FlatList
data={this.additionalDevData}
extraData={this.state}
keyExtractor={(item) => item.icon}
listKey={(item) => "team2"}
renderItem={({item}) =>
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
}
/>
</Card>
);
}
getTechnoCard() {
return (
<Card>
<CardItem header>
<Text>{i18n.t('aboutScreen.technologies')}</Text>
</CardItem>
<FlatList
data={this.technoData}
extraData={this.state}
keyExtractor={(item) => item.icon}
listKey={(item) => "techno"}
renderItem={({item}) =>
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
}
/>
</Card>
);
}
2019-06-29 15:43:57 +02:00
/**
* Get a clickable card item to be rendered inside a card.
*
* @param onPressCallback The callback to use when the item is clicked
* @param icon The icon name to use from MaterialCommunityIcons
* @param text The text to show
* @param showChevron Whether to show a chevron indicating this button will change screen
* @param showOnlyInDebug Should we show te current item only in debug mode?
2019-06-29 15:43:57 +02:00
* @returns {React.Node}
*/
getCardItem(onPressCallback: Function, icon: string, text: string, showChevron: boolean, showOnlyInDebug: boolean) {
let shouldShow = !showOnlyInDebug || (showOnlyInDebug && this.state.isDebugUnlocked);
if (shouldShow) {
return (
<CardItem button
onPress={onPressCallback}>
<Left>
<CustomMaterialIcon icon={icon}/>
<Text>{text}</Text>
</Left>
{showChevron ?
<Right>
<CustomMaterialIcon icon="chevron-right"
fontSize={20}/>
</Right>
:
<Right/>
}
</CardItem>)
;
} else {
return <View/>
}
}
tryUnlockDebugMode() {
this.debugTapCounter = this.debugTapCounter + 1;
console.log(this.debugTapCounter);
if (this.debugTapCounter >= 4) {
this.unlockDebugMode();
}
}
unlockDebugMode() {
console.log('unlocked');
this.setState({isDebugUnlocked: true});
let key = AsyncStorageManager.getInstance().preferences.debugUnlocked.key;
AsyncStorageManager.getInstance().savePref(key, '1');
2019-06-25 22:20:24 +02:00
}
2019-09-17 11:51:26 +02:00
getBugReportModal() {
return (
<Modalize ref={this.modalRef}
adjustToContentHeight
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
<View style={{
flex: 1,
padding: 20
}}>
<H1>{i18n.t('aboutScreen.bugs')}</H1>
<Text>
{i18n.t('aboutScreen.bugsDescription')}
</Text>
<Button
style={{
marginTop: 20,
marginLeft: 'auto',
marginRight: 'auto',
}}
onPress={() => openWebLink(links.bugsMail)}>
<CustomMaterialIcon
icon={'email'}
color={'#fff'}/>
<Text>{i18n.t('aboutScreen.bugsMail')}</Text>
</Button>
<Button
style={{
marginTop: 20,
marginLeft: 'auto',
marginRight: 'auto',
}}
onPress={() => openWebLink(links.bugsGit)}>
<CustomMaterialIcon
icon={'git'}
color={'#fff'}/>
<Text>{i18n.t('aboutScreen.bugsGit')}</Text>
</Button>
</View>
</Modalize>
);
}
openBugReportModal() {
if (this.modalRef.current) {
this.modalRef.current.open();
}
}
getMainCard(item: Object) {
switch (item.id) {
case 'app':
return this.getAppCard();
case 'team':
return this.getTeamCard();
case 'techno':
return this.getTechnoCard();
}
return <View/>;
}
2019-06-25 22:20:24 +02:00
render() {
const nav = this.props.navigation;
return (
<Container>
2019-09-17 11:51:26 +02:00
{this.getBugReportModal()}
<CustomHeader navigation={nav} title={i18n.t('screens.about')} hasBackButton={true}/>
<FlatList
style={{padding: 5}}
data={this.dataOrder}
extraData={this.state}
keyExtractor={(item) => item.id}
renderItem={({item}) =>
this.getMainCard(item)
}
/>
2019-06-25 22:20:24 +02:00
</Container>
);
}
}