configure webrtc provider

components/WebRTCProvider.tsx

@@ -0,0 +1,27 @@
+import React, { useState, useEffect } from 'react'
+import { EventDispatcher } from 'peer-data'
+import { PeerDataProvider } from 'react-peer-data'
+
+export const WebRTCProvider: React.FC = ({ children }) => {
+  const [pageLoaded, setPageLoaded] = useState(false)
+
+  useEffect(() => {
+    setPageLoaded(true)
+  }, [])
+
+  if (!pageLoaded) {
+    return null
+  }
+
+  return (
+    <PeerDataProvider
+      servers={{ iceServers: [{ urls: 'stun:stun.1.google.com:19302' }] }}
+      constraints={{ ordered: true }}
+      signaling={{ dispatcher: new EventDispatcher() }}
+    >
+      {children}
+    </PeerDataProvider>
+  )
+}
+
+export default WebRTCProvider

pages/download/[...slug].tsx

@@ -1,7 +1,11 @@
-import React from 'react';
+import React from 'react'
+import { useRouter } from 'next/router'
 
-const DownloadPage = () => {
-  return <div />
+const DownloadPage: React.FC = () => {
+  const router = useRouter()
+  const { slug } = router.query
+
+  return <div>{JSON.stringify(slug)}</div>
 }
 
 export default DownloadPage

pages/index.tsx

@@ -1,18 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { EventDispatcher } from "peer-data";
-import { PeerDataProvider } from 'react-peer-data';
+import React from 'react'
+import WebRTCProvider from '../components/WebRTCProvider'
 
-import App from './App';
-
-const IndexPage = () => {
-  return <PeerDataProvider
-    servers={{ iceServers: [{ url: "stun:stun.1.google.com:19302" }] }}
-    constraints={{ ordered: true }}
-    signaling={{ dispatcher: new EventDispatcher() }}
-  >
-    <App />
-  </PeerDataProvider>,
-}
+export const IndexPage: React.FC = () => (
+  <WebRTCProvider>
+    <>Index page</>
+  </WebRTCProvider>
+)
 
 export default IndexPage