Skip to content

Commit cbea9ff

Browse files
maximilianoforlenzanavarroaxel
maximilianoforlenza
authored and
navarroaxel
committed
feat(drawerLayout): add DrawerLayout component
1 parent d5a1353 commit cbea9ff

16 files changed

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

‎src/components/DrawerLayout/DrawerImage.js‎

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

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

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
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';
1412
import styles from './styles';
1513

16-
class NavItem extends Component {
14+
class NavItem extends PureComponent {
1715
static propTypes = {
1816
requestFetchToken: PropTypes.func.isRequired,
1917
route: routePropType.isRequired
@@ -29,19 +27,14 @@ class NavItem extends Component {
2927
render() {
3028
const {route} = this.props;
3129
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>
30+
<View style={styles.navContainer}>
31+
<Icon {...getFontAwesome(route.icon)} containerStyle={styles.navIcon}/>
32+
<Link to={route.path} onPress={() => this.signOut(route.closeSession)}>
33+
<Text style={styles.navText}>
34+
{route.text}
35+
</Text>
36+
</Link>
37+
</View>
4538
);
4639
}
4740
}

‎src/components/DrawerLayout/Routes.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 {View} from 'react-native';
4+
5+
import NavItem from './NavItem';
6+
import routePropType from '../../util/routePropType';
7+
import stylePropType from '../../util/stylePropType';
8+
import styles from './styles';
9+
10+
const Routes = ({routes, style}) => (
11+
<View style={[styles.routesContainer, style.routesContainer]}>
12+
{routes.map(route => (
13+
<NavItem route={route} key={route.id}/>
14+
))}
15+
</View>
16+
);
17+
18+
Routes.propTypes = {
19+
routes: PropTypes.arrayOf(routePropType).isRequired,
20+
style: stylePropType
21+
};
22+
23+
Routes.defaultProps = {
24+
style: {}
25+
};
26+
27+
export default Routes;

‎src/components/DrawerLayout/User.js‎

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

‎src/components/DrawerLayout/Version.js‎

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

0 commit comments

Comments
 (0)