From c50319da662e48c58b2cd74cad4eaed3628b0f1a Mon Sep 17 00:00:00 2001
From: "Dr. Sergey Pogodin" <dr.pogodin@gmail.com>
Date: Wed, 4 Jan 2017 21:11:09 +0100
Subject: [PATCH 1/2] Fix of the Logout button in the header's dropdown

It resolves the issue #18, but, probably, some further work on
refactoring of the related code is necessary.
---
 src/components/Dropdown/Dropdown.jsx  |  17 +-
 src/components/Dropdown/Dropdown.scss |  18 +-
 src/components/Header/Header.jsx      | 239 +++++++++++++++-----------
 src/containers/HeaderContainer.js     |  11 +-
 src/store/modules/global.js           |  49 +++---
 5 files changed, 182 insertions(+), 152 deletions(-)

diff --git a/src/components/Dropdown/Dropdown.jsx b/src/components/Dropdown/Dropdown.jsx
index d0a020b..5412451 100644
--- a/src/components/Dropdown/Dropdown.jsx
+++ b/src/components/Dropdown/Dropdown.jsx
@@ -3,18 +3,17 @@ import CSSModules from 'react-css-modules';
 import ReactDropdown, {DropdownTrigger, DropdownContent} from 'react-simple-dropdown';
 import styles from './Dropdown.scss';
 
