Skip to content

Commit 55ad797

Browse files
gondzogondzo
authored
Merge pull request #25 from birdofpreyru/issue-18
Issue 18
2 parents f5d94cb + 9f3acf4 commit 55ad797

File tree

5 files changed

+191
-152
lines changed

5 files changed

+191
-152
lines changed

‎src/components/Dropdown/Dropdown.jsx

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,17 @@ import CSSModules from 'react-css-modules';
33
import ReactDropdown, {DropdownTrigger, DropdownContent} from 'react-simple-dropdown';
44
import styles from './Dropdown.scss';
55

6-
export const Dropdown = ({title, children}) => (
7-
<div styleName="dropdown">
8-
<ReactDropdown>
9-
<DropdownTrigger className={styles.trigger}>{title}</DropdownTrigger>
10-
<DropdownContent className={styles.content}>
11-
{children}
12-
</DropdownContent>
13-
</ReactDropdown>
14-
</div>
6+
export const Dropdown = ({onRef, title, children}) => (
7+
<ReactDropdown ref={onRef}>
8+
<DropdownTrigger className={styles.trigger}>{title}</DropdownTrigger>
9+
<DropdownContent className={styles.content}>
10+
{children}
11+
</DropdownContent>
12+
</ReactDropdown>
1513
);
1614

1715
Dropdown.propTypes = {
16+
onRef: PropTypes.func,
1817
title: PropTypes.any.isRequired,
1918
children: PropTypes.any.isRequired,
2019
};

‎src/components/Dropdown/Dropdown.scss

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,12 @@
1-
.dropdown {
2-
:global {
3-
.dropdown {
4-
display: inline-block;
5-
}
6-
7-
8-
.dropdown--active .dropdown__content {
9-
display: block;
10-
}
1+
:global {
2+
.dropdown {
3+
display: inline-block;
4+
}
5+
.dropdown--active .dropdown__content {
6+
display: block;
117
}
128
}
139

14-
15-
1610
.content {
1711
display: none;
1812
position: absolute;

‎src/components/Header/Header.jsx

Lines changed: 134 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -8,129 +8,158 @@ import Dropdown from '../Dropdown';
88
import Notification from '../Notification';
99
import styles from './Header.scss';
1010

11-
export const Header = ({
11+
/**
12+
* TODO: This component cries: 'REFACTOR ME!'
13+
* Seriously, it is such a mess now, should be split into separate sub-components!
14+
*/
15+
16+
export function Header({
1217
location, selectedCategory, categories, user, notifications,
13-
routes, handleNotification, doLogout, toggleNotif, loggedUser,
14-
}) => (
18+
handleNotification, logoutAction, toggleNotif, loggedUser,
19+
}) {
20+
// Holds a reference to the function which hides the user dropdown (Profile,
21+
// Logout, etc.).
22+
let hideUserDropdown;
1523

16-
<nav styleName="header">
17-
<ul>
18-
<li styleName="branding">
19-
DRONE MARKET
20-
</li>
21-
{
22-
(() => {
23-
if (user.role == 'consumer') {
24-
return (
25-
<li styleName="pages">
26-
<ul>
27-
<li>
28-
<Link to="/home" activeClassName="active">Home</Link>
29-
</li>
30-
<li>
31-
<Link to="/my-request-status" activeClassName="active">My Requests</Link>
32-
</li>
33-
<li>
34-
<Link to="/browse-provider" activeClassName="active">Browse Services</Link>
35-
</li>
36-
<li><Link to="javascript:;" activeClassName="active">Analytics</Link></li>
37-
<li><Link to="/drones-map" activeClassName="active">Drone Traffic</Link></li>
38-
<li><Link to="/mission-planner" activeClassName="active">MissionPlanner</Link></li>
39-
</ul>
40-
</li>
41-
);
42-
} else if (user.role == 'provider') {
43-
return (
44-
<li styleName="pages">
45-
<ul>
46-
<li>
47-
<Link to="/dashboard" activeClassName="active">Dashboard</Link>
48-
</li>
49-
<li>
50-
<Link to="/my-request" activeClassName="active">Requests</Link>
51-
</li>
52-
<li>
53-
<Link to="/my-drone" activeClassName="active">My Drones</Link>
54-
</li>
55-
<li>
56-
<Link to="/my-services" activeClassName="active">My Services</Link>
57-
</li>
58-
<li><Link to="javascript:;" activeClassName="active">Analytics</Link></li>
59-
<li><Link to="/drones-map" activeClassName="active">Drone Traffic</Link></li>
60-
<li><Link to="/mission-planner" activeClassName="active">MissionPlanner</Link></li>
61-
</ul>
62-
</li>
63-
);
64-
}
65-
})()
66-
}
67-
{
68-
(() => {
69-
if (!loggedUser) {
70-
return (
71-
[
72-
(<li key="location" styleName="location">
73-
<i />
74-
{location}
75-
</li>),
76-
(<li key="search" styleName="search">
77-
<SearchInput placeholder="Type your search here..." />
78-
</li>),
79-
(<li key="category">
80-
<Dropdown title={selectedCategory}>
24+
return (
25+
<nav styleName="header">
26+
<ul>
27+
<li styleName="branding">
28+
DRONE MARKET
29+
</li>
30+
{
31+
(() => {
32+
let res;
33+
if (user.role === 'consumer') {
34+
res = (
35+
<li styleName="pages">
8136
<ul>
82-
{categories.map((item, i) => <li key={i}><a href="javascript:">{item.name}</a></li>)}
37+
<li>
38+
<Link to="/home" activeClassName="active">Home</Link>
39+
</li>
40+
<li>
41+
<Link to="/my-request-status" activeClassName="active">My Requests</Link>
42+
</li>
43+
<li>
44+
<Link to="/browse-provider" activeClassName="active">Browse Services</Link>
45+
</li>
46+
<li><Link to="javascript:;" activeClassName="active">Analytics</Link></li>
47+
<li><Link to="/drones-map" activeClassName="active">Drone Traffic</Link></li>
48+
<li><Link to="/mission-planner" activeClassName="active">MissionPlanner</Link></li>
8349
</ul>
84-
</Dropdown>
85-
</li>),
86-
(<li key="login" styleName="login">
87-
<LogInModalContainer />
88-
</li>),
89-
(<li key="signup" styleName="login">
90-
<SignupModalContainer />
91-
</li>),
92-
]
93-
);
94-
}
95-
return (
96-
[
97-
(<li key="notification" styleName="notifications" onClick={() => handleNotification(!toggleNotif)}>
98-
{notifications.length > 0 && <span styleName="counter">{notifications.length}</span>}
99-
{toggleNotif && <Notification
100-
notifications={notifications} toggleNotif={toggleNotif}
101-
handleNotification={handleNotification}
102-
/>}
103-
</li>),
104-
(<li key="welcome" styleName="user">
105-
<Dropdown title={<span>Welcome,<br />{user.name}</span>}>
50+
</li>
51+
);
52+
} else if (user.role === 'provider') {
53+
res = (
54+
<li styleName="pages">
10655
<ul>
10756
<li>
108-
<a href="javascript:">Profile</a>
57+
<Link to="/dashboard" activeClassName="active">Dashboard</Link>
58+
</li>
59+
<li>
60+
<Link to="/my-request" activeClassName="active">Requests</Link>
10961
</li>
11062
<li>
111-
<a href="javascript:" onClick={doLogout()}>Logout</a>
63+
<Link to="/my-drone" activeClassName="active">My Drones</Link>
11264
</li>
65+
<li>
66+
<Link to="/my-services" activeClassName="active">My Services</Link>
67+
</li>
68+
<li><Link to="javascript:;" activeClassName="active">Analytics</Link></li>
69+
<li><Link to="/drones-map" activeClassName="active">Drone Traffic</Link></li>
70+
<li><Link to="/mission-planner" activeClassName="active">MissionPlanner</Link></li>
11371
</ul>
114-
</Dropdown>
115-
</li>),
116-
]
117-
);
118-
})()
119-
}
120-
121-
</ul>
122-
</nav>
123-
);
72+
</li>
73+
);
74+
}
75+
return res;
76+
})()
77+
}
78+
{
79+
(() => {
80+
let res;
81+
if (!loggedUser) {
82+
res = (
83+
[
84+
(<li key="location" styleName="location">
85+
<i />
86+
{location}
87+
</li>),
88+
(<li key="search" styleName="search">
89+
<SearchInput placeholder="Type your search here..." />
90+
</li>),
91+
(<li key="category">
92+
<Dropdown title={selectedCategory}>
93+
<ul>
94+
{categories.map((item, i) => <li key={i}><a href="javascript:">{item.name}</a></li>)}
95+
</ul>
96+
</Dropdown>
97+
</li>),
98+
(<li key="login" styleName="login">
99+
<LogInModalContainer />
100+
</li>),
101+
(<li key="signup" styleName="login">
102+
<SignupModalContainer />
103+
</li>),
104+
]
105+
);
106+
} else {
107+
res = (
108+
[
109+
(<li key="notification" styleName="notifications" onClick={() => handleNotification(!toggleNotif)}>
110+
{notifications.length > 0 && <span styleName="counter">{notifications.length}</span>}
111+
{toggleNotif && <Notification
112+
notifications={notifications} toggleNotif={toggleNotif}
113+
handleNotification={handleNotification}
114+
/>}
115+
</li>),
116+
(<li key="welcome" styleName="user">
117+
<Dropdown
118+
onRef={(dropdown) => {
119+
if (dropdown) {
120+
hideUserDropdown = dropdown.hide;
121+
}
122+
}}
123+
title={<span>Welcome,<br />{user.name}</span>}
124+
>
125+
<ul>
126+
<li>
127+
<a href="javascript:" onClick={() => hideUserDropdown()}>
128+
Profile
129+
</a>
130+
</li>
131+
<li>
132+
<a
133+
href="javascript:;"
134+
onClick={() => {
135+
hideUserDropdown();
136+
logoutAction();
137+
}}
138+
>Logout</a>
139+
</li>
140+
</ul>
141+
</Dropdown>
142+
</li>),
143+
]
144+
);
145+
}
146+
return res;
147+
})()
148+
}
149+
</ul>
150+
</nav>
151+
);
152+
}
124153

125154
Header.propTypes = {
126-
routes: PropTypes.any.isRequired,
155+
// routes: PropTypes.any.isRequired,
127156
location: PropTypes.string.isRequired,
128157
selectedCategory: PropTypes.string.isRequired,
129158
categories: PropTypes.array.isRequired,
130159
notifications: PropTypes.array.isRequired,
131160
user: PropTypes.object.isRequired,
132161
handleNotification: PropTypes.func,
133-
doLogout: PropTypes.func.isRequired,
162+
logoutAction: PropTypes.func.isRequired,
134163
toggleNotif: PropTypes.bool,
135164
loggedUser: PropTypes.bool,
136165
};

‎src/containers/HeaderContainer.js

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,24 @@
11
import Header from 'components/Header';
22
import {asyncConnect} from 'redux-connect';
3-
import {actions, toggleNotification, loginAction, logoutAction, logout} from '../store/modules/global';
3+
import {actions, toggleNotification, loginAction, logoutAction} from '../store/modules/global';
44

55
const resolve = [{
66
promise: () => Promise.resolve(),
77
}];
88

9-
const mapState = (state) => ({...state.global, doLogout: logout});
9+
const mapState = (state) => ({...state.global});
10+
11+
/*
12+
TODO: This is not used anymore, should be checked if this is safe to remove
13+
(i.e. if the toggleNotification and loginAction actions are part of
14+
the acetions object, injected into the asyncConnect call below).
1015
1116
const mapDispatchToProps = (dispatch) => ({
1217
handleNotification: (value) => {
1318
dispatch(toggleNotification(value));
1419
},
1520
handleLogin: (userObj) => dispatch(loginAction(userObj)),
1621
});
22+
*/
1723

1824
export default asyncConnect(resolve, mapState, {...actions, logoutAction})(Header);
19-

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy