Logout working

client/components/pages/login.jsx

@@ -25,7 +25,7 @@ const LogIn = props => {
 					handleSubmit(emailElement.value, passwordElement.value)
 						.then(res => res ? alert(res) : null)
 						.then(() => emailElement.value = passwordElement.value = '') //clear input
-						.then(() => props.history.push('/'))
+						.then(() => { window.location.reload(true); }) //BUFGIX: force reload of the header element
 						.catch(e => console.error(e))
 					;
 				}

client/components/panels/header.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
+import { useCookies } from 'react-cookie';
 
 const Visitor = () => {
 	return (
 		<div>
 			<a href='/signup'>Sign Up</a>
+			<em> - </em>
 			<a href='/login'>Log In</a>
 		</div>
 	);
@@ -13,16 +15,34 @@ const Member = () => {
 	return (
 		<div>
 			<a href='/account'>Account</a>
-			<a href='/logout'>Log out</a>
+			<em> - </em>
+			<a href='/' onClick={logout}>Log out</a>
 		</div>
 	);
 };
 
+const logout = async () => {
+	await fetch('/api/accounts/logout')
+		.catch(e => console.error(e))
+	;
+};
+
 const Header = () => {
+	const [cookies, setCookie] = useCookies(['loggedin']);
+
+	let Options;
+
+	//check for logged in/out status
+	if (cookies['loggedin']) {
+		Options = Member;
+	} else {
+		Options = Visitor;
+	}
+
 	return (
 		<header>
 			<h1><a href='/'>MERN Template</a></h1>
-			<Visitor />
+			<Options />
 		</header>
 	);
 };