10 changed files with 25 additions and 382 deletions
--- a/components/Home/FeedItem.js
+++ b/components/Home/FeedItem.js
@ -1,9 +1,8 @@
 import * as React from 'react';
 import {Avatar, Button, Card, withTheme} from 'react-native-paper';
-import {View} from "react-native";
+import {TouchableOpacity, View} from "react-native";
 import Autolink from "react-native-autolink";
 import i18n from "i18n-js";
-import ImageModal from 'react-native-image-modal';

 const ICON_AMICALE = require('../../assets/amicale.png');

@ -35,18 +34,9 @@ function FeedItem(props) {
                left={getAvatar}
            />
            {props.full_picture !== '' && props.full_picture !== undefined ?
-                <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
-                    <ImageModal
-                        resizeMode="contain"
-                        imageBackgroundColor={colors.background}
-                        style={{
-                            width: 250,
-                            height: 250,
-                        }}
-                        source={{
-                            uri: props.full_picture,
-                        }}
-                    /></View> : <View/>}
+                <TouchableOpacity onPress={props.onImagePress}>
+                    <Card.Cover source={{uri: props.full_picture}}/>
+                </TouchableOpacity> : <View/>}
            <Card.Content>
                {props.message !== undefined ?
                    <Autolink
--- a/components/Sidebar/Sidebar.js
+++ b/components/Sidebar/Sidebar.js
@ -64,12 +64,6 @@ class SideBar extends React.PureComponent<Props, State> {
                icon: "account",
                onlyWhenLoggedIn: true,
            },
-            {
-                name: i18n.t('clubs.clubList'),
-                route: "ClubListScreen",
-                icon: "account-group",
-                onlyWhenLoggedIn: true,
-            },
            {
                name: i18n.t('screens.logout'),
                route: 'disconnect',
--- a/navigation/DrawerNavigator.js
+++ b/navigation/DrawerNavigator.js
@ -17,8 +17,6 @@ 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,
@ -238,43 +236,6 @@ 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: i18n.t('clubs.clubList'),
-                        headerLeft: openDrawer
-                    };
-                }}
-            />
-            <ClubStack.Screen
-                name="ClubDisplayScreen"
-                component={ClubDisplayScreen}
-                options={({navigation}) => {
-                    const openDrawer = getDrawerButton.bind(this, navigation);
-                    return {
-                        title: "",
-                        headerLeft: openDrawer,
-                        ...TransitionPresets.ModalSlideFromBottomIOS,
-                    };
-                }}
-            />
-        </ClubStack.Navigator>
-    );
-}
-
-
 const Drawer = createDrawerNavigator();

 function getDrawerContent(props) {
@ -328,10 +289,6 @@ export default function DrawerNavigator() {
                name="ProfileScreen"
                component={ProfileStackComponent}
            />
-            <Drawer.Screen
-                name="ClubListScreen"
-                component={ClubStackComponent}
-            />
        </Drawer.Navigator>
    );
 }
--- a/package.json
+++ b/package.json
@ -28,28 +28,27 @@
    "@react-navigation/native": "^5.0.9",
    "@react-navigation/stack": "^5.1.1",
    "expo": "^36.0.0",
-    "expo-linear-gradient": "~8.0.0",
    "expo-localization": "~8.0.0",
    "expo-permissions": "~8.0.0",
-    "expo-secure-store": "~8.0.0",
    "expo-web-browser": "~8.0.0",
    "i18n-js": "^3.3.0",
    "react": "16.9.0",
    "react-dom": "16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
    "react-native-app-intro-slider": "^3.0.0",
-    "react-native-appearance": "~0.3.1",
    "react-native-autolink": "^1.8.1",
    "react-native-calendars": "^1.260.0",
    "react-native-gesture-handler": "~1.5.0",
-    "react-native-image-modal": "^1.0.1",
    "react-native-modalize": "^1.3.6",
    "react-native-paper": "^3.6.0",
    "react-native-reanimated": "~1.4.0",
    "react-native-render-html": "^4.1.2",
    "react-native-safe-area-context": "0.6.0",
    "react-native-screens": "2.0.0-alpha.12",
