Add changeLog screen

src/navigation/MainNavigator.js

@@ -25,6 +25,7 @@ import {
   getWebsiteStack,
 } from '../utils/CollapsibleUtils';
 import BugReportScreen from '../screens/Other/FeedbackScreen';
+import ChangelogScreen from '../screens/Other/ChangeLogScreen';
 import WebsiteScreen from '../screens/Services/WebsiteScreen';
 import EquipmentScreen from '../screens/Amicale/Equipment/EquipmentListScreen';
 import EquipmentLendScreen from '../screens/Amicale/Equipment/EquipmentRentScreen';
@@ -214,6 +215,12 @@ function MainStackComponent(props: {
         BugReportScreen,
         i18n.t('screens.feedback.title'),
       )}
+        {createScreenCollapsibleStack(
+            'changelog',
+            MainStack,
+            ChangelogScreen,
+            "Jean Yves"
+        )}
     </MainStack.Navigator>
   );
 }

src/screens/About/AboutScreen.js

@@ -98,7 +98,8 @@ class AboutScreen extends React.Component<PropsType> {
     },
     {
       onPressCallback: () => {
-        openWebLink(links.changelog);
+        const {navigation} = this.props;
+        navigation.navigate('changelog');
       },
       icon: 'refresh',
       text: i18n.t('screens.about.changelog'),

src/screens/Other/ChangeLogScreen.js

@@ -0,0 +1,160 @@
+// @flow
+
+import * as React from 'react';
+import {Avatar, Button, Card, Paragraph, withTheme} from 'react-native-paper';
+import i18n from 'i18n-js';
+import {Linking, View} from 'react-native';
+import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
+import type {CardTitleIconPropsType} from '../../constants/PaperStyles';
+
+const links = {
+  bugsGit: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/',
+  trello: 'https://trello.com/b/RMej49Uq/application-campus-insa',
+  facebook: 'https://www.facebook.com/campus.insat',
+  feedbackMail: `mailto:app@amicale-insat.fr?subject=[FEEDBACK] Application CAMPUS
+&body=Coucou Arnaud j'ai du feedback\n\n\n\nBien cordialement.`,
+  feedbackDiscord: 'https://discord.gg/W8MeTec',
+};
+
+class ChangeLogScreen extends React.Component<null> {
+  /**
+   * Gets link buttons
+   *
+   * @returns {*}
+   */
+  static getButtons(isFeedback: boolean): React.Node {
+    return (
+      <Card.Actions
+        style={{
+          flex: 1,
+          flexWrap: 'wrap',
+        }}>
+        {isFeedback ? (
+          <View
+            style={{
+              flex: 1,
+              flexWrap: 'wrap',
+              flexDirection: 'row',
+              width: '100%',
+            }}>
+            <Button
+              icon="email"
+              mode="contained"
+              style={{
+                marginLeft: 'auto',
+                marginRight: 'auto',
+                marginTop: 5,
+              }}
+              onPress={() => {
+                Linking.openURL(links.feedbackMail);
+              }}>
+              MAIL
+            </Button>
+            <Button
+              icon="facebook"
+              mode="contained"
+              color="#2e88fe"
+              style={{
+                marginLeft: 'auto',
+                marginRight: 'auto',
+                marginTop: 5,
+              }}
+              onPress={() => {
+                Linking.openURL(links.facebook);
+              }}>
+              Facebook
+            </Button>
+            <Button
+              icon="discord"
+              mode="contained"
+              color="#7289da"
+              style={{
+                marginLeft: 'auto',
+                marginRight: 'auto',
+                marginTop: 5,
+              }}
+              onPress={() => {
+                Linking.openURL(links.feedbackDiscord);
+              }}>
+              Discord
+            </Button>
+          </View>
+        ) : (
+          <View
+            style={{
+              flex: 1,
+              flexWrap: 'wrap',
+              flexDirection: 'row',
+              width: '100%',
+            }}>
+            <Button
+              icon="git"
+              mode="contained"
+              color="#609927"
+              style={{
+                marginLeft: 'auto',
+                marginRight: 'auto',
+                marginTop: 5,
+              }}
+              onPress={() => {
+                Linking.openURL(links.bugsGit);
+              }}>
+              GITETUD
+            </Button>
+            <Button
+              icon="calendar"
+              mode="contained"
+              color="#026AA7"
+              style={{
+                marginLeft: 'auto',
+                marginRight: 'auto',
+                marginTop: 5,
+              }}
+              onPress={() => {
+                Linking.openURL(links.trello);
+              }}>
+              TRELLO
+            </Button>
+          </View>
+        )}
+      </Card.Actions>
+    );
+  }
+
+  render(): React.Node {
+    return (
+      <CollapsibleScrollView style={{padding: 5}}>
+        <Card>
+          <Card.Title
+            title={i18n.t('screens.feedback.feedback')}
+            subtitle={i18n.t('screens.feedback.feedbackSubtitle')}
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
+              <Avatar.Icon size={iconProps.size} icon="comment" />
+            )}
+          />
+          <Card.Content>
+            <Paragraph>
+              {i18n.t('screens.feedback.feedbackDescription')}
+            </Paragraph>
+          </Card.Content>
+          {ChangeLogScreen.getButtons(true)}
+          <Card.Title
+            title={i18n.t('screens.feedback.contribute')}
+            subtitle={i18n.t('screens.feedback.contributeSubtitle')}
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
+              <Avatar.Icon size={iconProps.size} icon="handshake" />
+            )}
+          />
+          <Card.Content>
+            <Paragraph>
+              {i18n.t('screens.feedback.contributeDescription')}
+            </Paragraph>
+          </Card.Content>
+          {ChangeLogScreen.getButtons(false)}
+        </Card>
+      </CollapsibleScrollView>
+    );
+  }
+}
+
+export default withTheme(ChangeLogScreen);