Added self menu,added screen animations, improved themes

App.js

@@ -51,8 +51,8 @@ export default class App extends React.Component<Props, State> {
         this.setState({
             isLoading: false,
             currentTheme: ThemeManager.getCurrentTheme(),
-            // showIntro: AsyncStorageManager.getInstance().preferences.showIntro.current === '1'
+            showIntro: AsyncStorageManager.getInstance().preferences.showIntro.current === '1'
-            showIntro: true
+            // showIntro: true
         });
     }
 

components/Sidebar.js

@@ -12,6 +12,7 @@ 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 RU_LINK = "http://m.insa-toulouse.fr/ru.html";
 
 type Props = {
     navigation: Object,
@@ -54,16 +55,11 @@ export default class SideBar extends React.Component<Props, State> {
                 icon: "wikipedia",
                 link: WIKETUD_LINK
             },
-            // {
+            {
-            //     name: i18n.t('screens.settings'),
+                name: i18n.t('screens.menuSelf'),
-            //     route: "Settings",
+                route: "SelfMenuScreen",
-            //     icon: "settings",
+                icon: "silverware-fork-knife",
-            // },
+            },
-            // {
-            //     name: i18n.t('screens.about'),
-            //     route: "About",
-            //     icon: "information",
-            // },
         ];
     }
 
