123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476 |
- // @flow
-
- import * as React from 'react';
- import {FlatList, Linking, Platform, View} from 'react-native';
- import i18n from "i18n-js";
- import appJson from '../../../app';
- import AsyncStorageManager from "../../managers/AsyncStorageManager";
- import CustomModal from "../../components/Custom/CustomModal";
- import {Avatar, Button, Card, List, Text, 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',
- 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.etud.insa-toulouse.fr/vergnet/application-amicale/issues',
- 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/',
- };
-
- 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.openBugReportModal(),
- icon: 'bug',
- text: i18n.t('aboutScreen.bugs'),
- 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('DebugScreen'),
- 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: () => this.props.navigation.navigate('AboutDependenciesScreen'),
- icon: 'developer-board',
- text: i18n.t('aboutScreen.libs'),
- showChevron: true
- },
- ];
- /**
- * Order of information cards
- */
- dataOrder: Array<Object> = [
- {
- id: 'app',
- },
- {
- id: 'team',
- },
- {
- id: 'techno',
- },
- ];
-
- getCardItem: Function;
- getMainCard: Function;
- onModalRef: Function;
- onPressMail: Function;
- onPressGit: Function;
-
- colors: Object;
-
- constructor(props) {
- super(props);
- this.getCardItem = this.getCardItem.bind(this);
- this.getMainCard = this.getMainCard.bind(this);
- this.onModalRef = this.onModalRef.bind(this);
- this.onPressMail = openWebLink.bind(this, links.bugsMail);
- this.onPressGit = openWebLink.bind(this, links.bugsGit);
- 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={appJson.expo.name}
- subtitle={appJson.expo.version}
- 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 the bug report modal's content
- *
- * @return {*}
- */
- getBugReportModal() {
- return (
- <View style={{
- flex: 1,
- padding: 20
- }}>
- <Title>{i18n.t('aboutScreen.bugs')}</Title>
- <Text>
- {i18n.t('aboutScreen.bugsDescription')}
- </Text>
- <Button
- icon="email"
- mode="contained"
- style={{
- marginTop: 20,
- marginLeft: 'auto',
- marginRight: 'auto',
- }}
- onPress={this.onPressMail}>
- {i18n.t('aboutScreen.bugsMail')}
- </Button>
- <Button
- icon="git"
- mode="contained"
- style={{
- marginTop: 20,
- marginLeft: 'auto',
- marginRight: 'auto',
- }}
- onPress={this.onPressGit}>
- {i18n.t('aboutScreen.bugsGit')}
- </Button>
- </View>
- );
- }
-
- /**
- * opens the bug report modal
- */
- openBugReportModal() {
- if (this.modalRef) {
- this.modalRef.open();
- }
- }
-
- /**
- * 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/>;
- }
-
- /**
- * Callback used when receiving the modal ref
- *
- * @param ref
- */
- onModalRef(ref: Object) {
- this.modalRef = ref;
- }
-
- render() {
- return (
- <View style={{padding: 5}}>
- <CustomModal onRef={this.onModalRef}>
- {this.getBugReportModal()}
- </CustomModal>
- <FlatList
- style={{padding: 5}}
- data={this.dataOrder}
- renderItem={this.getMainCard}
- />
- </View>
- );
- }
- }
-
- export default withTheme(AboutScreen);
|