toby/web-drs-frontend
Archived
1
Fork 0
Code Issues Releases Activity

Tidy up index.tsx

Browse source
This commit is contained in:
Tobias Berger 2022-02-07 14:38:30 +00:00 committed by GitHub
parent 151fa83cb0
commit 5f69d817bf
1 changed files with 3 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/pages/index.tsx
View file

@ -33,7 +33,6 @@ export default function Index(): JSX.Element {
const [socketUrl, setSocketUrl] = useState("wss.tobot.tk:8085"); const [socketUrl, setSocketUrl] = useState("wss.tobot.tk:8085");
const messageInput = useRef<HTMLInputElement>(null); const messageInput = useRef<HTMLInputElement>(null);
const messageContainer = useRef<HTMLOListElement>(null);
const getName = useCallback( const getName = useCallback(
(id: string) => { (id: string) => {
@ -100,7 +99,6 @@ export default function Index(): JSX.Element {
const tryConnect = useCallback( const tryConnect = useCallback(
(opts: ConnectionOptions) => { (opts: ConnectionOptions) => {
// Don't reconnect, just send new desiredName
switch (webSocket.readyState) { switch (webSocket.readyState) {
case WebSocketReadyState.UNINSTANTIATED: case WebSocketReadyState.UNINSTANTIATED:
throw new Error("socket is not instantiated. This should not happen"); throw new Error("socket is not instantiated. This should not happen");
@ -151,7 +149,7 @@ export default function Index(): JSX.Element {
} as TextMessage); } as TextMessage);
}, [authorId, webSocket]); }, [authorId, webSocket]);
function handleTyping() { const handleTyping = useCallback(() => {
if ( if (
webSocket.readyState === WebSocketReadyState.OPEN && webSocket.readyState === WebSocketReadyState.OPEN &&
(shouldResendTyping || !currentlyTyping.includes(authorId)) (shouldResendTyping || !currentlyTyping.includes(authorId))
@ -163,7 +161,7 @@ export default function Index(): JSX.Element {
shouldResendTyping = false; shouldResendTyping = false;
setTimeout(() => (shouldResendTyping = true), 1000); setTimeout(() => (shouldResendTyping = true), 1000);
} }
} }, [authorId, currentlyTyping, webSocket]);
const typingIndicator = useMemo(() => { const typingIndicator = useMemo(() => {
if (currentlyTyping.length === 0) { if (currentlyTyping.length === 0) {
@ -224,16 +222,10 @@ export default function Index(): JSX.Element {
tryConnect={tryConnect} tryConnect={tryConnect}
webSocketReadyState={webSocket.readyState} webSocketReadyState={webSocket.readyState}
/> />
{/*
<span>Ready state: </span>
<span style={{ fontWeight: "bold" }}>
{WebSocketReadyState[webSocket.readyState]} ({webSocket.readyState})
</span>
*/}
</header> </header>
<div id="container"> <div id="container">
<section id="message-area"> <section id="message-area">
<ol ref={messageContainer} id="messages-container"> <ol id="messages-container">
{messageHistory.map((message, idx) => ( {messageHistory.map((message, idx) => (
<li className="message" key={idx}> <li className="message" key={idx}>
<MessageComponent <MessageComponent