Merge pull request #48 from esteemapp/side-menu

[WIP] Side menu

package-lock.json

@@ -9659,8 +9659,16 @@
         "events": "^1.1.0",
         "html-entities": "^1.2.0",
         "htmlparser2": "^3.9.0",
-        "react-native-lightbox": "git+https://github.com/oblador/react-native-lightbox.git#4448979323623a56c62b5f8be1032322485cbd31",
         "stream": "0.0.2"
+      },
+      "dependencies": {
+        "react-native-lightbox": {
+          "version": "git+https://github.com/oblador/react-native-lightbox.git#4448979323623a56c62b5f8be1032322485cbd31",
+          "from": "git+https://github.com/oblador/react-native-lightbox.git#4448979323623a56c62b5f8be1032322485cbd31",
+          "requires": {
+            "prop-types": "^15.5.10"
+          }
+        }
       }
     },
     "react-native-iphone-x-helper": {
@@ -9677,13 +9685,6 @@
         "react-native-iphone-x-helper": "^1.0.3"
       }
     },
-    "react-native-lightbox": {
-      "version": "git+https://github.com/oblador/react-native-lightbox.git#4448979323623a56c62b5f8be1032322485cbd31",
-      "from": "git+https://github.com/oblador/react-native-lightbox.git",
-      "requires": {
-        "prop-types": "^15.5.10"
-      }
-    },
     "react-native-markdown-editor": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/react-native-markdown-editor/-/react-native-markdown-editor-1.0.1.tgz",

package.json

@@ -44,7 +44,7 @@
     "redux-thunk": "^2.3.0",
     "remarkable": "^1.7.1",
     "rn-placeholder": "^1.2.0",
-    "sc2-sdk": "^1.1.0"
+    "sc2-sdk": "^1.0.2"
   },
   "devDependencies": {
     "babel-eslint": "^10.0.1",

src/components/index.js

@@ -2,22 +2,24 @@ import Logo from './logo/logo';
 import Comment from './comment/comment';
 // import PostCard from "./postCard";
 import Reply from './reply/reply';
-import Search from './search/search';
+// import Search from './search/search';
 import { FormInput } from './formInput';
-import { CircularButton, GreetingHeaderButton, IconButton } from './buttons';
+import { CircularButton, TextButton, IconButton } from './buttons';
 import { NumericKeyboard } from './numericKeyboard';
 import { PinAnimatedInput } from './pinAnimatedInput';
+import SideMenu from './sideMenu';
 
 export {
   Logo,
   Comment,
   // PostCard,
   Reply,
-  Search,
+  // Search,
   FormInput,
   CircularButton,
-  GreetingHeaderButton,
+  TextButton,
   IconButton,
   NumericKeyboard,
   PinAnimatedInput,
+  SideMenu,
 };

src/components/sideMenu/container/sideMenuContainer.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+// Component
+import { AuthSideMenuView } from '..';
+
+/*
+*            Props Name        Description                                     Value
+*@props -->  props name here   description here                                Value Type Here
+*
+*/
+
+class SideMenuContainer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  // Component Life Cycle Functions
+
+  // Component Functions
+
+  render() {
+    const {} = this.props;
+
+    return <AuthSideMenuView />;
+  }
+}
+
+const mapStateToProps = state => ({
+  user: state.user.user,
+});
+
+export default SideMenuContainer;

src/components/sideMenu/index.js

@@ -0,0 +1,5 @@
+import SideMenuContainer from './container/sideMenuContainer';
+import AuthSideMenuView from './view/authSideMenuView';
+
+export { SideMenuContainer, AuthSideMenuView };
+export default SideMenuContainer;

src/components/sideMenu/view/authSideMenuView.js

