From 79eaefab88d716814de0e077e98d2d87045712b5 Mon Sep 17 00:00:00 2001 From: keplyx Date: Fri, 6 Mar 2020 09:12:56 +0100 Subject: [PATCH] Use React navigation header --- components/BaseContainer.js | 83 ------- components/CustomHeader.js | 150 ------------- components/Sidebar.js | 62 +++--- components/WebViewScreen.js | 52 ++--- navigation/DrawerNavigator.js | 201 +++++++++++++---- navigation/MainTabNavigator.js | 132 ++++++++--- screens/About/AboutDependenciesScreen.js | 46 ++-- screens/About/AboutScreen.js | 12 +- screens/DebugScreen.js | 4 - screens/HomeScreen.js | 17 +- screens/PlanningDisplayScreen.js | 24 +- screens/PlanningScreen.js | 112 +++++----- screens/Proximo/ProximoAboutScreen.js | 1 - screens/Proximo/ProximoListScreen.js | 7 +- screens/Proximo/ProximoMainScreen.js | 34 ++- screens/Proxiwash/ProxiwashAboutScreen.js | 259 +++++++++++----------- screens/Proxiwash/ProxiwashScreen.js | 29 +-- screens/SelfMenuScreen.js | 23 +- screens/SettingsScreen.js | 58 ++--- screens/Websites/AvailableRoomScreen.js | 19 -- screens/Websites/BibScreen.js | 66 ++++++ 21 files changed, 659 insertions(+), 732 deletions(-) delete mode 100644 components/BaseContainer.js delete mode 100644 components/CustomHeader.js create mode 100644 screens/Websites/BibScreen.js diff --git a/components/BaseContainer.js b/components/BaseContainer.js deleted file mode 100644 index 582c492..0000000 --- a/components/BaseContainer.js +++ /dev/null @@ -1,83 +0,0 @@ -// @flow - -import * as React from 'react'; -import {Container} from "native-base"; -import CustomHeader from "./CustomHeader"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; -import {Platform, View} from "react-native"; -import ThemeManager from "../utils/ThemeManager"; -import Touchable from "react-native-platform-touchable"; - - -type Props = { - navigation: Object, - headerTitle: string, - headerSubtitle: string, - headerRightButton: React.Node, - children: React.Node, - hasTabs: boolean, - hasBackButton: boolean, - hasSideMenu: boolean, - enableRotation: boolean, - hideHeaderOnLandscape: boolean, -} - -type State = { - isHeaderVisible: boolean -} - - -export default class BaseContainer extends React.Component { - static defaultProps = { - headerRightButton: , - hasTabs: false, - hasBackButton: false, - hasSideMenu: true, - enableRotation: false, - hideHeaderOnLandscape: false, - headerSubtitle: '', - }; - - state = { - isHeaderVisible: true, - }; - - onDrawerPress: Function; - - constructor() { - super(); - this.onDrawerPress = this.onDrawerPress.bind(this); - } - - onDrawerPress() { - this.props.navigation.toggleDrawer(); - } - - render() { - // console.log("rendering BaseContainer"); - return ( - - {this.state.isHeaderVisible ? - - - - } - rightButton={this.props.headerRightButton} - hasTabs={this.props.hasTabs} - hasBackButton={this.props.hasBackButton}/> - : } - {this.props.children} - - ); - } -} diff --git a/components/CustomHeader.js b/components/CustomHeader.js deleted file mode 100644 index e567575..0000000 --- a/components/CustomHeader.js +++ /dev/null @@ -1,150 +0,0 @@ -// @flow - -import * as React from "react"; -import {Body, Header, Input, Item, Left, Right, Subtitle, Title} from "native-base"; -import {Platform, StyleSheet, View} from "react-native"; -import {getStatusBarHeight} from "react-native-status-bar-height"; -import Touchable from 'react-native-platform-touchable'; -import ThemeManager from "../utils/ThemeManager"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; -import i18n from "i18n-js"; - -type Props = { - hasBackButton: boolean, - hasSearchField: boolean, - searchCallback: Function, - shouldFocusSearchBar: boolean, - leftButton: React.Node, - rightButton: React.Node, - title: string, - subtitle: string, - navigation: Object, - hasTabs: boolean, -}; - -/** - * Custom component defining a header using native base - * - * @prop hasBackButton {boolean} Whether to show a back button or a burger menu. Use burger if unspecified - * @prop rightMenu {React.Node} Element to place at the right of the header. Use nothing if unspecified - * @prop title {string} This header title - * @prop navigation {Object} The navigation object from react navigation - */ -export default class CustomHeader extends React.Component { - static defaultProps = { - hasBackButton: false, - hasSearchField: false, - searchCallback: null, - shouldFocusSearchBar: false, - title: '', - subtitle: '', - leftButton: , - rightButton: , - hasTabs: false, - }; - - onPressBack: Function; - - constructor() { - super(); - this.onPressBack = this.onPressBack.bind(this); - } - - shouldComponentUpdate(nextProps: Props): boolean { - return nextProps.title !== this.props.title || - nextProps.subtitle !== this.props.subtitle || - nextProps.hasBackButton !== this.props.hasBackButton || - nextProps.hasSearchField !== this.props.hasSearchField || - nextProps.shouldFocusSearchBar !== this.props.shouldFocusSearchBar || - nextProps.hasTabs !== this.props.hasTabs || - nextProps.rightButton !== this.props.rightButton || - nextProps.leftButton !== this.props.leftButton; - } - - componentDidMount() { - if (this.refs.searchInput !== undefined && this.refs.searchInput._root !== undefined && this.props.shouldFocusSearchBar) { - // does not work if called too early for some reason... - setTimeout(this.refs.searchInput._root.focus, 500); - } - } - - getSearchBar() { - return ( - - - - - - - ); - } - - getHeaderTitle() { - return ( - - - {this.props.title} - - {this.props.subtitle !== '' ? {this.props.subtitle} : null} - - ); - } - - - onPressBack() { - this.props.navigation.goBack(); - } - - render() { - // console.log("rendering CustomHeader"); - let button; - // Does the app have a back button or a burger menu ? - if (this.props.hasBackButton) - button = - - - ; - else - button = this.props.leftButton; - - return ( -
- - {button} - - {this.props.hasSearchField ? - this.getSearchBar() : - this.getHeaderTitle()} - - {this.props.rightButton} - -
); - } -}; - -// Fix header in status bar on Android -const styles = StyleSheet.create({ - header: { - paddingTop: getStatusBarHeight(), - height: 54 + getStatusBarHeight(), - }, -}); diff --git a/components/Sidebar.js b/components/Sidebar.js index 72db945..353d15a 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -40,6 +40,42 @@ export default class SideBar extends React.Component { super(props); // Dataset used to render the drawer this.dataSet = [ + { + name: "Home", + route: "Main", + icon: "home", + }, + { + name: i18n.t('sidenav.divider2'), + route: "Divider2" + }, + { + name: i18n.t('screens.menuSelf'), + route: "SelfMenuScreen", + icon: "silverware-fork-knife", + }, + { + name: i18n.t('screens.availableRooms'), + route: "AvailableRoomScreen", + icon: "calendar-check", + }, + { + name: 'Bib', + route: "BibScreen", + icon: "book", + }, + { + name: i18n.t('screens.bluemind'), + route: "BlueMindScreen", + link: "https://etud-mel.insa-toulouse.fr/webmail/", + icon: "email", + }, + { + name: i18n.t('screens.ent'), + route: "EntScreen", + link: "https://ent.insa-toulouse.fr/", + icon: "notebook", + }, { name: i18n.t('sidenav.divider1'), route: "Divider1" @@ -68,32 +104,6 @@ export default class SideBar extends React.Component { link: "https://www.etud.insa-toulouse.fr/~tutorinsa/", icon: "school", }, - { - name: i18n.t('sidenav.divider2'), - route: "Divider2" - }, - { - name: i18n.t('screens.bluemind'), - route: "BlueMindScreen", - link: "https://etud-mel.insa-toulouse.fr/webmail/", - icon: "email", - }, - { - name: i18n.t('screens.ent'), - route: "EntScreen", - link: "https://ent.insa-toulouse.fr/", - icon: "notebook", - }, - { - name: i18n.t('screens.availableRooms'), - route: "AvailableRoomScreen", - icon: "calendar-check", - }, - { - name: i18n.t('screens.menuSelf'), - route: "SelfMenuScreen", - icon: "silverware-fork-knife", - }, { name: i18n.t('sidenav.divider3'), route: "Divider3" diff --git a/components/WebViewScreen.js b/components/WebViewScreen.js index 87c2d55..fe88437 100644 --- a/components/WebViewScreen.js +++ b/components/WebViewScreen.js @@ -1,13 +1,12 @@ // @flow import * as React from 'react'; -import {Linking, Platform, View} from 'react-native'; -import {Body, Footer, Left, Right, Spinner, Tab, TabHeading, Tabs, Text} from 'native-base'; +import {Platform, View} from 'react-native'; +import {Container, Spinner, Tab, TabHeading, Tabs, Text} from 'native-base'; import WebView from "react-native-webview"; import Touchable from "react-native-platform-touchable"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../utils/ThemeManager"; -import BaseContainer from "../components/BaseContainer"; type Props = { navigation: Object, @@ -50,8 +49,11 @@ export default class WebViewScreen extends React.Component { this.onOpenWebLink = this.onOpenWebLink.bind(this); } - openWebLink(url: string) { - Linking.openURL(url).catch((err) => console.error('Error opening link', err)); + componentDidMount() { + const rightButton = this.getRefreshButton.bind(this); + this.props.navigation.setOptions({ + headerRight: rightButton, + }); } getHeaderButton(clickAction: Function, icon: string) { @@ -69,7 +71,10 @@ export default class WebViewScreen extends React.Component { getRefreshButton() { return ( - + {this.getHeaderButton(this.onRefreshClicked, 'refresh')} ); @@ -165,15 +170,7 @@ export default class WebViewScreen extends React.Component { const nav = this.props.navigation; this.webviewArray = []; return ( - 1}> + {this.props.data.length === 1 ? this.getWebview(this.props.data[0]) : { > {this.getTabbedWebview()} } - {this.props.hasFooter && this.props.data.length === 1 ? -
- - {this.getHeaderButton(this.onOpenWebLink, 'open-in-new')} - - - - - {this.getHeaderButton(this.onGoBackWebview, 'chevron-left')} - {this.getHeaderButton(this.onGoForwardWebview, 'chevron-right')} - - -
: } - + ); } } diff --git a/navigation/DrawerNavigator.js b/navigation/DrawerNavigator.js index d8a9a1a..0231262 100644 --- a/navigation/DrawerNavigator.js +++ b/navigation/DrawerNavigator.js @@ -8,10 +8,52 @@ import AboutScreen from '../screens/About/AboutScreen'; import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen'; import SelfMenuScreen from '../screens/SelfMenuScreen'; import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen"; +import BibScreen from "../screens/Websites/BibScreen"; import DebugScreen from '../screens/DebugScreen'; import Sidebar from "../components/Sidebar"; import {createStackNavigator, TransitionPresets} from "@react-navigation/stack"; import PerfHomeScreen from '../screens/PerfHomeScreen'; +import {Platform, StyleSheet, View} from "react-native"; +import ThemeManager from "../utils/ThemeManager"; +import Touchable from "react-native-platform-touchable"; +import {MaterialCommunityIcons} from "@expo/vector-icons"; + + +const styles = StyleSheet.create({ + header: { + backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary, + }, + headerTitle: { + color: "#ffffff", + }, +}); + +const defaultScreenOptions = { + headerTintColor: 'white', + headerStyle: styles.header, + gestureEnabled: true, + cardOverlayEnabled: true, + ...TransitionPresets.SlideFromRightIOS, +}; + +function getDrawerButton(navigation: Object) { + return ( + + + + + + ); +} const AboutStack = createStackNavigator(); @@ -19,30 +61,134 @@ function AboutStackComponent() { return ( { + const openDrawer = getDrawerButton.bind(this, navigation); + return { + title: 'About', + headerLeft: openDrawer + }; + }} /> ); } +const SettingsStack = createStackNavigator(); + +function SettingsStackComponent() { + return ( + + { + const openDrawer = getDrawerButton.bind(this, navigation); + return { + title: 'Settings', + headerLeft: openDrawer + }; + }} + /> + + ); +} + +const SelfMenuStack = createStackNavigator(); + +function SelfMenuStackComponent() { + return ( + + { + const openDrawer = getDrawerButton.bind(this, navigation); + return { + title: 'Menu RU', + headerLeft: openDrawer + }; + }} + /> + + ); +} + +const AvailableRoomStack = createStackNavigator(); + +function AvailableRoomStackComponent() { + return ( + + { + const openDrawer = getDrawerButton.bind(this, navigation); + return { + title: 'Available Rooms', + headerLeft: openDrawer + }; + }} + /> + + ); +} + +const BibStack = createStackNavigator(); + +function BibStackComponent() { + return ( + + { + const openDrawer = getDrawerButton.bind(this, navigation); + return { + title: 'Bib', + headerLeft: openDrawer + }; + }} + /> + + ); +} + const Drawer = createDrawerNavigator(); function getDrawerContent(nav) { @@ -53,13 +199,11 @@ export default function DrawerNavigator() { return ( getDrawerContent(props.navigation)} - screenOptions={{ - gestureEnabled: true, - cardOverlayEnabled: true, - ...TransitionPresets.SlideFromRightIOS, - }} + screenOptions={defaultScreenOptions} > + ); } - -const basicStack = createStackNavigator(); - -function DrawerNavigator1() { - return ( - - - - ); -} diff --git a/navigation/MainTabNavigator.js b/navigation/MainTabNavigator.js index f6a8e79..53a724d 100644 --- a/navigation/MainTabNavigator.js +++ b/navigation/MainTabNavigator.js @@ -14,7 +14,7 @@ import PlanexScreen from '../screens/Websites/PlanexScreen'; import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../utils/ThemeManager"; import AsyncStorageManager from "../utils/AsyncStorageManager"; -import {StyleSheet, View} from "react-native"; +import {Platform, StyleSheet, View} from "react-native"; import Touchable from "react-native-platform-touchable"; const TAB_ICONS = { @@ -25,8 +25,6 @@ const TAB_ICONS = { Planex: 'timetable', }; -const ProximoStack = createStackNavigator(); - const styles = StyleSheet.create({ header: { backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary, @@ -36,24 +34,50 @@ const styles = StyleSheet.create({ }, }); +const defaultScreenOptions = { + headerTintColor: 'white', + headerStyle: styles.header, + gestureEnabled: true, + cardOverlayEnabled: true, + ...TransitionPresets.SlideFromRightIOS, +}; + +function getDrawerButton(navigation: Object) { + return ( + + + + + + ); +} + +const ProximoStack = createStackNavigator(); function ProximoStackComponent() { return ( { + const openDrawer = getDrawerButton.bind(this, navigation); + return { + title: 'Proximo', + headerLeft: openDrawer + }; }} component={ProximoMainScreen} /> @@ -82,21 +106,27 @@ function ProxiwashStackComponent() { return ( { + const openDrawer = getDrawerButton.bind(this, navigation); + return { + title: 'Proxiwash', + headerLeft: openDrawer + }; + }} /> ); @@ -108,21 +138,27 @@ function PlanningStackComponent() { return ( { + const openDrawer = getDrawerButton.bind(this, navigation); + return { + title: 'Planning', + headerLeft: openDrawer + }; + }} /> ); @@ -134,26 +170,56 @@ function HomeStackComponent() { return ( { + const openDrawer = getDrawerButton.bind(this, navigation); + return { + title: 'Home', + headerLeft: openDrawer + }; + }} /> ); } +const PlanexStack = createStackNavigator(); + +function PlanexStackComponent() { + return ( + + { + const openDrawer = getDrawerButton.bind(this, navigation); + return { + title: 'Planex', + headerLeft: openDrawer + }; + }} + /> + + ); +} + const Tab = createMaterialBottomTabNavigator(); export default function TabNavigator() { @@ -188,7 +254,7 @@ export default function TabNavigator() { /> ); diff --git a/screens/About/AboutDependenciesScreen.js b/screens/About/AboutDependenciesScreen.js index 7a28866..1c97915 100644 --- a/screens/About/AboutDependenciesScreen.js +++ b/screens/About/AboutDependenciesScreen.js @@ -1,10 +1,9 @@ // @flow import * as React from 'react'; -import {Body, Container, ListItem, Text} from 'native-base'; -import CustomHeader from "../../components/CustomHeader"; +import {Body, ListItem, Text} from 'native-base'; import {FlatList} from "react-native"; -import i18n from "i18n-js"; +import packageJson from '../../package'; function generateListFromObject(object) { let list = []; @@ -17,7 +16,8 @@ function generateListFromObject(object) { } type Props = { - navigation: Object + navigation: Object, + route: Object } /** @@ -26,28 +26,24 @@ type Props = { export default class AboutDependenciesScreen extends React.Component { render() { - const nav = this.props.navigation; - const data = generateListFromObject(nav.getParam('data', {})); + const data = generateListFromObject(packageJson.dependencies); return ( - - - item.name} - style={{minHeight: 300, width: '100%'}} - renderItem={({item}) => - - - - {item.name} - - - {item.version.replace('^', '')} - - - } - /> - + item.name} + style={{minHeight: 300, width: '100%'}} + renderItem={({item}) => + + + + {item.name} + + + {item.version.replace('^', '')} + + + } + /> ); } } diff --git a/screens/About/AboutScreen.js b/screens/About/AboutScreen.js index 02a4ad3..45541d6 100644 --- a/screens/About/AboutScreen.js +++ b/screens/About/AboutScreen.js @@ -2,11 +2,9 @@ import * as React from 'react'; import {FlatList, Linking, Platform, View} from 'react-native'; -import {Body, Button, Card, CardItem, Container, H1, Left, Right, Text, Thumbnail} from 'native-base'; -import CustomHeader from "../../components/CustomHeader"; +import {Body, Button, Card, CardItem, Content, H1, Left, Right, Text, Thumbnail} from 'native-base'; import i18n from "i18n-js"; import appJson from '../../app'; -import packageJson from '../../package'; import {MaterialCommunityIcons} from "@expo/vector-icons"; import AsyncStorageManager from "../../utils/AsyncStorageManager"; import {Modalize} from "react-native-modalize"; @@ -169,7 +167,7 @@ export default class AboutScreen extends React.Component { showChevron: true }, { - onPressCallback: () => this.props.navigation.navigate('AboutDependenciesScreen', {data: packageJson.dependencies}), + onPressCallback: () => this.props.navigation.navigate('AboutDependenciesScreen'), icon: 'developer-board', text: i18n.t('aboutScreen.libs'), showChevron: true @@ -391,11 +389,9 @@ export default class AboutScreen extends React.Component { } render() { - const nav = this.props.navigation; return ( - + {this.getBugReportModal()} - { keyExtractor={(item) => item.id} renderItem={this.getMainCard} /> - + ); } } diff --git a/screens/DebugScreen.js b/screens/DebugScreen.js index 85b22eb..cf0d5d3 100644 --- a/screens/DebugScreen.js +++ b/screens/DebugScreen.js @@ -20,9 +20,7 @@ import { Right, Text } from "native-base"; -import CustomHeader from "../components/CustomHeader"; import ThemeManager from '../utils/ThemeManager'; -import i18n from "i18n-js"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import {Alert, Clipboard, View} from "react-native"; import AsyncStorageManager from "../utils/AsyncStorageManager"; @@ -150,7 +148,6 @@ export default class DebugScreen extends React.Component { } render() { - const nav = this.props.navigation; return ( { modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> {this.getModalContent()} - diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js index a7799e0..f4bb0a3 100644 --- a/screens/HomeScreen.js +++ b/screens/HomeScreen.js @@ -9,7 +9,6 @@ import Autolink from 'react-native-autolink'; import ThemeManager from "../utils/ThemeManager"; import DashboardItem from "../components/DashboardItem"; import * as WebBrowser from 'expo-web-browser'; -import BaseContainer from "../components/BaseContainer"; import WebSectionList from "../components/WebSectionList"; // import DATA from "../dashboard_data.json"; @@ -571,17 +570,13 @@ export default class HomeScreen extends React.Component { render() { const nav = this.props.navigation; return ( - - - + refreshTime={REFRESH_TIME} + fetchUrl={DATA_URL} + renderItem={this.getRenderItem} + updateErrorText={i18n.t("homeScreen.listUpdateFail")}/> ); } } diff --git a/screens/PlanningDisplayScreen.js b/screens/PlanningDisplayScreen.js index 0203f5f..37d8996 100644 --- a/screens/PlanningDisplayScreen.js +++ b/screens/PlanningDisplayScreen.js @@ -3,7 +3,6 @@ import * as React from 'react'; import {Image} from 'react-native'; import {Container, Content, H1, H3, View} from 'native-base'; -import CustomHeader from "../components/CustomHeader"; import ThemeManager from "../utils/ThemeManager"; import HTML from "react-native-render-html"; import {Linking} from "expo"; @@ -11,6 +10,7 @@ import PlanningEventManager from '../utils/PlanningEventManager'; type Props = { navigation: Object, + route: Object }; function openWebLink(event, link) { @@ -21,37 +21,33 @@ function openWebLink(event, link) { * Class defining an about screen. This screen shows the user information about the app and it's author. */ export default class PlanningDisplayScreen extends React.Component { + + displayData = this.props.route.params['data']; + render() { // console.log("rendering planningDisplayScreen"); - const nav = this.props.navigation; - const displayData = nav.getParam('data', []); return ( -

- {displayData.title} + {this.displayData.title}

- {PlanningEventManager.getFormattedTime(displayData)} + {PlanningEventManager.getFormattedTime(this.displayData)}

- {displayData.logo !== null ? + {this.displayData.logo !== null ? + source={{uri: this.displayData.logo}}/> : } - {displayData.description !== null ? + {this.displayData.description !== null ? // Surround description with div to allow text styling if the description is not html - " + displayData.description + ""} + " + this.displayData.description + ""} tagsStyles={{ p: { color: ThemeManager.getCurrentThemeVariables().textColor, diff --git a/screens/PlanningScreen.js b/screens/PlanningScreen.js index 7d2a631..2b941e3 100644 --- a/screens/PlanningScreen.js +++ b/screens/PlanningScreen.js @@ -5,7 +5,6 @@ import {BackHandler, Image} from 'react-native'; import {H3, Text, View} from 'native-base'; import i18n from "i18n-js"; import ThemeManager from "../utils/ThemeManager"; -import BaseContainer from "../components/BaseContainer"; import {Agenda, LocaleConfig} from 'react-native-calendars'; import Touchable from 'react-native-platform-touchable'; import WebDataManager from "../utils/WebDataManager"; @@ -61,6 +60,7 @@ export default class PlanningScreen extends React.Component { onAgendaRef: Function; onCalendarToggled: Function; onBackButtonPressAndroid: Function; + currentDate = this.getCurrentDate(); constructor(props: any) { super(props); @@ -271,66 +271,62 @@ export default class PlanningScreen extends React.Component { this.setState({calendarShowing: isCalendarOpened}); } - currentDate = this.getCurrentDate(); - render() { // console.log("rendering PlanningScreen"); return ( - - - + ); } } diff --git a/screens/Proximo/ProximoAboutScreen.js b/screens/Proximo/ProximoAboutScreen.js index 66a91e3..3c25636 100644 --- a/screens/Proximo/ProximoAboutScreen.js +++ b/screens/Proximo/ProximoAboutScreen.js @@ -3,7 +3,6 @@ import * as React from 'react'; import {Image, View} from 'react-native'; import {Card, CardItem, Container, Content, H2, Left, Text} from 'native-base'; -import CustomHeader from "../../components/CustomHeader"; import i18n from "i18n-js"; import {MaterialCommunityIcons} from "@expo/vector-icons"; diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index 4c14a41..ee1b90f 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -1,8 +1,7 @@ // @flow import * as React from 'react'; -import {Body, Container, Content, H1, H3, Input, Item, Left, ListItem, Right, Text, Thumbnail} from 'native-base'; -import CustomHeader from "../../components/CustomHeader"; +import {Body, Content, H1, H3, Input, Item, Left, ListItem, Right, Text, Thumbnail} from 'native-base'; import {FlatList, Image, Platform, View} from "react-native"; import Touchable from 'react-native-platform-touchable'; import Menu, {MenuItem} from 'react-native-material-menu'; @@ -387,7 +386,7 @@ export default class ProximoListScreen extends React.Component { // console.log("rendering ProximoListScreen"); const nav = this.props.navigation; return ( - + @@ -400,7 +399,7 @@ export default class ProximoListScreen extends React.Component { style={{minHeight: 300, width: '100%'}} renderItem={this.renderItem} /> - + ); } } diff --git a/screens/Proximo/ProximoMainScreen.js b/screens/Proximo/ProximoMainScreen.js index 284f237..6bca253 100644 --- a/screens/Proximo/ProximoMainScreen.js +++ b/screens/Proximo/ProximoMainScreen.js @@ -2,7 +2,7 @@ import * as React from 'react'; import {Platform, View} from 'react-native' -import {Body, Left, ListItem, Right, Text, Container} from 'native-base'; +import {Body, Left, ListItem, Right, Text} from 'native-base'; import i18n from "i18n-js"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../../utils/ThemeManager"; @@ -40,14 +40,6 @@ export default class ProximoMainScreen extends React.Component { this.createDataset = this.createDataset.bind(this); } - componentDidMount() { - const button = this.getRightButton.bind(this); - this.props.navigation.setOptions({ - headerRight: button - , - }); - } - static sortFinalData(a: Object, b: Object) { let str1 = a.type.name.toLowerCase(); let str2 = b.type.name.toLowerCase(); @@ -66,6 +58,13 @@ export default class ProximoMainScreen extends React.Component { return 0; } + componentDidMount() { + const rightButton = this.getRightButton.bind(this); + this.props.navigation.setOptions({ + headerRight: rightButton, + }); + } + getKeyExtractor(item: Object) { return item !== undefined ? item.type['id'] : undefined; } @@ -180,6 +179,7 @@ export default class ProximoMainScreen extends React.Component { ); } + getRenderItem({item}: Object) { let dataToSend = { shouldFocusSearchBar: false, @@ -223,15 +223,13 @@ export default class ProximoMainScreen extends React.Component { render() { const nav = this.props.navigation; return ( - - - + ); } } diff --git a/screens/Proxiwash/ProxiwashAboutScreen.js b/screens/Proxiwash/ProxiwashAboutScreen.js index 0bcafce..14e6c1c 100644 --- a/screens/Proxiwash/ProxiwashAboutScreen.js +++ b/screens/Proxiwash/ProxiwashAboutScreen.js @@ -2,8 +2,7 @@ import * as React from 'react'; import {Image, View} from 'react-native'; -import {Body, Card, CardItem, Container, Content, H2, H3, Left, Tab, TabHeading, Tabs, Text} from 'native-base'; -import CustomHeader from "../../components/CustomHeader"; +import {Body, Card, CardItem, Content, H2, H3, Left, Tab, TabHeading, Tabs, Text} from 'native-base'; import i18n from "i18n-js"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../../utils/ThemeManager"; @@ -18,140 +17,130 @@ type Props = { export default class ProxiwashAboutScreen extends React.Component { render() { - const nav = this.props.navigation; return ( - - - - - - {i18n.t('proxiwashScreen.informationTab')} - - } - key={1} - style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> - - - - - {i18n.t('proxiwashScreen.description')} - - - - -

{i18n.t('proxiwashScreen.dryer')}

- - - - -

{i18n.t('proxiwashScreen.procedure')}

- {i18n.t('proxiwashScreen.dryerProcedure')} - - - - -

{i18n.t('proxiwashScreen.tips')}

- {i18n.t('proxiwashScreen.dryerTips')} - - - - - - - -

{i18n.t('proxiwashScreen.washer')}

- - - - -

{i18n.t('proxiwashScreen.procedure')}

- {i18n.t('proxiwashScreen.washerProcedure')} - - - - -

{i18n.t('proxiwashScreen.tips')}

- {i18n.t('proxiwashScreen.washerTips')} - - - - - - - - {i18n.t('proxiwashScreen.paymentTab')} - - } - key={2} - style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> - - - - - -

{i18n.t('proxiwashScreen.tariffs')}

- - - - - {i18n.t('proxiwashScreen.washersTariff')} - {i18n.t('proxiwashScreen.dryersTariff')} - - - - - - - -

{i18n.t('proxiwashScreen.paymentMethods')}

- - - - - {i18n.t('proxiwashScreen.paymentMethodsDescription')} - - - - - - - + + + + {i18n.t('proxiwashScreen.informationTab')} + + } + key={1} + style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> + + + + + {i18n.t('proxiwashScreen.description')} + + + + +

{i18n.t('proxiwashScreen.dryer')}

+ + + + +

{i18n.t('proxiwashScreen.procedure')}

+ {i18n.t('proxiwashScreen.dryerProcedure')} + + + + +

{i18n.t('proxiwashScreen.tips')}

+ {i18n.t('proxiwashScreen.dryerTips')} + + + + + + + +

{i18n.t('proxiwashScreen.washer')}

+ + + + +

{i18n.t('proxiwashScreen.procedure')}

+ {i18n.t('proxiwashScreen.washerProcedure')} + + + + +

{i18n.t('proxiwashScreen.tips')}

+ {i18n.t('proxiwashScreen.washerTips')} + + + + + + + + {i18n.t('proxiwashScreen.paymentTab')} + + } + key={2} + style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> + + + + + +

{i18n.t('proxiwashScreen.tariffs')}

+ + + + + {i18n.t('proxiwashScreen.washersTariff')} + {i18n.t('proxiwashScreen.dryersTariff')} + + + + + + + +

{i18n.t('proxiwashScreen.paymentMethods')}

+ + + + + {i18n.t('proxiwashScreen.paymentMethodsDescription')} + + + + + + ); } } diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js index d26b4bf..fd84a4f 100644 --- a/screens/Proxiwash/ProxiwashScreen.js +++ b/screens/Proxiwash/ProxiwashScreen.js @@ -12,7 +12,6 @@ import PlatformTouchable from "react-native-platform-touchable"; import Touchable from "react-native-platform-touchable"; import AsyncStorageManager from "../../utils/AsyncStorageManager"; import * as Expo from "expo"; -import BaseContainer from "../../components/BaseContainer"; const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json"; @@ -102,6 +101,10 @@ export default class ProxiwashScreen extends React.Component { * Setup notification channel for android and add listeners to detect notifications fired */ componentDidMount() { + const rightButton = this.getRightButton.bind(this); + this.props.navigation.setOptions({ + headerRight: rightButton, + }); if (AsyncStorageManager.getInstance().preferences.expoToken.current !== '') { // Get latest watchlist from server NotificationsManager.getMachineNotificationWatchlist((fetchedList) => { @@ -283,10 +286,13 @@ export default class ProxiwashScreen extends React.Component { this.props.navigation.navigate('ProxiwashAboutScreen'); } - getRightButton(): * { + getRightButton() { return ( { render() { const nav = this.props.navigation; return ( - - - + refreshTime={REFRESH_TIME} + fetchUrl={DATA_URL} + renderItem={this.getRenderItem} + updateErrorText={i18n.t("proxiwashScreen.listUpdateFail")}/> ); } diff --git a/screens/SelfMenuScreen.js b/screens/SelfMenuScreen.js index e92cb08..127224b 100644 --- a/screens/SelfMenuScreen.js +++ b/screens/SelfMenuScreen.js @@ -5,7 +5,6 @@ import {View} from 'react-native'; import {Card, CardItem, H2, H3, Text} from 'native-base'; import ThemeManager from "../utils/ThemeManager"; import i18n from "i18n-js"; -import BaseContainer from "../components/BaseContainer"; import WebSectionList from "../components/WebSectionList"; const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json"; @@ -95,7 +94,6 @@ export default class SelfMenuScreen extends React.Component { } getRenderSectionHeader({section}: Object) { - let title = ""; return ( { render() { const nav = this.props.navigation; return ( - - - + refreshTime={0} + fetchUrl={DATA_URL} + renderItem={this.getRenderItem} + renderSectionHeader={this.getRenderSectionHeader} + updateErrorText={i18n.t("homeScreen.listUpdateFail")} + stickyHeader={true}/> ); } } diff --git a/screens/SettingsScreen.js b/screens/SettingsScreen.js index ce49bc2..20ca284 100644 --- a/screens/SettingsScreen.js +++ b/screens/SettingsScreen.js @@ -1,21 +1,7 @@ // @flow import * as React from 'react'; -import { - Body, - Card, - CardItem, - CheckBox, - Container, - Content, - Left, - List, - ListItem, - Picker, - Right, - Text, -} from "native-base"; -import CustomHeader from "../components/CustomHeader"; +import {Body, Card, CardItem, CheckBox, Content, Left, List, ListItem, Picker, Right, Text,} from "native-base"; import ThemeManager from '../utils/ThemeManager'; import i18n from "i18n-js"; import {NavigationActions, StackActions} from "@react-navigation/native"; @@ -228,30 +214,26 @@ export default class SettingsScreen extends React.Component { } render() { - const nav = this.props.navigation; return ( - - - - - - {i18n.t('settingsScreen.generalCard')} - - - {this.getToggleItem(this.onToggleNightMode, 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))} - {SettingsScreen.getGeneralItem(this.getStartScreenPicker(), 'power', i18n.t('settingsScreen.startScreen'), i18n.t('settingsScreen.startScreenSub'))} - - - - - Proxiwash - - - {SettingsScreen.getGeneralItem(this.getProxiwashNotifPicker(), 'washing-machine', i18n.t('settingsScreen.proxiwashNotifReminder'), i18n.t('settingsScreen.proxiwashNotifReminderSub'))} - - - - + + + + {i18n.t('settingsScreen.generalCard')} + + + {this.getToggleItem(this.onToggleNightMode, 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))} + {SettingsScreen.getGeneralItem(this.getStartScreenPicker(), 'power', i18n.t('settingsScreen.startScreen'), i18n.t('settingsScreen.startScreenSub'))} + + + + + Proxiwash + + + {SettingsScreen.getGeneralItem(this.getProxiwashNotifPicker(), 'washing-machine', i18n.t('settingsScreen.proxiwashNotifReminder'), i18n.t('settingsScreen.proxiwashNotifReminderSub'))} + + + ); } diff --git a/screens/Websites/AvailableRoomScreen.js b/screens/Websites/AvailableRoomScreen.js index 17d372c..4ca15d4 100644 --- a/screens/Websites/AvailableRoomScreen.js +++ b/screens/Websites/AvailableRoomScreen.js @@ -11,9 +11,7 @@ type Props = { const ROOM_URL = 'http://planex.insa-toulouse.fr/salles.php'; const PC_URL = 'http://planex.insa-toulouse.fr/sallesInfo.php'; -const BIB_URL = 'https://bibbox.insa-toulouse.fr/'; const CUSTOM_CSS_GENERAL = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customMobile.css'; -const CUSTOM_CSS_Bib = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customBibMobile.css'; /** * Class defining the app's planex screen. @@ -32,17 +30,6 @@ export default class AvailableRoomScreen extends React.Component { 'let header = $(".table tbody tr:first");' + '$("table").prepend("");true;' + // Fix for crash on ios '$("thead").append(header);true;'; - - this.customBibInjectedJS = - 'document.querySelector(\'head\').innerHTML += \'\';' + - 'document.querySelector(\'head\').innerHTML += \'\';' + - 'if ($(".hero-unit-form").length > 0 && $("#customBackButton").length === 0)' + - '$(".hero-unit-form").append("' + - '
' + - '' + - '' + - '' + - '
");true;'; } render() { @@ -63,12 +50,6 @@ export default class AvailableRoomScreen extends React.Component { name: i18n.t('availableRoomScreen.computerRoom'), customJS: this.customInjectedJS }, - { - url: BIB_URL, - icon: 'book', - name: i18n.t('availableRoomScreen.bibRoom'), - customJS: this.customBibInjectedJS - }, ]} customInjectedJS={this.customInjectedJS} headerTitle={i18n.t('screens.availableRooms')} diff --git a/screens/Websites/BibScreen.js b/screens/Websites/BibScreen.js new file mode 100644 index 0000000..b3a6642 --- /dev/null +++ b/screens/Websites/BibScreen.js @@ -0,0 +1,66 @@ +// @flow + +import * as React from 'react'; +import WebViewScreen from "../../components/WebViewScreen"; +import i18n from "i18n-js"; + +type Props = { + navigation: Object, +} + +const BIB_URL = 'https://bibbox.insa-toulouse.fr/'; +const CUSTOM_CSS_GENERAL = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customMobile.css'; +const CUSTOM_CSS_Bib = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customBibMobile.css'; + +/** + * Class defining the app's planex screen. + * This screen uses a webview to render the planex page + */ +export default class AvailableRoomScreen extends React.Component { + + customInjectedJS: string; + customBibInjectedJS: string; + + constructor() { + super(); + this.customInjectedJS = + 'document.querySelector(\'head\').innerHTML += \'\';' + + 'document.querySelector(\'head\').innerHTML += \'\';' + + 'let header = $(".table tbody tr:first");' + + '$("table").prepend("");true;' + // Fix for crash on ios + '$("thead").append(header);true;'; + + this.customBibInjectedJS = + 'document.querySelector(\'head\').innerHTML += \'\';' + + 'document.querySelector(\'head\').innerHTML += \'\';' + + 'if ($(".hero-unit-form").length > 0 && $("#customBackButton").length === 0)' + + '$(".hero-unit-form").append("' + + '
' + + '' + + '' + + '' + + '
");true;'; + } + + render() { + const nav = this.props.navigation; + return ( + + ); + } +} +