WIP: feat(drawerLayout): add DrawerLayout component

src/actions/index.js

@@ -3,6 +3,7 @@ import {
     CHANGE_USER_REQUESTED,
     CLEAR_USER_DATA_REQUESTED,
     CLEAR_USER_DATA_SUCCEEDED,
+    FETCH_CURRENT_USER_REQUESTED,
     LAST_USER_LOGGED_REQUESTED,
     USER_LOGIN_FAILED,
     USER_LOGIN_REQUESTED,
@@ -19,6 +20,7 @@ export {ERROR_OCCURRED};
 export {CHANGE_USER_REQUESTED};
 export {CLEAR_USER_DATA_REQUESTED};
 export {CLEAR_USER_DATA_SUCCEEDED};
+export {FETCH_CURRENT_USER_REQUESTED};
 export {LAST_USER_LOGGED_REQUESTED};
 export {USER_LOGIN_REQUESTED};
 export {USER_LOGIN_SUCCEEDED};

src/actions/session.js

@@ -10,25 +10,16 @@ export const requestLogin = (user, authEndpoint, redirectUri, clientCredentials)
     clientCredentials
 });
 
-export const notifyLoginFail = () => ({
-    type: USER_LOGIN_FAILED
-});
+export const notifyLoginFail = () => ({type: USER_LOGIN_FAILED});
 
-export const notifyLoginSucceeded = () => ({
-    type: USER_LOGIN_SUCCEEDED
-});
+export const notifyLoginSucceeded = () => ({type: USER_LOGIN_SUCCEEDED});
 
 export const USER_FETCH_TOKEN_REQUESTED = 'USER_FETCH_TOKEN_REQUESTED';
 export const USER_FETCH_TOKEN_SUCCEEDED = 'USER_TOKEN_SUCCEEDED';
 
-export const requestFetchToken = () => ({
-    type: USER_FETCH_TOKEN_REQUESTED
-});
+export const requestFetchToken = () => ({type: USER_FETCH_TOKEN_REQUESTED});
 
-export const notifyFetchTokenSucceeded = token => ({
-    type: USER_FETCH_TOKEN_SUCCEEDED,
-    token
-});
+export const notifyFetchTokenSucceeded = token => ({type: USER_FETCH_TOKEN_SUCCEEDED, token});
 
 export const USER_FETCH_REFRESH_TOKEN_REQUESTED = 'USER_FETCH_REFRESH_TOKEN_REQUESTED';
 export const USER_FETCH_REFRESH_TOKEN_SUCCEEDED = 'USER_FETCH_REFRESH_TOKEN_SUCCEEDED';
@@ -40,9 +31,7 @@ export const requestFetchRefreshToken = (authEndpoint, clientId, clientSecret) =
     clientSecret
 });
 
-export const notifyFetchRefreshTokenSucceeded = () => ({
-    type: USER_FETCH_REFRESH_TOKEN_SUCCEEDED
-});
+export const notifyFetchRefreshTokenSucceeded = () => ({type: USER_FETCH_REFRESH_TOKEN_SUCCEEDED});
 
 export const USER_REFRESH_ACCESS_TOKEN_REQUESTED = 'USER_REFRESH_ACCESS_TOKEN_REQUESTED';
 export const USER_REFRESH_ACCESS_TOKEN_SUCCEEDED = 'USER_REFRESH_ACCESS_TOKEN_SUCCEEDED';
@@ -54,40 +43,26 @@ export const requestFetchRefreshAccessToken = (authEndpoint, clientId, clientSec
     clientSecret
 });
 
-export const notifyRefreshAccessToken = () => ({
-    type: USER_REFRESH_ACCESS_TOKEN_SUCCEEDED
-});
+export const notifyRefreshAccessToken = () => ({type: USER_REFRESH_ACCESS_TOKEN_SUCCEEDED});
 
 export const LAST_USER_LOGGED_REQUESTED = 'LAST_USER_LOGGED_REQUESTED';
 export const LAST_USER_LOGGED_SUCCEEDED = 'LAST_USER_LOGGED_SUCCEEDED';
 
