123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397 |
- // @flow
-
- import * as React from 'react';
- import {FlatList, Linking, Platform, View} from 'react-native';
- import i18n from "i18n-js";
- import AsyncStorageManager from "../../managers/AsyncStorageManager";
- import {Avatar, Card, List, Title, withTheme} from 'react-native-paper';
-
- const links = {
- appstore: 'https://apps.apple.com/us/app/campus-amicale-insat/id1477722148',
- playstore: 'https://play.google.com/store/apps/details?id=fr.amicaleinsat.application',
- git: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/README.md',
- changelog: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/Changelog.md',
- license: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/LICENSE',
- authorMail: "mailto:vergnet@etud.insa-toulouse.fr?" +
- "subject=" +
- "Application Amicale INSA Toulouse" +
- "&body=" +
- "Coucou !\n\n",
- authorLinkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/',
- yohanMail: "mailto:ysimard@etud.insa-toulouse.fr?" +
- "subject=" +
- "Application Amicale INSA Toulouse" +
- "&body=" +
- "Coucou !\n\n",
- yohanLinkedin: 'https://www.linkedin.com/in/yohan-simard',
- react: 'https://facebook.github.io/react-native/',
- expo: 'https://expo.io/',
- };
-
- type Props = {
- navigation: Object,
- };
-
- type State = {
- isDebugUnlocked: boolean,
- };
-
- /**
- * Opens a link in the device's browser
- * @param link The link to open
- */
- function openWebLink(link) {
- Linking.openURL(link).catch((err) => console.error('Error opening link', err));
- }
-
- /**
- * Class defining an about screen. This screen shows the user information about the app and it's author.
- */
- class AboutScreen extends React.Component<Props, State> {
-
- debugTapCounter = 0;
- modalRef: Object;
-
- state = {
- isDebugUnlocked: AsyncStorageManager.getInstance().preferences.debugUnlocked.current === '1'
- };
- /**
- * Data to be displayed in the app card
- */
- appData: Array<Object> = [
- {
- 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
- },
- {
- onPressCallback: () => this.props.navigation.navigate("feedback"),
- icon: 'bug',
- text: i18n.t("feedbackScreen.homeButtonTitle"),
- showChevron: true
- },
- {
- onPressCallback: () => openWebLink(links.git),
- icon: 'git',
- text: 'Git',
- 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('debug'),
- icon: 'bug-check',
- text: i18n.t('aboutScreen.debug'),
- showChevron: true,
- showOnlyInDebug: true
- },
- ];
- /**
- * Data to be displayed in the author card
- */
- authorData: Array<Object> = [
- {
- onPressCallback: () => this.tryUnlockDebugMode(),
- icon: 'account-circle',
- text: 'Arnaud VERGNET',
- showChevron: false
- },
- {
- onPressCallback: () => openWebLink(links.authorMail),
- icon: 'email',
- text: i18n.t('aboutScreen.authorMail'),
- showChevron: true
- },
- {
- onPressCallback: () => openWebLink(links.authorLinkedin),
- icon: 'linkedin',
- text: 'Linkedin',
- showChevron: true
- },
- ];
- /**
- * 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
- },
- {
- onPressCallback: () => openWebLink(links.yohanLinkedin),
- icon: 'linkedin',
- text: 'Linkedin',
- showChevron: true
- },
- ];
- /**
- * Data to be displayed in the technologies card
- */
- technoData: Array<Object> = [
- {
- onPressCallback: () => openWebLink(links.react),
- icon: 'react',
- text: i18n.t('aboutScreen.reactNative'),
- showChevron: true
- },
- {
- onPressCallback: () => openWebLink(links.react),
- icon: 'language-javascript',
- text: i18n.t('aboutScreen.expo'),
- showChevron: true
- },
- {
- onPressCallback: () => this.props.navigation.navigate('dependencies'),
- icon: 'developer-board',
- text: i18n.t('aboutScreen.libs'),
- showChevron: true
- },
- ];
- /**
- * Order of information cards
- */
- dataOrder: Array<Object> = [
- {
- id: 'app',
- },
- {
- id: 'team',
- },
- {
- id: 'techno',
- },
- ];
-
-
- colors: Object;
-
- constructor(props) {
- super(props);
- this.colors = props.theme.colors;
- }
-
- /**
- * Gets the app icon
- * @param props
- * @return {*}
- */
- getAppIcon(props) {
- return (
- <Avatar.Image
- {...props}
- source={require('../../../assets/android.icon.png')}
- style={{backgroundColor: 'transparent'}}
- />
- );
- }
-
- /**
- * Extracts a key from the given item
- *
- * @param item The item to extract the key from
- * @return {string} The extracted key
- */
- keyExtractor(item: Object): string {
- return item.icon;
- }
-
- /**
- * Gets the app card showing information and links about the app.
- *
- * @return {*}
- */
- getAppCard() {
- return (
- <Card style={{marginBottom: 10}}>
- <Card.Title
- title={"Campus"}
- subtitle={"2.0.0"}
- left={this.getAppIcon}/>
- <Card.Content>
- <FlatList
- data={this.appData}
- keyExtractor={this.keyExtractor}
- renderItem={this.getCardItem}
- />
- </Card.Content>
- </Card>
- );
- }
-
- /**
- * Gets the team card showing information and links about the team
- *
- * @return {*}
- */
- getTeamCard() {
- return (
- <Card style={{marginBottom: 10}}>
- <Card.Title
- title={i18n.t('aboutScreen.team')}
- left={(props) => <Avatar.Icon {...props} icon={'account-multiple'}/>}/>
- <Card.Content>
- <Title>{i18n.t('aboutScreen.author')}</Title>
- <FlatList
- data={this.authorData}
- keyExtractor={this.keyExtractor}
- listKey={"1"}
- renderItem={this.getCardItem}
- />
- <Title>{i18n.t('aboutScreen.additionalDev')}</Title>
- <FlatList
- data={this.additionalDevData}
- keyExtractor={this.keyExtractor}
- listKey={"2"}
- renderItem={this.getCardItem}
- />
- </Card.Content>
- </Card>
- );
- }
-
- /**
- * Gets the techno card showing information and links about the technologies used in the app
- *
- * @return {*}
- */
- getTechnoCard() {
- return (
- <Card style={{marginBottom: 10}}>
- <Card.Content>
- <Title>{i18n.t('aboutScreen.technologies')}</Title>
- <FlatList
- data={this.technoData}
- keyExtractor={this.keyExtractor}
- renderItem={this.getCardItem}
- />
- </Card.Content>
- </Card>
- );
- }
-
- /**
- * Gets a chevron icon
- *
- * @param props
- * @return {*}
- */
- getChevronIcon(props: Object) {
- return (
- <List.Icon {...props} icon={'chevron-right'}/>
- );
- }
-
- /**
- * Gets a custom list item icon
- *
- * @param item The item to show the icon for
- * @param props
- * @return {*}
- */
- getItemIcon(item: Object, props: Object) {
- return (
- <List.Icon {...props} icon={item.icon}/>
- );
- }
-
- /**
- * Get a clickable card item to be rendered inside a card.
- *
- * @returns {*}
- */
- getCardItem = ({item}: Object) => {
- let shouldShow = item === undefined
- || !item.showOnlyInDebug
- || (item.showOnlyInDebug && this.state.isDebugUnlocked);
- const getItemIcon = this.getItemIcon.bind(this, item);
- if (shouldShow) {
- if (item.showChevron) {
- return (
- <List.Item
- title={item.text}
- left={getItemIcon}
- right={this.getChevronIcon}
- onPress={item.onPressCallback}
- />
- );
- } else {
- return (
- <List.Item
- title={item.text}
- left={getItemIcon}
- onPress={item.onPressCallback}
- />
- );
- }
- } else
- return null;
- };
-
- /**
- * Tries to unlock debug mode
- */
- tryUnlockDebugMode() {
- this.debugTapCounter = this.debugTapCounter + 1;
- if (this.debugTapCounter >= 4) {
- this.unlockDebugMode();
- }
- }
-
- /**
- * Unlocks debug mode
- */
- unlockDebugMode() {
- this.setState({isDebugUnlocked: true});
- let key = AsyncStorageManager.getInstance().preferences.debugUnlocked.key;
- AsyncStorageManager.getInstance().savePref(key, '1');
- }
-
- /**
- * Gets a card, depending on the given item's id
- *
- * @param item The item to show
- * @return {*}
- */
- getMainCard = ({item}: Object) => {
- switch (item.id) {
- case 'app':
- return this.getAppCard();
- case 'team':
- return this.getTeamCard();
- case 'techno':
- return this.getTechnoCard();
- }
- return <View/>;
- };
-
- render() {
- return (
- <FlatList
- style={{padding: 5}}
- data={this.dataOrder}
- renderItem={this.getMainCard}
- />
- );
- }
- }
-
- export default withTheme(AboutScreen);
|