| import logo from './logo.svg'; |
| import './App.css'; |
| import axios from "axios"; |
| import { useState } from 'react'; |
| import { useEffect } from 'react'; |
| |
| import { DataGrid } from '@mui/x-data-grid'; |
| const columns: GridColDef[] = [ |
| { field: 'subject', headerName: 'Subject', width: 350 }, |
| { field: 'predicate', headerName: 'Predicate', width: 350 }, |
| { field: 'object', headerName: 'Object', width: 550 }, |
| ]; |
|
|
| function construct_statement (z) { |
| return { |
| "id":z[0], |
| "subject": z[0], |
| "predicate": z[1], |
| "object": z[2], |
|
|
| }; |
| } |
|
|
| function App() { |
|
|
| const [statements, setStatements] = useState([ |
| construct_statement(["Empty statements","are","empty"]) |
| ]); |
| |
| |
| useEffect(() => { |
| axios |
| .get("/data") |
| .then((response) => { |
| |
|
|
| const res = response.data; |
| if (res.constructor === Array) { |
| console.log("Got array ", res); |
| setStatements(res.map(construct_statement )); |
| }else{ |
| setStatements([ |
| construct_statement( |
| [ |
| 'res','type',typeof(res) |
| ] |
| )]); |
| } |
| }) |
| .catch((error) => { |
| console.log("There was an error retrieving the statement list: ", error); |
| setStatements( |
| [ |
| construct_statement(["error","text",JSON.stringify(error)])]); |
| }); |
| }, []); |
| |
| console.log(typeof statements); |
| console.log(typeof statements[0]); |
| console.log(statements[0]); |
|
|
| return ( |
| <div className="App"> |
| ` <header className="App-header"> |
| <img src={logo} className="App-logo" alt="logo" /> |
| <p> |
| Experiments |
| <DataGrid rows={statements} columns={columns} /> |
| </p> |
| |
| </header> |
| </div> |
| ); |
| } |
|
|
| export default App; |
|
|
