From 14970abeab583eb0b3acc3513ea0ee3b926e5cef Mon Sep 17 00:00:00 2001
From: Arnaud Vergnet <vergnet@etud.insa-toulouse.fr>
Date: Thu, 23 Jul 2020 15:19:04 +0200
Subject: [PATCH] Added collapsible headers to more screens

---
 src/navigation/TabNavigator.js                | 134 +++++++++++-------
 src/screens/Home/FeedItemScreen.js            |  10 +-
 src/screens/Planning/PlanningDisplayScreen.js |  10 +-
 src/screens/Proxiwash/ProxiwashAboutScreen.js |  10 +-
 4 files changed, 101 insertions(+), 63 deletions(-)

diff --git a/src/navigation/TabNavigator.js b/src/navigation/TabNavigator.js
index 9832ca2..6e00b4c 100644
--- a/src/navigation/TabNavigator.js
+++ b/src/navigation/TabNavigator.js
@@ -44,9 +44,21 @@ function ServicesStackComponent() {
             headerMode={"screen"}
             screenOptions={defaultScreenOptions}
         >
-            {createScreenCollapsibleStack("index", ServicesStack, WebsitesHomeScreen, i18n.t('screens.services.title'))}
-            {createScreenCollapsibleStack("services-section", ServicesStack, ServicesSectionScreen, "SECTION")}
-            {createScreenCollapsibleStack("amicale-contact", ServicesStack, AmicaleContactScreen, i18n.t('screens.amicaleAbout.title'))}
+            {createScreenCollapsibleStack(
+                "index",
+                ServicesStack,
+                WebsitesHomeScreen,
+                i18n.t('screens.services.title'))}
+            {createScreenCollapsibleStack(
+                "services-section",
+                ServicesStack,
+                ServicesSectionScreen,
+                "SECTION")}
+            {createScreenCollapsibleStack(
+                "amicale-contact",
+                ServicesStack,
+                AmicaleContactScreen,
+                i18n.t('screens.amicaleAbout.title'))}
         </ServicesStack.Navigator>
     );
 }
@@ -60,12 +72,16 @@ function ProxiwashStackComponent() {
             headerMode={"screen"}
             screenOptions={defaultScreenOptions}
         >
-            {createScreenCollapsibleStack("index", ProxiwashStack, ProxiwashScreen, i18n.t('screens.proxiwash.title'))}
-            <ProxiwashStack.Screen
-                name="proxiwash-about"
-                component={ProxiwashAboutScreen}
-                options={{title: i18n.t('screens.proxiwash.title'),}}
-            />
+            {createScreenCollapsibleStack(
+                "index",
+                ProxiwashStack,
+                ProxiwashScreen,
+                i18n.t('screens.proxiwash.title'))}
+            {createScreenCollapsibleStack(
+                "proxiwash-about",
+                ProxiwashStack,
+                ProxiwashAboutScreen,
+                i18n.t('screens.proxiwash.title'))}
         </ProxiwashStack.Navigator>
     );
 }
@@ -84,11 +100,11 @@ function PlanningStackComponent() {
                 component={PlanningScreen}
                 options={{title: i18n.t('screens.planning.title'),}}
             />
-            <PlanningStack.Screen
-                name="planning-information"
-                component={PlanningDisplayScreen}
-                options={{title: i18n.t('screens.planning.eventDetails'),}}
-            />
+            {createScreenCollapsibleStack(
+                "planning-information",
+                PlanningStack,
+                PlanningDisplayScreen,
+                i18n.t('screens.planning.eventDetails'))}
         </PlanningStack.Navigator>
     );
 }
