From d8acc9f545128c5e28a734da033c075cc6ca7153 Mon Sep 17 00:00:00 2001
From: Cristian Kondratiuk <cristianair@gmail.com>
Date: Tue, 5 Feb 2019 15:47:17 -0300
Subject: [PATCH] feat(confirmModal): create confirmModal component

---
 package-lock.json                     |  13 ++-
 src/components/ConfirmModal/index.js  |  38 +++++++
 src/components/ConfirmModal/styles.js |  21 ++++
 src/components/Header/Brand.js        |  44 ++++++++
 src/components/Header/NavItem.js      |  66 ++++--------
 src/components/Header/Routes.js       |  29 ++++++
 src/components/Header/index.js        | 145 ++++++++++++++------------
 src/components/Header/index.web.js    |  62 +++++++++++
 src/components/Header/styles.js       |   2 +-
 src/constants/index.js                |   4 +
 10 files changed, 311 insertions(+), 113 deletions(-)
 create mode 100644 src/components/ConfirmModal/index.js
 create mode 100644 src/components/ConfirmModal/styles.js
 create mode 100755 src/components/Header/Brand.js
 create mode 100644 src/components/Header/Routes.js
 create mode 100755 src/components/Header/index.web.js
 create mode 100644 src/constants/index.js

diff --git a/package-lock.json b/package-lock.json
index a20999f..e0e83c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3958,7 +3958,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4373,7 +4374,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4429,6 +4431,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4472,12 +4475,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/src/components/ConfirmModal/index.js b/src/components/ConfirmModal/index.js
new file mode 100644
index 0000000..47f275f
--- /dev/null
+++ b/src/components/ConfirmModal/index.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Modal, View, Text} from 'react-native';
+
+import Button from '../Button';
+import styles from './styles';
+
+const ConfirmModal = ({onAccept, onDismiss, text}) => (
+    <Modal animationType="fade" visible>
+        <View style={styles.container}>
+            <View style={styles.messageContainer}>
+                <Text style={{fontSize: 20}}>
+                    {text}
+                </Text>
+            </View>
+            <View style={styles.footer}>
+                <Button
+                    onPress={onDismiss}
+                    title="Cancelar"
+                    danger
+                />
+                <Button
+                    onPress={onAccept}
+                    title="Aceptar"
+                    primary
+                />
+            </View>
+        </View>
+    </Modal>
+);
+
+ConfirmModal.propTypes = {
+    onAccept: PropTypes.func.isRequired,
+    onDismiss: PropTypes.func.isRequired,
+    text: PropTypes.string.isRequired
+};
+
+export default ConfirmModal;
diff --git a/src/components/ConfirmModal/styles.js b/src/components/ConfirmModal/styles.js
new file mode 100644
index 0000000..a3ca341
--- /dev/null
+++ b/src/components/ConfirmModal/styles.js
@@ -0,0 +1,21 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+    container: {
+        flex: 1,
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    messageContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    footer: {
+        flex: 1,
+        flexDirection: 'row',
+        justifyContent: 'center'
+    }
+});
diff --git a/src/components/Header/Brand.js b/src/components/Header/Brand.js
new file mode 100755
index 0000000..051bf39
--- /dev/null
+++ b/src/components/Header/Brand.js
@@ -0,0 +1,44 @@
+import React, {Fragment} from 'react';
+import PropTypes from 'prop-types';
+import {Image, Text, View} from 'react-native';
+
+import styles from './styles';
+import {stylePropType} from '../../util';
+import brandImageDefault from '../../images/brand.png';
+
+const Brand = ({
+    text, version, rightImage, brandImage, style
+}) => (
+    <View style={[styles.brandContainer, style.brandContainer]}>
+        <Image source={brandImage} style={styles.brandImage}/>
+        {text && (
+            <Fragment>
+                <Text style={styles.text}>
+                    {text}
+                </Text>
+                {version && (<Text style={styles.version}>{version}</Text>)}
+            </Fragment>
+        )}
+        {rightImage && (
+            <Image source={rightImage} style={styles.rightImageStyle}/>
+        )}
+    </View>
+);
+
+Brand.propTypes = {
+    text: PropTypes.string,
+    version: PropTypes.string,
+    brandImage: PropTypes.string,
+    rightImage: PropTypes.string,
+    style: stylePropType
+};
+
+Brand.defaultProps = {
+    brandImage: brandImageDefault,
+    style: {},
+    rightImage: null,
+    text: null,
+    version: null
+};
+
+export default Brand;
diff --git a/src/components/Header/NavItem.js b/src/components/Header/NavItem.js
index f243501..1664bf6 100644
--- a/src/components/Header/NavItem.js
+++ b/src/components/Header/NavItem.js
@@ -1,54 +1,34 @@
-import React, {Component} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
 import {Text} from 'react-native';
 import {Icon} from 'react-native-elements';
 import {Link} from 'react-router-native';
 
