From f7b369b95dfb11e8a10dd4f5502958f4349d05fd Mon Sep 17 00:00:00 2001
From: Daniel <50052685+schroda@users.noreply.github.com>
Date: Sat, 7 Jan 2023 16:44:00 +0100
Subject: [PATCH] set browser tab title (#220)

* Update the browser tab title

The tab title will be set to the same title as the "NavigationBar" with "- Tachidesk" as the suffix

* Set the manga title and chapter name as browser tab title in the reader

While the reader is still loading the "mangaId" and the "chapterIndex" will be set as the title.
---
 src/components/context/NavbarContext.tsx        |  2 +-
 src/components/navbar/NavBarContextProvider.tsx |  7 ++++++-
 src/screens/Reader.tsx                          | 10 ++++++++--
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/context/NavbarContext.tsx b/src/components/context/NavbarContext.tsx
index e4e64d53..c3bd8842 100644
--- a/src/components/context/NavbarContext.tsx
+++ b/src/components/context/NavbarContext.tsx
@@ -14,7 +14,7 @@ type ContextType = {
 
     // AppBar title
     title: string
-    setTitle: React.Dispatch<React.SetStateAction<string>>
+    setTitle: (title: string) => void
 
     // AppBar action buttons
     action: any
diff --git a/src/components/navbar/NavBarContextProvider.tsx b/src/components/navbar/NavBarContextProvider.tsx
index 81a4dc4c..aca7d00d 100644
--- a/src/components/navbar/NavBarContextProvider.tsx
+++ b/src/components/navbar/NavBarContextProvider.tsx
@@ -21,11 +21,16 @@ export default function NavBarProvider({ children }:IProps) {
         value: <div />,
     });
 
+    const updateTitle = (newTitle: string) => {
+        document.title = `${newTitle} - Tachidesk`;
+        setTitle(newTitle);
+    };
+
     const value = {
         defaultBackTo,
         setDefaultBackTo,
         title,
-        setTitle,
+        setTitle: updateTitle,
         action,
         setAction,
         override,
diff --git a/src/screens/Reader.tsx b/src/screens/Reader.tsx
index 4c2cef0c..73d72c9b 100644
--- a/src/screens/Reader.tsx
+++ b/src/screens/Reader.tsx
@@ -85,6 +85,14 @@ export default function Reader() {
         requestUpdateMangaMetadata(manga, [[key, value]]).catch(() => makeToast('Failed to save the reader settings to the server', 'warning'));
     };
 
+    useEffect(() => {
+        if (!manga?.title || (chapter as IChapter)?.name === 'Loading...') {
+            setTitle(`Reader - Manga ${mangaId} Chapter ${chapterIndex}`);
+        } else {
+            setTitle(`${manga.title}: ${(chapter as IChapter).name}`);
+        }
+    }, [manga, chapter]);
+
     useEffect(() => {
         if (!areDefaultSettingsLoading && !isMangaLoading) {
             checkAndHandleMissingStoredReaderSettings(manga, 'manga', defaultSettings).catch(() => {});
@@ -115,12 +123,10 @@ export default function Reader() {
 
     useEffect(() => {
         setIsMangaLoading(true);
-        setTitle('Reader');
         client.get(`/api/v1/manga/${mangaId}/`)
             .then((response) => response.data)
             .then((data: IManga) => {
                 setManga(data);
-                setTitle(data.title);
                 setIsMangaLoading(false);
             });
     }, [mangaId]);