@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import { View, Text } from 'react-native';
+import { Thumbnail, List, ListItem } from 'native-base';
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+// Constants
+import { default as MENU } from '../../../constants/sideMenuItems';
+
+// Styles
+import styles from './sideMenuStyles';
+
+class ExampleView extends Component {
+  /* Props
+    * ------------------------------------------------
+    *   @prop { type }    name                - Description....
+    */
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  // Component Life Cycles
+
+  // Component Functions
+  _navigateToRoute = (route) => {
+    const { navigation } = this.props;
+    navigation.navigate(route);
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <View style={styles.headerView}>
+          <View style={styles.headerContentView}>
+            <Thumbnail
+              style={styles.userAvatar}
+              source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
+            />
+            <View style={styles.userInfoView}>
+              <Text style={styles.username}>Mustafa</Text>
+              <Text style={styles.usernick}>@mistikk</Text>
+            </View>
+          </View>
+        </View>
+        <View style={styles.contentView}>
+          <List
+            itemDivider={false}
+            dataArray={MENU.AUTH_MENU_ITEMS}
+            renderRow={item => (
+              <ListItem
+                noBorder
+                style={styles.listItem}
+                onPress={() => this._navigateToRoute(item.route)}
+              >
+                <Icon style={styles.listItemIcon} name={item.icon} />
+                <Text style={styles.listItemText}>{item.name}</Text>
+              </ListItem>
+            )}
+          />
+        </View>
+      </View>
+    );
+  }
+}
+
+export default ExampleView;

src/components/sideMenu/view/sideMenuStyles.js

@@ -0,0 +1,54 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  headerView: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: '$primaryBlue',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  headerContentView: {
+    alignItems: 'center',
+    flex: 1,
+    flexDirection: 'row',
+  },
+  contentView: {
+    flex: 4,
+    paddingTop: 15,
+  },
+  userAvatar: {
+    marginLeft: '$deviceWidth / 10',
+  },
+  userInfoView: {
+    alignSelf: 'flex-end',
+    marginLeft: 15,
+  },
+  username: {
+    color: '$white',
+    fontWeight: 'bold',
+    fontSize: 14,
+  },
+  usernick: {
+    color: 'rgba(255, 255, 255, 0.7)',
+    fontWeight: 'bold',
+    fontSize: 14,
+    marginTop: 2,
+  },
+  listItem: {
+    paddingLeft: '$deviceWidth / 10',
+  },
+  listItemIcon: {
+    color: '$primaryGray',
+    fontSize: 20,
+  },
+  listItemText: {
+    color: '$primaryGray',
+    marginLeft: 15,
+    fontWeight: '500',
+  },
+});

src/config/routes.js

@@ -1,20 +1,29 @@
-import { createStackNavigator } from 'react-navigation';
+import { DrawerNavigator } from 'react-navigation';
 import { BaseNavigator } from '../navigation';
 
+// Screens
 import { Splash } from '../screens';
 
