Merge pull request #16 from nushydude/11-add-login-and-sign-up-links-…

…to-navbar Add login logout signup buttons to menu and header
nushydude · Nov 4, 2023 · 06678d9 · 06678d9
2 parents b0e304e + 91916f7
commit 06678d9
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 18 deletions.
diff --git a/src/components/HamburgerMenu.styles.tsx b/src/components/HamburgerMenu.styles.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const Bar = styled.div<{ menuVisible?: boolean }>`
+const Bar = styled.div<{ menuVisible?: boolean }>`
   height: 4px;
   background-color: white;
   width: 24px;
@@ -33,17 +33,13 @@ export const MenuContainer = styled.div<{
   background-color: black;
   width: 100vw;
   top: ${({ offsetTop }) => offsetTop}px;
-  left: -20px;
+  left: -1rem;
   height: ${({ menuVisible, offsetTop }) =>
     menuVisible ? `calc(100vh - ${offsetTop}px)` : 0};
   transition: all 0.3s ease-in-out;
   overflow: hidden;
   z-index: 999;
 
-  @media (max-width: 640px) {
-    padding-top: 20px;
-  }
-
   a:link {
     text-decoration: none;
     color: white;

diff --git a/src/components/HamburgerMenu.tsx b/src/components/HamburgerMenu.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, useContext } from 'react';
 import { Link } from 'react-router-dom';
 import { useClickAway, useMedia } from 'react-use';
 import {
@@ -7,6 +7,9 @@ import {
   MiddleBar,
   TopBar,
 } from './HamburgerMenu.styles';
+import { routes } from '../config/routes';
+import { UserContext } from '../context/user';
+import Version from './Version';
 
 type Props = {
   links: Array<{ to: string; label: string; icon: string }>;
@@ -17,6 +20,8 @@ export const HamburgerMenu = ({ headerHeight, links }: Props) => {
   const ref = useRef<HTMLDivElement>(null);
   const [menuVisible, setMenuVisible] = useState(false);
   const isMobile = useMedia('(max-width: 640px)');
+  const { isLoggedIn, removeUser } = useContext(UserContext);
+
   useClickAway(ref, () => {
     setMenuVisible(false);
   });
@@ -41,7 +46,7 @@ export const HamburgerMenu = ({ headerHeight, links }: Props) => {
 
       <MenuContainer menuVisible={menuVisible} offsetTop={headerHeight}>
         {links.map(({ to, label, icon }, idx) => (
-          <Link key={idx} to={to}>
+          <Link key={idx} to={to} className="no-underline">
             <div
               className="w-full p-4 border-b-2 border-solid border-gray-300 hover:bg-gray-700 hover:text-white"
               onClick={() => setMenuVisible(false)}
@@ -50,6 +55,51 @@ export const HamburgerMenu = ({ headerHeight, links }: Props) => {
             </div>
           </Link>
         ))}
+
+        {!isLoggedIn ? (
+          <div className="p-4 text-center flex justify-evenly gap-2">
+            <Link
+              className="w-full no-underline visited:text-white bg-blue-500 hover:bg-blue-700 py-2 px-4 rounded"
+              to={routes.LOGIN}
+              onClick={(e) => {
+                e.stopPropagation();
+                setMenuVisible(false);
+              }}
+            >
+              <span className="text-white font-bold">Log in</span>
+            </Link>
+
+            <Link
+              className="w-full no-underline bg-white py-2 px-4 rounded"
+              to={routes.SIGNUP}
+              onClick={(e) => {
+                e.stopPropagation();
+                setMenuVisible(false);
+              }}
+            >
+              <span className="text-blue-500 hover:text-blue-700 font-bold">
+                Sign up
+              </span>
+            </Link>
+          </div>
+        ) : (
+          <div className="p-4">
+            <button
+              className="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+              onClick={(e) => {
+                e.stopPropagation();
+                removeUser();
+                setMenuVisible(false);
+              }}
+            >
+              Logout
+            </button>
+          </div>
+        )}
+
+        <div className="text-center">
+          <Version />
+        </div>
       </MenuContainer>
     </div>
   );

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,9 +1,11 @@
-import { NavLink } from 'react-router-dom';
+import { Link, NavLink } from 'react-router-dom';
 import { useMeasure } from 'react-use';
 import { routes } from '../config/routes';
 import { HamburgerMenu } from './HamburgerMenu';
 import { PageTitle } from './PageTitle';
 import Version from './Version';
+import { useContext } from 'react';
+import { UserContext } from '../context/user';
 
 const links = [
   { to: routes.SINGLE, label: 'Single Token', icon: '📈' },
@@ -13,18 +15,20 @@ const links = [
 ];
 
 export const Header = () => {
-  const [ref, { height }] = useMeasure<HTMLDivElement>();
+  const [ref, { x, y, width, height, top, right, bottom, left }] =
+    useMeasure<HTMLDivElement>();
+  const { removeUser, isLoggedIn } = useContext(UserContext);
+
+  console.log('headerHeight', x, y, width, height, top, right, bottom, left);
 
   return (
     <div
       data-testid="header"
-      className="px-2 bg-black text-white mb-2 fixed h-14 top-0 left-0 right-0 z-10 shadow-sm pt-4 pb-4 sm:h-10 sm:pt-2 sm:pb-2"
+      ref={ref}
+      className="w-full px-2 bg-black text-white mb-2 fixed h-14 top-0 left-0 right-0 z-10 shadow-sm pt-4 pb-4 sm:h-12 sm:pt-2 sm:pb-2"
     >
-      <div
-        ref={ref}
-        className="max-w-7xl mx-auto px-2 flex justify-between align-middle"
-      >
-        <div className="hidden sm:block">
+      <div className="max-w-7xl mx-auto px-2 flex justify-between align-middle">
+        <div className="hidden sm:flex sm:items-center">
           {links.map(({ to, label, icon }, idx) => (
             <NavLink
               className="mr-8 text-white hover:text-gray-300"
@@ -41,11 +45,44 @@ export const Header = () => {
           data-testid="mobile-container"
           className="flex align-middle sm:hidden"
         >
-          <HamburgerMenu links={links} headerHeight={height} />
+          <HamburgerMenu links={links} headerHeight={height + 16} />
           <PageTitle />
         </div>
 
-        <Version />
+        <div className="hidden sm:flex sm:items-center">
+          <div className="mr-4">
+            <Version />
+          </div>
+          {!isLoggedIn ? (
+            <>
+              <Link
+                className="no-underline visited:text-white bg-blue-500 hover:bg-blue-700 py-1 px-2 rounded mr-2"
+                to={routes.LOGIN}
+              >
+                <span className="text-white font-bold">Log in</span>
+              </Link>
+
+              <Link
+                className=" no-underline bg-white py-1 px-2  rounded"
+                to={routes.SIGNUP}
+              >
+                <span className="text-blue-500 hover:text-blue-700 font-bold">
+                  Sign up
+                </span>
+              </Link>
+            </>
+          ) : (
+            <button
+              className="bg-blue-500 hover:bg-blue-700 text-white font-bold px-2 py-1 rounded"
+              onClick={() => {
+                removeUser();
+              }}
+            >
+              Logout
+            </button>
+          )}
+        </div>
+        {/* <Version /> */}
       </div>
     </div>
   );

diff --git a/src/hooks/useRedirectOnLogin.ts b/src/hooks/useRedirectOnLogin.ts
@@ -0,0 +1,17 @@
+import { useHistory } from 'react-router-dom';
+import { routes } from '../config/routes';
+import { useContext, useEffect } from 'react';
+import { UserContext } from '../context/user';
+
+const useRedirectOnLogin = (redirectTo: string) => {
+  const { isLoggedIn } = useContext(UserContext);
+  const history = useHistory();
+
+  useEffect(() => {
+    if (isLoggedIn) {
+      history.replace(routes.SINGLE);
+    }
+  }, [isLoggedIn, history]);
+};
+
+export default useRedirectOnLogin;
diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx
@@ -1,11 +1,15 @@
 import { useContext } from 'react';
 import LoginForm, { FieldValues } from '../../components/LoginForm';
 import { config } from '../../config';
+import { routes } from '../../config/routes';
+import useRedirectOnLogin from '../../hooks/useRedirectOnLogin';
 import { UserContext } from '../../context/user';
 
 const LoginPage = () => {
   const { login } = useContext(UserContext);
 
+  useRedirectOnLogin(routes.BEST_DCA);
+
   const onSubmit = (fieldValues: FieldValues) =>
     fetch(`${config.API_URI}/api/auth/login`, {
       method: 'POST',

diff --git a/src/pages/SignupPage/SignupPage.tsx b/src/pages/SignupPage/SignupPage.tsx
@@ -2,9 +2,12 @@ import { useContext } from 'react';
 import SignupForm, { SubmitValues } from '../../components/SignupForm';
 import { config } from '../../config';
 import { UserContext } from '../../context/user';
+import useRedirectOnLogin from '../../hooks/useRedirectOnLogin';
+import { routes } from '../../config/routes';
 
 const SignupPage = () => {
   const { login } = useContext(UserContext);
+  useRedirectOnLogin(routes.BEST_DCA);
 
   const onSubmit = (fieldValues: SubmitValues) =>
     fetch(`${config.API_URI}/api/user`, {