Tokens are tentatively working correctly, read more

They also seem to be refreshing correctly too, when tokenFetch() is used.

client/components/panels/header.jsx

@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
+import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
 
-import { getToken, getRefreshToken, clearToken } from '../../utilities/token-client';
+import { TokenContext } from '../utilities/token-provider';
 
 const Visitor = () => {
 	return (
@@ -14,51 +14,44 @@ const Visitor = () => {
 };
 
 const Member = () => {
+	const authTokens = useContext(TokenContext);
+
 	return (
 		<div>
 			<Link to='/account'>Account</Link>
 			<em> - </em>
-			<Link to='/' onClick={logout}>Log out</Link>
+			{ /* Logout button logs you out of the server too */ }
+			<Link to='/' onClick={async () => {
+				const result = await authTokens.tokenFetch(`${process.env.AUTH_URI}/logout`, { //NOTE: this gets overwritten as a bugfix
+					method: 'DELETE',
+					headers: {
+						'Content-Type': 'application/json',
+						'Access-Control-Allow-Origin': '*'
+					},
+					body: JSON.stringify({
+						token: authTokens.refreshToken
+					})
+				});
+
+				//any problems?
+				if (!result.ok) {
+					console.error(await result.text());
+				} else {
+					authTokens.setAccessToken('');
+					authTokens.setRefreshToken('');
+				}
+			}}>Log out</Link>
 		</div>
 	);
 };
 
-const logout = async () => {
-	console.log('loging out')
-	const token = getToken();
-
-	//send to the auth server
-	const result = await fetch(`${process.env.AUTH_URI}/logout`, {
-		method: 'DELETE',
-		headers: {
-			'Content-Type': 'application/json',
-			'Access-Control-Allow-Origin': '*',
-			'Authorization': `Bearer ${token}`
-		},
-		body: JSON.stringify({
-			token: getRefreshToken()
-		})
-	});
-
-	if (result.ok) {
-		await clearToken();
-	} else {
-		console.error(await result.text());
-	}
-};
-
 const Header = () => {
-	const [tok, setTok] = useState(null);
-
-	getToken()
-		.then(token => setTok(token))
-		.catch(e => console.error(e))
-	;
+	const authTokens = useContext(TokenContext);
 
 	return (
 		<header>
 			<h1><Link to='/'>MERN Template</Link></h1>
-			{ tok ? <Member /> : <Visitor /> }
+			{ authTokens.accessToken ? <Member /> : <Visitor /> }
 		</header>
 	);
 };