feat: :construction: react-router-dom work

1 files changed, 13 insertions, 10 deletions

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>