Skip to content

Commit 6a66735

Browse files
maximilianoforlenzamaximilianoforlenza
committed
feat(header): add drawer
1 parent d5a1353 commit 6a66735

17 files changed

Lines changed: 722 additions & 584 deletions

File tree

‎package-lock.json‎

Lines changed: 387 additions & 479 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎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: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,3 +92,15 @@ export const requestChangeUser = userProfile => ({
9292
export const userChanged = () => ({
9393
type: CHANGE_USER_SUCCEEDED
9494
});
95+
96+
export const FETCH_CURRENT_USER_REQUESTED = 'FETCH_CURRENT_USER_REQUESTED';
97+
export const FETCH_CURRENT_USER_SUCCEEDED = 'FETCH_CURRENT_USER_SUCCEEDED';
98+
99+
export const requestFetchCurrentUser = () => ({
100+
type: FETCH_CURRENT_USER_REQUESTED
101+
});
102+
103+
export const receiveCurrentUser = user => ({
104+
type: FETCH_CURRENT_USER_SUCCEEDED,
105+
user
106+
});

‎src/components/Drawer/DrawerContainer.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 DrawerContainer = ({
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+
DrawerContainer.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+
DrawerContainer.defaultProps = {
50+
brandImage: brandImageDefault,
51+
style: {},
52+
text: null,
53+
rightImage: null,
54+
version: null,
55+
user: {}
56+
};
57+
58+
export default DrawerContainer;

‎src/components/Drawer/DrawerImage.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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+
&& (
19+
<Text style={styles.text}>
20+
{text}
21+
</Text>
22+
)}
23+
{rightImage
24+
&& (
25+
<View>
26+
<Image source={rightImage} style={styles.rightImageStyle}/>
27+
</View>
28+
)}
29+
</View>
30+
);
31+
32+
DrawerImage.propTypes = {
33+
brandImage: PropTypes.oneOfType([
34+
PropTypes.number,
35+
PropTypes.string
36+
]),
37+
rightImage: PropTypes.oneOfType([
38+
PropTypes.number,
39+
PropTypes.string
40+
]),
41+
style: stylePropType,
42+
text: PropTypes.string
43+
};
44+
45+
DrawerImage.defaultProps = {
46+
brandImage: brandImageDefault,
47+
style: {},
48+
text: null,
49+
rightImage: null
50+
};
51+
52+
export default DrawerImage;

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

Lines changed: 15 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,18 @@ 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
32+
{...getFontAwesome(route.icon)}
33+
containerStyle={styles.navIcon}
34+
/>
35+
<Link to={route.path} onPress={() => this.signOut(route.closeSession)}>
36+
<Text style={styles.navText}>
37+
{route.text}
38+
</Text>
39+
</Link>
40+
</View>
41+
4542
);
4643
}
4744
}

‎src/components/Drawer/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/Drawer/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/Drawer/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;

‎src/components/Drawer/index.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React, {PureComponent} from 'react';
2+
import PropTypes from 'prop-types';
3+
import {connect} from 'react-redux';
4+
import {DrawerLayoutAndroid} from 'react-native';
5+
6+
import {requestFetchCurrentUser} from '../../actions/session';
7+
import stylePropType from '../../util/stylePropType';
8+
import routePropType from '../../util/routePropType';
9+
import DrawerContainer from './DrawerContainer';
10+
11+
const brandImageDefault = require('../../images/brand.png');
12+
13+
class Drawer extends PureComponent {
14+
static propTypes = {
15+
requestFetchCurrentUser: PropTypes.func.isRequired,
16+
brandImage: PropTypes.oneOfType([
17+
PropTypes.number,
18+
PropTypes.string
19+
]),
20+
rightImage: PropTypes.oneOfType([
21+
PropTypes.number,
22+
PropTypes.string
23+
]),
24+
style: stylePropType,
25+
text: PropTypes.string,
26+
version: PropTypes.string,
27+
routes: PropTypes.arrayOf(routePropType).isRequired,
28+
token: PropTypes.string,
29+
user: PropTypes.shape({}),
30+
children: PropTypes.shape({}),
31+
drawerRef: PropTypes.func
32+
};
33+
34+
static defaultProps = {
35+
brandImage: brandImageDefault,
36+
style: {},
37+
user: {},
38+
token: null,
39+
text: null,
40+
rightImage: null,
41+
version: null,
42+
children: null,
43+
drawerRef: null
44+
};
45+
46+
render() {
47+
const {children, drawerRef} = this.props;
48+
return (
49+
<DrawerLayoutAndroid
50+
drawerWidth={300}
51+
drawerPosition={DrawerLayoutAndroid.positions.Left}
52+
renderNavigationView={() => <DrawerContainer {...this.props}/>}
53+
{...this.props}
54+
onDrawerOpen={() => this.props.requestFetchCurrentUser()}
55+
ref={ref => drawerRef(ref)}
56+
>
57+
{children}
58+
</DrawerLayoutAndroid>
59+
);
60+
}
61+
}
62+
63+
export default connect(
64+
state => ({
65+
token: state.session.token,
66+
user: state.session.user
67+
}),
68+
dispatch => ({
69+
requestFetchCurrentUser: () => dispatch(requestFetchCurrentUser())
70+
})
71+
)(Drawer);

0 commit comments

Comments
 (0)