Wrote CSS for a chatbox

client/components/app.jsx

@@ -10,8 +10,9 @@ import Markdown from './panels/markdown';
 //import a styling template here
 
 //common components
-import Header from './panels/header.jsx';
-import Footer from './panels/footer.jsx';
+import Header from './panels/header';
+import Footer from './panels/footer';
+import PopupChat from './panels/popup-chat';
 
 const App = props => {
 	//default render
@@ -32,6 +33,7 @@ const App = props => {
 
 					<LazyRoute path='*' component={() => import('./pages/not-found')} />
 				</Switch>
+				<PopupChat />
 				<Footer />
 		</BrowserRouter>
 	);

client/components/panels/popup-chat.jsx

@@ -0,0 +1,72 @@
+import React, { useState, useRef } from 'react';
+//import { io } from 'socket.io-client';
+
+import '../../styles/popup-chat.css';
+
+//const socket = io(`${process.env.CHAT_URI}/chat`);
+
+const PopupChat = props => {
+	const [open, setOpen] = useState(false);
+	const [chatlog, setChatlog] = useState([
+		{ username: 'foo', text: 'bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar '},
+		{ username: 'foo', text: 'bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar '},
+		{ username: 'foo', text: 'bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar '},
+		{ username: 'foo', text: 'bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar '},
+		{ username: 'foo', text: 'bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar '},
+		{ username: 'foo', text: 'bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar '},
+		{ username: 'foo', text: 'bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar '},
+		{ username: 'foo', text: 'bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar '},
+		{ username: 'foo', text: 'bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar '},
+		{ username: 'foo', text: 'bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar '},
+		{ username: 'foo', text: 'bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar '},
+		{ username: 'foo', text: 'bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar '},
+		{ username: 'foo', text: 'bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar '},
+		{ username: 'foo', text: 'bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar '},
+		{ username: 'foo', text: 'bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar '},
+		{ username: 'foo', text: 'bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar '},
+		{ username: 'foo', text: 'bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar '}
+	]);
+
+	const inputRef = useRef();
+
+	if (!open) {
+		return (
+			<div className='chat'>
+				<button type='button' className='open' onClick={() => handleOpen(setOpen)}>Open Chat</button>
+			</div>
+		);
+	}
+
+	return (
+		<div className='chat'>
+			<div className='log'>
+				<ul className='scrollable'>
+					{chatlog.map((line, index) => <li key={index} className='line'><span className='username'>{line.username}: </span><span className='text'>{line.text}</span></li>)}
+				</ul>
+			</div>
+			<input type='text' className='input' placeholder='message' ref={inputRef}></input>
+			<button type='button' className='send' onClick={() => handleSend(inputRef)}>Send</button>
+			<button type='button' className='close' onClick={() => handleClose(setOpen)}>Close Chat</button>
+		</div>
+	);
+};
+
+const handleOpen = setOpen => {
+	setOpen(true);
+
+	//TODO
+};
+
+const handleClose = setOpen => {
+	setOpen(false);
+
+	//TODO
+};
+
+const handleSend = inputRef => {
+	//TODO
+
+	inputRef.current.value = '';
+};
+
+export default PopupChat;

client/components/utilities/token-provider.jsx

@@ -77,6 +77,11 @@ const TokenProvider = props => {
 		});
 	};
 
+	//access the refreshed token via callback
+	const tokenCallback = async (cb) => {
+		//TODO: tokenCallback
+	};
+
 	return (
 		<TokenContext.Provider value={{ accessToken, refreshToken, setAccessToken, setRefreshToken, tokenFetch, getPayload: () => decode(accessToken) }}>
 			{props.children}