use back webview and linking instead of expo web browser

This commit is contained in:
Arnaud Vergnet 2020-04-12 12:36:29 +02:00
parent fe24fce882
commit a5dfa4f021
13 changed files with 202 additions and 30 deletions

View file

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

View file

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

View file

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

View file

@ -22,6 +22,10 @@ import ClubAboutScreen from "../screens/Amicale/Clubs/ClubAboutScreen";
import VoteScreen from "../screens/Amicale/VoteScreen"; import VoteScreen from "../screens/Amicale/VoteScreen";
import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen"; import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen";
import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton"; 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 = { const defaultScreenOptions = {
gestureEnabled: true, 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(); const TetrisStack = createStackNavigator();
function TetrisStackComponent() { function TetrisStackComponent() {
@ -406,6 +508,22 @@ export default class DrawerNavigator extends React.Component<Props> {
name="bib" name="bib"
component={BibStackComponent} 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 <Drawer.Screen
name="tetris" name="tetris"
component={TetrisStackComponent} component={TetrisStackComponent}

View file

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

View file

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

View file

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

View file

@ -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}/>
);
};

View file

@ -9,7 +9,6 @@ type Props = {
const ROOM_URL = 'http://planex.insa-toulouse.fr/salles.php'; 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'; 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 <WebViewScreen
navigation={nav} navigation={nav}
url={ROOM_URL} url={ROOM_URL}
customJS={this.customInjectedJS} customJS={this.customInjectedJS}/>
customInjectedJS={this.customInjectedJS}/>
); );
} }
} }

View file

@ -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}/>
);
};

View file

@ -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}/>
);
};

View file

@ -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}/>
);
};

View file

@ -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,
});
}