From d4ffe0264526716bc2a4746e200921d0cb4e714b Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Sun, 25 Dec 2022 16:03:54 -0800 Subject: [PATCH] Fix title getting lost due to multiple callbacks firing. Closes #2351 --- .../TitleNotifier/TitleNotifier.tsx | 58 ++++++++++--------- web/components/layouts/Main.tsx | 4 +- 2 files changed, 34 insertions(+), 28 deletions(-) diff --git a/web/components/TitleNotifier/TitleNotifier.tsx b/web/components/TitleNotifier/TitleNotifier.tsx index 4ff3a3d0b..e095f636e 100644 --- a/web/components/TitleNotifier/TitleNotifier.tsx +++ b/web/components/TitleNotifier/TitleNotifier.tsx @@ -5,31 +5,33 @@ * page is backgrounded, this component will update the title to reflect it. * * @component */ -import { FC, useEffect } from 'react'; +import { FC, useEffect, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { serverStatusState, chatMessagesAtom } from '../stores/ClientConfigStore'; -export const TitleNotifier: FC = () => { +export type TitleNotifierProps = { + name: string; +}; + +export const TitleNotifier: FC = ({ name }) => { const chatMessages = useRecoilValue(chatMessagesAtom); const serverStatus = useRecoilValue(serverStatusState); - let backgrounded = false; - let defaultTitle = ''; + const [backgrounded, setBackgrounded] = useState(false); + + const { online } = serverStatus; const setTitle = (title: string) => { - console.trace('Debug: Setting title to', title); - window.document.title = title; + document.title = title; }; const onBlur = () => { - console.log('onBlur: Saving defaultTitle as', window.document.title); - backgrounded = true; - defaultTitle = window.document.title; + setBackgrounded(true); }; const onFocus = () => { - backgrounded = false; - setTitle(defaultTitle); + setBackgrounded(false); + setTitle(name); }; const listenForEvents = () => { @@ -38,40 +40,44 @@ export const TitleNotifier: FC = () => { window.addEventListener('focus', onFocus); }; - useEffect(() => { - console.log('useEffect: Saving defaultTitle as', window.document.title); + const removeEvents = () => { + window.removeEventListener('blur', onBlur); + window.removeEventListener('focus', onFocus); + }; - defaultTitle = window.document.title; + useEffect(() => { listenForEvents(); return () => { - window.removeEventListener('focus', onFocus); - window.removeEventListener('blur', onBlur); + removeEvents(); }; - }, []); + }, [name]); useEffect(() => { - const { online } = serverStatus; - if (!backgrounded || !online) { return; } - setTitle(`💬 :: ${defaultTitle}`); - }, [chatMessages]); + + // Only alert on real chat messages from people. + const lastMessage = chatMessages[chatMessages.length - 1]; + if (lastMessage.type !== 'CHAT') { + return; + } + + setTitle(`💬 :: ${name}`); + }, [chatMessages, name]); useEffect(() => { if (!backgrounded) { return; } - const { online } = serverStatus; - if (online) { - setTitle(` 🟢 :: ${defaultTitle}`); + setTitle(` 🟢 :: ${name}`); } else if (!online) { - setTitle(` 🔴 :: ${defaultTitle}`); + setTitle(` 🔴 :: ${name}`); } - }, [serverStatusState]); + }, [online, name]); return null; }; diff --git a/web/components/layouts/Main.tsx b/web/components/layouts/Main.tsx index c609486c9..1ead29ee9 100644 --- a/web/components/layouts/Main.tsx +++ b/web/components/layouts/Main.tsx @@ -71,7 +71,7 @@ export const Main: FC = () => { {isProduction ? ( - {name ? {name} : {`{{.Name}}`}} + {name ? {name} : {'{{.Name}}'}} @@ -108,7 +108,7 @@ export const Main: FC = () => { )} - +