From 2e4fa2089564ddbf9447d0b5e5d937197b23e2d8 Mon Sep 17 00:00:00 2001
From: Arnaud Vergnet <vergnet@etud.insa-toulouse.fr>
Date: Wed, 8 Apr 2020 20:55:56 +0200
Subject: [PATCH] Allow clicking on a club in profile screen to show its
 information

---
 src/navigation/DrawerNavigator.js             | 14 ++++++--
 .../Amicale/Clubs/ClubDisplayScreen.js        |  1 +
 src/screens/Amicale/ProfileScreen.js          | 35 ++++++++++++++-----
 translations/en.json                          |  6 ++--
 translations/fr.json                          |  6 ++--
 5 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/src/navigation/DrawerNavigator.js b/src/navigation/DrawerNavigator.js
index 26cdc2f..5fc46f4 100644
--- a/src/navigation/DrawerNavigator.js
+++ b/src/navigation/DrawerNavigator.js
@@ -236,6 +236,16 @@ function ProfileStackComponent() {
                     };
                 }}
             />
+            <ClubStack.Screen
+                name="club-information"
+                component={ClubDisplayScreen}
+                options={({navigation}) => {
+                    return {
+                        title: i18n.t('screens.clubDisplayScreen'),
+                        ...TransitionPresets.ModalSlideFromBottomIOS,
+                    };
+                }}
+            />
         </ProfileStack.Navigator>
     );
 }
@@ -290,7 +300,7 @@ function ClubStackComponent() {
                 component={ClubDisplayScreen}
                 options={({navigation}) => {
                     return {
-                        title: "",
+                        title: i18n.t('screens.clubDisplayScreen'),
                         ...TransitionPresets.ModalSlideFromBottomIOS,
                     };
                 }}
@@ -300,7 +310,7 @@ function ClubStackComponent() {
                 component={ClubAboutScreen}
                 options={({navigation}) => {
                     return {
-                        title: "ABOUT",
+                        title: i18n.t('screens.about'),
                         ...TransitionPresets.ModalSlideFromBottomIOS,
                     };
                 }}
diff --git a/src/screens/Amicale/Clubs/ClubDisplayScreen.js b/src/screens/Amicale/Clubs/ClubDisplayScreen.js
index 56dea4e..9d0f026 100644
--- a/src/screens/Amicale/Clubs/ClubDisplayScreen.js
+++ b/src/screens/Amicale/Clubs/ClubDisplayScreen.js
@@ -135,6 +135,7 @@ class ClubDisplayScreen extends React.Component<Props, State> {
     getScreen = (data: Object) => {
         console.log('fetchedData passed to screen:');
         console.log(data);
+        console.log("Using fake data");
         data = FakeClub;
         this.updateHeaderTitle(data);
 
diff --git a/src/screens/Amicale/ProfileScreen.js b/src/screens/Amicale/ProfileScreen.js
index 774b6c9..7ea1231 100644
--- a/src/screens/Amicale/ProfileScreen.js
+++ b/src/screens/Amicale/ProfileScreen.js
@@ -79,7 +79,7 @@ class ProfileScreen extends React.Component<Props, State> {
                 return this.getPersonalCard();
             case '1':
                 return this.getClubCard();
-            case '2':
+            default:
                 return this.getMembershipCar();
         }
     };
@@ -164,20 +164,39 @@ class ProfileScreen extends React.Component<Props, State> {
         );
     }
 
+    openClubDetailsScreen(id: number) {
+        this.props.navigation.navigate("club-information", {clubId: id});
+    }
+
+    clubListItem = ({item}: Object) => {
+        const onPress = () => this.openClubDetailsScreen(0); // TODO get club id
+        const isManager = false; // TODO detect if manager
+        let description = i18n.t("profileScreen.isMember");
+        let icon = (props) => <List.Icon {...props} icon="chevron-right"/>;
+        if (isManager) {
+            description = i18n.t("profileScreen.isManager");
+            icon = (props) => <List.Icon {...props} icon="star" color={this.colors.primary}/>;
+        }
+        return <List.Item
+            title={item.name}
+            description={description}
+            left={icon}
+            onPress={onPress}
+        />;
+    };
+
+    clubKeyExtractor = (item: Object) => item.name;
+
     getClubList(list: Array<string>) {
         let dataset = [];
         for (let i = 0; i < list.length; i++) {
             dataset.push({name: list[i]});
         }
         return (
+            //$FlowFixMe
             <FlatList
-                renderItem={({item}) =>
-                    <List.Item
-                        title={item.name}
-                        left={props => <List.Icon {...props} icon="chevron-right"/>}
-                    />
-                }
-                keyExtractor={item => item.name}
+                renderItem={this.clubListItem}
+                keyExtractor={this.clubKeyExtractor}
                 data={dataset}
             />
         );
diff --git a/translations/en.json b/translations/en.json
index ef2ff6f..d87b8a2 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -220,8 +220,10 @@
     "personalInformation": "Personal information",
     "noData": "No data",
     "editInformation": "Edit Information",
-    "clubs": "Clubs",
-    "clubsSubtitle": "Clubs you are part of",
+    "clubs": "Your clubs",
+    "clubsSubtitle": "Click on a club to show its information",
+    "isMember": "Member",
+    "isManager": "Manager",
     "membership": "Membership Fee",
     "membershipSubtitle": "Allows you to take part in various activities",
     "membershipPayed": "Payed",
diff --git a/translations/fr.json b/translations/fr.json
index a751018..4109650 100644
--- a/translations/fr.json
+++ b/translations/fr.json
@@ -220,8 +220,10 @@
     "personalInformation": "Informations Personnelles",
     "noData": "Pas de données",
     "editInformation": "Modifier les informations",
-    "clubs": "Clubs",
-    "clubsSubtitle": "Liste de vos clubs",
+    "clubs": "Vos clubs",
+    "clubsSubtitle": "Cliquez sur un club pour afficher ses informations",
+    "isMember": "Membre",
+    "isManager": "Responsable",
     "membership": "Cotisation",
     "membershipSubtitle": "Permet de participer à diverses activités",
     "membershipPayed": "Payée",