Merge pull request #26 from campfire-previews/session-replay-route

Added 'Session Replay' React Route

src/App.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import "./App.css";
 import Dashboard from "./components/Dashboard.jsx";
 import PreviewEnvironment from "./components/PreviewEnvironment.jsx";
+import SessionReplay from "./components/SessionReplay.jsx";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 
 function App() {
@@ -11,6 +12,7 @@ function App() {
         <Routes>
           <Route path="/" element={<Dashboard />} />
           <Route path="/:repo/:issue_number" element={<PreviewEnvironment />} />
+					<Route path="/:repo/:issue_number/session-replay/:id" element={<SessionReplay />} />
         </Routes>
       </Router>
     </div>

src/components/SessionReplay.jsx

@@ -0,0 +1,36 @@
+import { useState, useEffect, useRef } from "react";
+
+import { useParams } from "react-router";
+
+import * as rrweb from "rrweb";
+import rrwebPlayer from 'rrweb-player';
+import 'rrweb-player/dist/style.css';
+
+
+// 8bfd3309-4af1-4abf-8067-8468394a2d42
+function SessionReplay({  }) {
+	const { repo, issue_number, id } = useParams();
+	const playerRef = useRef(null);
+
+	useEffect(() => {
+		(async () => {
+			const response = await fetch(`https://r5mggbu5q0.execute-api.us-east-2.amazonaws.com/demo/repos/${repo}/issue_number/${issue_number}/session-replay/${id}`)
+			const { data: events } = await response.json();
+			const replayer = new rrwebPlayer({
+				target: playerRef.current,
+				props: { events }
+			});
+			replayer.play();
+		})()
+	}, []);
+
+
+	return (
+		<>
+			<main ref={playerRef}>
+			</main>
+		</>
+	)
+}
+
+export default SessionReplay;