krgamestudios/MERN-template
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Wrote CSS for a chatbox

Browse Source
This commit is contained in:
Kayne Ruse
2021-03-17 03:44:38 +11:00
parent e288a43519
commit 8561219542
7 changed files with 783 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/components/app.jsx
+4 -2
View File
@@ -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
+72
View File
@@ -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
+5
View File
@@ -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}
client/styles/popup-chat.css
+62
View File
@@ -0,0 +1,62 @@
.chat {
position: fixed;
bottom: 23px;
right: 28px;
width: 280px;
border: solid;
border-color: black;
border-width: 2px;
background-color: #CCC;
display: inline-block;
max-height: calc(50vh - 23px);
}
.chat > button.open {
color: white;
background-color: grey;
}
.chat > button.send {
color: white;
background-color: green;
}
.chat > button.close {
color: black;
background-color: red;
}
.chat > button {
width: 100%;
height: 2em;
opacity: 0.8;
}
.chat > button:hover {
opacity: 1;
}
.chat > .input {
width: calc(100% - 10px);
height: 2em;
}
.chat > .log {
min-height: 300px;
}
.chat > .log .username {
font-weight: bold;
}
.chat .scrollable {
margin: 0;
padding: 10px;
min-height: 280px;
max-height: calc(50vh - 23px - 20px - 6em);
overflow-y: scroll;
}
.chat ul {
list-style: none;
}