Merge pull request #10 from Hiseen/henry-main-panel

[Issue #9] Implement main panel, session, and data loader. Introduce new gui codebase that runs on expo-client

BalancedBite/App.js

@@ -5,30 +5,46 @@
  */
 
 import React, { Component } from 'react';
-import {
-  StyleSheet,
-  View,
-  StatusBar 
-} from 'react-native';
 
-import AppContainer from "./src/components/AppContainer";
+import { createStore } from "redux";
+import { Provider } from "react-redux";
+import EntireApp from "./src/components/EntireApp";
+
+
+/**
+ * Redux
+ * 
+ * https://www.youtube.com/watch?v=KcC8KZ_Ga2M
+ * 
+ * store - hold our state (only one state) (readonly state)
+ * state - can only modified using action (through reducer)
+ * reducer - receives the actions and modifieds the state and give new state
+ * dispatcher - action needs to be sent by someone - 
+ *  known as dispatching an action (Eg: press a button)
+ */
+
+const initialState = {
+  currentToken : ""
+}
+
+// when the dispatcher is called, it will map action to reducers to update store state
+const reducer = (state = initialState, action) => {
+  switch(action.type) {
+    case "CHANGE_TOKEN":
+      return {currentToken : action.token};
+  }
+
+  return state;
+}
+
+const store = createStore(reducer);
 
 export default class App extends Component {
   render() {
     return (
-      <View style={styles.container}>
-        <StatusBar
-           backgroundColor="#1c313a"
-           barStyle="light-content"
-         />
-        <AppContainer></AppContainer>
-      </View>
+      <Provider store={store}>
+        <EntireApp></EntireApp>
+      </Provider>
     );
   }
 }
-
-const styles = StyleSheet.create({
-  container : {
-    flex: 1,
-  }
-});

BalancedBite/package.json

@@ -14,7 +14,9 @@
     "react-native-elements": "^1.0.0",
     "react-native-gesture-handler": "^1.0.15",
     "react-native-vector-icons": "^6.2.0",
-    "react-navigation": "^3.0.9"
+    "react-navigation": "^3.0.9",
+    "react-redux": "^6.0.1",
+    "redux": "^4.0.1"
   },
   "devDependencies": {
     "babel-core": "7.0.0-bridge.0",

BalancedBite/src/commons/serverRequest/index.js

@@ -1,2 +1,2 @@
-const HOST = "169.234.29.1";
+const HOST = "169.234.3.29";
 export const SERVER_URL = "http://" + HOST + ":8080";

BalancedBite/src/components/AppContainer/index.js

@@ -1,14 +1,16 @@
 import { createStackNavigator, createAppContainer } from "react-navigation";
 
 import UserLoginPanel from "../UserLoginPanel";
-import ClickSuggestionPanel from "../ClickSuggestionPanel";
 import UserSignupPanel from "../UserSignupPanel";
+import MainTab from "../MainTab";
 
 const AppStackNavigator = createStackNavigator(
     {
         loginPanel : UserLoginPanel,
         userSignupPanel: UserSignupPanel,
-        clickSuggestionPanel: ClickSuggestionPanel
+        mainTab: MainTab
+    },{
+        initialRouteName: 'mainTab'
     }
 )
 

BalancedBite/src/components/ClickSuggestionPanel/index.js

@@ -1,21 +1,34 @@
 import React, { Component } from "react";
-import { View, Text } from "react-native";
 
+import { View, Text, Button, Input, StyleSheet } from "react-native";
 
-class ClickSuggestionPanel extends Component {
+import { connect } from "react-redux";
 
-    static navigationOptions = {
-        title: "ClickSuggestion"
+const mapStateToProps = (state) => {
+    return {
+        currentToken: state.currentToken
     }
-
+}
+
+class ClickSuggestionComponent extends Component {
+
     render() {
         return (
-            <View>
-                <Text>Suggestion panel</Text>
+            <View style={styles.container}>
+                <Text>ClickSuggestionComponent panel</Text>
+                <Text>{this.props.currentToken}</Text>
             </View>
         );
     }
 }
 
+export default connect(mapStateToProps)(ClickSuggestionComponent);
 
-export default ClickSuggestionPanel;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center'
+    }
+})

BalancedBite/src/components/EntireApp/index.js

