signout functionality

jam-ui/.env.development.example

@@ -1,4 +1,5 @@
 HOST=beta.jamkazam.local
 PORT=4000
+REACT_APP_ORIGIN=jamkazam.local
 REACT_APP_LEGACY_BASE_URL=http://www.jamkazam.local:3000
 REACT_APP_API_BASE_URL=http://www.jamkazam.local:3000/api

jam-ui/.env.production

@@ -1,4 +1,5 @@
 HOST=beta.jamkazam.com
 PORT=4000
+REACT_APP_ORIGIN=jamkazam.com
 REACT_APP_LEGACY_BASE_URL=https://www.jamkazam.com
 REACT_APP_API_BASE_URL=https://www.jamkazam.com/api

jam-ui/cypress/integration/layout/navigation.spec.js

@@ -39,6 +39,15 @@ describe("Top Navigation", () => {
       showSubscribeToUpdates()
       showProfileDropdown()
     })
+
+    it.only('sign out', () => {
+      
+      cy.get('[data-testid=navbarTopProfileDropdown]').contains('Peter Pan').trigger('mouseover')
+      cy.stubUnauthenticate()
+      cy.get('[data-testid=navbarTopProfileDropdown]').contains('Sign out').click()
+      cy.get('[data-testid=navbarTopProfileDropdown]').should('not.exist')
+      cy.contains("Sign in to begin")
+    })
   })
 
   describe('header notifications', () => {
@@ -59,6 +68,5 @@ describe("Top Navigation", () => {
     })
   })
 
-  
 });
 

jam-ui/src/Main.js

@@ -7,6 +7,7 @@ import toggleStylesheet from './helpers/toggleStylesheet';
 import { getItemFromStore, setItemToStore, themeColors } from './helpers/utils';
 import store from './store/store';
 import { Provider } from 'react-redux';
+import { CookiesProvider } from 'react-cookie';
 
 const Main = props => {
   const [isFluid, setIsFluid] = useState(getItemFromStore('isFluid', settings.isFluid));
@@ -118,11 +119,13 @@ const Main = props => {
   }
 
   return <AppContext.Provider value={value}>
-          <AuthProvider>
-            <Provider store={store}>
-              {props.children}
-            </Provider>
-          </AuthProvider>
+          <CookiesProvider>
+            <AuthProvider>
+              <Provider store={store}>
+                {props.children}
+              </Provider>
+            </AuthProvider>
+          </CookiesProvider>
     </AppContext.Provider>;
 };
 

jam-ui/src/components/auth/JKLoginRequest.js