-export const Dropdown = ({title, children}) => (
-  <div styleName="dropdown">
-    <ReactDropdown>
-      <DropdownTrigger className={styles.trigger}>{title}</DropdownTrigger>
-      <DropdownContent className={styles.content}>
-        {children}
-      </DropdownContent>
-    </ReactDropdown>
-  </div>
+export const Dropdown = ({onRef, title, children}) => (
+  <ReactDropdown ref={onRef}>
+    <DropdownTrigger className={styles.trigger}>{title}</DropdownTrigger>
+    <DropdownContent className={styles.content}>
+      {children}
+    </DropdownContent>
+  </ReactDropdown>
 );
 
 Dropdown.propTypes = {
+  onRef: PropTypes.func,
   title: PropTypes.any.isRequired,
   children: PropTypes.any.isRequired,
 };
diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss
index 9acd9d2..61de447 100644
--- a/src/components/Dropdown/Dropdown.scss
+++ b/src/components/Dropdown/Dropdown.scss
@@ -1,18 +1,12 @@
-.dropdown {
-  :global {
-    .dropdown {
-      display: inline-block;
-    }
-
-
-    .dropdown--active .dropdown__content {
-      display: block;
-    }
+:global {
+  .dropdown {
+    display: inline-block;
+  }
+  .dropdown--active .dropdown__content {
+    display: block;
   }
 }
 
-
-
 .content {
   display: none;
   position: absolute;
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 77383d8..55e9742 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -8,129 +8,158 @@ import Dropdown from '../Dropdown';
 import Notification from '../Notification';
 import styles from './Header.scss';
 
-export const Header = ({
+/**
+ * TODO: This component cries: 'REFACTOR ME!'
+ * Seriously, it is such a mess now, should be split into separate sub-components!
+ */
+
+export function Header({
   location, selectedCategory, categories, user, notifications,
-  routes, handleNotification, doLogout, toggleNotif, loggedUser,
-}) => (
+  handleNotification, logoutAction, toggleNotif, loggedUser,
+}) {
+  // Holds a reference to the function which hides the user dropdown (Profile,
+  // Logout, etc.).
+  let hideUserDropdown;
 
-  <nav styleName="header">
-    <ul>
-      <li styleName="branding">
-        DRONE MARKET
-      </li>
-      {
-        (() => {
-          if (user.role == 'consumer') {
-            return (
-              <li styleName="pages">
-                <ul>
-                  <li>
-                    <Link to="/home" activeClassName="active">Home</Link>
-                  </li>
-                  <li>
-                    <Link to="/my-request-status" activeClassName="active">My Requests</Link>
-                  </li>
-                  <li>
-                    <Link to="/browse-provider" activeClassName="active">Browse Services</Link>
-                  </li>
-                  <li><Link to="javascript:;" activeClassName="active">Analytics</Link></li>
-                  <li><Link to="/drones-map" activeClassName="active">Drone Traffic</Link></li>
-                  <li><Link to="/mission-planner" activeClassName="active">MissionPlanner</Link></li>
-                </ul>
-              </li>
-            );
-          } else if (user.role == 'provider') {
-            return (
-              <li styleName="pages">
-                <ul>
-                  <li>
-                    <Link to="/dashboard" activeClassName="active">Dashboard</Link>
-                  </li>
-                  <li>
-                    <Link to="/my-request" activeClassName="active">Requests</Link>
-                  </li>
-                  <li>
-                    <Link to="/my-drone" activeClassName="active">My Drones</Link>
-                  </li>
-                  <li>
-                    <Link to="/my-services" activeClassName="active">My Services</Link>
-                  </li>
-                  <li><Link to="javascript:;" activeClassName="active">Analytics</Link></li>
-                  <li><Link to="/drones-map" activeClassName="active">Drone Traffic</Link></li>
-                  <li><Link to="/mission-planner" activeClassName="active">MissionPlanner</Link></li>
-                </ul>
-              </li>
-            );
-          }
-        })()
-      }
-      {
-        (() => {
-          if (!loggedUser) {
-            return (
-            [
-              (<li key="location" styleName="location">
-                <i />
-                {location}
-              </li>),
-              (<li key="search" styleName="search">
-                <SearchInput placeholder="Type your search here..." />
-              </li>),
-              (<li key="category">
-                <Dropdown title={selectedCategory}>
+  return (
+    <nav styleName="header">
+      <ul>
+        <li styleName="branding">
+          DRONE MARKET
+        </li>
+        {
+          (() => {
+            let res;
+            if (user.role === 'consumer') {
+              res = (
+                <li styleName="pages">
                   <ul>
-                    {categories.map((item, i) => <li key={i}><a href="javascript:">{item.name}</a></li>)}
+                    <li>
+                      <Link to="/home" activeClassName="active">Home</Link>
+                    </li>
+                    <li>
+                      <Link to="/my-request-status" activeClassName="active">My Requests</Link>
+                    </li>
+                    <li>
+                      <Link to="/browse-provider" activeClassName="active">Browse Services</Link>
+                    </li>
+                    <li><Link to="javascript:;" activeClassName="active">Analytics</Link></li>
+                    <li><Link to="/drones-map" activeClassName="active">Drone Traffic</Link></li>
+                    <li><Link to="/mission-planner" activeClassName="active">MissionPlanner</Link></li>
                   </ul>
-                </Dropdown>
-              </li>),
-              (<li key="login" styleName="login">
-                <LogInModalContainer />
-              </li>),
-              (<li key="signup" styleName="login">
-                <SignupModalContainer />
-              </li>),
-            ]
-            );
-          }
-          return (
-          [
-              (<li key="notification" styleName="notifications" onClick={() => handleNotification(!toggleNotif)}>
-                {notifications.length > 0 && <span styleName="counter">{notifications.length}</span>}
-                {toggleNotif && <Notification
-                  notifications={notifications} toggleNotif={toggleNotif}
-                  handleNotification={handleNotification}
-                />}
-              </li>),
-              (<li key="welcome" styleName="user">
-                <Dropdown title={<span>Welcome,<br />{user.name}</span>}>
+                </li>
+              );
+            } else if (user.role === 'provider') {
+              res = (
+                <li styleName="pages">
                   <ul>
                     <li>
-                      <a href="javascript:">Profile</a>
+                      <Link to="/dashboard" activeClassName="active">Dashboard</Link>
+                    </li>
+                    <li>
+                      <Link to="/my-request" activeClassName="active">Requests</Link>
                     </li>
                     <li>
-                      <a href="javascript:" onClick={doLogout()}>Logout</a>
+                      <Link to="/my-drone" activeClassName="active">My Drones</Link>
                     </li>
+                    <li>
+                      <Link to="/my-services" activeClassName="active">My Services</Link>
+                    </li>
+                    <li><Link to="javascript:;" activeClassName="active">Analytics</Link></li>
+                    <li><Link to="/drones-map" activeClassName="active">Drone Traffic</Link></li>
+                    <li><Link to="/mission-planner" activeClassName="active">MissionPlanner</Link></li>
                   </ul>
-                </Dropdown>
-              </li>),
-          ]
-          );
-        })()
-      }
-
-    </ul>
-  </nav>
-);
+                </li>
+              );
+            }
+            return res;
+          })()
+        }
+        {
+          (() => {
+            let res;
+            if (!loggedUser) {
+              res = (
+              [
+                (<li key="location" styleName="location">
+                  <i />
+                  {location}
+                </li>),
+                (<li key="search" styleName="search">
+                  <SearchInput placeholder="Type your search here..." />
+                </li>),
+                (<li key="category">
+                  <Dropdown title={selectedCategory}>
+                    <ul>
+                      {categories.map((item, i) => <li key={i}><a href="javascript:">{item.name}</a></li>)}
+                    </ul>
+                  </Dropdown>
+                </li>),
+                (<li key="login" styleName="login">
+                  <LogInModalContainer />
+                </li>),
+                (<li key="signup" styleName="login">
+                  <SignupModalContainer />
+                </li>),
+              ]
+              );
+            } else {
+              res = (
+              [
+                  (<li key="notification" styleName="notifications" onClick={() => handleNotification(!toggleNotif)}>
+                    {notifications.length > 0 && <span styleName="counter">{notifications.length}</span>}
+                    {toggleNotif && <Notification
+                      notifications={notifications} toggleNotif={toggleNotif}
+                      handleNotification={handleNotification}
+                    />}
+                  </li>),
+                  (<li key="welcome" styleName="user">
+                    <Dropdown
+                      onRef={(dropdown) => {
+                        if (dropdown) {
+                          hideUserDropdown = dropdown.hide;
+                        }
+                      }}
+                      title={<span>Welcome,<br />{user.name}</span>}
+                    >
+                      <ul>
+                        <li>
+                          <a href="javascript:" onClick={() => hideUserDropdown()}>
+                            Profile
+                          </a>
+                        </li>
+                        <li>
+                          <a
+                            href="javascript:;"
+                            onClick={() => {
+                              hideUserDropdown();
+                              logoutAction();
+                            }}
+                          >Logout</a>
+                        </li>
+                      </ul>
+                    </Dropdown>
+                  </li>),
+              ]
+              );
+            }
+            return res;
+          })()
+        }
+      </ul>
+    </nav>
+  );
+}
 
 Header.propTypes = {
-  routes: PropTypes.any.isRequired,
+  // routes: PropTypes.any.isRequired,
   location: PropTypes.string.isRequired,
   selectedCategory: PropTypes.string.isRequired,
   categories: PropTypes.array.isRequired,
   notifications: PropTypes.array.isRequired,
   user: PropTypes.object.isRequired,
   handleNotification: PropTypes.func,
-  doLogout: PropTypes.func.isRequired,
+  logoutAction: PropTypes.func.isRequired,
   toggleNotif: PropTypes.bool,
   loggedUser: PropTypes.bool,
 };
diff --git a/src/containers/HeaderContainer.js b/src/containers/HeaderContainer.js
index 99ad526..4269472 100644
--- a/src/containers/HeaderContainer.js
+++ b/src/containers/HeaderContainer.js
@@ -1,12 +1,17 @@
 import Header from 'components/Header';
 import {asyncConnect} from 'redux-connect';
-import {actions, toggleNotification, loginAction, logoutAction, logout} from '../store/modules/global';
+import {actions, toggleNotification, loginAction, logoutAction} from '../store/modules/global';
 
 const resolve = [{
   promise: () => Promise.resolve(),
 }];
 
-const mapState = (state) => ({...state.global, doLogout: logout});
+const mapState = (state) => ({...state.global});
+
+/*
+  TODO: This is not used anymore, should be checked if this is safe to remove
+  (i.e. if the toggleNotification and loginAction actions are part of
+  the acetions object, injected into the asyncConnect call below).
 
 const mapDispatchToProps = (dispatch) => ({
   handleNotification: (value) => {
@@ -14,6 +19,6 @@ const mapDispatchToProps = (dispatch) => ({
   },
   handleLogin: (userObj) => dispatch(loginAction(userObj)),
 });
+*/
 
 export default asyncConnect(resolve, mapState, {...actions, logoutAction})(Header);
-
diff --git a/src/store/modules/global.js b/src/store/modules/global.js
index 14a4798..eb0ecdc 100644
--- a/src/store/modules/global.js
+++ b/src/store/modules/global.js
@@ -4,18 +4,10 @@ import UserApi from 'api/User.js';
 import config from '../../config';
 
 import APIService from 'services/APIService';
-const userApi = new UserApi(config.api.basePath);
 
-const userInfoKey = 'userInfo';
+const userApi = new UserApi(config.api.basePath);
 
-function loadUserInfo() {
-  userInfo = localStorage.getItem(userInfoKey);
-  if (userInfo) {
-    userInfo = JSON.parse(userInfo);
-    APIService.accessToken = userInfo.accessToken;
-  }
-  return userInfo;
-}
+const USER_INFO_KEY = 'userInfo';
 
 // ------------------------------------
 // Actions
@@ -25,12 +17,21 @@ let hasError = false;
 let errorText = '';
 let userInfo = {};
 
+function loadUserInfo() {
+  userInfo = localStorage.getItem(USER_INFO_KEY);
+  if (userInfo) {
+    userInfo = JSON.parse(userInfo);
+    APIService.accessToken = userInfo.accessToken;
+  }
+  return userInfo;
+}
+
 export const sendLoginRequest = (values) => new Promise((resolve) => {
   userApi.login(values.email, values.password).then((authResult) => {
     isLogged = true;
     hasError = false;
     userInfo = authResult;
-    localStorage.setItem(userInfoKey, JSON.stringify(authResult));
+    localStorage.setItem(USER_INFO_KEY, JSON.stringify(authResult));
     if (authResult.user.role === 'consumer') {
       browserHistory.push('/browse-provider');
     } else if (authResult.user.role === 'provider') {
@@ -61,13 +62,6 @@ export const sendSignupRequest = (values) => new Promise((resolve) => {
   resolve();
 });
 
-export const logout = () => async(dispatch) => {
-  localStorage.removeItem(userInfoKey);
-  console.log('user info removed');
-  userInfo = undefined;
-  isLogged = false;
-};
-
 export const toggleNotification = createAction('TOGGLE_NOTIFICATION');
 
 export const loginAction = createAction('LOGIN_ACTION');
@@ -79,7 +73,7 @@ export const signupAction = createAction('SIGNUP_ACTION');
 export const actions = {
   toggleNotification, loginAction, logoutAction,
 };
-// console.log(loginAction(true))
+
 // ------------------------------------
 // Reducer
 // ------------------------------------
@@ -90,15 +84,24 @@ export default handleActions({
   [loginAction]: (state) => ({
     ...state, loggedUser: isLogged, hasError, errorText, user: (loadUserInfo() ? loadUserInfo().user : {}),
   }),
-  [logoutAction]: (state) => ({
-    ...state, loggedUser: isLogged, hasError, errorText, user: (loadUserInfo() ? loadUserInfo().user : {}),
-  }),
+  [logoutAction]: (state) => {
+    localStorage.removeItem(USER_INFO_KEY);
+    APIService.accessToken = '';
+    isLogged = false;
+    return ({
+      ...state,
+      loggedUser: false,
+      hasError,
+      errorText,
+      user: {},
+    });
+  },
   [signupAction]: (state) => ({
     ...state, loggedUser: isLogged, hasError, errorText, user: (loadUserInfo() ? loadUserInfo().user : {}),
   }),
 }, {
   toggleNotif: false,
-  loggedUser: loadUserInfo() != undefined,
+  loggedUser: Boolean(loadUserInfo()),
   location: 'Jakarta, Indonesia',
   selectedCategory: 'Category',
   categories: [

From 9f3acf4351b44ff4a721c60d3f5e63afd3d66a74 Mon Sep 17 00:00:00 2001
From: "Dr. Sergey Pogodin" <dr.pogodin@gmail.com>
Date: Wed, 4 Jan 2017 22:32:10 +0100
Subject: [PATCH 2/2] Fixes issue #18

Adds redirect to /home on logout.

Fixes issue #18
---
 src/store/modules/global.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/store/modules/global.js b/src/store/modules/global.js
index eb0ecdc..89a6728 100644
--- a/src/store/modules/global.js
+++ b/src/store/modules/global.js
@@ -7,6 +7,10 @@ import APIService from 'services/APIService';
 
 const userApi = new UserApi(config.api.basePath);
 
+//------------------------------------------------------------------------------
+// Constants
+
+const LOGOUT_ACTION = 'LOGOUT_ACTION';
 const USER_INFO_KEY = 'userInfo';
 
 // ------------------------------------
@@ -66,7 +70,12 @@ export const toggleNotification = createAction('TOGGLE_NOTIFICATION');
 
 export const loginAction = createAction('LOGIN_ACTION');
 
-export const logoutAction = createAction('LOGOUT_ACTION');
+export const logoutAction = () => dispatch => {
+  browserHistory.push('/home');
+  dispatch({
+    type: LOGOUT_ACTION
+  });
+}
 
 export const signupAction = createAction('SIGNUP_ACTION');
 
@@ -84,7 +93,7 @@ export default handleActions({
   [loginAction]: (state) => ({
     ...state, loggedUser: isLogged, hasError, errorText, user: (loadUserInfo() ? loadUserInfo().user : {}),
   }),
-  [logoutAction]: (state) => {
+  [LOGOUT_ACTION]: (state) => {
     localStorage.removeItem(USER_INFO_KEY);
     APIService.accessToken = '';
     isLogged = false;

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>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.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/topcoderinc/dsp-frontend/pull/25.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/topcoderinc/dsp-frontend/pull/25.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/topcoderinc/dsp-frontend/pull/25.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/topcoderinc/dsp-frontend/pull/25.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>