From c21c5f604b2474a6e16f41fc50eb21ee90046060 Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Wed, 7 Aug 2024 17:30:59 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=A9=B9(frontend)=20clear=20router=20state?= =?UTF-8?q?=20on=20page=20reload?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit (aligned with Google Meet or Jitsi ux) This ensures participants join a room with a fresh access token. Some participants information might be altered after the access token was generated (e.g. their name). I wanted the initial data to be passed only once, when you navigate to the room from the create button, but if you reload the page, then a new access token will be fetched, and the pre-join screen displayed. --- src/frontend/src/features/rooms/routes/Room.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/features/rooms/routes/Room.tsx b/src/frontend/src/features/rooms/routes/Room.tsx index eb4a531a..629ba2c1 100644 --- a/src/frontend/src/features/rooms/routes/Room.tsx +++ b/src/frontend/src/features/rooms/routes/Room.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import { useEffect, useState } from 'react' import { usePersistentUserChoices, type LocalUserChoices, @@ -19,6 +19,19 @@ export const Room = () => { const mode = isLoggedIn && history.state?.create ? 'create' : 'join' const skipJoinScreen = isLoggedIn && mode === 'create' + const clearRouterState = () => { + if (window?.history?.state) { + window.history.replaceState({}, '') + } + } + + useEffect(() => { + window.addEventListener('beforeunload', clearRouterState) + return () => { + window.removeEventListener('beforeunload', clearRouterState) + } + }, []) + if (!roomId) { return }