From a35a4ffbecc5557010f4b0b469748377f0f72798 Mon Sep 17 00:00:00 2001
From: Emmanuel Pelletier <manu@habite.la>
Date: Thu, 25 Jul 2024 15:03:03 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(room)=20prevent=20user=20from=20mi?=
 =?UTF-8?q?sclicking=20out=20of=20a=20meeting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

now clicking on the header homepage link asks for confirmation when on
the route page.

this is quick and dirty, using browser confirm ui, and not making a
difference between join page and conference page, but it'll do for now
---
 src/frontend/src/layout/Header.tsx        | 18 ++++++++++++++++--
 src/frontend/src/locales/de/rooms.json    |  3 ++-
 src/frontend/src/locales/en/rooms.json    |  3 ++-
 src/frontend/src/locales/fr/rooms.json    |  3 ++-
 src/frontend/src/utils/useMatchesRoute.ts | 17 +++++++++++++++++
 5 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 src/frontend/src/utils/useMatchesRoute.ts

diff --git a/src/frontend/src/layout/Header.tsx b/src/frontend/src/layout/Header.tsx
index 55fab9a9..f03e0021 100644
--- a/src/frontend/src/layout/Header.tsx
+++ b/src/frontend/src/layout/Header.tsx
@@ -5,10 +5,12 @@ import { useTranslation } from 'react-i18next'
 import { A, Button, Popover, PopoverList, Text } from '@/primitives'
 import { SettingsButton } from '@/features/settings'
 import { authUrl, logoutUrl, useUser } from '@/features/auth'
+import { useMatchesRoute } from '@/utils/useMatchesRoute'
 
 export const Header = () => {
   const { t } = useTranslation()
-  const isHome = window.location.pathname === '/'
+  const isHome = useMatchesRoute('home')
+  const isRoom = useMatchesRoute('room')
   const { user, isLoggedIn } = useUser()
 
   return (
@@ -25,7 +27,19 @@ export const Header = () => {
       <Stack direction="row" justify="space-between" align="center">
         <header>
           <Text bold variant="h1" margin={false}>
-            <Link to="/">{t('app')}</Link>
+            <Link
+              onClick={(event) => {
+                if (
+                  isRoom &&
+                  !window.confirm(t('leaveRoomPrompt', { ns: 'rooms' }))
+                ) {
+                  event.preventDefault()
+                }
+              }}
+              to="/"
+            >
+              {t('app')}
+            </Link>
           </Text>
         </header>
         <nav>
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index df55de10..31c3730e 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -5,5 +5,6 @@
     "joinLabel": "",
     "micLabel": "",
     "userLabel": ""
-  }
+  },
+  "leaveRoomPrompt": ""
 }
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index 17202997..d6f4a272 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -5,5 +5,6 @@
     "joinLabel": "Join",
     "micLabel": "Microphone",
     "userLabel": "Your name"
-  }
+  },
+  "leaveRoomPrompt": "This will make you leave the meeting."
 }
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 4a2184d6..94a113ee 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -5,5 +5,6 @@
     "joinLabel": "Rejoindre",
     "micLabel": "Micro",
     "userLabel": "Votre nom"
-  }
+  },
+  "leaveRoomPrompt": "Revenir à l'accueil vous fera quitter la réunion."
 }
diff --git a/src/frontend/src/utils/useMatchesRoute.ts b/src/frontend/src/utils/useMatchesRoute.ts
new file mode 100644
index 00000000..6dc13c9c
--- /dev/null
+++ b/src/frontend/src/utils/useMatchesRoute.ts
@@ -0,0 +1,17 @@
+import { useRoute } from 'wouter'
+import { roomRouteRegex } from '@/features/rooms'
+
+type RouteName = 'home' | 'room'
+
+const routeMap = {
+  home: '/',
+  room: roomRouteRegex,
+}
+
+export const useMatchesRoute = (route: RouteName) => {
+  const [match] = useRoute(routeMap[route])
+  if (!(route in routeMap)) {
+    throw new Error(`Route ${route} not found`)
+  }
+  return match
+}