-import {requestFetchToken} from '../../actions/session';
-import Col from '../Col';
-import Row from '../Row';
 import getFontAwesome from '../../util/getFontAwesome';
 import routePropType from '../../util/routePropType';
-import SessionService from '../../services/session';
+import Col from '../Col';
+import Row from '../Row';
 import styles from './styles';
 
-class NavItem extends Component {
-    static propTypes = {
-        requestFetchToken: PropTypes.func.isRequired,
-        route: routePropType.isRequired
-    };
-
-    async signOut(closeSession) {
-        if (closeSession) {
-            await SessionService.clearSession();
-            this.props.requestFetchToken();
-        }
-    }
+const NavItem = ({onLogout, route}) => (
+    <Col style={styles.navItem}>
+        <Row style={styles.navItem}>
+            <Icon
+                {...getFontAwesome(route.icon)}
+                containerStyle={styles.navIcon}
+            />
+            <Link to={route.path} onPress={() => onLogout(route)}>
+                <Text style={styles.navText}>
+                    {route.text}
+                </Text>
+            </Link>
+        </Row>
+    </Col>
+);
 
-    render() {
-        const {route} = this.props;
-        return (
-            <Col style={styles.navItem}>
-                <Row style={styles.navItem}>
-                    <Icon
-                        {...getFontAwesome(route.icon)}
-                        containerStyle={styles.navIcon}
-                    />
-                    <Link to={route.path} onPress={() => this.signOut(route.closeSession)}>
-                        <Text style={styles.navText}>
-                            {route.text}
-                        </Text>
-                    </Link>
-                </Row>
-            </Col>
-        );
-    }
-}
+NavItem.propTypes = {
+    onLogout: PropTypes.func.isRequired,
+    route: routePropType.isRequired
+};
 
-export default connect(
-    null,
-    dispatch => ({
-        requestFetchToken: () => dispatch(requestFetchToken())
-    })
-)(NavItem);
+export default NavItem;
diff --git a/src/components/Header/Routes.js b/src/components/Header/Routes.js
new file mode 100644
index 0000000..9164c72
--- /dev/null
+++ b/src/components/Header/Routes.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+
+import routePropType from '../../util/routePropType';
+import NavItem from './NavItem';
+import styles from './styles';
+
+const Routes = ({onLogout, routes}) => (
+    <View style={styles.navContainer}>
+        {routes.map(route => (
+            <NavItem
+                key={route.key}
+                {...{route, onLogout}}
+            />
+        ))}
+    </View>
+);
+
+Routes.propTypes = {
+    onLogout: PropTypes.func.isRequired,
+    routes: PropTypes.arrayOf(routePropType)
+};
+
+Routes.defaultProps = {
+    routes: []
+};
+
+export default Routes;
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index a89709a..ec85b69 100755
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -1,77 +1,92 @@
-import React, {Fragment} from 'react';
+import React, {PureComponent, Fragment} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
-import {Image, Text, View} from 'react-native';
-import {isEmpty} from 'lodash';
+import {find, get, isEmpty} from 'lodash';
 
+import {requestFetchToken} from '../../actions/session';
+import {CONFIRM_LOGOUT_MESSAGE} from '../../constants';
+import SessionService from '../../services/session';
 import stylePropType from '../../util/stylePropType';
 import routePropType from '../../util/routePropType';
-import NavItem from './NavItem';
-import styles from './styles';
+import ConfirmModal from '../ConfirmModal';
+import Brand from './Brand';
+import Routes from './Routes';
+
+const getLogoutMessage = routes => get(
+    find(routes, route => route.logoutMessage), 'logoutMessage'
+) || CONFIRM_LOGOUT_MESSAGE;
 
 const brandImageDefault = require('../../images/brand.png');
 
-const Header = ({
-    routes, text, brandImage, style, token, rightImage, version
-}) => (
-    <Fragment>
-        <View style={[styles.brandContainer, style.brandContainer]}>
-            <View>
-                <Image source={brandImage} style={styles.brandImage}/>
-            </View>
-            {text && (
-                <View>
-                    <Text style={styles.text}>
-                        {text}
-                    </Text>
-                    {version && (
-                        <Text style={styles.versionStyle}>
-                            {version}
-                        </Text>
-                    )}
-                </View>
-            )}
-            {rightImage && (
-                <View>
-                    <Image source={rightImage} style={styles.rightImageStyle}/>
-                </View>
-            )}
-        </View>
-        {token && !isEmpty(routes) && (
-            <View style={styles.navContainer}>
-                {routes.map(route => (
-                    <NavItem key={route.key} route={route}/>
-                ))}
-            </View>
-        )}
-    </Fragment>
-);
+class Header extends PureComponent {
+    static propTypes = {
+        brandImage: PropTypes.string,
+        rightImage: PropTypes.string,
+        style: stylePropType,
+        text: PropTypes.string,
+        routes: PropTypes.arrayOf(routePropType),
+        version: PropTypes.string,
+        requestFetchToken: PropTypes.func.isRequired
+    };
+
+    static defaultProps = {
+        brandImage: brandImageDefault,
+        style: {},
+        routes: [],
+        text: null,
+        rightImage: null,
+        version: null
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            showModal: false
+        };
+    }
+
+    handleShowModal(route) {
+        if (route.closeSession) {
+            this.setState(() => ({showModal: true}));
+        }
+    }
+
+    async signOut() {
+        this.setState(() => ({showModal: false}));
+        await SessionService.clearSession();
+        this.props.requestFetchToken();
+    }
 
