feat: :construction: Router and new history page

1 files changed, 55 insertions, 0 deletions

diff --git a/extension/react-app/src/pages/history.tsx b/extension/react-app/src/pages/history.tsx
new file mode 100644
index 00000000..6539f0f5
--- /dev/null
+++ b/extension/react-app/src/pages/history.tsx
@@ -0,0 +1,55 @@
+import React, { useContext, useEffect, useState } from "react";
+import { SessionInfo } from "../../../schema/SessionInfo";
+import { GUIClientContext } from "../App";
+import fetch from "node-fetch";
+import { useSelector } from "react-redux";
+import { RootStore } from "../redux/store";
+
+function History() {
+  const [sessions, setSessions] = useState<SessionInfo[]>([]);
+  const client = useContext(GUIClientContext);
+  const apiUrl = useSelector((state: RootStore) => state.config.apiUrl);
+
+  useEffect(() => {
+    const fetchSessions = async () => {
+      console.log("fetching sessions");
+      if (!apiUrl) {
+        return;
+      }
+      const response = await fetch(`${apiUrl}/sessions/list`);
+      const json = await response.json();
+      console.log(json);
+      setSessions(json);
+    };
+    fetchSessions();
+  }, [client]);
+
+  return (
+    <div style={{ width: "100%" }}>
+      <table style={{ width: "100%" }}>
+        <tbody>
+          {sessions.map((session, index) => (
+            <tr key={index}>
+              <td>
+                <div
+                  style={{ cursor: "pointer" }}
+                  onClick={() => {
+                    // client?.loadSession(session.id);
+                    // document.location.href = "/gui";
+                  }}
+                >
+                  <div>{session.title}</div>
+                  <div style={{ color: "lightgray" }}>
+                    {session.date_created}
+                  </div>
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default History;