summaryrefslogtreecommitdiff
path: root/extension/react-app/src/pages/history.tsx
blob: 6539f0f554fd40804ff8fda7896d8ce9912573d5 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
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;