Skip to content

Commit 11edbe8

Browse files
maximilianoforlenzamaximilianoforlenza
committed
feat(drawerLayout): add DrawerLayout component
1 parent d5a1353 commit 11edbe8

17 files changed

Lines changed: 403 additions & 144 deletions

File tree

‎src/actions/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
CHANGE_USER_REQUESTED,
44
CLEAR_USER_DATA_REQUESTED,
55
CLEAR_USER_DATA_SUCCEEDED,
6+
FETCH_CURRENT_USER_REQUESTED,
67
LAST_USER_LOGGED_REQUESTED,
78
USER_LOGIN_FAILED,
89
USER_LOGIN_REQUESTED,
@@ -19,6 +20,7 @@ export {ERROR_OCCURRED};
1920
export {CHANGE_USER_REQUESTED};
2021
export {CLEAR_USER_DATA_REQUESTED};
2122
export {CLEAR_USER_DATA_SUCCEEDED};
23+
export {FETCH_CURRENT_USER_REQUESTED};
2224
export {LAST_USER_LOGGED_REQUESTED};
2325
export {USER_LOGIN_REQUESTED};
2426
export {USER_LOGIN_SUCCEEDED};

‎src/actions/session.js‎

Lines changed: 19 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,16 @@ export const requestLogin = (user, authEndpoint, redirectUri, clientCredentials)
1010
clientCredentials
1111
});
1212

13-
export const notifyLoginFail = () => ({
14-
type: USER_LOGIN_FAILED
15-
});
13+
export const notifyLoginFail = () => ({type: USER_LOGIN_FAILED});
1614

17-
export const notifyLoginSucceeded = () => ({
18-
type: USER_LOGIN_SUCCEEDED
19-
});
15+
export const notifyLoginSucceeded = () => ({type: USER_LOGIN_SUCCEEDED});
2016

2117
export const USER_FETCH_TOKEN_REQUESTED = 'USER_FETCH_TOKEN_REQUESTED';
2218
export const USER_FETCH_TOKEN_SUCCEEDED = 'USER_TOKEN_SUCCEEDED';
2319

24-
export const requestFetchToken = () => ({
25-
type: USER_FETCH_TOKEN_REQUESTED
26-
});
20+
export const requestFetchToken = () => ({type: USER_FETCH_TOKEN_REQUESTED});
2721

28-
export const notifyFetchTokenSucceeded = token => ({
29-
type: USER_FETCH_TOKEN_SUCCEEDED,
30-
token
31-
});
22+
export const notifyFetchTokenSucceeded = token => ({type: USER_FETCH_TOKEN_SUCCEEDED, token});
3223

3324
export const USER_FETCH_REFRESH_TOKEN_REQUESTED = 'USER_FETCH_REFRESH_TOKEN_REQUESTED';
3425
export const USER_FETCH_REFRESH_TOKEN_SUCCEEDED = 'USER_FETCH_REFRESH_TOKEN_SUCCEEDED';
@@ -40,9 +31,7 @@ export const requestFetchRefreshToken = (authEndpoint, clientId, clientSecret) =
4031
clientSecret
4132
});
4233

43-
export const notifyFetchRefreshTokenSucceeded = () => ({
44-
type: USER_FETCH_REFRESH_TOKEN_SUCCEEDED
45-
});
34+
export const notifyFetchRefreshTokenSucceeded = () => ({type: USER_FETCH_REFRESH_TOKEN_SUCCEEDED});
4635

4736
export const USER_REFRESH_ACCESS_TOKEN_REQUESTED = 'USER_REFRESH_ACCESS_TOKEN_REQUESTED';
4837
export const USER_REFRESH_ACCESS_TOKEN_SUCCEEDED = 'USER_REFRESH_ACCESS_TOKEN_SUCCEEDED';
@@ -54,41 +43,32 @@ export const requestFetchRefreshAccessToken = (authEndpoint, clientId, clientSec
5443
clientSecret
5544
});
5645

57-
export const notifyRefreshAccessToken = () => ({
58-
type: USER_REFRESH_ACCESS_TOKEN_SUCCEEDED
59-
});
46+
export const notifyRefreshAccessToken = () => ({type: USER_REFRESH_ACCESS_TOKEN_SUCCEEDED});
6047

6148
export const LAST_USER_LOGGED_REQUESTED = 'LAST_USER_LOGGED_REQUESTED';
6249
export const LAST_USER_LOGGED_SUCCEEDED = 'LAST_USER_LOGGED_SUCCEEDED';
6350

64-
export const requestLastUserLogged = () => ({
65-
type: LAST_USER_LOGGED_REQUESTED
66-
});
51+
export const requestLastUserLogged = () => ({type: LAST_USER_LOGGED_REQUESTED});
6752