@@ -115,29 +131,30 @@ function HomeStackComponent(initialRoute: string | null, defaultData: { [key: st
                         headerStyle: {
                             backgroundColor: colors.surface,
                         },
-                        headerTitle: (props) => <View style={{flexDirection: "row"}}>
-                            <Mascot
-                                style={{
-                                    width: 50
-                                }}
-                                emotion={MASCOT_STYLE.RANDOM}
-                                animated={true}
-                                entryAnimation={{
-                                    animation: "bounceIn",
-                                    duration: 1000
-                                }}
-                                loopAnimation={{
-                                    animation: "pulse",
-                                    duration: 2000,
-                                    iterationCount: "infinite"
-                                }}
-                            />
-                            <Title style={{
-                                marginLeft: 10,
-                                marginTop: "auto",
-                                marginBottom: "auto",
-                            }}>{i18n.t('screens.home.title')}</Title>
-                        </View>
+                        headerTitle: () =>
+                            <View style={{flexDirection: "row"}}>
+                                <Mascot
+                                    style={{
+                                        width: 50
+                                    }}
+                                    emotion={MASCOT_STYLE.RANDOM}
+                                    animated={true}
+                                    entryAnimation={{
+                                        animation: "bounceIn",
+                                        duration: 1000
+                                    }}
+                                    loopAnimation={{
+                                        animation: "pulse",
+                                        duration: 2000,
+                                        iterationCount: "infinite"
+                                    }}
+                                />
+                                <Title style={{
+                                    marginLeft: 10,
+                                    marginTop: "auto",
+                                    marginBottom: "auto",
+                                }}>{i18n.t('screens.home.title')}</Title>
+                            </View>
                     }}
                     initialParams={params}
                 />,
@@ -151,21 +168,22 @@ function HomeStackComponent(initialRoute: string | null, defaultData: { [key: st
                 component={ScannerScreen}
                 options={{title: i18n.t('screens.scanner.title'),}}
             />
-            <HomeStack.Screen
-                name="club-information"
-                component={ClubDisplayScreen}
-                options={{title: i18n.t('screens.clubs.details'),}}
-            />
-            <HomeStack.Screen
-                name="feed-information"
-                component={FeedItemScreen}
-                options={{title: i18n.t('screens.home.feed'),}}
-            />
-            <HomeStack.Screen
-                name="planning-information"
-                component={PlanningDisplayScreen}
-                options={{title: i18n.t('screens.planning.eventDetails'),}}
-            />
+
+            {createScreenCollapsibleStack(
+                "club-information",
+                HomeStack,
+                ClubDisplayScreen,
+                i18n.t('screens.clubs.details'))}
+            {createScreenCollapsibleStack(
+                "feed-information",
+                HomeStack,
+                FeedItemScreen,
+                i18n.t('screens.home.feed'))}
+            {createScreenCollapsibleStack(
+                "planning-information",
+                HomeStack,
+                PlanningDisplayScreen,
+                i18n.t('screens.planning.eventDetails'))}
         </HomeStack.Navigator>
     );
 }
@@ -179,8 +197,16 @@ function PlanexStackComponent() {
             headerMode={"screen"}
             screenOptions={defaultScreenOptions}
         >
-            {getWebsiteStack("index", PlanexStack, PlanexScreen, i18n.t("screens.planex.title"))}
-            {createScreenCollapsibleStack("group-select", PlanexStack, GroupSelectionScreen, "GROUP SELECT")}
+            {getWebsiteStack(
+                "index",
+                PlanexStack,
+                PlanexScreen,
+                i18n.t("screens.planex.title"))}
+            {createScreenCollapsibleStack(
+                "group-select",
+                PlanexStack,
+                GroupSelectionScreen,
+                "")}
         </PlanexStack.Navigator>
     );
 }
diff --git a/src/screens/Home/FeedItemScreen.js b/src/screens/Home/FeedItemScreen.js
index 04487a5..00eeef9 100644
--- a/src/screens/Home/FeedItemScreen.js
+++ b/src/screens/Home/FeedItemScreen.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Linking, ScrollView, View} from 'react-native';
+import {Linking, View} from 'react-native';
 import {Avatar, Card, Text, withTheme} from 'react-native-paper';
 import ImageModal from 'react-native-image-modal';
 import Autolink from "react-native-autolink";
