From 89eeaca0819c44f6e8f528cf2fdee8b73f91873d Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Fri, 29 Apr 2022 15:41:56 +1000
Subject: [PATCH] show emulator status in tab title

---
 src/hooks/useDocumentTitle.ts | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/hooks/useDocumentTitle.ts b/src/hooks/useDocumentTitle.ts
index 36af4f77..c6602952 100644
--- a/src/hooks/useDocumentTitle.ts
+++ b/src/hooks/useDocumentTitle.ts
@@ -1,5 +1,13 @@
 import { useEffect } from "react";
 
+const DOCUMENT_TITLE_BASE =
+  "Rowy" +
+  (process.env.NODE_ENV === "production"
+    ? ""
+    : ` (${
+        process.env.REACT_APP_FIREBASE_EMULATOR ? "Emulator • " : ""
+      }${process.env.NODE_ENV.replace("development", "dev")})`);
+
 /**
  * Sets the document/tab title and resets when the page is changed
  * @param projectId - Project ID displayed in the title
@@ -7,23 +15,12 @@ import { useEffect } from "react";
  */
 export function useDocumentTitle(projectId: string, title?: string) {
   useEffect(() => {
-    document.title = [
-      title,
-      projectId,
-      "Rowy",
-      window.location.hostname === "localhost" ? "localhost" : "",
-    ]
-      .filter((x) => x)
+    document.title = [title, projectId, DOCUMENT_TITLE_BASE]
+      .filter(Boolean)
       .join(" • ");
 
     return () => {
-      document.title = [
-        projectId,
-        "Rowy",
-        window.location.hostname === "localhost" ? "localhost" : "",
-      ]
-        .filter((x) => x)
-        .join(" • ");
+      document.title = [projectId, DOCUMENT_TITLE_BASE].join(" • ");
     };
   }, [title, projectId]);
 }