68-
export const receiveLastUserLogged = lastUserLogged => ({
69-
type: LAST_USER_LOGGED_SUCCEEDED,
70-
lastUserLogged
71-
});
53+
export const receiveLastUserLogged = lastUserLogged => ({type: LAST_USER_LOGGED_SUCCEEDED, lastUserLogged});
7254

7355
export const CLEAR_USER_DATA_REQUESTED = 'CLEAR_USER_DATA_REQUESTED';
7456
export const CLEAR_USER_DATA_SUCCEEDED = 'CLEAR_USER_DATA_SUCCEEDED';
7557

76-
export const requestClearUserData = () => ({
77-
type: CLEAR_USER_DATA_REQUESTED
78-
});
58+
export const requestClearUserData = () => ({type: CLEAR_USER_DATA_REQUESTED});
7959

80-
export const notifyDataCleared = () => ({
81-
type: CLEAR_USER_DATA_SUCCEEDED
82-
});
60+
export const notifyDataCleared = () => ({type: CLEAR_USER_DATA_SUCCEEDED});
8361

8462
export const CHANGE_USER_REQUESTED = 'CHANGE_USER_REQUESTED';
8563
export const CHANGE_USER_SUCCEEDED = 'CHANGE_USER_SUCCEEDED';
8664

87-
export const requestChangeUser = userProfile => ({
88-
type: CHANGE_USER_REQUESTED,
89-
userProfile
90-
});
65+
export const requestChangeUser = userProfile => ({type: CHANGE_USER_REQUESTED, userProfile});
9166

92-
export const userChanged = () => ({
93-
type: CHANGE_USER_SUCCEEDED
94-
});
67+
export const userChanged = () => ({type: CHANGE_USER_SUCCEEDED});
68+
69+
export const FETCH_CURRENT_USER_REQUESTED = 'FETCH_CURRENT_USER_REQUESTED';
70+
export const FETCH_CURRENT_USER_SUCCEEDED = 'FETCH_CURRENT_USER_SUCCEEDED';
71+
72+
export const requestFetchCurrentUser = () => ({type: FETCH_CURRENT_USER_REQUESTED});
73+
74+
export const receiveCurrentUser = user => ({type: FETCH_CURRENT_USER_SUCCEEDED, user});

‎src/components/DrawerLayout/Drawer.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React, {Fragment} from 'react';
2+
import PropTypes from 'prop-types';
3+
import {Divider} from 'react-native-elements';
4+
import {isEmpty} from 'lodash';
5+
6+
import stylePropType from '../../util/stylePropType';
7+
import routePropType from '../../util/routePropType';
8+
9+
import DrawerImage from './DrawerImage';
10+
import Routes from './Routes';
11+
import User from './User';
12+
import Version from './Version';
13+
import styles from './styles';
14+
15+
const brandImageDefault = require('../../images/brand.png');
16+
17+
const Drawer = ({
18+
routes, text, brandImage, style, rightImage, version, user
19+
}) => (
20+
<Fragment>
21+
<DrawerImage {...{
22+
rightImage, text, style, brandImage
23+
}}
24+
/>
25+
{user && <User {...{user, style}}/>}
26+
<Divider style={styles.dividerStyle}/>
27+
{!isEmpty(routes) && <Routes {...{routes, style}}/>}
28+
<Divider style={styles.dividerStyle}/>
29+
{version && (
30+
<Version {...{version, style}}/>
31+
)}
32+
</Fragment>
33+
);
34+
35+
Drawer.propTypes = {
36+
brandImage: PropTypes.oneOfType([
37+
PropTypes.number,
38+
PropTypes.string
39+
]),
40+
rightImage: PropTypes.oneOfType([
41+
PropTypes.number,
42+
PropTypes.string
43+
]),
44+
style: stylePropType,
45+
text: PropTypes.string,
46+
version: PropTypes.string,
47+
routes: PropTypes.arrayOf(routePropType),
48+
user: PropTypes.shape({})
49+
};
50+
51+
Drawer.defaultProps = {
52+
brandImage: brandImageDefault,
53+
style: {},
54+
text: null,
55+
rightImage: null,
56+
version: null,
57+
user: null,
58+
routes: []
59+
};
60+
61+
export default Drawer;

