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/App.tsx               | 36 +++++++++++++++++++--------
 extension/react-app/src/components/Layout.tsx |  1 +
 extension/react-app/src/main.tsx              | 10 +-------
 extension/react-app/src/pages/error.tsx       | 17 +++++++++++++
 extension/react-app/src/pages/gui.tsx         |  5 +++-
 extension/react-app/src/pages/history.tsx     | 23 +++++++++--------
 6 files changed, 61 insertions(+), 31 deletions(-)
 create mode 100644 extension/react-app/src/pages/error.tsx

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

diff --git a/extension/react-app/src/App.tsx b/extension/react-app/src/App.tsx
index 15b536db..48ecebaa 100644
--- a/extension/react-app/src/App.tsx
+++ b/extension/react-app/src/App.tsx
@@ -4,12 +4,6 @@ import Layout from "./components/Layout";
 import { createContext, useEffect } from "react";
 import useContinueGUIProtocol from "./hooks/useWebsocket";
 import ContinueGUIClientProtocol from "./hooks/ContinueGUIClientProtocol";
-import {
-  BrowserRouter as Router,
-  Route,
-  Routes,
-  BrowserRouter,
-} from "react-router-dom";
 import { useDispatch } from "react-redux";
 import {
   setApiUrl,
@@ -21,6 +15,30 @@ import {
 import { updateFileSystem } from "./redux/slices/debugContexSlice";
 import { setHighlightedCode } from "./redux/slices/miscSlice";
 import { postVscMessage } from "./vscode";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import ErrorPage from "./pages/error";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Layout />,
+    errorElement: <ErrorPage />,
+    children: [
+      {
+        path: "/index.html",
+        element: <GUI />,
+      },
+      {
+        path: "/",
+        element: <GUI />,
+      },
+      {
+        path: "/history",
+        element: <History />,
+      },
+    ],
+  },
+]);
 
 export const GUIClientContext = createContext<
   ContinueGUIClientProtocol | undefined
@@ -53,11 +71,7 @@ function App() {
 
   return (
     <GUIClientContext.Provider value={client}>
-      <Routes>
-        <Route path="/" element={<Layout />} />
-        <Route path="/gui" element={<GUI />} />
-        <Route path="/history" element={<History />} />
-      </Routes>
+      <RouterProvider router={router} />
     </GUIClientContext.Provider>
   );
 }
diff --git a/extension/react-app/src/components/Layout.tsx b/extension/react-app/src/components/Layout.tsx
index d1688299..47ed9cc3 100644
--- a/extension/react-app/src/components/Layout.tsx
+++ b/extension/react-app/src/components/Layout.tsx
@@ -8,6 +8,7 @@ const LayoutTopDiv = styled.div`
   scrollbar-base-color: transparent;
   scrollbar-width: thin;
 `;
+
 const Layout = () => {
   return (
     <LayoutTopDiv>
diff --git a/extension/react-app/src/main.tsx b/extension/react-app/src/main.tsx
index 1b70e786..1776490c 100644
--- a/extension/react-app/src/main.tsx
+++ b/extension/react-app/src/main.tsx
@@ -7,14 +7,6 @@ import "./index.css";
 
 import posthog from "posthog-js";
 import { PostHogProvider } from "posthog-js/react";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
-
-const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <App />,
-  },
-]);
 
 console.log("Starting React");
 
@@ -27,7 +19,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <PostHogProvider client={posthog}>
       <Provider store={store}>
-        <RouterProvider router={router} />
+        <App />
       </Provider>
     </PostHogProvider>
   </React.StrictMode>
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