Added club list

components/Sidebar/Sidebar.js

@@ -64,6 +64,12 @@ class SideBar extends React.PureComponent<Props, State> {
                 icon: "account",
                 onlyWhenLoggedIn: true,
             },
+            {
+                name: "CLUBS",
+                route: "ClubListScreen",
+                icon: "account-group",
+                onlyWhenLoggedIn: true,
+            },
             {
                 name: i18n.t('screens.logout'),
                 route: 'disconnect',

navigation/DrawerNavigator.js

@@ -17,6 +17,8 @@ import HeaderButton from "../components/Custom/HeaderButton";
 import i18n from "i18n-js";
 import LoginScreen from "../screens/Amicale/LoginScreen";
 import ProfileScreen from "../screens/Amicale/ProfileScreen";
+import ClubListScreen from "../screens/Amicale/ClubListScreen";
+import ClubDisplayScreen from "../screens/Amicale/ClubDisplayScreen";
 
 const defaultScreenOptions = {
     gestureEnabled: true,
@@ -236,6 +238,43 @@ function ProfileStackComponent() {
     );
 }
 
+const ClubStack = createStackNavigator();
+
+function ClubStackComponent() {
+    return (
+        <ClubStack.Navigator
+            initialRouteName="ClubListScreen"
+            headerMode="float"
+            screenOptions={defaultScreenOptions}
+        >
+            <ClubStack.Screen
+                name="ClubListScreen"
+                component={ClubListScreen}
+                options={({navigation}) => {
+                    const openDrawer = getDrawerButton.bind(this, navigation);
+                    return {
+                        title: "CLUBS LIST",
+                        headerLeft: openDrawer
+                    };
+                }}
+            />
+            <ClubStack.Screen
+                name="ClubDisplayScreen"
+                component={ClubDisplayScreen}
+                options={({navigation}) => {
+                    const openDrawer = getDrawerButton.bind(this, navigation);
+                    return {
+                        title: "CLUBS DISPLAY",
+                        headerLeft: openDrawer,
+                        ...TransitionPresets.ModalSlideFromBottomIOS,
+                    };
+                }}
+            />
+        </ClubStack.Navigator>
+    );
+}
+
+
 const Drawer = createDrawerNavigator();
 
 function getDrawerContent(props) {
@@ -289,6 +328,10 @@ export default function DrawerNavigator() {
                 name="ProfileScreen"
                 component={ProfileStackComponent}
             />
+            <Drawer.Screen
+                name="ClubListScreen"
+                component={ClubStackComponent}
+            />
         </Drawer.Navigator>
     );
 }

screens/Amicale/ClubDisplayScreen.js

@@ -0,0 +1,113 @@
+// @flow
+
+import * as React from 'react';
+import {Image, ScrollView, TouchableOpacity, View} from 'react-native';
+import HTML from "react-native-render-html";
+import {Linking} from "expo";
+import {Avatar, Card, Paragraph, Portal, withTheme} from 'react-native-paper';
+import ImageView from "react-native-image-viewing";
+
+type Props = {
+    navigation: Object,
+    route: Object
+};
+
+type State = {
+    imageModalVisible: boolean,
+};
+
+function openWebLink(event, link) {
+    Linking.openURL(link).catch((err) => console.error('Error opening link', err));
+}
+
+/**
+ * Class defining a planning event information page.
+ */
+class ClubDisplayScreen extends React.Component<Props, State> {
+
+    displayData = this.props.route.params['data'];
+
+    colors: Object;
+
+    state = {
+        imageModalVisible: false,
+    };
+
+    constructor(props) {
+        super(props);
+        this.colors = props.theme.colors;
+    }
+
+    componentDidMount(): * {
+        this.props.navigation.setOptions({title: this.displayData.name})
+    }
+
+    showImageModal = () => {
+        this.setState({imageModalVisible: true});
+    };
+
+    hideImageModal = () => {
+        this.setState({imageModalVisible: false});
+    };
+
+    getResponsiblesRender(resp: Array<string>) {
+        let final = [];
+        for (let i = 0; i < resp.length; i++) {
+            final.push(<Paragraph>{resp[i]}</Paragraph>)
+        }
+        return (
+            <Card style={{marginTop: 10, marginBottom: 10}}>
+                <Card.Title
+                    title={"RESPO"}
+                    subtitle={"CONTACTS"}
+                    left={(props) => <Avatar.Icon
+                        style={{backgroundColor: 'transparent'}}
+                        {...props}
+                        icon="account-tie" />}
+                />
+                <Card.Content>
+                    {final}
+                </Card.Content>
+            </Card>
+        );
+    }
+
+    render() {
+        return (
+            <ScrollView style={{paddingLeft: 5, paddingRight: 5}}>
+                {this.displayData.logo !== null ?
+                    <TouchableOpacity
+                        onPress={this.showImageModal}
+                        style={{width: '100%', height: 300, marginBottom: 10}}>
+                        <Image style={{flex: 1, resizeMode: "contain"}}
+                               source={{uri: this.displayData.logo}}/>
+                    </TouchableOpacity>
+                    : <View/>}
+
+                {this.displayData.description !== null ?
+                    // Surround description with div to allow text styling if the description is not html
+                    <Card.Content>
+                        <HTML html={"<div>" + this.displayData.description + "</div>"}
+                              tagsStyles={{
+                                  p: {color: this.colors.text,},
+                                  div: {color: this.colors.text}
+                              }}
+                              onLinkPress={openWebLink}/>
+                    </Card.Content>
+                    : <View/>}
+                {this.getResponsiblesRender(this.displayData.responsibles)}
+                <Portal>
+                    <ImageView
+                        images={[{uri: this.displayData.logo}]}
+                        imageIndex={0}
+                        presentationStyle={"fullScreen"}
+                        visible={this.state.imageModalVisible}
+                        onRequestClose={this.hideImageModal}
+                    />
+                </Portal>
+            </ScrollView>
+        );
+    }
+}
+
+export default withTheme(ClubDisplayScreen);

screens/Amicale/ClubListScreen.js

@@ -0,0 +1,102 @@
+// @flow
+
+import * as React from 'react';
+import {View} from "react-native";
+import {Avatar, Chip, List, withTheme} from 'react-native-paper';
+import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
+import PureFlatList from "../../components/Lists/PureFlatList";
+
+type Props = {
+    navigation: Object,
+    theme: Object,
+}
+
+type State = {}
+
+class ClubListScreen extends React.Component<Props, State> {
+
+    state = {};
+
+    colors: Object;
+
+    getRenderItem: Function;
+
+    categories: Array<Object>;
+
+    constructor(props) {
+        super(props);
+        this.colors = props.theme.colors;
+    }
+
+    keyExtractor = (item: Object) => {
+        return item.name + item.logo;
+    };
+
+    getScreen = (data: Object) => {
+        this.categories = data.categories;
+        return (
+            <PureFlatList
+                data={data.clubs}
+                keyExtractor={this.keyExtractor}
+                renderItem={this.getRenderItem}
+                updateData={0}
+            />
+        )
+    };
+
+    getCategoryName(id: number) {
+        for (let i = 0; i < this.categories.length; i++) {
+            if (id === this.categories[i].id)
+                return this.categories[i].name;
+        }
+        return "";
+    }
+
+    getCategoriesRender(categories: Array<number|null>) {
+        let final = [];
+        for (let i = 0; i < categories.length; i++) {
+            if (categories[i] !== null)
+                final.push(<Chip style={{marginRight: 5}}>{this.getCategoryName(categories[i])}</Chip>);
+        }
+        return <View style={{flexDirection: 'row'}}>{final}</View>;
+    }
+
+    getRenderItem = ({item}: Object) => {
+        const onPress = this.onListItemPress.bind(this, item);
+        const categoriesRender = this.getCategoriesRender.bind(this, item.category);
+        return (
+            <List.Item
+                title={item.name}
+                description={categoriesRender}
+                onPress={onPress}
+                left={(props) => <Avatar.Image
+                    {...props}
+                    style={{backgroundColor: 'transparent'}}
+                    size={64}
+                    source={{uri: item.logo}}/>}
+            />
+        );
+    };
+
+    /**
+     * Callback used when clicking an article in the list.
+     * It opens the modal to show detailed information about the article
+     *
+     * @param item The article pressed
+     */
+    onListItemPress(item: Object) {
+        this.props.navigation.navigate("ClubDisplayScreen", {data: item});
+    }
+
+    render() {
+        return (
+            <AuthenticatedScreen
+                {...this.props}
+                link={'https://www.amicale-insat.fr/api/clubs/list'}
+                renderFunction={this.getScreen}
+            />
+        );
+    }
+}
+
+export default withTheme(ClubListScreen);