@@ -0,0 +1,31 @@
+import AppContainer from "../AppContainer";
+import React, { Component } from 'react';
+import {
+    StyleSheet,
+    View,
+    StatusBar 
+} from 'react-native';
+
+class EntireApp extends Component {
+    render() {
+        return (
+            <View style={styles.container}>
+                <StatusBar
+                    backgroundColor="#1c313a"
+                    barStyle="light-content"
+                />
+                <AppContainer></AppContainer>
+            </View>
+        )
+    }
+}
+
+export default EntireApp
+
+
+
+const styles = StyleSheet.create({
+    container : {
+      flex: 1,
+    }
+  });

BalancedBite/src/components/MainTab/index.js

@@ -0,0 +1,149 @@
+import React, { Component } from "react";
+import { View, Text, StyleSheet, SafeAreaView, AsyncStorage, Button } from "react-native";
+
+import { createMaterialTopTabNavigator, createAppContainer, withNavigation } from "react-navigation";
+
+import Icon from "react-native-vector-icons/FontAwesome5";
+
+import { SERVER_URL } from "../../commons/serverRequest";
+
+import UserInformationComponent from "../UserInformationPanel";
+import ClickSuggestionComponent from "../ClickSuggestionPanel";
+
+import { connect } from "react-redux";
+
+const SESSION_URL = SERVER_URL + "/check-session";
+
+const AppTabNavigator = createMaterialTopTabNavigator({
+    UserInformation: {
+        screen: UserInformationComponent,
+        navigationOptions: {
+            tabBarLabel: 'User',
+            tabBarIcon: ({ tintColor }) => <Icon name="user-circle" color={tintColor} size={24}></Icon>
+        }
+    },
+    ClickSuggestion: {
+        screen: ClickSuggestionComponent,
+        navigationOptions: {
+            tabBarLabel: "Suggest",
+            tabBarIcon: ({ tintColor }) => <Icon name="search" color={tintColor} size={24}></Icon>
+        }
+    }
+},
+{
+    initialRouteName: 'UserInformation',
+    tabBarPosition: 'bottom',
+    tabBarOptions: {
+        activeTintColor : '#2A67BF',
+        inactiveTintColor: 'grey',
+        style: {
+            backgroundColor: '#f2f2f2',
+            borderTopWidth : 0.5,
+            borderTopColor: 'grey'
+        },
+        indicatorStyle: {
+            height: 0
+        },
+        showIcon: true,
+        showLabel: true
+    }
+})
+
+const AppTabContainer = createAppContainer(AppTabNavigator)
+
+class MainTab extends Component {
+
+    static navigationOptions = {
+        header: null
+    }
+
+    checkTokenStatus(UItoken) {
+        console.warn("Current UItoken = " + UItoken);
+        fetch(SESSION_URL, {
+            method: "POST",
+            body : UItoken,
+            headers: {
+                "Content-Type" : "text/plain"
+            }
+        })
+        .then(backendRes => backendRes.json())
+        .then(backendRes => {
+            if (backendRes.code == 0) {
+                console.warn("backendRes code = 0");
+                this.props.navigation.navigate("loginPanel");
+            } else {
+                // change token in redux storage
+                this.props.changeCurrentToken(UItoken);
+            }
+        })
+        .catch(error => {
+            throw error;
+        });
+    }
+
+    handleUserSessionCall() {
+        // fetch user data from async storage in react-native
+        const fetchAsyncTokenData = async () => {
+            let token = 'none';
+            try {
+              token = await AsyncStorage.getItem('token') || 'none';
+            } catch (error) {
+              // Error retrieving data
+              console.warn(error.message);
+            }
+            return token;
+        }
+
+        fetchAsyncTokenData().then(UItoken => {
+            if (UItoken == 'none'){
+                console.warn("UI token = none");
+                this.props.navigation.navigate("loginPanel");
+            } else {
+                // check if token is valid in db
+                this.checkTokenStatus(UItoken);
+            }
+        });
+    }
+
+    componentDidMount(){
+        const { navigation } = this.props;
+        // listen to navigation focus on this screen
+        this.focusListener = navigation.addListener("didFocus", () => {
+            this.handleUserSessionCall();
+        })
+    }
+
+    componentWillUnmount() {
+        this.focusListener.remove();
+    }
+
+    render() {
+        return (
+            <SafeAreaView style={{flex : 1, backgroundColor: '#f2f2f2' }}>
+                <AppTabContainer></AppTabContainer>
+            </SafeAreaView>
+        );
+    }
+}
+
+const mapStateToProps = (state) => {
+    return {
+        currentToken: state.currentToken
+    }
+}
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        changeCurrentToken: (token) => dispatch({type : 'CHANGE_TOKEN', token: token})
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(withNavigation(MainTab));
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center'
+    }
+})