-export const requestLastUserLogged = () => ({
-    type: LAST_USER_LOGGED_REQUESTED
-});
+export const requestLastUserLogged = () => ({type: LAST_USER_LOGGED_REQUESTED});
 
-export const receiveLastUserLogged = lastUserLogged => ({
-    type: LAST_USER_LOGGED_SUCCEEDED,
-    lastUserLogged
-});
+export const receiveLastUserLogged = lastUserLogged => ({type: LAST_USER_LOGGED_SUCCEEDED, lastUserLogged});
 
 export const CLEAR_USER_DATA_REQUESTED = 'CLEAR_USER_DATA_REQUESTED';
 export const CLEAR_USER_DATA_SUCCEEDED = 'CLEAR_USER_DATA_SUCCEEDED';
 
-export const requestClearUserData = () => ({
-    type: CLEAR_USER_DATA_REQUESTED
-});
+export const requestClearUserData = () => ({type: CLEAR_USER_DATA_REQUESTED});
 
-export const notifyDataCleared = () => ({
-    type: CLEAR_USER_DATA_SUCCEEDED
-});
+export const notifyDataCleared = () => ({type: CLEAR_USER_DATA_SUCCEEDED});
 
 export const CHANGE_USER_REQUESTED = 'CHANGE_USER_REQUESTED';
 export const CHANGE_USER_SUCCEEDED = 'CHANGE_USER_SUCCEEDED';
 
-export const requestChangeUser = userProfile => ({
-    type: CHANGE_USER_REQUESTED,
-    userProfile
-});
+export const requestChangeUser = userProfile => ({type: CHANGE_USER_REQUESTED, userProfile});
 
 export const userChanged = () => ({
     type: CHANGE_USER_SUCCEEDED
@@ -107,3 +82,10 @@ export const CLEAN_USER_VALIDATIONS = 'CLEAN_USER_VALIDATIONS';
 export const cleanUserValidations = () => ({
     type: CLEAN_USER_VALIDATIONS
 });
+
+export const FETCH_CURRENT_USER_REQUESTED = 'FETCH_CURRENT_USER_REQUESTED';
+export const FETCH_CURRENT_USER_SUCCEEDED = 'FETCH_CURRENT_USER_SUCCEEDED';
+
+export const requestFetchCurrentUser = () => ({type: FETCH_CURRENT_USER_REQUESTED});
+
+export const receiveCurrentUser = user => ({type: FETCH_CURRENT_USER_SUCCEEDED, user});

src/components/DrawerLayout/Drawer.js

@@ -0,0 +1,61 @@
+import React, {Fragment} from 'react';
+import PropTypes from 'prop-types';
+import {Divider} from 'react-native-elements';
+import {isEmpty} from 'lodash';
+
+import stylePropType from '../../util/stylePropType';
+import routePropType from '../../util/routePropType';
+
+import DrawerImage from './DrawerImage';
+import Routes from './Routes';
+import User from './User';
+import Version from './Version';
+import styles from './styles';
+
+const brandImageDefault = require('../../images/brand.png');
+
+const Drawer = ({
+    routes, text, brandImage, style, rightImage, version, user
+}) => (
+    <Fragment>
+        <DrawerImage {...{
+            rightImage, text, style, brandImage
+        }}
+        />
+        {user && <User {...{user, style}}/>}
+        <Divider style={styles.dividerStyle}/>
+        {!isEmpty(routes) && <Routes {...{routes, style}}/>}
+        <Divider style={styles.dividerStyle}/>
+        {version && (
+            <Version {...{version, style}}/>
+        )}
+    </Fragment>
+);
+
+Drawer.propTypes = {
+    brandImage: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string
+    ]),
+    rightImage: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string
+    ]),
+    style: stylePropType,
+    text: PropTypes.string,
+    version: PropTypes.string,
+    routes: PropTypes.arrayOf(routePropType),
+    user: PropTypes.shape({})
+};
+
+Drawer.defaultProps = {
+    brandImage: brandImageDefault,
+    style: {},
+    text: null,
+    rightImage: null,
+    version: null,
+    user: null,
+    routes: []
+};
+
+export default Drawer;