@@ -9,6 +9,7 @@ import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHead
 import CustomTabBar from "../../components/Tabbar/CustomTabBar";
 import {StackNavigationProp} from "@react-navigation/stack";
 import type {feedItem} from "./HomeScreen";
+import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
 
 type Props = {
     navigation: StackNavigationProp,
@@ -71,7 +72,10 @@ class FeedItemScreen extends React.Component<Props> {
     render() {
         const hasImage = this.displayData.full_picture !== '' && this.displayData.full_picture != null;
         return (
-            <ScrollView style={{margin: 5,}}>
+            <CollapsibleScrollView
+                style={{margin: 5,}}
+                hasTab={true}
+            >
                 <Card.Title
                     title={NAME_AMICALE}
                     subtitle={this.date}
@@ -99,7 +103,7 @@ class FeedItemScreen extends React.Component<Props> {
                         /> : null
                     }
                 </Card.Content>
-            </ScrollView>
+            </CollapsibleScrollView>
         );
     }
 }
diff --git a/src/screens/Planning/PlanningDisplayScreen.js b/src/screens/Planning/PlanningDisplayScreen.js
index f2a6cc2..503194d 100644
--- a/src/screens/Planning/PlanningDisplayScreen.js
+++ b/src/screens/Planning/PlanningDisplayScreen.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {ScrollView, View} from 'react-native';
+import {View} from 'react-native';
 import {getDateOnlyString, getFormattedEventTime} from '../../utils/Planning';
 import {Card, withTheme} from 'react-native-paper';
 import DateManager from "../../managers/DateManager";
@@ -14,6 +14,7 @@ import CustomTabBar from "../../components/Tabbar/CustomTabBar";
 import i18n from 'i18n-js';
 import {StackNavigationProp} from "@react-navigation/stack";
 import type {CustomTheme} from "../../managers/ThemeManager";
+import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
 
 type Props = {
     navigation: StackNavigationProp,
@@ -108,7 +109,10 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
         if (dateString !== null)
             subtitle += ' | ' + DateManager.getInstance().getTranslatedDate(dateString);
         return (
-            <ScrollView style={{paddingLeft: 5, paddingRight: 5}}>
+            <CollapsibleScrollView
+                style={{paddingLeft: 5, paddingRight: 5}}
+                hasTab={true}
+            >
                 <Card.Title
                     title={this.displayData.title}
                     subtitle={subtitle}
@@ -133,7 +137,7 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
                         <CustomHTML html={this.displayData.description}/>
                     </Card.Content>
                     : <View/>}
-            </ScrollView>
+            </CollapsibleScrollView>
         );
     }
 
diff --git a/src/screens/Proxiwash/ProxiwashAboutScreen.js b/src/screens/Proxiwash/ProxiwashAboutScreen.js
index f6d5056..59f45ac 100644
--- a/src/screens/Proxiwash/ProxiwashAboutScreen.js
+++ b/src/screens/Proxiwash/ProxiwashAboutScreen.js
@@ -1,10 +1,11 @@
 // @flow
 
 import * as React from 'react';
-import {Image, ScrollView, View} from 'react-native';
+import {Image, View} from 'react-native';
 import i18n from "i18n-js";
 import {Card, List, Paragraph, Text, Title} from 'react-native-paper';
 import CustomTabBar from "../../components/Tabbar/CustomTabBar";
+import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
 
 type Props = {};
 
@@ -17,7 +18,10 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
 
     render() {
         return (
-            <ScrollView style={{padding: 5}}>
+            <CollapsibleScrollView
+                style={{padding: 5}}
+                hasTab={true}
+            >
                 <View style={{
                     width: '100%',
                     height: 100,
@@ -76,7 +80,7 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
                         <Paragraph>{i18n.t('screens.proxiwash.paymentMethodsDescription')}</Paragraph>
                     </Card.Content>
                 </Card>
-            </ScrollView>
+            </CollapsibleScrollView>
         );
     }
 }