-    "react-native-webview": "7.4.3"
+    "react-native-webview": "7.4.3",
+    "react-native-appearance": "~0.3.1",
+    "expo-linear-gradient": "~8.0.0",
+    "expo-secure-store": "~8.0.0"
  },
  "devDependencies": {
    "babel-preset-expo": "^8.0.0",
--- a/screens/Amicale/ClubDisplayScreen.js
+++ b/screens/Amicale/ClubDisplayScreen.js
@ -1,127 +0,0 @@
-// @flow
-
-import * as React from 'react';
-import {ScrollView, View} from 'react-native';
-import HTML from "react-native-render-html";
-import {Linking} from "expo";
-import {Avatar, Card, Chip, Paragraph, withTheme} from 'react-native-paper';
-import ImageModal from 'react-native-image-modal';
-import i18n from "i18n-js";
-
-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'];
-    categories = this.props.route.params['categories'];
-
-    colors: Object;
-
-    state = {
-        imageModalVisible: false,
-    };
-
-    constructor(props) {
-        super(props);
-        this.colors = props.theme.colors;
-    }
-
-    componentDidMount(): * {
-        this.props.navigation.setOptions({title: this.displayData.name})
-    }
-
-    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', marginTop: 5}}>{final}</View>;
-    }
-
-    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={i18n.t('clubs.managers')}
-                    subtitle={i18n.t('clubs.managersSubtitle')}
-                    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.getCategoriesRender(this.displayData.category)}
-                {this.displayData.logo !== null ?
-                    <View style={{
-                        marginLeft: 'auto',
-                        marginRight: 'auto',
-                        marginTop: 10,
-                        marginBottom: 10,
-                    }}>
-                        <ImageModal
-                            resizeMode="contain"
-                            imageBackgroundColor={this.colors.background}
-                            style={{
-                                width: 300,
-                                height: 300,
-                            }}
-                            source={{
-                                uri: this.displayData.logo,
-                            }}
-                        /></View>
-                    : <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)}
-            </ScrollView>
-        );
-    }
-}
-
-export default withTheme(ClubDisplayScreen);
--- a/screens/Amicale/ClubListScreen.js
+++ b/screens/Amicale/ClubListScreen.js
@ -1,102 +0,0 @@
-// @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, categories: this.categories});
-    }
-
-    render() {
-        return (
-            <AuthenticatedScreen
-                {...this.props}
-                link={'https://www.amicale-insat.fr/api/clubs/list'}
-                renderFunction={this.getScreen}
-            />
-        );
-    }
-}
-
-export default withTheme(ClubListScreen);
--- a/screens/HomeScreen.js
+++ b/screens/HomeScreen.js
@ -5,13 +5,12 @@ import {View} from 'react-native';
 import i18n from "i18n-js";
 import DashboardItem from "../components/Home/EventDashboardItem";
 import WebSectionList from "../components/Lists/WebSectionList";
-import {Portal, Text, withTheme} from 'react-native-paper';
+import {Text, withTheme} from 'react-native-paper';
 import FeedItem from "../components/Home/FeedItem";
 import SquareDashboardItem from "../components/Home/SquareDashboardItem";
 import PreviewEventDashboardItem from "../components/Home/PreviewEventDashboardItem";
 import {stringToDate} from "../utils/Planning";
 import {openBrowser} from "../utils/WebBrowser";
-import ImageView from "react-native-image-viewing";
 // import DATA from "../dashboard_data.json";


@ -30,15 +29,10 @@ type Props = {
    theme: Object,
 }

-type State = {
-    imageModalVisible: boolean,
-    imageList: Array<Object>,
-}
-
 /**
 * Class defining the app's home screen
 */
