use back webview and linking instead of expo web browser

package.json

@@ -34,7 +34,6 @@
     "expo-localization": "~8.1.0",
     "expo-permissions": "~8.1.0",
     "expo-secure-store": "~8.1.0",
-    "expo-web-browser": "~8.1.0",
     "i18n-js": "^3.3.0",
     "react": "16.9.0",
     "react-dom": "16.9.0",

src/components/Sidebar/SideBarSection.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import {FlatList} from "react-native";
 import {Drawer, List, withTheme} from 'react-native-paper';
-import {openBrowser} from "../../utils/WebBrowser";
+import {Linking} from "expo";
 
 type Props = {
     navigation: Object,
@@ -58,7 +58,7 @@ class SideBarSection extends React.PureComponent<Props, State> {
      */
     onListItemPress(item: Object) {
         if (item.link !== undefined)
-            openBrowser(item.link, this.colors.primary);
+            Linking.openURL(item.link);
         else if (item.action !== undefined)
             item.action();
         else

src/components/Sidebar/Sidebar.js

@@ -115,26 +115,22 @@ class SideBar extends React.Component<Props, State> {
         const websitesData = [
             {
                 name: "Amicale",
-                route: "amicale",
-                link: "https://amicale-insat.fr/",
+                route: "amicale-website",
                 icon: "alpha-a-box",
             },
             {
                 name: "Élus Étudiants",
                 route: "elus-etudiants",
-                link: "https://etud.insa-toulouse.fr/~eeinsat/",
                 icon: "alpha-e-box",
             },
             {
                 name: "Wiketud",
                 route: "wiketud",
-                link: "https://wiki.etud.insa-toulouse.fr",
                 icon: "wikipedia",
             },
             {
                 name: "Tutor'INSA",
-                route: "tutor-insa",
-                link: "https://www.etud.insa-toulouse.fr/~tutorinsa/",
+                route: "tutorinsa",
                 icon: "school",
             },
         ];

src/navigation/DrawerNavigator.js

@@ -22,6 +22,10 @@ import ClubAboutScreen from "../screens/Amicale/Clubs/ClubAboutScreen";
 import VoteScreen from "../screens/Amicale/VoteScreen";
 import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen";
 import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
+import {AmicaleWebsiteScreen} from "../screens/Websites/AmicaleWebsiteScreen";
+import {TutorInsaWebsiteScreen} from "../screens/Websites/TutorInsaWebsiteScreen";
+import {WiketudWebsiteScreen} from "../screens/Websites/WiketudWebsiteScreen";
+import {ElusEtudiantsWebsiteScreen} from "../screens/Websites/ElusEtudiantsWebsiteScreen";
 
 const defaultScreenOptions = {
     gestureEnabled: true,
@@ -171,6 +175,104 @@ function BibStackComponent() {
     );
 }
 
+const AmicaleWebsiteStack = createStackNavigator();
+
+function AmicaleWebsiteStackComponent() {
+    return (
+        <AmicaleWebsiteStack.Navigator
+            initialRouteName="amicale-website"
+            headerMode="float"
+            screenOptions={defaultScreenOptions}
+        >
+            <AmicaleWebsiteStack.Screen
+                name="amicale-website"
+                component={AmicaleWebsiteScreen}
+                options={({navigation}) => {
+                    const openDrawer = getDrawerButton.bind(this, navigation);
+                    return {
+                        title: "Amicale",
+                        headerLeft: openDrawer
+                    };
+                }}
+            />
+        </AmicaleWebsiteStack.Navigator>
+    );
+}
+
+const ElusEtudiantsStack = createStackNavigator();
+
+function ElusEtudiantsStackComponent() {
+    return (
+        <ElusEtudiantsStack.Navigator
+            initialRouteName="elus-etudiants"
+            headerMode="float"
+            screenOptions={defaultScreenOptions}
+        >
+            <ElusEtudiantsStack.Screen
+                name="elus-etudiants"
+                component={ElusEtudiantsWebsiteScreen}
+                options={({navigation}) => {
+                    const openDrawer = getDrawerButton.bind(this, navigation);
+                    return {
+                        title: "Élus Étudiants",
+                        headerLeft: openDrawer
+                    };
+                }}
+            />
+        </ElusEtudiantsStack.Navigator>
+    );
+}
+
+const WiketudStack = createStackNavigator();
+
+function WiketudStackComponent() {
+    return (
+        <WiketudStack.Navigator
+            initialRouteName="wiketud"
+            headerMode="float"
+            screenOptions={defaultScreenOptions}
+        >
+            <WiketudStack.Screen
+                name="wiketud"
+                component={WiketudWebsiteScreen}
+                options={({navigation}) => {
+                    const openDrawer = getDrawerButton.bind(this, navigation);
+                    return {
+                        title: "Wiketud",
+                        headerLeft: openDrawer
+                    };
+                }}
+            />
+        </WiketudStack.Navigator>
+    );
+}
+
+const TutorInsaStack = createStackNavigator();
+
+function TutorInsaStackComponent() {
+    return (
+        <TutorInsaStack.Navigator
+            initialRouteName="tutorinsa"
+            headerMode="float"
+            screenOptions={defaultScreenOptions}
+        >
+            <TutorInsaStack.Screen
+                name="tutorinsa"
+                component={TutorInsaWebsiteScreen}
+                options={({navigation}) => {
+                    const openDrawer = getDrawerButton.bind(this, navigation);
+                    return {
+                        title: "Tutor'INSA",
+                        headerLeft: openDrawer
+                    };
+                }}
+            />
+        </TutorInsaStack.Navigator>
+    );
+}
+
+
+
 const TetrisStack = createStackNavigator();
 
 function TetrisStackComponent() {
@@ -406,6 +508,22 @@ export default class DrawerNavigator extends React.Component<Props> {
                     name="bib"
                     component={BibStackComponent}
                 />
+                <Drawer.Screen
+                    name="amicale-website"
+                    component={AmicaleWebsiteStackComponent}
+                />
+                <Drawer.Screen
+                    name="elus-etudiants"
+                    component={ElusEtudiantsStackComponent}
+                />
+                <Drawer.Screen
+                    name="wiketud"
+                    component={WiketudStackComponent}
+                />
+                <Drawer.Screen
+                    name="tutorinsa"
+                    component={TutorInsaStackComponent}
+                />
                 <Drawer.Screen
                     name="tetris"
                     component={TetrisStackComponent}

src/screens/Amicale/LoginScreen.js

@@ -4,10 +4,10 @@ import * as React from 'react';
 import {KeyboardAvoidingView, ScrollView, StyleSheet, View} from "react-native";
 import {Avatar, Button, Card, HelperText, Paragraph, TextInput, withTheme} from 'react-native-paper';
 import ConnectionManager from "../../managers/ConnectionManager";
-import {openBrowser} from "../../utils/WebBrowser";
 import i18n from 'i18n-js';
 import ErrorDialog from "../../components/Dialog/ErrorDialog";
 import {CommonActions} from "@react-navigation/native";
+import {Linking} from "expo";
 
 type Props = {
     navigation: Object,
@@ -78,7 +78,7 @@ class LoginScreen extends React.Component<Props, State> {
 
     handleSuccess = () => this.props.navigation.navigate(this.nextScreen);
 
-    onResetPasswordClick = () => openBrowser(RESET_PASSWORD_LINK, this.colors.primary);
+    onResetPasswordClick = () => Linking.openURL(RESET_PASSWORD_LINK);
 
     validateEmail = () => this.setState({isEmailValidated: true});
 

src/screens/Amicale/ProfileScreen.js

@@ -4,10 +4,10 @@ import * as React from 'react';
 import {FlatList, StyleSheet, View} from "react-native";
 import {Avatar, Button, Card, Divider, List, withTheme} from 'react-native-paper';
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
-import {openBrowser} from "../../utils/WebBrowser";
 import i18n from 'i18n-js';
 import LogoutDialog from "../../components/Amicale/LogoutDialog";
 import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";
+import {Linking} from "expo";
 
 type Props = {
     navigation: Object,
@@ -158,7 +158,7 @@ class ProfileScreen extends React.Component<Props, State> {
                         <Button
                             icon="account-edit"
                             mode="contained"
-                            onPress={() => openBrowser(this.data.link, this.props.theme.colors.primary)}
+                            onPress={() => Linking.openURL(this.data.link)}
                             style={styles.editButton}>
                             {i18n.t("profileScreen.editInformation")}
                         </Button>

src/screens/HomeScreen.js

@@ -10,11 +10,11 @@ import FeedItem from "../components/Home/FeedItem";
 import SquareDashboardItem from "../components/Home/SmallDashboardItem";
 import PreviewEventDashboardItem from "../components/Home/PreviewEventDashboardItem";
 import {stringToDate} from "../utils/Planning";
-import {openBrowser} from "../utils/WebBrowser";
 import ActionsDashBoardItem from "../components/Home/ActionsDashboardItem";
 import ConnectionManager from "../managers/ConnectionManager";
 import {CommonActions} from '@react-navigation/native';
 import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
+import {Linking} from "expo";
 // import DATA from "../dashboard_data.json";
 
 
@@ -103,7 +103,7 @@ class HomeScreen extends React.Component<Props> {
 
     onProxiwashClick = () => this.props.navigation.navigate('proxiwash');
 
-    onTutorInsaClick = () => openBrowser("https://www.etud.insa-toulouse.fr/~tutorinsa/", this.colors.primary);
+    onTutorInsaClick = () => this.props.navigation.navigate('tutorinsa');
 
     onProximoClick = () => this.props.navigation.navigate('proximo');
 
@@ -426,7 +426,7 @@ class HomeScreen extends React.Component<Props> {
     }
 
     openLink(link: string) {
-        openBrowser(link, this.colors.primary);
+        Linking.openURL(link);
     }
 
     /**

src/screens/Websites/AmicaleWebsiteScreen.js

@@ -0,0 +1,18 @@
+// @flow
+
+import * as React from 'react';
+import WebViewScreen from "../../components/Screens/WebViewScreen";
+
+const URL = 'https://amicale-insat.fr/';
+/**
+ * Class defining the app's available rooms screen.
+ * This screen uses a webview to render the page
+ */
+export const AmicaleWebsiteScreen = (props: Object) => {
+    return (
+        <WebViewScreen
+            {...props}
+            url={URL}/>
+    );
+};
+

src/screens/Websites/AvailableRoomScreen.js

@@ -9,7 +9,6 @@ type Props = {
 
 
 const ROOM_URL = 'http://planex.insa-toulouse.fr/salles.php';
-const PC_URL = 'http://planex.insa-toulouse.fr/sallesInfo.php';
 const CUSTOM_CSS_GENERAL = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customMobile.css';
 
 /**
@@ -39,8 +38,7 @@ export default class AvailableRoomScreen extends React.Component<Props> {
             <WebViewScreen
                 navigation={nav}
                 url={ROOM_URL}
-                customJS={this.customInjectedJS}
-                customInjectedJS={this.customInjectedJS}/>
+                customJS={this.customInjectedJS}/>
         );
     }
 }

src/screens/Websites/ElusEtudiantsWebsiteScreen.js

@@ -0,0 +1,18 @@
+// @flow
+
+import * as React from 'react';
+import WebViewScreen from "../../components/Screens/WebViewScreen";
+
+const URL = 'https://etud.insa-toulouse.fr/~eeinsat/';
+/**
+ * Class defining the app's available rooms screen.
+ * This screen uses a webview to render the page
+ */
+export const ElusEtudiantsWebsiteScreen = (props: Object) => {
+    return (
+        <WebViewScreen
+            {...props}
+            url={URL}/>
+    );
+};
+

src/screens/Websites/TutorInsaWebsiteScreen.js

@@ -0,0 +1,18 @@
+// @flow
+
+import * as React from 'react';
+import WebViewScreen from "../../components/Screens/WebViewScreen";
+
+const URL = 'https://www.etud.insa-toulouse.fr/~tutorinsa/';
+/**
+ * Class defining the app's available rooms screen.
+ * This screen uses a webview to render the page
+ */
+export const TutorInsaWebsiteScreen = (props: Object) => {
+    return (
+        <WebViewScreen
+            {...props}
+            url={URL}/>
+    );
+};
+

src/screens/Websites/WiketudWebsiteScreen.js

@@ -0,0 +1,18 @@
+// @flow
+
+import * as React from 'react';
+import WebViewScreen from "../../components/Screens/WebViewScreen";
+
+const URL = 'https://wiki.etud.insa-toulouse.fr/';
+/**
+ * Class defining the app's available rooms screen.
+ * This screen uses a webview to render the page
+ */
+export const WiketudWebsiteScreen = (props: Object) => {
+    return (
+        <WebViewScreen
+            {...props}
+            url={URL}/>
+    );
+};
+

src/utils/WebBrowser.js

@@ -1,11 +0,0 @@
-// @flow
-
-import * as React from 'react';
-import * as WebBrowser from 'expo-web-browser';
-
-export function openBrowser(url: string, color: string) {
-    WebBrowser.openBrowserAsync(url, {
-        toolbarColor: color,
-        enableBarCollapsing: true,
-    });
-}