Allow to open app with links to clubs and events

App.js

@@ -5,7 +5,7 @@ import {Platform, StatusBar} from 'react-native';
 import LocaleManager from './src/managers/LocaleManager';
 import AsyncStorageManager from "./src/managers/AsyncStorageManager";
 import CustomIntroSlider from "./src/components/Custom/CustomIntroSlider";
-import {SplashScreen} from 'expo';
+import {Linking, SplashScreen} from 'expo';
 import ThemeManager from './src/managers/ThemeManager';
 import {NavigationContainer} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
@@ -41,12 +41,73 @@ export default class App extends React.Component<Props, State> {
     onIntroDone: Function;
     onUpdateTheme: Function;
 
+    navigatorRef: Object;
+
+    defaultRoute: Array<string>;
+    defaultData: Object;
+
+    createDrawerNavigator: Function;
+
     constructor() {
         super();
         LocaleManager.initTranslations();
         this.onIntroDone = this.onIntroDone.bind(this);
         this.onUpdateTheme = this.onUpdateTheme.bind(this);
         SplashScreen.preventAutoHide();
+        this.navigatorRef = React.createRef();
+        this.defaultRoute = [];
+        this.defaultData = {};
+        // this.defaultRoute = ["main", "home", "club-information"];
+        // this.defaultData = {clubId: 0};
+        this.handleUrls();
+    }
+
+    handleUrls() {
+        console.log(Linking.makeUrl('main/home/club-information', {clubId: 1}));
+        Linking.addEventListener('url', this.onUrl);
+        Linking.parseInitialURLAsync().then(this.onParsedUrl);
+    }
+
+    onUrl = (url: string) => {
+        this.onParsedUrl(Linking.parse(url));
+    };
+
+    onParsedUrl = ({path, queryParams}: Object) => {
+        if (path !== null) {
+            let pathArray = path.split('/');
+            if (this.isClubInformationLink(pathArray))
+                this.handleClubInformationUrl(queryParams);
+            else if (this.isPlanningInformationLink(pathArray))
+                this.handlePlanningInformationUrl(queryParams);
+        }
+    };
+
+    isClubInformationLink(pathArray: Array<string>) {
+        return pathArray[0] === "main" && pathArray[1] === "home" && pathArray[2] === "club-information";
+    }
+
+    isPlanningInformationLink(pathArray: Array<string>) {
+        return pathArray[0] === "main" && pathArray[1] === "home" && pathArray[2] === "planning-information";
+    }
+
+    handleClubInformationUrl(params: Object) {
+        if (params !== undefined && params.clubId !== undefined) {
+            let id = parseInt(params.clubId);
+            if (!isNaN(id)) {
+                this.defaultRoute = ["main", "home", "club-information"];
+                this.defaultData = {clubId: id};
+            }
+        }
+    }
+
+    handlePlanningInformationUrl(params: Object) {
+        if (params !== undefined && params.eventId !== undefined) {
+            let id = parseInt(params.eventId);
+            if (!isNaN(id)) {
+                this.defaultRoute = ["main", "home", "planning-information"];
+                this.defaultData = {eventId: id};
+            }
+        }
     }
 
     /**
@@ -92,8 +153,10 @@ export default class App extends React.Component<Props, State> {
         await initExpoToken();
         try {
             await ConnectionManager.getInstance().recoverLogin();
-        } catch (e) {}
+        } catch (e) {
+        }
 
+        this.createDrawerNavigator = () => <DrawerNavigator defaultPath={this.defaultRoute} defaultData={this.defaultData}/>;
         this.onLoadFinished();
     }
 
@@ -130,9 +193,9 @@ export default class App extends React.Component<Props, State> {
         } else {
             return (
                 <PaperProvider theme={this.state.currentTheme}>
-                    <NavigationContainer theme={this.state.currentTheme}>
+                    <NavigationContainer theme={this.state.currentTheme} ref={this.navigatorRef}>
                         <Stack.Navigator headerMode="none">
-                            <Stack.Screen name="Root" component={DrawerNavigator}/>
+                            <Stack.Screen name="Root" component={this.createDrawerNavigator}/>
                         </Stack.Navigator>
                     </NavigationContainer>
                 </PaperProvider>

app.json

@@ -3,6 +3,7 @@
     "name": "Campus",
     "description": "Application mobile compatible Android et iOS pour l'Amicale INSA Toulouse. Grâce à cette application, vous avez facilement accès aux news du campus, aux emplois du temps, à l'état de la laverie, et bien d'autres services ! Ceci est une version Beta, Toutes les fonctionnalités ne sont pas encore implémentées, et il est possible de rencontrer quelques bugs.",
     "slug": "application-amicale",
+    "scheme": "campus-insat",
     "privacy": "public",
     "platforms": [
       "ios",

src/components/Amicale/AuthenticatedScreen.js

@@ -73,7 +73,7 @@ class AuthenticatedScreen extends React.Component<Props, State> {
         if (this.errorCode === ERROR_TYPE.BAD_TOKEN) { // Token expired, logout user
             this.connectionManager.disconnect()
                 .then(() => {
-                    this.props.navigation.navigate("LoginScreen");
+                    this.props.navigation.navigate("login");
                 });
         } else if (this.allRequestsFinished())
             this.setState({loading: false});

src/components/Amicale/LogoutDialog.js

@@ -19,7 +19,7 @@ class LogoutDialog extends React.PureComponent<Props> {
                 .then(() => {
                     this.props.navigation.reset({
                         index: 0,
-                        routes: [{name: 'Main'}],
+                        routes: [{name: 'main'}],
                     });
                     this.props.onDismiss();
                     resolve();

src/components/Home/ActionsDashboardItem.js

@@ -21,7 +21,7 @@ class ActionsDashBoardItem extends React.PureComponent<Props> {
 
     openDrawer = () => this.props.navigation.openDrawer();
 
-    gotToSettings = () => this.props.navigation.navigate("SettingsScreen");
+    gotToSettings = () => this.props.navigation.navigate("settings");
 
     render() {
         return (

src/components/Sidebar/Sidebar.js

@@ -40,33 +40,33 @@ class SideBar extends React.Component<Props, State> {
         const mainData = [
             {
                 name: i18n.t('screens.home'),
-                route: "Main",
+                route: "main",
                 icon: "home",
             },
         ];
         const amicaleData = [
             {
                 name: i18n.t('screens.login'),
-                route: "LoginScreen",
+                route: "login",
                 icon: "login",
                 onlyWhenLoggedOut: true,
                 shouldEmphasis: true,
             },
             {
                 name: i18n.t('screens.profile'),
-                route: "ProfileScreen",
+                route: "profile",
                 icon: "account",
                 onlyWhenLoggedIn: true,
             },
             {
                 name: i18n.t('clubs.clubList'),
-                route: "ClubListScreen",
+                route: "club-list",
                 icon: "account-group",
                 onlyWhenLoggedIn: true,
             },
             {
                 name: i18n.t('screens.vote'),
-                route: "VoteScreen",
+                route: "vote",
                 icon: "vote",
                 onlyWhenLoggedIn: true,
             },
@@ -81,28 +81,28 @@ class SideBar extends React.Component<Props, State> {
         const servicesData = [
             {
                 name: i18n.t('screens.menuSelf'),
-                route: "SelfMenuScreen",
+                route: "self-menu",
                 icon: "silverware-fork-knife",
             },
             {
                 name: i18n.t('screens.availableRooms'),
-                route: "AvailableRoomScreen",
+                route: "available-rooms",
                 icon: "calendar-check",
             },
             {
                 name: i18n.t('screens.bib'),
-                route: "BibScreen",
+                route: "bib",
                 icon: "book",
             },
             {
                 name: i18n.t('screens.bluemind'),
-                route: "BlueMindScreen",
+                route: "bluemind",
                 link: "https://etud-mel.insa-toulouse.fr/webmail/",
                 icon: "email",
             },
             {
                 name: i18n.t('screens.ent'),
-                route: "EntScreen",
+                route: "ent",
                 link: "https://ent.insa-toulouse.fr/",
                 icon: "notebook",
             },
@@ -110,25 +110,25 @@ class SideBar extends React.Component<Props, State> {
         const websitesData = [
             {
                 name: "Amicale",
-                route: "AmicaleScreen",
+                route: "amicale",
                 link: "https://amicale-insat.fr/",
                 icon: "alpha-a-box",
             },
             {
                 name: "Élus Étudiants",
-                route: "ElusEtudScreen",
+                route: "elus-etudiants",
                 link: "https://etud.insa-toulouse.fr/~eeinsat/",
                 icon: "alpha-e-box",
             },
             {
                 name: "Wiketud",
-                route: "WiketudScreen",
+                route: "wiketud",
                 link: "https://wiki.etud.insa-toulouse.fr",
                 icon: "wikipedia",
             },
             {
                 name: "Tutor'INSA",
-                route: "TutorInsaScreen",
+                route: "tutor-insa",
                 link: "https://www.etud.insa-toulouse.fr/~tutorinsa/",
                 icon: "school",
             },
@@ -136,12 +136,12 @@ class SideBar extends React.Component<Props, State> {
         const othersData = [
             {
                 name: i18n.t('screens.settings'),
-                route: "SettingsScreen",
+                route: "settings",
                 icon: "settings",
             },
             {
                 name: i18n.t('screens.about'),
-                route: "AboutScreen",
+                route: "about",
                 icon: "information",
             },
         ];
@@ -229,7 +229,7 @@ class SideBar extends React.Component<Props, State> {
         return (
             <View style={{height: '100%'}}>
                 <TouchableRipple
-                    onPress={() => this.props.navigation.navigate("TetrisScreen")}
+                    onPress={() => this.props.navigation.navigate("tetris")}
                 >
                     <Image
                         source={require("../../../assets/drawer-cover.png")}

src/managers/AsyncStorageManager.js

@@ -61,7 +61,7 @@ export default class AsyncStorageManager {
         },
         defaultStartScreen: {
             key: 'defaultStartScreen',
-            default: 'Home',
+            default: 'home',
             current: '',
         },
         proxiwashShowBanner: {

src/navigation/DrawerNavigator.js

@@ -39,12 +39,12 @@ const AboutStack = createStackNavigator();
 function AboutStackComponent() {
     return (
         <AboutStack.Navigator
-            initialRouteName="AboutScreen"
+            initialRouteName="index"
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
             <AboutStack.Screen
-                name="AboutScreen"
+                name="index"
                 component={AboutScreen}
                 options={({navigation}) => {
                     const openDrawer = getDrawerButton.bind(this, navigation);
@@ -55,14 +55,14 @@ function AboutStackComponent() {
                 }}
             />
             <AboutStack.Screen
-                name="AboutDependenciesScreen"
+                name="dependencies"
                 component={AboutDependenciesScreen}
                 options={{
                     title: i18n.t('aboutScreen.libs')
                 }}
             />
             <AboutStack.Screen
-                name="DebugScreen"
+                name="debug"
                 component={DebugScreen}
                 options={{
                     title: i18n.t('aboutScreen.debug')
@@ -77,12 +77,12 @@ const SettingsStack = createStackNavigator();
 function SettingsStackComponent() {
     return (
         <SettingsStack.Navigator
-            initialRouteName="SettingsScreen"
+            initialRouteName="index"
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
             <SettingsStack.Screen
-                name="SettingsScreen"
+                name="index"
                 component={SettingsScreen}
                 options={({navigation}) => {
                     const openDrawer = getDrawerButton.bind(this, navigation);
@@ -101,12 +101,12 @@ const SelfMenuStack = createStackNavigator();
 function SelfMenuStackComponent() {
     return (
         <SelfMenuStack.Navigator
-            initialRouteName="SelfMenuScreen"
+            initialRouteName="index"
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
             <SelfMenuStack.Screen
-                name="SelfMenuScreen"
+                name="index"
                 component={SelfMenuScreen}
                 options={({navigation}) => {
                     const openDrawer = getDrawerButton.bind(this, navigation);
@@ -125,12 +125,12 @@ const AvailableRoomStack = createStackNavigator();
 function AvailableRoomStackComponent() {
     return (
         <AvailableRoomStack.Navigator
-            initialRouteName="AvailableRoomScreen"
+            initialRouteName="index"
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
             <AvailableRoomStack.Screen
-                name="AvailableRoomScreen"
+                name="index"
                 component={AvailableRoomScreen}
                 options={({navigation}) => {
                     const openDrawer = getDrawerButton.bind(this, navigation);
@@ -149,12 +149,12 @@ const BibStack = createStackNavigator();
 function BibStackComponent() {
     return (
         <BibStack.Navigator
-            initialRouteName="BibScreen"
+            initialRouteName="index"
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
             <BibStack.Screen
-                name="BibScreen"
+                name="index"
                 component={BibScreen}
                 options={({navigation}) => {
                     const openDrawer = getDrawerButton.bind(this, navigation);
@@ -173,12 +173,12 @@ const TetrisStack = createStackNavigator();
 function TetrisStackComponent() {
     return (
         <TetrisStack.Navigator
-            initialRouteName="TetrisScreen"
+            initialRouteName="index"
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
             <TetrisStack.Screen
-                name="TetrisScreen"
+                name="index"
                 component={TetrisScreen}
                 options={({navigation}) => {
                     const openDrawer = getDrawerButton.bind(this, navigation);
@@ -197,12 +197,12 @@ const LoginStack = createStackNavigator();
 function LoginStackComponent() {
     return (
         <LoginStack.Navigator
-            initialRouteName="LoginScreen"
+            initialRouteName="index"
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
             <LoginStack.Screen
-                name="LoginScreen"
+                name="index"
                 component={LoginScreen}
                 options={({navigation}) => {
                     const openDrawer = getDrawerButton.bind(this, navigation);
@@ -221,12 +221,12 @@ const ProfileStack = createStackNavigator();
 function ProfileStackComponent() {
     return (
         <ProfileStack.Navigator
-            initialRouteName="ProfileScreen"
+            initialRouteName="index"
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
             <ProfileStack.Screen
-                name="ProfileScreen"
+                name="index"
                 component={ProfileScreen}
                 options={({navigation}) => {
                     const openDrawer = getDrawerButton.bind(this, navigation);
@@ -246,12 +246,12 @@ const VoteStack = createStackNavigator();
 function VoteStackComponent() {
     return (
         <VoteStack.Navigator
-            initialRouteName="VoteScreen"
+            initialRouteName="index"
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
             <VoteStack.Screen
-                name="VoteScreen"
+                name="index"
                 component={VoteScreen}
                 options={({navigation}) => {
                     const openDrawer = getDrawerButton.bind(this, navigation);
@@ -270,12 +270,12 @@ const ClubStack = createStackNavigator();
 function ClubStackComponent() {
     return (
         <ClubStack.Navigator
-            initialRouteName="ClubListScreen"
+            initialRouteName={"index"}
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
             <ClubStack.Screen
-                name="ClubListScreen"
+                name="index"
                 component={ClubListScreen}
                 options={({navigation}) => {
                     const openDrawer = getDrawerButton.bind(this, navigation);
@@ -286,7 +286,7 @@ function ClubStackComponent() {
                 }}
             />
             <ClubStack.Screen
-                name="ClubDisplayScreen"
+                name="club-information"
                 component={ClubDisplayScreen}
                 options={({navigation}) => {
                     return {
@@ -296,7 +296,7 @@ function ClubStackComponent() {
                 }}
             />
             <ClubStack.Screen
-                name="ClubAboutScreen"
+                name="club-about"
                 component={ClubAboutScreen}
                 options={({navigation}) => {
                     return {
@@ -316,10 +316,36 @@ function getDrawerContent(props) {
     return <Sidebar {...props}/>
 }
 
-export default function DrawerNavigator() {
+type Props = {
+    defaultPath: Array<string>,
+    defaultData: Object
+}
+
+
+export default class DrawerNavigator extends React.Component<Props> {
+
+    defaultRoute: string;
+    defaultSubRoute: string | null;
+
+    createTabNavigator: Object;
+
+    constructor(props: Object) {
+        super(props);
+        this.defaultRoute = 'Main';
+        this.defaultSubRoute = null;
+
+        if (props.defaultPath.length > 0)
+            this.defaultRoute = props.defaultPath[0];
+        if (props.defaultPath.length > 1)
+            this.defaultSubRoute = props.defaultPath[1];
+
+        this.createTabNavigator = () => <TabNavigator defaultPath={props.defaultPath} defaultData={props.defaultData}/>
+    }
+
+    render() {
         return (
             <Drawer.Navigator
-            initialRouteName={'Main'}
+                initialRouteName={this.defaultRoute}
                 headerMode={'float'}
                 backBehavior={'initialRoute'}
                 drawerType={'front'}
@@ -327,50 +353,51 @@ export default function DrawerNavigator() {
                 screenOptions={defaultScreenOptions}
             >
                 <Drawer.Screen
-                name="Main"
+                    name="main"
-                component={TabNavigator}
+                    component={this.createTabNavigator}
                 >
                 </Drawer.Screen>
                 <Drawer.Screen
-                name="SettingsScreen"
+                    name="settings"
                     component={SettingsStackComponent}
                 />
                 <Drawer.Screen
-                name="AboutScreen"
+                    name="about"
                     component={AboutStackComponent}
                 />
                 <Drawer.Screen
-                name="SelfMenuScreen"
+                    name="self-menu"
                     component={SelfMenuStackComponent}
                 />
                 <Drawer.Screen
-                name="AvailableRoomScreen"
+                    name="available-rooms"
                     component={AvailableRoomStackComponent}
                 />
                 <Drawer.Screen
-                name="BibScreen"
+                    name="bib"
                     component={BibStackComponent}
                 />
                 <Drawer.Screen
-                name="TetrisScreen"
+                    name="tetris"
                     component={TetrisStackComponent}
                 />
                 <Drawer.Screen
-                name="LoginScreen"
+                    name="login"
                     component={LoginStackComponent}
                 />
                 <Drawer.Screen
-                name="ProfileScreen"
+                    name="profile"
                     component={ProfileStackComponent}
                 />
                 <Drawer.Screen
-                name="ClubListScreen"
+                    name="club-list"
                     component={ClubStackComponent}
                 />
                 <Drawer.Screen
-                name="VoteScreen"
+                    name="vote"
                     component={VoteStackComponent}
                 />
             </Drawer.Navigator>
         );
     }
+}

src/navigation/MainTabNavigator.js

@@ -16,14 +16,15 @@ import AsyncStorageManager from "../managers/AsyncStorageManager";
 import HeaderButton from "../components/Custom/HeaderButton";
 import {withTheme} from 'react-native-paper';
 import i18n from "i18n-js";
+import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
 
 
 const TAB_ICONS = {
-    Home: 'triangle',
+    home: 'triangle',
-    Planning: 'calendar-range',
+    planning: 'calendar-range',
-    Proxiwash: 'tshirt-crew',
+    proxiwash: 'tshirt-crew',
-    Proximo: 'cart',
+    proximo: 'cart',
-    Planex: 'clock',
+    planex: 'clock',
 };
 
 const defaultScreenOptions = {
@@ -43,12 +44,12 @@ const ProximoStack = createStackNavigator();
 function ProximoStackComponent() {
     return (
         <ProximoStack.Navigator
-            initialRouteName="ProximoMainScreen"
+            initialRouteName="index"
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
             <ProximoStack.Screen
-                name="ProximoMainScreen"
+                name="index"
                 options={({navigation}) => {
                     const openDrawer = getDrawerButton.bind(this, navigation);
                     return {
@@ -59,14 +60,14 @@ function ProximoStackComponent() {
                 component={ProximoMainScreen}
             />
             <ProximoStack.Screen
-                name="ProximoListScreen"
+                name="proximo-list"
                 options={{
                     title: 'Articles'
                 }}
                 component={ProximoListScreen}
             />
             <ProximoStack.Screen
-                name="ProximoAboutScreen"
+                name="proximo-about"
                 component={ProximoAboutScreen}
                 options={{
                     title: 'Proximo',
@@ -82,12 +83,12 @@ const ProxiwashStack = createStackNavigator();
 function ProxiwashStackComponent() {
     return (
         <ProxiwashStack.Navigator
-            initialRouteName="ProxiwashScreen"
+            initialRouteName="index"
             headerMode='float'
             screenOptions={defaultScreenOptions}
         >
             <ProxiwashStack.Screen
-                name="ProxiwashScreen"
+                name="index"
                 component={ProxiwashScreen}
                 options={({navigation}) => {
                     const openDrawer = getDrawerButton.bind(this, navigation);
@@ -98,7 +99,7 @@ function ProxiwashStackComponent() {
                 }}
             />
             <ProxiwashStack.Screen
-                name="ProxiwashAboutScreen"
+                name="proxiwash-about"
                 component={ProxiwashAboutScreen}
                 options={{
                     title: 'Proxiwash',
@@ -114,12 +115,12 @@ const PlanningStack = createStackNavigator();
 function PlanningStackComponent() {
     return (
         <PlanningStack.Navigator
-            initialRouteName="PlanningScreen"
+            initialRouteName="index"
             headerMode='float'
             screenOptions={defaultScreenOptions}
         >
             <PlanningStack.Screen
-                name="PlanningScreen"
+                name="index"
                 component={PlanningScreen}
                 options={({navigation}) => {
                     const openDrawer = getDrawerButton.bind(this, navigation);
@@ -130,7 +131,7 @@ function PlanningStackComponent() {
                 }}
             />
             <PlanningStack.Screen
-                name="PlanningDisplayScreen"
+                name="planning-information"
                 component={PlanningDisplayScreen}
                 options={{
                     title: 'Details',
@@ -143,15 +144,15 @@ function PlanningStackComponent() {
 
 const HomeStack = createStackNavigator();
 
-function HomeStackComponent() {
+function HomeStackComponent(initialRoute: string | null, defaultData: Object) {
     return (
         <HomeStack.Navigator
-            initialRouteName="HomeScreen"
+            initialRouteName={"index"}
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
             <HomeStack.Screen
-                name="HomeScreen"
+                name="index"
                 component={HomeScreen}
                 options={({navigation}) => {
                     const openDrawer = getDrawerButton.bind(this, navigation);
@@ -160,15 +161,26 @@ function HomeStackComponent() {
                         headerLeft: openDrawer
                     };
                 }}
+                initialParams={{data: defaultData, nextScreen: initialRoute}}
             />
             <HomeStack.Screen
-                name="PlanningDisplayScreen"
+                name="planning-information"
                 component={PlanningDisplayScreen}
                 options={{
                     title: 'Details',
                     ...TransitionPresets.ModalSlideFromBottomIOS,
                 }}
             />
+            <HomeStack.Screen
+                name="club-information"
+                component={ClubDisplayScreen}
+                options={({navigation}) => {
+                    return {
+                        title: "",
+                        ...TransitionPresets.ModalSlideFromBottomIOS,
+                    };
+                }}
+            />
         </HomeStack.Navigator>
     );
 }
@@ -178,12 +190,12 @@ const PlanexStack = createStackNavigator();
 function PlanexStackComponent() {
     return (
         <PlanexStack.Navigator
-            initialRouteName="HomeScreen"
+            initialRouteName="index"
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
             <PlanexStack.Screen
-                name="PlanexScreen"
+                name="index"
                 component={PlanexScreen}
                 options={({navigation}) => {
                     const openDrawer = getDrawerButton.bind(this, navigation);
@@ -199,12 +211,36 @@ function PlanexStackComponent() {
 
 const Tab = createMaterialBottomTabNavigator();
 
-function TabNavigator(props) {
+type Props = {
-    const {colors} = props.theme;
+    defaultPath: Array<string>,
+    defaultData: Object
+}
+
+class TabNavigator extends React.Component<Props>{
+
+    createHomeStackComponent: Object;
+    colors: Object;
+
+    constructor(props) {
+        super(props);
+        this.colors = props.theme.colors;
+        this.defaultRoute = AsyncStorageManager.getInstance().preferences.defaultStartScreen.current.toLowerCase();
+        this.defaultSubRoute = null;
+
+        if (props.defaultPath.length > 1)
+            this.defaultRoute = props.defaultPath[1];
+        if (props.defaultPath.length > 2)
+            this.defaultSubRoute = props.defaultPath[2];
+
+
+        this.createHomeStackComponent = () => HomeStackComponent(this.defaultSubRoute, props.defaultData);
+    }
+
+    render() {
         return (
             <Tab.Navigator
-            initialRouteName={AsyncStorageManager.getInstance().preferences.defaultStartScreen.current}
+                initialRouteName={this.defaultRoute}
-            barStyle={{backgroundColor: colors.surface}}
+                barStyle={{backgroundColor: this.colors.surface}}
                 screenOptions={({route}) => ({
                     tabBarIcon: ({focused, color, size}) => {
                         let icon = TAB_ICONS[route.name];
@@ -213,32 +249,33 @@ function TabNavigator(props) {
                         return <MaterialCommunityIcons name={icon} color={color} size={26}/>;
                     },
                 })}
-            activeColor={colors.primary}
+                activeColor={this.colors.primary}
-            inactiveColor={colors.tabIcon}
+                inactiveColor={this.colors.tabIcon}
             >
                 <Tab.Screen
-                name="Proximo"
+                    name="proximo"
                     component={ProximoStackComponent}
                 />
                 <Tab.Screen
-                name="Planning"
+                    name="planning"
                     component={PlanningStackComponent}
                 />
                 <Tab.Screen
-                name="Home"
+                    name="home"
-                component={HomeStackComponent}
+                    component={this.createHomeStackComponent}
                     options={{title: i18n.t('screens.home')}}
                 />
                 <Tab.Screen
-                name="Proxiwash"
+                    name="proxiwash"
                     component={ProxiwashStackComponent}
                 />
                 <Tab.Screen
-                name="Planex"
+                    name="planex"
                     component={PlanexStackComponent}
                 />
             </Tab.Navigator>
         );
     }
+}
 
 export default withTheme(TabNavigator);

src/screens/About/AboutScreen.js

@@ -101,7 +101,7 @@ class AboutScreen extends React.Component<Props, State> {
             showChevron: true
         },
         {
-            onPressCallback: () => this.props.navigation.navigate('DebugScreen'),
+            onPressCallback: () => this.props.navigation.navigate('debug'),
             icon: 'bug-check',
             text: i18n.t('aboutScreen.debug'),
             showChevron: true,
@@ -165,7 +165,7 @@ class AboutScreen extends React.Component<Props, State> {
             showChevron: true
         },
         {
-            onPressCallback: () => this.props.navigation.navigate('AboutDependenciesScreen'),
+            onPressCallback: () => this.props.navigation.navigate('dependencies'),
             icon: 'developer-board',
             text: i18n.t('aboutScreen.libs'),
             showChevron: true

src/screens/Amicale/Clubs/ClubDisplayScreen.js

@@ -7,6 +7,7 @@ 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";
+import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
 
 type Props = {
     navigation: Object,
@@ -21,13 +22,34 @@ function openWebLink(event, link) {
     Linking.openURL(link).catch((err) => console.error('Error opening link', err));
 }
 
+const FakeClub = {
+    "category": [
+        3,
+        6,
+    ],
+    "description": "<p class=\"ql-align-justify\">Les 100 Tours de l’INSA reviennent en force pour une cinquième édition les 5 et 6 juin prochain&nbsp;!</p><p class=\"ql-align-justify\"><br></p><p class=\"ql-align-justify\">Prépare-toi pour le plus gros évènement de l’année sur le campus de notre belle école qui nous réunit tous autour d’activités folles&nbsp;pour fêter la fin de l’année dans la bonne humeur !</p><p class=\"ql-align-justify\">L’éco-festival tournera autour d’une grande course par équipe qui nous vaut ce doux nom de 100 tours. Ce sera le moment de défier tes potes pour tenter de remporter de nombreux lots, et surtout l’admiration de tous. Mais cela ne s’arrête pas là, puisque tu pourras aussi participer à des activités à sensation, divers ateliers, et de quoi chiller avec tes potes en écoutant de la bonne musique. Tu pourras ensuite enchaîner sur LA soirée de l’année, rythmée par des artistes sur-motivés&nbsp;!</p><p class=\"ql-align-justify\"><br></p><p class=\"ql-align-justify\">Tu es bien entendu le bienvenu si l’envie te prend de rejoindre l’équipe et de nous aider à organiser cet évènement du turfu&nbsp;!</p><p class=\"ql-align-justify\"><br></p><p class=\"ql-align-justify\">La team 100 Tours</p><p class=\"ql-align-justify\"><br></p><p>Contact&nbsp;: <a href=\"mailto:100Tours@amicale-insat.fr\" target=\"_blank\">100tours@amicale-insat.fr</a></p><p>Facebook&nbsp;: Les 100 Tours de l’INSA</p><p>Instagram&nbsp;: 100tours.insatoulouse</p>",
+    "id": 110,
+    "logo": "https://www.amicale-insat.fr/storage/clubLogos/2cca8885dd3bdf902124f038b548962b.jpeg",
+    "name": "100 Tours",
+    "responsibles": [
+        "Juliette Duval",
+        "Emilie Cuminal",
+        "Maxime Doré",
+    ],
+};
+
 /**
  * Class defining a planning event information page.
+ * If called with data and categories navigation parameters, will use those to display the data.
+ * If called with clubId parameter, will fetch the information on the server
  */
 class ClubDisplayScreen extends React.Component<Props, State> {
 
-    displayData = this.props.route.params['data'];
+    displayData: Object;
-    categories = this.props.route.params['categories'];
+    categories: Object | null;
+    clubId: number;
+
+    shouldFetchData: boolean;
 
     colors: Object;
 
@@ -38,6 +60,19 @@ class ClubDisplayScreen extends React.Component<Props, State> {
     constructor(props) {
         super(props);
         this.colors = props.theme.colors;
+
+        if (this.props.route.params.data !== undefined && this.props.route.params.categories !== undefined) {
+            this.displayData = this.props.route.params.data;
+            this.categories = this.props.route.params.categories;
+            this.clubId = this.props.route.params.data.id;
+            this.shouldFetchData = false;
+        } else {
+            this.displayData = {};
+            this.categories = null;
+            this.clubId = this.props.route.params.clubId;
+            this.shouldFetchData = true;
+            console.log(this.clubId);
+        }
     }
 
     componentDidMount(): * {
@@ -45,22 +80,28 @@ class ClubDisplayScreen extends React.Component<Props, State> {
     }
 
     getCategoryName(id: number) {
+        if (this.categories !== null) {
             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>) {
+        if (this.categories === null)
+            return null;
+
         let final = [];
         for (let i = 0; i < categories.length; i++) {
-            if (categories[i] !== null) {
+            let cat = categories[i];
+            if (cat !== null) {
                 final.push(
                     <Chip
                         style={{marginRight: 5}}
                         key={i.toString()}>
-                        {this.getCategoryName(categories[i])}
+                        {this.getCategoryName(cat)}
                     </Chip>
                 );
             }
@@ -92,11 +133,13 @@ class ClubDisplayScreen extends React.Component<Props, State> {
         );
     }
 
-    render() {
+    getScreen = (data: Object) => {
+        data = FakeClub;
+
         return (
             <ScrollView style={{paddingLeft: 5, paddingRight: 5}}>
-                {this.getCategoriesRender(this.displayData.category)}
+                {this.getCategoriesRender(data.category)}
-                {this.displayData.logo !== null ?
+                {data.logo !== null ?
                     <View style={{
                         marginLeft: 'auto',
                         marginRight: 'auto',
@@ -111,15 +154,15 @@ class ClubDisplayScreen extends React.Component<Props, State> {
                                 height: 300,
                             }}
                             source={{
-                                uri: this.displayData.logo,
+                                uri: data.logo,
                             }}
                         /></View>
                     : <View/>}
 
-                {this.displayData.description !== null ?
+                {data.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>"}
+                        <HTML html={"<div>" + data.description + "</div>"}
                               tagsStyles={{
                                   p: {color: this.colors.text,},
                                   div: {color: this.colors.text}
@@ -127,9 +170,25 @@ class ClubDisplayScreen extends React.Component<Props, State> {
                               onLinkPress={openWebLink}/>
                     </Card.Content>
                     : <View/>}
-                {this.getManagersRender(this.displayData.responsibles)}
+                {this.getManagersRender(data.responsibles)}
             </ScrollView>
         );
+    };
+
+    render() {
+        if (this.shouldFetchData)
+            return <AuthenticatedScreen
+                {...this.props}
+                links={[
+                    {
+                        link: 'clubs/list/' + this.clubId,
+                        mandatory: false,
+                    }
+                ]}
+                renderFunction={this.getScreen}
+            />;
+        else
+            return this.getScreen(this.displayData);
     }
 }
 

src/screens/Amicale/Clubs/ClubListScreen.js

@@ -71,7 +71,7 @@ class ClubListScreen extends React.Component<Props, State> {
      * @return {*}
      */
     getHeaderButtons = () => {
-        const onPress = () => this.props.navigation.navigate("ClubAboutScreen");
+        const onPress = () => this.props.navigation.navigate("club-about");
         return <HeaderButton icon={'information'} onPress={onPress}/>;
     };
 
@@ -186,7 +186,7 @@ class ClubListScreen extends React.Component<Props, State> {
      * @param item The article pressed
      */
     onListItemPress(item: Object) {
-        this.props.navigation.navigate("ClubDisplayScreen", {data: item, categories: this.categories});
+        this.props.navigation.navigate("club-information", {data: item, categories: this.categories});
     }
 
     render() {

src/screens/Amicale/LoginScreen.js

@@ -63,7 +63,7 @@ class LoginScreen extends React.Component<Props, State> {
 
     hideErrorDialog = () => this.setState({dialogVisible: false});
 
-    handleSuccess = () => this.props.navigation.navigate('ProfileScreen');
+    handleSuccess = () => this.props.navigation.navigate('profile');
 
     onResetPasswordClick = () => openBrowser(RESET_PASSWORD_LINK, this.colors.primary);
 

src/screens/HomeScreen.js

@@ -29,6 +29,7 @@ const REFRESH_TIME = 1000 * 20; // Refresh every 20 seconds
 
 type Props = {
     navigation: Object,
+    route: Object,
     theme: Object,
 }
 
@@ -51,6 +52,9 @@ class HomeScreen extends React.Component<Props> {
         this.colors = props.theme.colors;
 
         this.isLoggedIn = null;
+        if (this.props.route.params.nextScreen !== undefined && this.props.route.params.nextScreen !== null) {
+            this.props.navigation.navigate(this.props.route.params.nextScreen, this.props.route.params.data);
+        }
     }
 
     /**
@@ -80,8 +84,8 @@ class HomeScreen extends React.Component<Props> {
 
     getHeaderButton = () => {
         const screen = this.isLoggedIn
-            ? "ProfileScreen"
+            ? "profile"
-            : "LoginScreen";
+            : "login";
         const icon = this.isLoggedIn
             ? "account"
             : "login";
@@ -93,13 +97,13 @@ class HomeScreen extends React.Component<Props> {
         />;
     };
 
-    onProxiwashClick = () => this.props.navigation.navigate('Proxiwash');
+    onProxiwashClick = () => this.props.navigation.navigate('proxiwash');
 
     onTutorInsaClick = () => openBrowser("https://www.etud.insa-toulouse.fr/~tutorinsa/", this.colors.primary);
 
-    onProximoClick = () => this.props.navigation.navigate('Proximo');
+    onProximoClick = () => this.props.navigation.navigate('proximo');
 
-    onMenuClick = () => this.props.navigation.navigate('SelfMenuScreen');
+    onMenuClick = () => this.props.navigation.navigate('self-menu');
 
     /**
      * Creates the dataset to be used in the FlatList
@@ -338,8 +342,8 @@ class HomeScreen extends React.Component<Props> {
             subtitle = i18n.t('homeScreen.dashboard.todayEventsSubtitleNA');
 
         let displayEvent = this.getDisplayEvent(futureEvents);
-        const clickContainerAction = () => this.props.navigation.navigate('Planning');
+        const clickContainerAction = () => this.props.navigation.navigate('planning');
-        const clickPreviewAction = () => this.props.navigation.navigate('PlanningDisplayScreen', {data: displayEvent});
+        const clickPreviewAction = () => this.props.navigation.navigate('planning-information', {data: displayEvent});
 
         return (
             <DashboardItem

src/screens/Planning/PlanningDisplayScreen.js

@@ -15,38 +15,54 @@ type Props = {
 };
 
 type State = {
-    imageModalVisible: boolean,
 };
 
 function openWebLink(event, link) {
     Linking.openURL(link).catch((err) => console.error('Error opening link', err));
 }
 
+const FAKE_EVENT = {
+    "id": 142,
+    "title": "Soir\u00e9e Impact'INSA",
+    "logo": null,
+    "date_begin": "2020-04-22 19:00",
+    "date_end": "2020-04-22 00:00",
+    "description": "<p>R\u00e9servation salle de boom + PK pour la soir\u00e9e Impact'Insa<\/p>",
+    "club": "Impact Insa",
+    "category_id": 10,
+    "url": "https:\/\/www.amicale-insat.fr\/event\/142\/view"
+};
+
 /**
  * Class defining a planning event information page.
  */
 class PlanningDisplayScreen extends React.Component<Props, State> {
 
-    displayData = this.props.route.params['data'];
+    displayData: Object;
+    shouldFetchData: boolean;
+    eventId: number;
 
     colors: Object;
 
     state = {
-        imageModalVisible: false,
+
     };
 
     constructor(props) {
         super(props);
         this.colors = props.theme.colors;
+
+        if (this.props.route.params.data !== undefined) {
+            this.displayData = this.props.route.params.data;
+            this.eventId = this.props.route.params.data.eventId;
+            this.shouldFetchData = false;
+        } else {
+            this.displayData = FAKE_EVENT;
+            this.eventId = this.props.route.params.eventId;
+            this.shouldFetchData = true;
+            console.log(this.eventId);
+        }
     }
-
-    showImageModal = () => {
-        this.setState({imageModalVisible: true});
-    };
-
-    hideImageModal = () => {
-        this.setState({imageModalVisible: false});
-    };
 
     render() {
         // console.log("rendering planningDisplayScreen");

src/screens/Planning/PlanningScreen.js

@@ -185,7 +185,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
      * @return {*}
      */
     getRenderItem(item: eventObject) {
-        const onPress = this.props.navigation.navigate.bind(this, 'PlanningDisplayScreen', {data: item});
+        const onPress = this.props.navigation.navigate.bind(this, 'planning-information', {data: item});
         if (item.logo !== null) {
             return (
                 <View>

src/screens/Proximo/ProximoMainScreen.js

@@ -95,7 +95,7 @@ class ProximoMainScreen extends React.Component<Props, State> {
                     this.getAvailableArticles(this.articles, undefined) : []
             },
         };
-        this.props.navigation.navigate('ProximoListScreen', searchScreenData);
+        this.props.navigation.navigate('proximo-list', searchScreenData);
     }
 
     /**
@@ -103,7 +103,7 @@ class ProximoMainScreen extends React.Component<Props, State> {
      * This will open the ProximoAboutScreen
      */
     onPressAboutBtn() {
-        this.props.navigation.navigate('ProximoAboutScreen');
+        this.props.navigation.navigate('proximo-about');
     }
 
     /**
@@ -212,7 +212,7 @@ class ProximoMainScreen extends React.Component<Props, State> {
             data: item,
         };
         const subtitle = item.data.length + " " + (item.data.length > 1 ? i18n.t('proximoScreen.articles') : i18n.t('proximoScreen.article'));
-        const onPress = this.props.navigation.navigate.bind(this, 'ProximoListScreen', dataToSend);
+        const onPress = this.props.navigation.navigate.bind(this, 'proximo-list', dataToSend);
         if (item.data.length > 0) {
             return (
                 <List.Item

src/screens/Proxiwash/ProxiwashScreen.js

@@ -143,7 +143,7 @@ class ProxiwashScreen extends React.Component<Props, State> {
      * This will open the ProxiwashAboutScreen.
      */
     onAboutPress() {
-        this.props.navigation.navigate('ProxiwashAboutScreen');
+        this.props.navigation.navigate('proxiwash-about');
     }
 
     /**

src/screens/Websites/PlanexScreen.js

@@ -134,7 +134,7 @@ export default class PlanexScreen extends React.Component<Props, State> {
      */
     onGoToSettings() {
         this.onHideBanner();
-        this.props.navigation.navigate('SettingsScreen');
+        this.props.navigation.navigate('settings');
     }
 
     render() {