src/components/DrawerLayout/DrawerImage.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Image, Text, View} from 'react-native';
+
+import styles from './styles';
+
+import stylePropType from '../../util/stylePropType';
+
+const brandImageDefault = require('../../images/brand.png');
+
+const DrawerImage = ({
+    brandImage, rightImage, text, style
+}) => (
+    <View style={[styles.brandContainer, style.brandContainer]}>
+        <View>
+            <Image source={brandImage} style={styles.brandImage}/>
+        </View>
+        {text && (
+            <Text style={styles.text}>
+                {text}
+            </Text>
+        )}
+        {rightImage && (
+            <View>
+                <Image source={rightImage} style={styles.rightImageStyle}/>
+            </View>
+        )}
+    </View>
+);
+
+DrawerImage.propTypes = {
+    brandImage: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string
+    ]),
+    rightImage: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string
+    ]),
+    style: stylePropType,
+    text: PropTypes.string
+};
+
+DrawerImage.defaultProps = {
+    brandImage: brandImageDefault,
+    style: {},
+    text: null,
+    rightImage: null
+};
+
+export default DrawerImage;

src/components/DrawerLayout/NavItem.js

@@ -0,0 +1,43 @@
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {Text, View} from 'react-native';
+import {Icon} from 'react-native-elements';
+import {Link} from 'react-router-native';
+
+import {requestFetchToken} from '../../actions/session';
+import getFontAwesome from '../../util/getFontAwesome';
+import routePropType from '../../util/routePropType';
+import SessionService from '../../services/session';
+
+import styles from './styles';
+
+class NavItem extends PureComponent {
+    static propTypes = {
+        requestFetchToken: PropTypes.func.isRequired,
+        route: routePropType.isRequired
+    };
+
+    async signOut(closeSession) {
+        if (closeSession) {
+            await SessionService.clearSession();
+            this.props.requestFetchToken();
+        }
+    }
+
+    render() {
+        const {route} = this.props;
+        return (
+            <View style={styles.navContainer}>
+                <Icon {...getFontAwesome(route.icon)} containerStyle={styles.navIcon}/>
+                <Link to={route.path} onPress={() => this.signOut(route.closeSession)}>
+                    <Text style={styles.navText}>
+                        {route.text}
+                    </Text>
+                </Link>
+            </View>
+        );
+    }
+}
+
+export default NavItem;

src/components/DrawerLayout/Routes.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+
+import routePropType from '../../util/routePropType';
+import stylePropType from '../../util/stylePropType';
+
+import NavItem from './NavItem';
+import styles from './styles';
+
+const Routes = ({routes, style}) => (
+    <View style={[styles.routesContainer, style.routesContainer]}>
+        {routes.map(route => (
+            <NavItem route={route} key={route.id}/>
+        ))}
+    </View>
+);
+
+Routes.propTypes = {
+    routes: PropTypes.arrayOf(routePropType).isRequired,
+    style: stylePropType
+};
+
+Routes.defaultProps = {
+    style: {}
+};
+
+export default Routes;

src/components/DrawerLayout/User.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Text, View} from 'react-native';
+
+import stylePropType from '../../util/stylePropType';
+
+import styles from './styles';
+
+const User = ({user, style}) => (
+    <View style={[styles.userContainer, style.userContainer]}>
+        <Text style={styles.userText}>
+            {`${user.name}, ${user.surname} (${user.username})`}
+        </Text>
+    </View>
+);
+
+User.propTypes = {
+    user: PropTypes.shape({}),
+    style: stylePropType
+};
+
+User.defaultProps = {
+    user: {},
+    style: {}
+};
+
+export default User;

src/components/DrawerLayout/Version.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Text, View} from 'react-native';
+
+import stylePropType from '../../util/stylePropType';
+
+import styles from './styles';
+
+const Version = ({version, style}) => (
+    <View style={[styles.versionContainer, style.versionContainer]}>
+        <Text style={styles.versionText}>
+            {version}
+        </Text>
+    </View>
+);
+
+Version.propTypes = {
+    version: PropTypes.string,
+    style: stylePropType
+};
+
+Version.defaultProps = {
+    version: null,
+    style: {}
+};
+
+export default Version;