Improved selection screens

src/components/Lists/CardList/CardList.js

@@ -0,0 +1,47 @@
+// @flow
+
+import * as React from 'react';
+import {Animated, View} from "react-native";
+import type {cardItem, cards} from "../../../screens/Insa/InsaHomeScreen";
+import CardListItem from "./CardListItem";
+
+type Props = {
+    dataset: Array<cards>
+}
+
+export default class CardList extends React.Component<Props> {
+
+    renderItem = ({item}: { item: cards }) => {
+        let width = '80%';
+        if (item.length > 1) {
+            width = '40%';
+        }
+        return (
+            <View style={{
+                flex: 1,
+                flexDirection: 'row',
+                justifyContent: "space-evenly",
+                marginTop: 10,
+            }}>
+                {item.map((card: cardItem, index: number) => {
+                    return (
+                        <CardListItem width={width} item={card} key={index.toString()}/>
+                    );
+                })}
+            </View>
+        );
+    };
+
+    keyExtractor = (item: cards) => item[0].title;
+
+    render() {
+        return (
+            <Animated.FlatList
+                {...this.props}
+                data={this.props.dataset}
+                renderItem={this.renderItem}
+                keyExtractor={this.keyExtractor}
+            />
+        );
+    }
+}

src/components/Lists/CardList/CardListItem.js

@@ -0,0 +1,42 @@
+// @flow
+
+import * as React from 'react';
+import {Caption, Card, Paragraph} from 'react-native-paper';
+import type {cardItem} from "../../../screens/Insa/InsaHomeScreen";
+
+type Props = {
+    width: string | number,
+    item: cardItem,
+}
+
+export default class CardListItem extends React.Component<Props> {
+
+    shouldComponentUpdate() {
+        return false;
+    }
+
+    render() {
+        const props = this.props;
+        const item = props.item;
+        const source = typeof item.image === "number"
+            ? item.image
+            : {uri: item.image};
+        return (
+            <Card
+                style={{
+                    width: props.width,
+                }}
+                onPress={item.onPress}
+            >
+                <Card.Cover
+                    style={{height: 80}}
+                    source={source}
+                />
+                <Card.Content>
+                    <Paragraph>{item.title}</Paragraph>
+                    <Caption>{item.subtitle}</Caption>
+                </Card.Content>
+            </Card>
+        );
+    }
+}

src/navigation/MainTabNavigator.js