-export default createStackNavigator({
-  SplashScreen: {
-    screen: Splash,
-    navigationOptions: {
-      header: () => null,
+// Components
+import { SideMenu } from '../components';
+
+export default DrawerNavigator(
+  {
+    SplashScreen: {
+      screen: Splash,
+      navigationOptions: {
+        header: () => null,
+      },
+    },
+    HomeScreen: {
+      screen: BaseNavigator,
+      navigationOptions: {
+        header: () => null,
+        gesturesEnabled: false,
+      },
     },
   },
-  HomeScreen: {
-    screen: BaseNavigator,
-    navigationOptions: {
-      header: () => null,
-      gesturesEnabled: false,
-    },
+  {
+    contentComponent: SideMenu,
   },
-});
+);

src/constants/sideMenuItems.js

@@ -0,0 +1,50 @@
+const authMenuItems = [
+  {
+    name: 'Profile',
+    route: 'Profile',
+    icon: 'user-o',
+  },
+  {
+    name: 'Bookmarks',
+    route: 'bookmarks',
+    icon: 'star-o',
+  },
+  {
+    name: 'Favorites',
+    route: 'favorites',
+    icon: 'heart-o',
+  },
+  {
+    name: 'Drafts',
+    route: 'drafts',
+    icon: 'file-o',
+  },
+  {
+    name: 'Schedules',
+    route: 'schedules',
+    icon: 'clock-o',
+  },
+  {
+    name: 'Gallery',
+    route: 'galery',
+    icon: 'picture-o',
+  },
+  {
+    name: 'Settings',
+    route: 'Settings',
+    icon: 'gear',
+  },
+];
+
+const noAuthMenuItems = [
+  {
+    name: 'Test',
+    route: 'Test',
+    icon: 'contact',
+  },
+];
+
+export default {
+  AUTH_MENU_ITEMS: authMenuItems,
+  NO_AUTH_MENU_ITEMS: noAuthMenuItems,
+};

src/screens/login/index.js

@@ -1,5 +1,5 @@
 import LoginScreen from './screen/loginScreen';
-import Login from './container/loginContainer';
+import LoginContainer from './container/loginContainer';
 
-export { LoginScreen, Login };
-export default Login;
+export { LoginScreen, LoginContainer };
+export default LoginContainer;

src/screens/login/screen/loginScreen.js

@@ -6,7 +6,7 @@ import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view
 import ScrollableTabView from '@esteemapp/react-native-scrollable-tab-view';
 
 // Internal Components
-import { Navigation } from 'react-native-navigation';
+// import { Navigation } from 'react-native-navigation';
 import { FormInput } from '../../../components/formInput';
 import { TextButton } from '../../../components/buttons';
 import { InformationArea } from '../../../components/informationArea';
@@ -15,7 +15,7 @@ import { LoginHeader } from '../../../components/loginHeader';
 import { MainButton } from '../../../components/mainButton';
 import { TabBar } from '../../../components/tabBar';
 import { addNewAccount } from '../../../redux/actions/accountAction';
-import { goToAuthScreens } from '../../../navigation';
+// import { goToAuthScreens } from '../../../navigation';
 import { lookupAccounts } from '../../../providers/steem/dsteem';
 import STEEM_CONNECT_LOGO from '../../../assets/steem_connect.png';
 
@@ -25,7 +25,7 @@ import styles from './loginStyles';
 class LoginScreen extends Component {
   constructor(props) {
     super(props);
-    Navigation.events().bindComponent(this);
+    // Navigation.events().bindComponent(this);
     this.handleUsername = this.handleUsername.bind(this);
     this.state = {
       username: '',
@@ -38,7 +38,7 @@ class LoginScreen extends Component {
 
   componentDidMount() {
     BackHandler.addEventListener('hardwareBackPress', () => {
-      Navigation.pop(this.props.componentId);
+      // Navigation.pop(this.props.componentId);
       return true;
     });
     Linking.getInitialURL().then((url) => {
@@ -60,16 +60,16 @@ class LoginScreen extends Component {
       .then((result) => {
         if (result) {
           dispatch(addNewAccount(result));
-          Navigation.setStackRoot(componentId, {
-            component: {
-              name: 'navigation.eSteem.PinCode',
-              options: {
-                topBar: {
-                  visible: false,
-                },
-              },
-            },
-          });
+          // Navigation.setStackRoot(componentId, {
+          //   component: {
+          //     name: 'navigation.eSteem.PinCode',
+          //     options: {
+          //       topBar: {
+          //         visible: false,
+          //       },
+          //     },
+          //   },
+          // });
         }
       })
       .catch((err) => {
@@ -93,19 +93,19 @@ class LoginScreen extends Component {
   };
 
   _loginwithSc2 = () => {
-    Navigation.push(this.props.componentId, {
-      component: {
-        name: 'navigation.eSteem.SteemConnect',
-        passProps: {},
-        options: {
-          topBar: {
-            title: {
-              text: 'Login via SC2',
-            },
-          },
-        },
-      },
-    });
+    // Navigation.push(this.props.componentId, {
+    //   component: {
+    //     name: 'navigation.eSteem.SteemConnect',
+    //     passProps: {},
+    //     options: {
+    //       topBar: {
+    //         title: {
+    //           text: 'Login via SC2',
+    //         },
+    //       },
+    //     },
+    //   },
+    // });
   };
 
   render() {
@@ -171,7 +171,7 @@ class LoginScreen extends Component {
                 iconName="ios-information-circle-outline"
               />
               <View style={styles.footerButtons}>
-                <TextButton onPress={goToAuthScreens} text="cancel" />
+                {/* <TextButton onPress={goToAuthScreens} text="cancel" /> */}
               </View>
               <MainButton
                 wrapperStyle={styles.mainButtonWrapper}