@@ -12,7 +12,7 @@ function JKLoginRequest() {
           <Card>
             <CardBody className="fs--1 font-weight-normal p-5">
               <Row className="justify-content-center">
-                <h3 className="mt-3 mt-md-4 font-weight-normal fs-2">Signin to begin</h3>
+                <h3 className="mt-3 mt-md-4 font-weight-normal fs-2">Sign in to begin</h3>
                 <p>Please sign in to your jamkazam account</p>
               </Row>
               <Row className="justify-content-center">

jam-ui/src/components/navbar/JKProfileDropdown.js

@@ -1,59 +1,59 @@
 //import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React, { useState, useEffect } from 'react';
-import { Link, useHistory } from 'react-router-dom';
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
 import { DropdownItem, DropdownMenu, DropdownToggle, Dropdown } from 'reactstrap';
 import { useAuth } from '../../context/AuthContext';
 import JKProfileAvatar from '../profile/JKProfileAvatar';
+import { useCookies } from 'react-cookie';
 
 const ProfileDropdown = () => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const toggle = () => setDropdownOpen(prevState => !prevState);
-  const {currentUser, setCurrentUser} = useAuth();
-  const history = useHistory();
-  //const [cookies, setCookie, removeCookie] = useCookies(['remember_token']);
+  const { currentUser, setCurrentUser } = useAuth();
+ 
+  const [cookies, setCookie, removeCookie] = useCookies(['remember_token']);
 
-  const handleLogout = () => {
+  const handleLogout = event => {
+    event.preventDefault();
+    removeCookie('remember_token', {
+      domain: `.${process.env.REACT_APP_ORIGIN}`
+    });
     setCurrentUser(null);
-    console.log("signout...");
-  }
-
+    window.location.reload(false);
+  };
 
   return (
-    
     <>
-    
-    <Dropdown
-      nav
-      inNavbar
-      data-testid="navbarTopProfileDropdown"
-      isOpen={dropdownOpen}
-      toggle={toggle}
-      onMouseOver={() => {
-        let windowWidth = window.innerWidth;
-        windowWidth > 992 && setDropdownOpen(true);
-      }}
-      onMouseLeave={() => {
-        let windowWidth = window.innerWidth;
-        windowWidth > 992 && setDropdownOpen(false);
-      }}
-    >
-      <DropdownToggle nav className="pr-0">
-        <JKProfileAvatar url={currentUser.photo_url} className="d-block d-lg-none d-xl-none" />
-        <span className="d-none d-lg-block">
-          {currentUser && currentUser.name}
-        </span>
-      </DropdownToggle>
-      <DropdownMenu right className="dropdown-menu-card">
-        <div className="bg-white rounded-soft py-2">
-          <DropdownItem tag={Link} to="/pages/settings">
-            My Profile
-          </DropdownItem> 
-          <DropdownItem onClick={handleLogout}>
-            Sign out
-          </DropdownItem>
-        </div>
-      </DropdownMenu>
-    </Dropdown>
+    {currentUser && 
+      <Dropdown
+        nav
+        inNavbar
+        data-testid="navbarTopProfileDropdown"
+        isOpen={dropdownOpen}
+        toggle={toggle}
+        onMouseOver={() => {
+          let windowWidth = window.innerWidth;
+          windowWidth > 992 && setDropdownOpen(true);
+        }}
+        onMouseLeave={() => {
+          let windowWidth = window.innerWidth;
+          windowWidth > 992 && setDropdownOpen(false);
+        }}
+      >
+        <DropdownToggle nav className="pr-0">
+          <JKProfileAvatar url={currentUser.photo_url} className="d-block d-lg-none d-xl-none" />
+          <span className="d-none d-lg-block">{currentUser && currentUser.name}</span>
+        </DropdownToggle>
+        <DropdownMenu right className="dropdown-menu-card">
+          <div className="bg-white rounded-soft py-2">
+            <DropdownItem tag={Link} to="/pages/settings">
+              My Profile
+            </DropdownItem>
+            <DropdownItem onClick={handleLogout}>Sign out</DropdownItem>
+          </div>
+        </DropdownMenu>
+      </Dropdown>
+      }
     </>
   );
 };

jam-ui/src/layouts/JKDashboardLayout.js

@@ -17,30 +17,30 @@ const AUTH_STAGES = {
 
 const DashboardLayout = ({ location }) => {
   
-  const { setCurrentUser } = useAuth();
+  const { currentUser, setCurrentUser } = useAuth();
   const [stage, setStage] = useState(AUTH_STAGES['loading']);
 
   const fetchCurrentUser = () => {
     getCurrentUser()
-      .then(resp => {
-        if (resp.ok) {
-          return resp.json();
-        }
-      })
-      .then(user => {
-        setCurrentUser(user);
-        window.currentUser = user;
-        setStage(AUTH_STAGES['authenticated']);
-      })
-      .catch(error => {
-        setStage(AUTH_STAGES['unauthenticated']);
-        console.log(error);
-      });
+    .then(resp => {
+      if (resp.ok) {
+        return resp.json();
+      }
+    })
+    .then(user => {
+      setCurrentUser(user);
+      window.currentUser = user;
+      setStage(AUTH_STAGES['authenticated']);
+    })
+    .catch(error => {
+      setStage(AUTH_STAGES['unauthenticated']);
+      console.log(error);
+    });
   };
 
   useEffect(() => {
     fetchCurrentUser();
-  }, []);
+  }, [location.pathname]);
 
   useEffect(() => {
     window.scrollTo(0, 0);