From e84f7d3919f1594d9218b4b0fb090ec39c513625 Mon Sep 17 00:00:00 2001
From: harshithpabbati <pabbatiharshith@gmail.com>
Date: Tue, 4 Jan 2022 12:03:58 +0530
Subject: [PATCH] Cleanup the URL after joining

---
 custom/fitness-demo/pages/{[slug].js => [room].js} |  9 +++++----
 custom/shared/contexts/CallProvider.js             | 12 ++++++++++++
 2 files changed, 17 insertions(+), 4 deletions(-)
 rename custom/fitness-demo/pages/{[slug].js => [room].js} (93%)

diff --git a/custom/fitness-demo/pages/[slug].js b/custom/fitness-demo/pages/[room].js
similarity index 93%
rename from custom/fitness-demo/pages/[slug].js
rename to custom/fitness-demo/pages/[room].js
index 54cce71..cc035bb 100644
--- a/custom/fitness-demo/pages/[slug].js
+++ b/custom/fitness-demo/pages/[room].js
@@ -10,7 +10,7 @@ import { useRouter } from 'next/router';
 import App from '../components/App';
 import NotConfigured from '../components/Prejoin/NotConfigured';
 
-const Slug = ({
+const Room = ({
   domain,
   isConfigured = false,
   subscribeToTracksAutomatically = true,
@@ -20,7 +20,7 @@ const Slug = ({
   customAppComponent,
 }) => {
   const router = useRouter();
-  const { slug, t } = router.query;
+  const { room, t } = router.query;
 
   if (!isConfigured) return <NotConfigured />;
   return (
@@ -31,9 +31,10 @@ const Slug = ({
     >
       <CallProvider
         domain={domain}
-        room={slug}
+        room={room}
         token={t}
         subscribeToTracksAutomatically={subscribeToTracksAutomatically}
+        cleanURLOnJoin
       >
         <ParticipantsProvider>
           <TracksProvider>
@@ -49,7 +50,7 @@ const Slug = ({
   )
 };
 
-export default Slug;
+export default Room;
 
 export async function getStaticProps() {
   const defaultProps = getDemoProps();
diff --git a/custom/shared/contexts/CallProvider.js b/custom/shared/contexts/CallProvider.js
index 1f372ab..db5febb 100644
--- a/custom/shared/contexts/CallProvider.js
+++ b/custom/shared/contexts/CallProvider.js
@@ -14,6 +14,7 @@ import React, {
 } from 'react';
 import DailyIframe from '@daily-co/daily-js';
 import Bowser from 'bowser';
+import { useRouter } from 'next/router';
 import PropTypes from 'prop-types';
 import {
   ACCESS_STATE_LOBBY,
@@ -31,7 +32,9 @@ export const CallProvider = ({
   room,
   token = '',
   subscribeToTracksAutomatically = true,
+  cleanURLOnJoin = false,
 }) => {
+  const router = useRouter();
   const [roomInfo, setRoomInfo] = useState(null);
   const [enableScreenShare, setEnableScreenShare] = useState(false);
   const [videoQuality, setVideoQuality] = useState(VIDEO_QUALITY_AUTO);
@@ -119,6 +122,15 @@ export const CallProvider = ({
     setPreJoinNonAuthorized(requiresPermission && !token);
   }, [state, daily, token]);
 
+  useEffect(() => {
+    if (!daily) return;
+
+    if (cleanURLOnJoin)
+      daily.on('joined-meeting', () => router.replace(`/${room}`));
+
+    return () => daily.off('joined-meeting', () => router.replace(`/${room}`));
+  }, [cleanURLOnJoin, daily, room, router]);
+
   return (
     <CallContext.Provider
       value={{