Skip to content

Commit 3be43c4

Browse files
maximilianoforlenzamaximilianoforlenza
committed
feat(drawerLayout): add DrawerLayout component
1 parent de21666 commit 3be43c4

17 files changed

Lines changed: 433 additions & 80 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: 18 additions & 36 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,40 +43,26 @@ 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

9267
export const userChanged = () => ({
9368
type: CHANGE_USER_SUCCEEDED
@@ -107,3 +82,10 @@ export const CLEAN_USER_VALIDATIONS = 'CLEAN_USER_VALIDATIONS';
10782
export const cleanUserValidations = () => ({
10883
type: CLEAN_USER_VALIDATIONS
10984
});
85+
86+
export const FETCH_CURRENT_USER_REQUESTED = 'FETCH_CURRENT_USER_REQUESTED';
87+
export const FETCH_CURRENT_USER_SUCCEEDED = 'FETCH_CURRENT_USER_SUCCEEDED';
88+
89+
export const requestFetchCurrentUser = () => ({type: FETCH_CURRENT_USER_REQUESTED});
90+
91+
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/DrawerLayout/NavItem.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React, {PureComponent} from 'react';
2+
import PropTypes from 'prop-types';
3+
import {connect} from 'react-redux';
4+
import {Text, View} from 'react-native';
5+
import {Icon} from 'react-native-elements';
6+
import {Link} from 'react-router-native';
7+
8+
import {requestFetchToken} from '../../actions/session';
9+
import getFontAwesome from '../../util/getFontAwesome';
10+
import routePropType from '../../util/routePropType';
11+
import SessionService from '../../services/session';
12+
13+
import styles from './styles';
14+
15+
class NavItem extends PureComponent {
16+
static propTypes = {
17+
requestFetchToken: PropTypes.func.isRequired,
18+
route: routePropType.isRequired
19+
};
20+
21+
async signOut(closeSession) {
22+
if (closeSession) {
23+
await SessionService.clearSession();
24+
this.props.requestFetchToken();
25+
}
26+
}
27+
28+
render() {
29+
const {route} = this.props;
30+
return (
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>
39+
);
40+
}
41+
}
42+
43+
export default NavItem;

‎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)