-Header.propTypes = {
-    brandImage: PropTypes.oneOfType([
-        PropTypes.number,
-        PropTypes.string
-    ]),
-    rightImage: PropTypes.oneOfType([
-        PropTypes.number,
-        PropTypes.string
-    ]),
-    style: stylePropType,
-    text: PropTypes.string,
-    routes: PropTypes.arrayOf(routePropType).isRequired,
-    token: PropTypes.string,
-    version: PropTypes.string
-};
+    handleCloseModal() {
+        this.setState(() => ({showModal: false}));
+    }
 
-Header.defaultProps = {
-    brandImage: brandImageDefault,
-    style: {},
-    token: null,
-    text: null,
-    rightImage: null,
-    version: null
-};
+    render() {
+        const {
+            routes, text, brandImage, style, rightImage, version
+        } = this.props;
+        const {showModal} = this.state;
+        return (
+            <Fragment>
+                <Brand {...{
+                    text, version, rightImage, brandImage, style
+                }}
+                />
+                {!isEmpty(routes) && <Routes onLogout={route => this.handleShowModal(route)} routes={routes}/>}
+                {showModal && (
+                    <ConfirmModal
+                        onDismiss={() => this.handleCloseModal()}
+                        onAccept={() => this.signOut()}
+                        text={getLogoutMessage(routes)}
+                    />
+                )}
+            </Fragment>
+        );
+    }
+}
 
-export default connect(
-    state => ({token: state.session.token})
+export default connect(null,
+    dispatch => ({
+        requestFetchToken: () => dispatch(requestFetchToken())
+    })
 )(Header);
diff --git a/src/components/Header/index.web.js b/src/components/Header/index.web.js
new file mode 100755
index 0000000..ce9434b
--- /dev/null
+++ b/src/components/Header/index.web.js
@@ -0,0 +1,62 @@
+import React, {PureComponent, Fragment} from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {isEmpty} from 'lodash';
+
+import {requestFetchToken} from '../../actions/session';
+import stylePropType from '../../util/stylePropType';
+import routePropType from '../../util/routePropType';
+import SessionService from '../../services/session';
+import Brand from './Brand';
+import Routes from './Routes';
+
+const brandImageDefault = require('../../images/brand.png');
+
+class Header extends PureComponent {
+    static propTypes = {
+        brandImage: PropTypes.string,
+        rightImage: PropTypes.string,
+        style: stylePropType,
+        text: PropTypes.string,
+        routes: PropTypes.arrayOf(routePropType),
+        version: PropTypes.string,
+        requestFetchToken: PropTypes.func.isRequired
+    };
+
+    static defaultProps = {
+        brandImage: brandImageDefault,
+        style: {},
+        routes: [],
+        text: null,
+        rightImage: null,
+        version: null
+    };
+
+    async signOut(route) {
+        if (route.closeSession) {
+            await SessionService.clearSession();
+            this.props.requestFetchToken();
+        }
+    }
+
+    render() {
+        const {
+            routes, text, brandImage, style, rightImage, version
+        } = this.props;
+        return (
+            <Fragment>
+                <Brand {...{
+                    text, version, rightImage, brandImage, style
+                }}
+                />
+                {!isEmpty(routes) && <Routes onLogout={route => this.signOut(route)} routes={routes}/>}
+            </Fragment>
+        );
+    }
+}
+
+export default connect(null,
+    dispatch => ({
+        requestFetchToken: () => dispatch(requestFetchToken())
+    })
+)(Header);
diff --git a/src/components/Header/styles.js b/src/components/Header/styles.js
index b442e26..cc2b117 100755
--- a/src/components/Header/styles.js
+++ b/src/components/Header/styles.js
@@ -42,7 +42,7 @@ export default StyleSheet.create({
     navIcon: {
         marginRight: 10
     },
-    versionStyle: {
+    version: {
         fontSize: 15,
         color: '#fff',
         textAlign: 'right'
diff --git a/src/constants/index.js b/src/constants/index.js
new file mode 100644
index 0000000..e14b30d
--- /dev/null
+++ b/src/constants/index.js
@@ -0,0 +1,4 @@
+const CONFIRM_LOGOUT_MESSAGE = 'Desea salir de la aplicacion?';
+
+// eslint-disable-next-line
+export {CONFIRM_LOGOUT_MESSAGE};