‎src/components/DrawerLayout/DrawerImage.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import {Image, Text, View} from 'react-native';
4+
5+
import styles from './styles';
6+
7+
import stylePropType from '../../util/stylePropType';
8+
9+
const brandImageDefault = require('../../images/brand.png');
10+
11+
const DrawerImage = ({
12+
brandImage, rightImage, text, style
13+
}) => (
14+
<View style={[styles.brandContainer, style.brandContainer]}>
15+
<View>
16+
<Image source={brandImage} style={styles.brandImage}/>
17+
</View>
18+
{text && (
19+
<Text style={styles.text}>
20+
{text}
21+
</Text>
22+
)}
23+
{rightImage && (
24+
<View>
25+
<Image source={rightImage} style={styles.rightImageStyle}/>
26+
</View>
27+
)}
28+
</View>
29+
);
30+
31+
DrawerImage.propTypes = {
32+
brandImage: PropTypes.oneOfType([
33+
PropTypes.number,
34+
PropTypes.string
35+
]),
36+
rightImage: PropTypes.oneOfType([
37+
PropTypes.number,
38+
PropTypes.string
39+
]),
40+
style: stylePropType,
41+
text: PropTypes.string
42+
};
43+
44+
DrawerImage.defaultProps = {
45+
brandImage: brandImageDefault,
46+
style: {},
47+
text: null,
48+
rightImage: null
49+
};
50+
51+
export default DrawerImage;

src/components/Header/NavItem.js renamed to src/components/DrawerLayout/NavItem.js

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
1-
import React, {Component} from 'react';
1+
import React, {PureComponent} from 'react';
22
import PropTypes from 'prop-types';
33
import {connect} from 'react-redux';
4-
import {Text} from 'react-native';
4+
import {Text, View} from 'react-native';
55
import {Icon} from 'react-native-elements';
66
import {Link} from 'react-router-native';
77

88
import {requestFetchToken} from '../../actions/session';
9-
import Col from '../Col';
10-
import Row from '../Row';
119
import getFontAwesome from '../../util/getFontAwesome';
1210
import routePropType from '../../util/routePropType';
1311
import SessionService from '../../services/session';
12+
1413
import styles from './styles';
1514

16-
class NavItem extends Component {
15+
class NavItem extends PureComponent {
1716
static propTypes = {
1817
requestFetchToken: PropTypes.func.isRequired,
1918
route: routePropType.isRequired
@@ -29,19 +28,14 @@ class NavItem extends Component {
2928
render() {
3029
const {route} = this.props;
3130
return (
32-
<Col style={styles.navItem}>
33-
<Row style={styles.navItem}>
34-
<Icon
35-
{...getFontAwesome(route.icon)}
36-
containerStyle={styles.navIcon}
37-
/>
38-
<Link to={route.path} onPress={() => this.signOut(route.closeSession)}>
39-
<Text style={styles.navText}>
40-
{route.text}
41-
</Text>
42-
</Link>
43-
</Row>
44-
</Col>
31+
<View style={styles.navContainer}>
32+
<Icon {...getFontAwesome(route.icon)} containerStyle={styles.navIcon}/>
33+
<Link to={route.path} onPress={() => this.signOut(route.closeSession)}>
34+
<Text style={styles.navText}>
35+
{route.text}
36+
</Text>
37+
</Link>
38+
</View>
4539
);
4640
}
4741
}

‎src/components/DrawerLayout/Routes.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import {View} from 'react-native';
4+
5+
import routePropType from '../../util/routePropType';
6+
import stylePropType from '../../util/stylePropType';
7+
8+
import NavItem from './NavItem';
9+
import styles from './styles';
10+
11+
const Routes = ({routes, style}) => (
12+
<View style={[styles.routesContainer, style.routesContainer]}>
13+
{routes.map(route => (
14+
<NavItem route={route} key={route.id}/>
15+
))}
16+
</View>
17+
);
18+
19+
Routes.propTypes = {
20+
routes: PropTypes.arrayOf(routePropType).isRequired,
21+
style: stylePropType
22+
};
23+
24+
Routes.defaultProps = {
25+
style: {}
26+
};
27+
28+
export default Routes;

‎src/components/DrawerLayout/User.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import {Text, View} from 'react-native';
4+
5+
import stylePropType from '../../util/stylePropType';
6+
7+
import styles from './styles';
8+
9+
const User = ({user, style}) => (
10+
<View style={[styles.userContainer, style.userContainer]}>
11+
<Text style={styles.userText}>
12+
{`${user.name}, ${user.surname} (${user.username})`}
13+
</Text>
14+
</View>
15+
);
16+
17+
User.propTypes = {
18+
user: PropTypes.shape({}),
19+
style: stylePropType
20+
};
21+
22+
User.defaultProps = {
23+
user: {},
24+
style: {}
25+
};
26+
27+
export default User;

‎src/components/DrawerLayout/Version.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import {Text, View} from 'react-native';
4+
5+
import stylePropType from '../../util/stylePropType';
6+
7+
import styles from './styles';
8+
9+
const Version = ({version, style}) => (
10+
<View style={[styles.versionContainer, style.versionContainer]}>
11+
<Text style={styles.versionText}>
12+
{version}
13+
</Text>
14+
</View>
15+
);
16+
17+
Version.propTypes = {
18+
version: PropTypes.string,
19+
style: stylePropType
20+
};
21+
22+
Version.defaultProps = {
23+
version: null,
24+
style: {}
25+
};
26+
27+
export default Version;

0 commit comments

Comments
 (0)