@@ -169,13 +169,7 @@ function InsaStackComponent() {
             headerMode={"screen"}
             screenOptions={defaultScreenOptions}
         >
-            <InsaStack.Screen
+            {createScreenCollapsibleStack("index", InsaStack, InsaHomeScreen, "INSA HOME")}
-                name="index"
-                component={InsaHomeScreen}
-                options={{
-                    title: "INSA HOME",
-                }}
-            />
             {getWebsiteStack("available-rooms", InsaStack, AvailableRoomScreen, i18n.t('screens.availableRooms'))}
             {getWebsiteStack("bib", InsaStack, BibScreen, i18n.t('screens.bib'))}
             {createScreenCollapsibleStack("self-menu", InsaStack, SelfMenuScreen, i18n.t('screens.menuSelf'))}

src/screens/Insa/InsaHomeScreen.js

@@ -1,85 +1,98 @@
 // @flow
 
 import * as React from 'react';
-import {ScrollView, StyleSheet} from "react-native";
+import CardList from "../../components/Lists/CardList/CardList";
-import {Button, withTheme} from 'react-native-paper';
+import CustomTabBar from "../../components/Tabbar/CustomTabBar";
+import {Collapsible} from "react-navigation-collapsible";
+import {withCollapsible} from "../../utils/withCollapsible";
 
 type Props = {
     navigation: Object,
     route: Object,
+    collapsibleStack: Collapsible,
 }
 
 type State = {}
 
+const BIB_IMAGE = "https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-9/50695561_2124263197597162_2325349608210825216_n.jpg?_nc_cat=109&_nc_sid=8bfeb9&_nc_ohc=tmcV6FWO7_kAX9vfWHU&_nc_ht=scontent-cdg2-1.xx&oh=3b81c76e46b49f7c3a033ea3b07ec212&oe=5EC59B4D";
+const RU_IMAGE = "https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-9/47123773_2041883702501779_5289372776166064128_o.jpg?_nc_cat=100&_nc_sid=cdbe9c&_nc_ohc=dpuBGlIIy_EAX8CyC0l&_nc_ht=scontent-cdg2-1.xx&oh=5c5bb4f0c7f12b554246f7c9b620a5f3&oe=5EC4DB31";
+const ROOM_IMAGE = "https://scontent-cdt1-1.xx.fbcdn.net/v/t1.0-9/47041013_2043521689004647_316124496522117120_n.jpg?_nc_cat=103&_nc_sid=8bfeb9&_nc_ohc=bIp8OVJvvSEAX8mKnDZ&_nc_ht=scontent-cdt1-1.xx&oh=b4fef72a645804a849ad30e9e20fca12&oe=5EC29309";
+const EMAIL_IMAGE = "https://etud-mel.insa-toulouse.fr/webmail/images/logo-bluemind.png";
+const ENT_IMAGE = "https://ent.insa-toulouse.fr/media/org/jasig/portal/layout/tab-column/xhtml-theme/insa/institutional/LogoInsa.png";
+
+export type cardItem = {
+    title: string,
+    subtitle: string,
+    image: string | number,
+    onPress: () => void,
+};
+
+export type cards = Array<cardItem>;
+
+
 class InsaHomeScreen extends React.Component<Props, State> {
 
     state = {};
 
-    colors: Object;
+    dataset: Array<cards>;
 
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
-
+        const nav = props.navigation;
-        this.colors = props.theme.colors;
+        this.dataset = [
+            [
+                {
+                    title: "RU",
+                    subtitle: "the ru",
+                    image: RU_IMAGE,
+                    onPress: () => nav.navigate("self-menu"),
+                },
+            ],
+            [
+                {
+                    title: "AVAILABLE ROOMS",
+                    subtitle: "ROOMS",
+                    image: ROOM_IMAGE,
+                    onPress: () => nav.navigate("available-rooms"),
+                },
+                {
+                    title: "BIB",
+                    subtitle: "BIB",
+                    image: BIB_IMAGE,
+                    onPress: () => nav.navigate("bib"),
+                },
+            ],
+            [
+                {
+                    title: "EMAIL",
+                    subtitle: "EMAIL",
+                    image: EMAIL_IMAGE,
+                    onPress: () => nav.navigate("available-rooms"),
+                },
+                {
+                    title: "ENT",
+                    subtitle: "ENT",
+                    image: ENT_IMAGE,
+                    onPress: () => nav.navigate("bib"),
+                },
+            ],
+        ];
     }
 
     render() {
-        const nav = this.props.navigation;
+        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
         return (
-            <ScrollView>
+                <CardList
-                <Button
+                    dataset={this.dataset}
-                    icon={"information"}
+                    onScroll={onScroll}
-                    onPress={() => nav.navigate("self-menu")}
+                    contentContainerStyle={{
-                >
+                        paddingTop: containerPaddingTop,
-                    RU
+                        paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20
-                </Button>
+                    }}
-                <Button
+                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
-                    icon={"information"}
+                />
-                    onPress={() => nav.navigate("available-rooms")}
-                >
-                    AVAILABLE ROOMS
-                </Button>
-                <Button
-                    icon={"information"}
-                    onPress={() => nav.navigate("bib")}
-                >
-                    BIB
-                </Button>
-                <Button// TODO create webview
-                    icon={"information"}
-                    onPress={() => nav.navigate("self-menu")}
-                >
-                    EMAIL
-                </Button>
-                <Button// TODO create webview
-                    icon={"information"}
-                    onPress={() => nav.navigate("self-menu")}
-                >
-                    ENT
-                </Button>
-            </ScrollView>
         );
     }
 }
 
-const styles = StyleSheet.create({
+export default withCollapsible(InsaHomeScreen);
-    container: {
-        flex: 1,
-        flexDirection: 'column',
-        justifyContent: 'center',
-    },
-    card: {
-        margin: 10,
-    },
-    header: {
-        fontSize: 36,
-        marginBottom: 48
-    },
-    textInput: {},
-    btnContainer: {
-        marginTop: 5,
-        marginBottom: 10,
-    }
-});
-
-export default withTheme(InsaHomeScreen);

src/screens/Websites/WebsitesHomeScreen.js

@@ -1,91 +1,92 @@
 // @flow
 
 import * as React from 'react';
-import {ScrollView, StyleSheet} from "react-native";
+import CardList from "../../components/Lists/CardList/CardList";
-import {Button, withTheme} from 'react-native-paper';
+import CustomTabBar from "../../components/Tabbar/CustomTabBar";
+import {withCollapsible} from "../../utils/withCollapsible";
+import type {cards} from "../Insa/InsaHomeScreen";
+import {Collapsible} from "react-navigation-collapsible";
 
 type Props = {
     navigation: Object,
     route: Object,
+    collapsibleStack: Collapsible,
 }
 
