Push to the /:room page to join a call

custom/fitness-demo/components/Prejoin/Intro.js

@@ -20,7 +20,6 @@ import PropTypes from 'prop-types';
 export const Intro = ({
   tokenError,
   fetching,
-  room,
   error,
   onJoin,
 }) => {
@@ -46,10 +45,6 @@ export const Intro = ({
     return () => clearInterval(i);
   }, []);
 
-  useEffect(() => {
-    setRoomName(room);
-  }, [room]);
-
   return (
     <div className="intro">
       <Card>

custom/fitness-demo/pages/[slug].js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { CallProvider } from '@custom/shared/contexts/CallProvider';
+import { MediaDeviceProvider } from '@custom/shared/contexts/MediaDeviceProvider';
+import { ParticipantsProvider } from '@custom/shared/contexts/ParticipantsProvider';
+import { TracksProvider } from '@custom/shared/contexts/TracksProvider';
+import { UIStateProvider } from '@custom/shared/contexts/UIStateProvider';
+import { WaitingRoomProvider } from '@custom/shared/contexts/WaitingRoomProvider';
+import getDemoProps from '@custom/shared/lib/demoProps';
+import { useRouter } from 'next/router';
+import App from '../components/App';
+import NotConfigured from '../components/Prejoin/NotConfigured';
+
+const Slug = ({
+  domain,
+  isConfigured = false,
+  subscribeToTracksAutomatically = true,
+  asides,
+  modals,
+  customTrayComponent,
+  customAppComponent,
+}) => {
+  const router = useRouter();
+  const { slug, t } = router.query;
+
+  if (!isConfigured) return <NotConfigured />;
+  return (
+    <UIStateProvider
+      asides={asides}
+      modals={modals}
+      customTrayComponent={customTrayComponent}
+    >
+      <CallProvider
+        domain={domain}
+        room={slug}
+        token={t}
+        subscribeToTracksAutomatically={subscribeToTracksAutomatically}
+      >
+        <ParticipantsProvider>
+          <TracksProvider>
+            <MediaDeviceProvider>
+              <WaitingRoomProvider>
+                {customAppComponent || <App />}
+              </WaitingRoomProvider>
+            </MediaDeviceProvider>
+          </TracksProvider>
+        </ParticipantsProvider>
+      </CallProvider>
+    </UIStateProvider>
+  )
+};
+
+export default Slug;
+
+export async function getStaticProps() {
+  const defaultProps = getDemoProps();
+  return {
+    props: defaultProps,
+  };
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: [],
+    fallback: 'blocking',
+  }
+}

custom/fitness-demo/pages/index.js

@@ -1,13 +1,7 @@
 import React, { useState, useCallback } from 'react';
-import { CallProvider } from '@custom/shared/contexts/CallProvider';
-import { MediaDeviceProvider } from '@custom/shared/contexts/MediaDeviceProvider';
-import { ParticipantsProvider } from '@custom/shared/contexts/ParticipantsProvider';
-import { TracksProvider } from '@custom/shared/contexts/TracksProvider';
-import { UIStateProvider } from '@custom/shared/contexts/UIStateProvider';
-import { WaitingRoomProvider } from '@custom/shared/contexts/WaitingRoomProvider';
 import getDemoProps from '@custom/shared/lib/demoProps';
+import { useRouter } from 'next/router';
 import PropTypes from 'prop-types';
-import App from '../components/App';
 import Intro from '../components/Prejoin/Intro';
 import NotConfigured from '../components/Prejoin/NotConfigured';
 
@@ -22,18 +16,12 @@ import NotConfigured from '../components/Prejoin/NotConfigured';
 export default function Index({
   domain,
   isConfigured = false,
-  subscribeToTracksAutomatically = true,
-  asides,
-  modals,
-  customTrayComponent,
-  customAppComponent,
 }) {
-  const [roomName, setRoomName] = useState();
+  const router = useRouter();
   const [fetching, setFetching] = useState(false);
   const [error, setError] = useState();
 
   const [fetchingToken, setFetchingToken] = useState(false);
-  const [token, setToken] = useState();
   const [tokenError, setTokenError] = useState();
 
   const getMeetingToken = useCallback(async (room, isOwner = false) => {
@@ -60,13 +48,10 @@ export default function Index({
     console.log(`🪙 Token received`);
 
     setFetchingToken(false);
-    setToken(resJson.token);
+    await router.push(`/${room}?t=${resJson.token}`);
-
-    // Setting room name will change ready state
-    setRoomName(room);
 
     return true;
-  }, []);
+  }, [router]);
 
   const createRoom = async (room, duration, privacy) => {
     setError(false);
@@ -99,63 +84,33 @@ export default function Index({
     setFetching(false);
   }
 
-  const isReady = !!(isConfigured && roomName);
-
-  if (!isReady) {
-    return (
-      <main>
-        {(() => {
-          if (!isConfigured) return <NotConfigured />;
-          return (
-            <Intro
-              tokenError={tokenError}
-              fetching={fetching}
-              error={error}
-              room={roomName}
-              domain={domain}
-              onJoin={(room, type, duration = 60, privacy = 'public') =>
-                type === 'join' ? setRoomName(room): createRoom(room, duration, privacy)
-              }
-            />
-          );
-        })()}
-
-        <style jsx>{`
-          height: 100vh;
-          display: grid;
-          align-items: center;
-          justify-content: center;
-        `}</style>
-      </main>
-    );
-  }
-
   /**
    * Main call UI
    */
   return (
-    <UIStateProvider
+    <main>
-      asides={asides}
+      {(() => {
-      modals={modals}
+        if (!isConfigured) return <NotConfigured />;
-      customTrayComponent={customTrayComponent}
+        return (
-    >
+          <Intro
-      <CallProvider
+            tokenError={tokenError}
-        domain={domain}
+            fetching={fetching}
-        room={roomName}
+            error={error}
-        token={token}
+            domain={domain}
-        subscribeToTracksAutomatically={subscribeToTracksAutomatically}
+            onJoin={(room, type, duration = 60, privacy = 'public') =>
-      >
+              type === 'join' ? router.push(`/${room}`): createRoom(room, duration, privacy)
-        <ParticipantsProvider>
+            }
-          <TracksProvider>
+          />
-            <MediaDeviceProvider>
+        );
-              <WaitingRoomProvider>
+      })()}
-                {customAppComponent || <App />}
+
-              </WaitingRoomProvider>
+      <style jsx>{`
-            </MediaDeviceProvider>
+        height: 100vh;
-          </TracksProvider>
+        display: grid;
-        </ParticipantsProvider>
+        align-items: center;
-      </CallProvider>
+        justify-content: center;
-    </UIStateProvider>
+      `}</style>
+    </main>
   );
 }