From 73b0405e0961b83001ebf32a2b3c2da4df5eccda Mon Sep 17 00:00:00 2001
From: HenryShan <zshan2@illinois.edu>
Date: Tue, 16 Mar 2021 12:47:09 +0800
Subject: [PATCH] small fixing
---
web/app/src/App.js | 64 ++++++++++++------------
web/app/src/Components/ElementDisplay.js | 29 ++++++++---
2 files changed, 55 insertions(+), 38 deletions(-)
diff --git a/web/app/src/App.js b/web/app/src/App.js
index 4fcf339..6e180e3 100644
--- a/web/app/src/App.js
+++ b/web/app/src/App.js
@@ -49,6 +49,36 @@ function App() {
const axios = require('axios').default;
var center = {display: 'flex', justifyContent: 'center', alignItems: 'center'}
+ /** Function used to hide the input form */
+ function hideForm() {
+ setFormState('hide')
+ }
+
+ /** Function used to show bookData input form */
+ function changeFormStateBook() {
+ setRenderState(false)
+ if (formState === 'hide') {
+ setFormState('showBook')
+ } else {
+ setFormState('hide')
+ }
+ }
+
+ /** Function used to show authorData input form */
+ function changeFormStateAuthor() {
+ setRenderState(false)
+ if (formState === 'hide') {
+ setFormState('showAuthor')
+ } else {
+ setFormState('hide')
+ }
+ }
+
+ /** Function used to set Dialog visible, which is called when a response is received */
+ function showDialog() {
+ setDialogState(true)
+ }
+
/** Function used in GET Requests */
function get() {
axios.get('http://127.0.0.1:5000/api/' + queryStr)
@@ -58,9 +88,9 @@ function App() {
showDialog()
document.getElementById('dialog').value = response.status + ":\n" + response.statusText
if (queryStr.includes('book')) {
- setDataState(response.data['books'][0])
+ setDataState(response.data['books'])
} else {
- setDataState(response.data['authors'][0])
+ setDataState(response.data['authors'])
}
setRenderState(true)
})
@@ -108,36 +138,6 @@ function App() {
setDataState(authorData)
return authorData
}
-
- /** Function used to hide the input form */
- function hideForm() {
- setFormState('hide')
- }
-
- /** Function used to show bookData input form */
- function changeFormStateBook() {
- setRenderState(false)
- if (formState === 'hide') {
- setFormState('showBook')
- } else {
- setFormState('hide')
- }
- }
-
- /** Function used to show authorData input form */
- function changeFormStateAuthor() {
- setRenderState(false)
- if (formState === 'hide') {
- setFormState('showAuthor')
- } else {
- setFormState('hide')
- }
- }
-
- /** Function used to set Dialog visible, which is called when a response is received */
- function showDialog() {
- setDialogState(true)
- }
/** Function used in PUT requests */
function put() {
diff --git a/web/app/src/Components/ElementDisplay.js b/web/app/src/Components/ElementDisplay.js
index a8d53ad..47112ec 100644
--- a/web/app/src/Components/ElementDisplay.js
+++ b/web/app/src/Components/ElementDisplay.js
@@ -3,18 +3,35 @@ import MUIDataTable from "mui-datatables";
/** MUI dataTable component, used for rendering received response */
const ElementDisplay = (props) => {
- var fields = Object.keys(props.data)
- var values = Object.values(props.data)
- console.log(Object.values(props.data))
- console.log(Object.keys(props.data))
+ var list = props.data
+ if (list.length <= 0) {
+ return (
+ <MUIDataTable
+ title={"Data Table"}
+ data={[]}
+ columns={['Fields', 'Values']}
+ options={{}}
+ />
+ )
+ }
+ var fields = Object.keys(list[0])
+ var values = []
+ for (var key in list){
+ if (list.hasOwnProperty(key)) {
+ values.push(Object.values(list[key]))
+ }
+ }
+ console.log(fields)
+ console.log(values)
+ console.log(list)
const columns = fields
- const data = [values]
+ const data = values
const options = {
'responsive':'vertical'
}
return (
<MUIDataTable
- title={"GET Data"}
+ title={"Data Table"}
data={data}
columns={columns}
options={options}
--
GitLab