@@ -73,7 +69,6 @@ export default class SideBar extends React.Component<Props, State> {
      */
     navigateToScreen(route: string) {
         this.props.navigation.navigate(route);
-        this.props.navigation.closeDrawer();
     };
 
     render() {

native-base-theme/variables/platformDark.js

@@ -115,7 +115,7 @@ export default {
     brandLight: "#f4f4f4",
 
     //Container
-    containerBgColor: "#333333",
+    containerBgColor: "#222222",
 
     //Date Picker
     datePickerTextColor: "#fff",
@@ -150,7 +150,7 @@ export default {
 
     // Header
     toolbarBtnColor: platform === "ios" ? "#be1522" : "#fff",
-    toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
+    toolbarDefaultBg: platform === "ios" ? "#333333" : "#be1522",
     toolbarHeight: platform === "ios" ? 64 : 56,
     toolbarSearchIconSize: platform === "ios" ? 20 : 23,
     toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
@@ -241,7 +241,7 @@ export default {
     tabFontSize: 15,
 
     // Text
-    textColor: "#d6d6d6",
+    textColor: "#ebebeb",
     inverseTextColor: "#000",
     noteFontSize: 14,
     get defaultTextColor() {
@@ -253,7 +253,7 @@ export default {
     titleFontSize: platform === "ios" ? 17 : 19,
     subTitleFontSize: platform === "ios" ? 11 : 14,
     subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
-    titleFontColor: platform === "ios" ? "#000" : "#FFF",
+    titleFontColor: platform === "ios" ? "#FFF" : "#FFF",
 
 
     // CUSTOM

navigation/AppNavigator.js

@@ -6,6 +6,8 @@ import SettingsScreen from '../screens/SettingsScreen';
 import AboutScreen from '../screens/About/AboutScreen';
 import ProximoListScreen from '../screens/Proximo/ProximoListScreen';
 import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
+import SelfMenuScreen from '../screens/SelfMenuScreen';
+import {fromRight} from "react-navigation-transitions";
 
 /**
  * Create a stack navigator using the drawer to handle navigation between screens
@@ -18,10 +20,12 @@ export default createAppContainer(
             SettingsScreen: {screen: SettingsScreen},
             AboutScreen: {screen: AboutScreen},
             AboutDependenciesScreen: {screen: AboutDependenciesScreen},
+            SelfMenuScreen: {screen: SelfMenuScreen},
         },
         {
             initialRouteName: "Main",
             mode: 'card',
-            headerMode: "none"
+            headerMode: "none",
+            transitionConfig: () => fromRight(),
         })
 );

package-lock.json

@@ -6372,6 +6372,11 @@
         "react-native-tab-view": "^1.4.1"
       }
     },
+    "react-navigation-transitions": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/react-navigation-transitions/-/react-navigation-transitions-1.0.12.tgz",
+      "integrity": "sha512-Hp0wX9KoXwsFch6Fgiz9HpGjQZDhnyucLbCai0LcaOC3VpmgYmvkbeAg/mQ5Z5exuY6PPrh/+FXU00yMPDHkcw=="
+    },
     "react-proxy": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/react-proxy/-/react-proxy-1.1.8.tgz",

package.json

@@ -29,7 +29,8 @@
     "react-native-status-bar-height": "^2.3.1",
     "react-native-webview": "^5.8.1",
     "react-navigation": "^3.11.0",
-    "react-navigation-material-bottom-tabs": "^1.0.0"
+    "react-navigation-material-bottom-tabs": "^1.0.0",
+    "react-navigation-transitions": "^1.0.12"
   },
   "devDependencies": {
     "babel-preset-expo": "^5.1.1",

screens/HomeScreen.js

@@ -76,7 +76,7 @@ export default class HomeScreen extends FetchedDataSectionList {
             }}>
                 <CardItem>
                     <Left>
-                        <Thumbnail source={ICON_AMICALE}/>
+                        <Thumbnail source={ICON_AMICALE} square/>
                         <Body>
                             <Text>{NAME_AMICALE}</Text>
                             <Text note>{HomeScreen.getFormattedDate(item.created_time)}</Text>

screens/PlanexScreen.js

@@ -13,23 +13,14 @@ type Props = {
     navigation: Object,
 }
 
-type State = {
-    isFinishedLoading: boolean
-}
 
-// const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
+const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
-// TODO use real url in prod
-const PLANEX_URL = 'https://srv-falcon.etud.insa-toulouse.fr/~vergnet/planex/planex.insa-toulouse.fr.html';
 
 /**
  * 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, State> {
+export default class PlanningScreen extends React.Component<Props> {
-
-    state = {
-        isFinishedLoading: false,
-    };
 
     webview: WebView;
 
@@ -46,7 +37,6 @@ export default class PlanningScreen extends React.Component<Props, State> {
     };
 
     refreshWebview() {
-        this.setState({isFinishedLoading: false});
         this.webview.reload();
     }
 
@@ -65,6 +55,9 @@ export default class PlanningScreen extends React.Component<Props, State> {
                     renderLoading={() =>
                         <View style={{
                             backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
+                            position: 'absolute',
+                            top: 0,
+                            right: 0,
                             width: '100%',
                             height: '100%',
                             flex: 1,

screens/ProxiwashScreen.js

@@ -267,13 +267,6 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
 
     createDataset(fetchedData: Object) {
         return [
-            {
-                title: i18n.t('proxiwashScreen.dryers'),
-                icon: 'tumble-dryer',
-                data: fetchedData.dryers === undefined ? [] : fetchedData.dryers,
-                extraData: super.state,
-                keyExtractor: this.getDryersKeyExtractor
-            },
             {
                 title: i18n.t('proxiwashScreen.washers'),
                 icon: 'washing-machine',
@@ -281,6 +274,14 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
                 extraData: super.state,
                 keyExtractor: this.getWashersKeyExtractor
             },
+            {
+                title: i18n.t('proxiwashScreen.dryers'),
+                icon: 'tumble-dryer',
+                data: fetchedData.dryers === undefined ? [] : fetchedData.dryers,
+                extraData: super.state,
+                keyExtractor: this.getDryersKeyExtractor
+            },
+
         ];
     }
 

screens/SelfMenuScreen.js

@@ -0,0 +1,78 @@
+// @flow
+
+import * as React from 'react';
+import {Platform, View} from 'react-native';
+import {Container, 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 CustomHeader from "../components/CustomHeader";
+import i18n from "i18n-js";
+
+type Props = {
+    navigation: Object,
+}
+
+
+const RU_URL = 'http://m.insa-toulouse.fr/ru.html';
+
+/**
+ * Class defining the app's planex screen.
+ * This screen uses a webview to render the planex page
+ */
+export default class SelfMenuScreen extends React.Component<Props> {
+
+    webview: WebView;
+
+    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 (
+            <Container>
+                <CustomHeader navigation={nav} title={i18n.t('screens.menuSelf')} hasBackButton={true}
+                              rightButton={this.getRefreshButton()}/>
+                <WebView
+                    ref={ref => (this.webview = ref)}
+                    source={{uri: RU_URL}}
+                    style={{
+                        width: '100%',
+                        height: '100%',
+                    }}
+                    startInLoadingState={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>
+                    }
+                />
+            </Container>
+        );
+    }
+}
+

translations/en.json

@@ -4,6 +4,7 @@
     "planning": "Planning",
     "proxiwash": "Proxiwash",
     "proximo": "Proximo",
+    "menuSelf": "UR Menu",
     "settings": "Settings",
     "about": "About"
   },

translations/fr.json

@@ -4,6 +4,7 @@
     "planning": "Planning",
     "proxiwash": "Proxiwash",
     "proximo": "Proximo",
+    "menuSelf": "Menu Ru",
     "settings": "Paramètres",
     "about": "À Propos"
   },