123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387 |
- // @flow
-
- import * as React from 'react';
- import {FlatList, Linking, Platform, Image} from 'react-native';
- import i18n from 'i18n-js';
- import {Avatar, Card, List, Title, withTheme} from 'react-native-paper';
- import {StackNavigationProp} from '@react-navigation/stack';
- import packageJson from '../../../package.json';
- import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
- import APP_LOGO from '../../../assets/android.icon.png';
- import type {
- CardTitleIconPropsType,
- ListIconPropsType,
- } from '../../constants/PaperStyles';
-
- type ListItemType = {
- onPressCallback: () => void,
- icon: string,
- text: string,
- showChevron: boolean,
- };
-
- 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/',
- meme: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
- };
-
- type PropsType = {
- navigation: StackNavigationProp,
- };
-
- /**
- * Opens a link in the device's browser
- * @param link The link to open
- */
- function openWebLink(link: string) {
- Linking.openURL(link);
- }
-
- /**
- * Class defining an about screen. This screen shows the user information about the app and it's author.
- */
- class AboutScreen extends React.Component<PropsType> {
- /**
- * Data to be displayed in the app card
- */
- appData = [
- {
- onPressCallback: () => {
- openWebLink(Platform.OS === 'ios' ? links.appstore : links.playstore);
- },
- icon: Platform.OS === 'ios' ? 'apple' : 'google-play',
- text:
- Platform.OS === 'ios'
- ? i18n.t('screens.about.appstore')
- : i18n.t('screens.about.playstore'),
- showChevron: true,
- },
- {
- onPressCallback: () => {
- const {navigation} = this.props;
- navigation.navigate('feedback');
- },
- icon: 'bug',
- text: i18n.t('screens.feedback.homeButtonTitle'),
- showChevron: true,
- },
- {
- onPressCallback: () => {
- openWebLink(links.git);
- },
- icon: 'git',
- text: 'Git',
- showChevron: true,
- },
- {
- onPressCallback: () => {
- openWebLink(links.changelog);
- },
- icon: 'refresh',
- text: i18n.t('screens.about.changelog'),
- showChevron: true,
- },
- {
- onPressCallback: () => {
- openWebLink(links.license);
- },
- icon: 'file-document',
- text: i18n.t('screens.about.license'),
- showChevron: true,
- },
- ];
-
- /**
- * Data to be displayed in the author card
- */
- authorData = [
- {
- onPressCallback: () => {
- openWebLink(links.meme);
- },
- icon: 'account-circle',
- text: 'Arnaud VERGNET',
- showChevron: false,
- },
- {
- onPressCallback: () => {
- openWebLink(links.authorMail);
- },
- icon: 'email',
- text: i18n.t('screens.about.authorMail'),
- showChevron: true,
- },
- {
- onPressCallback: () => {
- openWebLink(links.authorLinkedin);
- },
- icon: 'linkedin',
- text: 'Linkedin',
- showChevron: true,
- },
- ];
-
- /**
- * Data to be displayed in the additional developer card
- */
- additionalDevData = [
- {
- onPressCallback: () => {},
- icon: 'account',
- text: 'Yohan SIMARD',
- showChevron: false,
- },
- {
- onPressCallback: () => {
- openWebLink(links.yohanMail);
- },
- icon: 'email',
- text: i18n.t('screens.about.authorMail'),
- showChevron: true,
- },
- {
- onPressCallback: () => {
- openWebLink(links.yohanLinkedin);
- },
- icon: 'linkedin',
- text: 'Linkedin',
- showChevron: true,
- },
- ];
-
- /**
- * Data to be displayed in the technologies card
- */
- technoData = [
- {
- onPressCallback: () => {
- openWebLink(links.react);
- },
- icon: 'react',
- text: i18n.t('screens.about.reactNative'),
- showChevron: true,
- },
- {
- onPressCallback: () => {
- const {navigation} = this.props;
- navigation.navigate('dependencies');
- },
- icon: 'developer-board',
- text: i18n.t('screens.about.libs'),
- showChevron: true,
- },
- ];
-
- /**
- * Order of information cards
- */
- dataOrder = [
- {
- id: 'app',
- },
- {
- id: 'team',
- },
- {
- id: 'techno',
- },
- ];
-
- /**
- * Gets the app card showing information and links about the app.
- *
- * @return {*}
- */
- getAppCard(): React.Node {
- return (
- <Card style={{marginBottom: 10}}>
- <Card.Title
- title="Campus"
- subtitle={packageJson.version}
- left={(iconProps: CardTitleIconPropsType): React.Node => (
- <Image
- size={iconProps.size}
- source={APP_LOGO}
- style={{width: iconProps.size, height: iconProps.size}}
- />
- )}
- />
- <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(): React.Node {
- return (
- <Card style={{marginBottom: 10}}>
- <Card.Title
- title={i18n.t('screens.about.team')}
- left={(iconProps: CardTitleIconPropsType): React.Node => (
- <Avatar.Icon size={iconProps.size} icon="account-multiple" />
- )}
- />
- <Card.Content>
- <Title>{i18n.t('screens.about.author')}</Title>
- <FlatList
- data={this.authorData}
- keyExtractor={this.keyExtractor}
- listKey="1"
- renderItem={this.getCardItem}
- />
- <Title>{i18n.t('screens.about.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(): React.Node {
- return (
- <Card style={{marginBottom: 10}}>
- <Card.Content>
- <Title>{i18n.t('screens.about.technologies')}</Title>
- <FlatList
- data={this.technoData}
- keyExtractor={this.keyExtractor}
- renderItem={this.getCardItem}
- />
- </Card.Content>
- </Card>
- );
- }
-
- /**
- * Gets a chevron icon
- *
- * @param props
- * @return {*}
- */
- static getChevronIcon(props: ListIconPropsType): React.Node {
- return (
- <List.Icon color={props.color} style={props.style} icon="chevron-right" />
- );
- }
-
- /**
- * Gets a custom list item icon
- *
- * @param item The item to show the icon for
- * @param props
- * @return {*}
- */
- static getItemIcon(item: ListItemType, props: ListIconPropsType): React.Node {
- return (
- <List.Icon color={props.color} style={props.style} icon={item.icon} />
- );
- }
-
- /**
- * Gets a clickable card item to be rendered inside a card.
- *
- * @returns {*}
- */
- getCardItem = ({item}: {item: ListItemType}): React.Node => {
- const getItemIcon = (props: ListIconPropsType): React.Node =>
- AboutScreen.getItemIcon(item, props);
- if (item.showChevron) {
- return (
- <List.Item
- title={item.text}
- left={getItemIcon}
- right={AboutScreen.getChevronIcon}
- onPress={item.onPressCallback}
- />
- );
- }
- return (
- <List.Item
- title={item.text}
- left={getItemIcon}
- onPress={item.onPressCallback}
- />
- );
- };
-
- /**
- * Gets a card, depending on the given item's id
- *
- * @param item The item to show
- * @return {*}
- */
- getMainCard = ({item}: {item: {id: string}}): React.Node => {
- switch (item.id) {
- case 'app':
- return this.getAppCard();
- case 'team':
- return this.getTeamCard();
- case 'techno':
- return this.getTechnoCard();
- default:
- return null;
- }
- };
-
- /**
- * Extracts a key from the given item
- *
- * @param item The item to extract the key from
- * @return {string} The extracted key
- */
- keyExtractor = (item: ListItemType): string => item.icon;
-
- render(): React.Node {
- return (
- <CollapsibleFlatList
- style={{padding: 5}}
- data={this.dataOrder}
- renderItem={this.getMainCard}
- />
- );
- }
- }
-
- export default withTheme(AboutScreen);
|