From 31e7c9828f985eceb16b4c9c749cc5d4d9fd5beb Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Sun, 6 Aug 2023 13:28:22 -0700
Subject: feat: :construction: react-router-dom work

---
 extension/react-app/src/pages/error.tsx   | 17 +++++++++++++++++
 extension/react-app/src/pages/gui.tsx     |  5 ++++-
 extension/react-app/src/pages/history.tsx | 23 +++++++++++++----------
 3 files changed, 34 insertions(+), 11 deletions(-)
 create mode 100644 extension/react-app/src/pages/error.tsx

(limited to 'extension/react-app/src/pages')

diff --git a/extension/react-app/src/pages/error.tsx b/extension/react-app/src/pages/error.tsx
new file mode 100644
index 00000000..5267c405
--- /dev/null
+++ b/extension/react-app/src/pages/error.tsx
@@ -0,0 +1,17 @@
+import { useRouteError } from "react-router-dom";
+
+export default function ErrorPage() {
+  const error: any = useRouteError();
+  console.error(error);
+
+  return (
+    <div id="error-page" className="text-center">
+      <h1>Error in Continue React App</h1>
+      <p>
+        <i>{error.statusText || error.message}</i>
+      </p>
+      <br />
+      <pre className="text-left m-4">{error.stack}</pre>
+    </div>
+  );
+}
diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx
index 247789d6..d565e64f 100644
--- a/extension/react-app/src/pages/gui.tsx
+++ b/extension/react-app/src/pages/gui.tsx
@@ -34,6 +34,7 @@ import {
   setBottomMessageCloseTimeout,
 } from "../redux/slices/uiStateSlice";
 import RingLoader from "../components/RingLoader";
+import { useNavigate } from "react-router-dom";
 
 const TopGUIDiv = styled.div`
   overflow: hidden;
@@ -83,6 +84,8 @@ interface GUIProps {
 }
 
 function GUI(props: GUIProps) {
+  const navigate = useNavigate();
+
   const client = useContext(GUIClientContext);
   const posthog = usePostHog();
 
@@ -595,7 +598,7 @@ If you already have an LLM deployed on your own infrastructure, or would like to
         <HeaderButtonWithText
           onClick={() => {
             // Go to /history page
-            document.location.href = "/history";
+            navigate("/history");
           }}
           text="History"
         >
diff --git a/extension/react-app/src/pages/history.tsx b/extension/react-app/src/pages/history.tsx
index 6539f0f5..052fe5be 100644
--- a/extension/react-app/src/pages/history.tsx
+++ b/extension/react-app/src/pages/history.tsx
@@ -1,22 +1,26 @@
 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";
+import { useNavigate } from "react-router-dom";
 
 function History() {
+  const navigate = useNavigate();
   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");
+      console.log("fetching sessions from: ", apiUrl);
       if (!apiUrl) {
         return;
       }
       const response = await fetch(`${apiUrl}/sessions/list`);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
       const json = await response.json();
       console.log(json);
       setSessions(json);
@@ -25,23 +29,22 @@ function History() {
   }, [client]);
 
   return (
-    <div style={{ width: "100%" }}>
-      <table style={{ width: "100%" }}>
+    <div className="w-full">
+      <h1 className="text-2xl font-bold">History</h1>
+      <table className="w-full">
         <tbody>
           {sessions.map((session, index) => (
             <tr key={index}>
               <td>
                 <div
-                  style={{ cursor: "pointer" }}
+                  className="cursor-pointer"
                   onClick={() => {
                     // client?.loadSession(session.id);
-                    // document.location.href = "/gui";
+                    navigate("/");
                   }}
                 >
-                  <div>{session.title}</div>
-                  <div style={{ color: "lightgray" }}>
-                    {session.date_created}
-                  </div>
+                  <div className="text-lg">{session.title}</div>
+                  <div className="text-gray-400">{session.date_created}</div>
                 </div>
               </td>
             </tr>
-- 
cgit v1.2.3-70-g09d2