Replaced out links with webwiews + added available rooms webview

components/BaseContainer.js

@@ -16,7 +16,8 @@ type Props = {
     headerRightButton: React.Node,
     children: React.Node,
     hasTabs: boolean,
-    hasBackButton: boolean
+    hasBackButton: boolean,
+    hasSideMenu: boolean,
 }
 
 type State = {
@@ -32,6 +33,7 @@ export default class BaseContainer extends React.Component<Props, State> {
         headerRightButton: <View/>,
         hasTabs: false,
         hasBackButton: false,
+        hasSideMenu: true,
     };
 
 
@@ -69,6 +71,29 @@ export default class BaseContainer extends React.Component<Props, State> {
             this.willBlurSubscription.remove();
     }
 
+    getMainContainer() {
+        return (
+            <Container>
+                <CustomHeader
+                    navigation={this.props.navigation} title={this.props.headerTitle}
+                    leftButton={
+                        <Touchable
+                            style={{padding: 6}}
+                            onPress={() => this.toggle()}>
+                            <CustomMaterialIcon
+                                color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
+                                icon="menu"/>
+                        </Touchable>
+                    }
+                    rightButton={this.props.headerRightButton}
+                    hasTabs={this.props.hasTabs}
+                    hasBackButton={this.props.hasBackButton}/>
+                {this.props.children}
+            </Container>
+        );
+    }
+
+
     render() {
         return (
             <View style={{
@@ -76,27 +101,13 @@ export default class BaseContainer extends React.Component<Props, State> {
                 width: '100%',
                 height: '100%'
             }}>
-                <CustomSideMenu
+                {this.props.hasSideMenu ?
-                    navigation={this.props.navigation} isOpen={this.state.isOpen}
+                    <CustomSideMenu
-                    onChange={(isOpen) => this.updateMenuState(isOpen)}>
+                        navigation={this.props.navigation} isOpen={this.state.isOpen}
-                    <Container>
+                        onChange={(isOpen) => this.updateMenuState(isOpen)}>
-                        <CustomHeader
+                        {this.getMainContainer()}
-                            navigation={this.props.navigation} title={this.props.headerTitle}
+                    </CustomSideMenu> :
-                            leftButton={
+                    this.getMainContainer()}
-                                <Touchable
-                                    style={{padding: 6}}
-                                    onPress={() => this.toggle()}>
-                                    <CustomMaterialIcon
-                                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
-                                        icon="menu"/>
-                                </Touchable>
-                            }
-                            rightButton={this.props.headerRightButton}
-                            hasTabs={this.props.hasTabs}
-                            hasBackButton={this.props.hasBackButton}/>
-                        {this.props.children}
-                    </Container>
-                </CustomSideMenu>
             </View>
         );
     }

components/FetchedDataSectionList.js

@@ -272,6 +272,10 @@ export default class FetchedDataSectionList extends React.Component<Props, State
         return false;
     }
 
+    hasSideMenu() {
+        return true;
+    }
+
     /**
      * Get the section list render using the generated dataset
      *
@@ -356,6 +360,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
                 headerRightButton={this.getRightButton()}
                 hasTabs={this.hasTabs()}
                 hasBackButton={this.hasBackButton()}
+                hasSideMenu={this.hasSideMenu()}
             >
                 {this.hasTabs() ?
                     <Tabs

components/Sidebar.js

@@ -11,10 +11,6 @@ const deviceHeight = Dimensions.get("window").height;
 
 const drawerCover = require("../assets/drawer-cover.png");
 
-const WIKETUD_LINK = "https://www.etud.insa-toulouse.fr/wiketud";
-const AMICALE_LINK = "https://www.etud.insa-toulouse.fr/~amicale";
-const TUTOR_INSA_LINK = "https://www.etud.insa-toulouse.fr/~tutorinsa/";
-
 type Props = {
     navigation: Object,
 };
@@ -46,21 +42,23 @@ export default class SideBar extends React.Component<Props, State> {
         this.dataSet = [
             {
                 name: "Amicale",
-                route: "amicale",
+                route: "AmicaleScreen",
                 icon: "web",
-                link: AMICALE_LINK
             },
             {
                 name: "Wiketud",
-                route: "wiketud",
+                route: "WiketudScreen",
                 icon: "wikipedia",
-                link: WIKETUD_LINK
             },
             {
                 name: "Tutor'INSA",
-                route: "tutorinsa",
+                route: "TutorInsaScreen",
                 icon: "school",
-                link: TUTOR_INSA_LINK
+            },
+            {
+                name: "Salles dispo",
+                route: "AvailableRoomScreen",
+                icon: "calendar-check",
             },
             {
                 name: i18n.t('screens.menuSelf'),

components/WebViewScreen.js

@@ -0,0 +1,102 @@
+// @flow
+
+import * as React from 'react';
+import {Linking, Platform, View} from 'react-native';
+import {Spinner} from 'native-base';
+import WebView from "react-native-webview";
+import Touchable from "react-native-platform-touchable";
+import CustomMaterialIcon from "../components/CustomMaterialIcon";
+import ThemeManager from "../utils/ThemeManager";
+import BaseContainer from "../components/BaseContainer";
+
+type Props = {
+    navigation: Object,
+    url: string,
+    customInjectedJS: string,
+    headerTitle: string,
+    hasHeaderBackButton: boolean,
+    hasSideMenu: boolean,
+}
+
+/**
+ * Class defining a webview screen.
+ */
+export default class WebViewScreen extends React.Component<Props> {
+
+    static defaultProps = {
+        customInjectedJS: '',
+        hasBackButton: false,
+        hasSideMenu: true,
+    };
+
+    webview: WebView;
+
+    openWebLink() {
+        Linking.openURL(this.props.url).catch((err) => console.error('Error opening link', err));
+    }
+
+    getHeaderButton(clickAction: Function, icon: string) {
+        return (
+            <Touchable
+                style={{padding: 6}}
+                onPress={() => clickAction()}>
+                <CustomMaterialIcon
+                    color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
+                    icon={icon}/>
+            </Touchable>
+        );
+    }
+
+    getRefreshButton() {
+        return (
+            <View style={{flexDirection: 'row'}}>
+                {this.getHeaderButton(() => this.openWebLink(), 'web')}
+                {this.getHeaderButton(() => this.refreshWebview(), 'refresh')}
+            </View>
+        );
+    };
+
+    refreshWebview() {
+        this.webview.reload();
+    }
+
+    render() {
+        const nav = this.props.navigation;
+        return (
+            <BaseContainer
+                navigation={nav}
+                headerTitle={this.props.headerTitle}
+                headerRightButton={this.getRefreshButton()}
+                hasBackButton={this.props.hasHeaderBackButton}
+                hasSideMenu={this.props.hasSideMenu}>
+                <WebView
+                    ref={ref => (this.webview = ref)}
+                    source={{uri: this.props.url}}
+                    style={{
+                        width: '100%',
+                        height: '100%',
+                    }}
+                    startInLoadingState={true}
+                    injectedJavaScript={this.props.customInjectedJS}
+                    javaScriptEnabled={true}
+                    renderLoading={() =>
+                        <View style={{
+                            backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
+                            position: 'absolute',
+                            top: 0,
+                            right: 0,
+                            width: '100%',
+                            height: '100%',
+                            flex: 1,
+                            alignItems: 'center',
+                            justifyContent: 'center'
+                        }}>
+                            <Spinner/>
+                        </View>
+                    }
+                />
+            </BaseContainer>
+        );
+    }
+}
+

navigation/AppNavigator.js

@@ -9,9 +9,14 @@ import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
 import ProxiwashAboutScreen from '../screens/Proxiwash/ProxiwashAboutScreen';
 import ProximoAboutScreen from '../screens/Proximo/ProximoAboutScreen';
 import SelfMenuScreen from '../screens/SelfMenuScreen';
+import TutorInsaScreen from "../screens/TutorInsaScreen";
+import AmicaleScreen from "../screens/AmicaleScreen";
+import WiketudScreen from "../screens/WiketudScreen";
+import AvailableRoomScreen from "../screens/AvailableRoomScreen";
 import DebugScreen from '../screens/DebugScreen';
 import {fromRight} from "react-navigation-transitions";
 
+
 /**
  * Create a stack navigator using the drawer to handle navigation between screens
  */
@@ -25,6 +30,10 @@ function createAppContainerWithInitialRoute(initialRoute: string) {
                 AboutScreen: {screen: AboutScreen},
                 AboutDependenciesScreen: {screen: AboutDependenciesScreen},
                 SelfMenuScreen: {screen: SelfMenuScreen},
+                TutorInsaScreen: {screen: TutorInsaScreen},
+                AmicaleScreen: {screen: AmicaleScreen},
+                WiketudScreen: {screen: WiketudScreen},
+                AvailableRoomScreen: {screen: AvailableRoomScreen},
                 ProxiwashAboutScreen: {screen: ProxiwashAboutScreen},
                 ProximoAboutScreen: {screen: ProximoAboutScreen},
                 DebugScreen: {screen: DebugScreen},

screens/AmicaleScreen.js

@@ -0,0 +1,32 @@
+// @flow
+
+import * as React from 'react';
+import ThemeManager from "../utils/ThemeManager";
+import WebViewScreen from "../components/WebViewScreen";
+
+type Props = {
+    navigation: Object,
+}
+
+
+const URL = 'https://www.etud.insa-toulouse.fr/~amicale';
+
+/**
+ * Class defining the app's planex screen.
+ * This screen uses a webview to render the planex page
+ */
+export default class AmicaleScreen extends React.Component<Props> {
+
+    render() {
+        const nav = this.props.navigation;
+        return (
+            <WebViewScreen
+                navigation={nav}
+                url={URL}
+                headerTitle={'Amicale'}
+                hasHeaderBackButton={true}
+                hasSideMenu={false}/>
+        );
+    }
+}
+

screens/AvailableRoomScreen.js

@@ -0,0 +1,40 @@
+// @flow
+
+import * as React from 'react';
+import ThemeManager from "../utils/ThemeManager";
+import WebViewScreen from "../components/WebViewScreen";
+
+type Props = {
+    navigation: Object,
+}
+
+
+const URL = 'http://planex.insa-toulouse.fr/salles.php';
+
+/**
+ * Class defining the app's planex screen.
+ * This screen uses a webview to render the planex page
+ */
+export default class AvailableRoomScreen extends React.Component<Props> {
+
+    customInjectedJS: string;
+
+    constructor() {
+        super();
+        this.customInjectedJS = '';
+    }
+
+    render() {
+        const nav = this.props.navigation;
+        return (
+            <WebViewScreen
+                navigation={nav}
+                url={URL}
+                customInjectedJS={this.customInjectedJS}
+                headerTitle={'SAlles dispo'}
+                hasHeaderBackButton={true}
+                hasSideMenu={false}/>
+        );
+    }
+}
+

screens/PlanexScreen.js

@@ -1,13 +1,8 @@
 // @flow
 
 import * as React from 'react';
-import {Platform, View} from 'react-native';
-import {Spinner} from 'native-base';
-import WebView from "react-native-webview";
-import Touchable from "react-native-platform-touchable";
-import CustomMaterialIcon from "../components/CustomMaterialIcon";
 import ThemeManager from "../utils/ThemeManager";
-import BaseContainer from "../components/BaseContainer";
+import WebViewScreen from "../components/WebViewScreen";
 
 type Props = {
     navigation: Object,
@@ -18,13 +13,13 @@ const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
 
 const CUSTOM_CSS_GENERAL = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customMobile.css';
 const CUSTOM_CSS_NIGHTMODE = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customDark.css';
+
 /**
  * Class defining the app's planex screen.
  * This screen uses a webview to render the planex page
  */
-export default class PlanningScreen extends React.Component<Props> {
+export default class PlanexScreen extends React.Component<Props> {
 
-    webview: WebView;
     customInjectedJS: string;
 
     constructor() {
@@ -36,54 +31,15 @@ export default class PlanningScreen extends React.Component<Props> {
             this.customInjectedJS += 'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="' + CUSTOM_CSS_NIGHTMODE + '" type="text/css"/>\';';
     }
 
-
-    getRefreshButton() {
-        return (
-            <Touchable
-                style={{padding: 6}}
-                onPress={() => this.refreshWebview()}>
-                <CustomMaterialIcon
-                    color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
-                    icon="refresh"/>
-            </Touchable>
-        );
-    };
-
-    refreshWebview() {
-        this.webview.reload();
-    }
-
     render() {
         const nav = this.props.navigation;
         return (
-            <BaseContainer navigation={nav} headerTitle={'Planex'} headerRightButton={this.getRefreshButton()}>
+            <WebViewScreen
-                <WebView
+                navigation={nav}
-                    ref={ref => (this.webview = ref)}
+                url={PLANEX_URL}
-                    source={{uri: PLANEX_URL}}
+                customInjectedJS={this.customInjectedJS}
-                    style={{
+                headerTitle={'Planex'}
-                        width: '100%',
+                hasHeaderBackButton={false}/>
-                        height: '100%',
-                    }}
-                    startInLoadingState={true}
-                    injectedJavaScript={this.customInjectedJS}
-                    javaScriptEnabled={true}
-                    renderLoading={() =>
-                        <View style={{
-                            backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
-                            position: 'absolute',
-                            top: 0,
-                            right: 0,
-                            width: '100%',
-                            height: '100%',
-                            flex: 1,
-                            alignItems: 'center',
-                            justifyContent: 'center'
-                        }}>
-                            <Spinner/>
-                        </View>
-                    }
-                />
-            </BaseContainer>
         );
     }
 }

screens/SelfMenuScreen.js

@@ -64,6 +64,10 @@ export default class SelfMenuScreen extends FetchedDataSectionList {
         return true;
     }
 
+    hasSideMenu() : boolean {
+        return false;
+    }
+
     createDataset(fetchedData: Object) {
         let result = [];
         // Prevent crash by giving a default value when fetchedData is empty (not yet available)

screens/TutorInsaScreen.js

@@ -0,0 +1,32 @@
+// @flow
+
+import * as React from 'react';
+import ThemeManager from "../utils/ThemeManager";
+import WebViewScreen from "../components/WebViewScreen";
+
+type Props = {
+    navigation: Object,
+}
+
+
+const URL = 'https://www.etud.insa-toulouse.fr/~tutorinsa/';
+
+/**
+ * Class defining the app's planex screen.
+ * This screen uses a webview to render the planex page
+ */
+export default class TutorInsaScreen extends React.Component<Props> {
+
+    render() {
+        const nav = this.props.navigation;
+        return (
+            <WebViewScreen
+                navigation={nav}
+                url={URL}
+                headerTitle={'Tutor\'INSA'}
+                hasHeaderBackButton={true}
+                hasSideMenu={false}/>
+        );
+    }
+}
+

screens/WiketudScreen.js

@@ -0,0 +1,32 @@
+// @flow
+
+import * as React from 'react';
+import ThemeManager from "../utils/ThemeManager";
+import WebViewScreen from "../components/WebViewScreen";
+
+type Props = {
+    navigation: Object,
+}
+
+
+const URL = 'https://www.etud.insa-toulouse.fr/wiketud';
+
+/**
+ * Class defining the app's planex screen.
+ * This screen uses a webview to render the planex page
+ */
+export default class WiketudScreen extends React.Component<Props> {
+
+    render() {
+        const nav = this.props.navigation;
+        return (
+            <WebViewScreen
+                navigation={nav}
+                url={URL}
+                headerTitle={'Wiketud'}
+                hasHeaderBackButton={true}
+                hasSideMenu={false}/>
+        );
+    }
+}
+