File size: 1,848 Bytes
2e8db96 9751a50 0449517 2e8db96 9751a50 5874113 0449517 5874113 0449517 5874113 0449517 5874113 0449517 2e8db96 0449517 2e8db96 18d5404 0449517 d81fbeb 2e8db96 |
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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
import logo from './logo.svg';
import './App.css';
import axios from "axios";
import { useState } from 'react';
import { useEffect } from 'react';
//import { Table, TableHeader, TableBody, TableColumn, TableRow, TableCell} from "@nextui-org/table";
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"])
]);
// function to fetch all statements from BE
useEffect(() => {
axios
.get("/data")
.then((response) => {
// works:
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("statements ", statements);
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;
|