-class HomeScreen extends React.Component<Props, State> {
+class HomeScreen extends React.Component<Props> {

    onProxiwashClick: Function;
    onTutorInsaClick: Function;
@ -49,11 +43,6 @@ class HomeScreen extends React.Component<Props, State> {

    colors: Object;

-    state = {
-        imageModalVisible: false,
-        imageList: [],
-    };
-
    constructor(props) {
        super(props);
        this.onProxiwashClick = this.onProxiwashClick.bind(this);
@ -416,18 +405,6 @@ class HomeScreen extends React.Component<Props, State> {
        openBrowser(link, this.colors.primary);
    }

-    showImageModal(imageList) {
-        this.setState({
-            imageModalVisible: true,
-            imageList: imageList,
-        });
-    };
-
-    hideImageModal = () => {
-        this.setState({imageModalVisible: false});
-    };
-
-
    /**
     * Gets a render item for the given feed object
     *
@ -435,6 +412,7 @@ class HomeScreen extends React.Component<Props, State> {
     * @return {*}
     */
    getFeedItem(item: Object) {
+        const onImagePress = this.openLink.bind(this, item.full_picture);
        const onOutLinkPress = this.openLink.bind(this, item.permalink_url);
        return (
            <FeedItem
@ -442,6 +420,7 @@ class HomeScreen extends React.Component<Props, State> {
                subtitle={HomeScreen.getFormattedDate(item.created_time)}
                full_picture={item.full_picture}
                message={item.message}
+                onImagePress={onImagePress}
                onOutLinkPress={onOutLinkPress}
            />
        );
@ -462,25 +441,13 @@ class HomeScreen extends React.Component<Props, State> {
    render() {
        const nav = this.props.navigation;
        return (
-            <View>
-                <WebSectionList
-                    createDataset={this.createDataset}
-                    navigation={nav}
-                    autoRefreshTime={REFRESH_TIME}
-                    refreshOnFocus={true}
-                    fetchUrl={DATA_URL}
-                    renderItem={this.getRenderItem}/>
-                <Portal>
-                    <ImageView
-                        images={this.state.imageList}
-                        imageIndex={0}
-                        presentationStyle={"fullScreen"}
-                        visible={this.state.imageModalVisible}
-                        onRequestClose={this.hideImageModal}
-                    />
-                </Portal>
-            </View>
-
+            <WebSectionList
+                createDataset={this.createDataset}
+                navigation={nav}
+                autoRefreshTime={REFRESH_TIME}
+                refreshOnFocus={true}
+                fetchUrl={DATA_URL}
+                renderItem={this.getRenderItem}/>
        );
    }
 }
--- a/screens/Planning/PlanningDisplayScreen.js
+++ b/screens/Planning/PlanningDisplayScreen.js
@ -1,23 +1,18 @@
 // @flow

 import * as React from 'react';
-import {ScrollView, View} from 'react-native';
+import {Image, ScrollView, View} from 'react-native';
 import HTML from "react-native-render-html";
 import {Linking} from "expo";
 import {getDateOnlyString, getFormattedEventTime} from '../../utils/Planning';
 import {Card, withTheme} from 'react-native-paper';
 import DateManager from "../../managers/DateManager";
-import ImageModal from 'react-native-image-modal';

 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));
 }
@ -25,29 +20,17 @@ function openWebLink(event, link) {
 /**
 * Class defining a planning event information page.
 */
-class PlanningDisplayScreen extends React.Component<Props, State> {
+class PlanningDisplayScreen extends React.Component<Props> {

    displayData = this.props.route.params['data'];

    colors: Object;

-    state = {
-        imageModalVisible: false,
-    };
-
    constructor(props) {
        super(props);
        this.colors = props.theme.colors;
    }

-    showImageModal = () => {
-        this.setState({imageModalVisible: true});
-    };
-
-    hideImageModal = () => {
-        this.setState({imageModalVisible: false});
-    };
-
    render() {
        // console.log("rendering planningDisplayScreen");
        let subtitle = getFormattedEventTime(
@ -62,18 +45,10 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
                    subtitle={subtitle}
                />
                {this.displayData.logo !== null ?
-                    <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
-                        <ImageModal
-                            resizeMode="contain"
-                            imageBackgroundColor={this.colors.background}
-                            style={{
-                                width: 300,
-                                height: 300,
-                            }}
-                            source={{
-                                uri: this.displayData.logo,
-                            }}
-                        /></View>
+                    <View style={{width: '100%', height: 300}}>
+                        <Image style={{flex: 1, resizeMode: "contain"}}
+                               source={{uri: this.displayData.logo}}/>
+                    </View>
                    : <View/>}

                {this.displayData.description !== null ?
--- a/translations/en.json
+++ b/translations/en.json
@ -242,11 +242,6 @@
      "unknown": "Unknown error, please contact support."
    }
  },
-  "clubs": {
-    "clubList": "Club list",
-    "managers": "Managers",
-    "managersSubtitle": "These people make the club live"
-  },
  "dialog": {
    "ok": "OK",
    "yes": "Yes",
--- a/translations/fr.json
+++ b/translations/fr.json
@ -243,11 +243,6 @@
      "unknown": "Erreur inconnue, merci de contacter le support."
    }
  },
-  "clubs": {
-    "clubList": "Liste des clubs",
-    "managers": "Responsables",
-    "managersSubtitle": "Ces personnes font vivre le club"
-  },
  "dialog": {
    "ok": "OK",
    "yes": "Oui",