-type State = {}
+const PROXIMO_IMAGE = require("../../../assets/proximo-logo.png");
+const WIKETUD_LINK = "https://wiki.etud.insa-toulouse.fr/resources/assets/wiketud.png?ff051";
+const AMICALE_IMAGE = require("../../../assets/amicale.png");
+const EE_IMAGE = "https://etud.insa-toulouse.fr/~eeinsat/wp-content/uploads/2019/09/logo-blanc.png";
+const TUTORINSA_IMAGE = "https://www.etud.insa-toulouse.fr/~tutorinsa/public/images/logo-gray.png";
+const PLANNING_IMAGE = "https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-9/89719124_1737599216391004_5007805161305800704_o.jpg?_nc_cat=102&_nc_sid=825194&_nc_ohc=04zvPRn2SzIAX8v3F4q&_nc_ht=scontent-cdg2-1.xx&oh=ecc4af602818481c4192c92b8a45c69b&oe=5EC355E2";
 
-class WebsitesHomeScreen extends React.Component<Props, State> {
+class WebsitesHomeScreen extends React.Component<Props> {
 
-    state = {};
+    dataset: Array<cards>;
-
-    colors: Object;
 
     constructor(props) {
         super(props);
-
+        const nav = props.navigation;
-        this.colors = props.theme.colors;
+        this.dataset = [
+            [
+                {
+                    title: "proximo",
+                    subtitle: "proximo",
+                    image: PROXIMO_IMAGE,
+                    onPress: () => nav.navigate("proximo"),
+                },
+                {
+                    title: "planning",
+                    subtitle: "planning",
+                    image: PLANNING_IMAGE,
+                    onPress: () => nav.navigate("planning"),
+                },
+            ],
+            [
+                {
+                    title: "AMICALE",
+                    subtitle: "AMICALE",
+                    image: AMICALE_IMAGE,
+                    onPress: () => nav.navigate("amicale-website"),
+                },
+                {
+                    title: "wiketud",
+                    subtitle: "wiketud",
+                    image: WIKETUD_LINK,
+                    onPress: () => nav.navigate("wiketud"),
+                },
+            ],
+            [
+                {
+                    title: "ELUS ETUDIANTS",
+                    subtitle: "ELUS ETUDIANTS",
+                    image: EE_IMAGE,
+                    onPress: () => nav.navigate("elus-etudiants"),
+                },
+                {
+                    title: "TUTOR INSA",
+                    subtitle: "TUTOR INSA",
+                    image: TUTORINSA_IMAGE,
+                    onPress: () => nav.navigate("tutor-insa"),
+                },
+            ],
+        ];
     }
 
     render() {
-        const nav = this.props.navigation;
+        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
         return (
-            <ScrollView>
+            <CardList
-                <Button
+                dataset={this.dataset}
-                    icon={"information"}
+                onScroll={onScroll}
-                    onPress={() => nav.navigate("amicale-website")}
+                contentContainerStyle={{
-                >
+                    paddingTop: containerPaddingTop,
-                    AMICALE
+                    paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20
-                </Button>
+                }}
-                <Button
+                scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
-                    icon={"information"}
+            />
-                    onPress={() => nav.navigate("elus-etudiants")}
-                >
-                    ELUS ETUDIANTS
-                </Button>
-                <Button
-                    icon={"information"}
-                    onPress={() => nav.navigate("tutorinsa")}
-                >
-                    TUTOR INSA
-                </Button>
-                <Button
-                    icon={"information"}
-                    onPress={() => nav.navigate("wiketud")}
-                >
-                    WIKETUD
-                </Button>
-                <Button
-                    icon={"information"}
-                    onPress={() => nav.navigate("proximo")}
-                >
-                    PROXIMO
-                </Button>
-                <Button
-                    icon={"information"}
-                    onPress={() => nav.navigate("planning")}
-                >
-                    PLANNING
-                </Button>
-            </ScrollView>
         );
     }
 }
 
-const styles = StyleSheet.create({
+export default withCollapsible(WebsitesHomeScreen);
-    container: {
-        flex: 1,
-        flexDirection: 'column',
-        justifyContent: 'center',
-    },
-    card: {
-        margin: 10,
-    },
-    header: {
-        fontSize: 36,
-        marginBottom: 48
-    },
-    textInput: {},
-    btnContainer: {
-        marginTop: 5,
-        marginBottom: 10,
-    }
-});
-
-export default withTheme(WebsitesHomeScreen);