From 8ee8dc5f8e7af36d5854d4a18c1fe319fc867747 Mon Sep 17 00:00:00 2001
From: Allen Lee <6207ALS@gmail.com>
Date: Wed, 27 Mar 2024 23:22:58 -0400
Subject: [PATCH] Added 'Session Replay' React Route

Co-authored-by: Weston Ludeke <westonludeke@gmail.com>
Co-authored-by: Rachele Lang <rachelelang7672@gmail.com>
Co-authored-by: Rachele Lang <rachelelang7672@gmail.com>
---
 src/App.jsx                      |  2 ++
 src/components/SessionReplay.jsx | 36 ++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 src/components/SessionReplay.jsx

diff --git a/src/App.jsx b/src/App.jsx
index e8accd2..e984be3 100644
--- a/src/App.jsx
+++ b/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>
diff --git a/src/components/SessionReplay.jsx b/src/components/SessionReplay.jsx
new file mode 100644
index 0000000..b99bbe3
--- /dev/null
+++ b/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;
\ No newline at end of file