diff --git a/Server/SimpleServer.py b/Server/SimpleServer.py
index cad125171c8213f5c9e924aae7ca5d7db88999f6..58b59dd47753aba28f7ee03d0306ab0fa5aa99bf 100644
--- a/Server/SimpleServer.py
+++ b/Server/SimpleServer.py
@@ -35,11 +35,6 @@ def data_base_book():
abort(415, "content should be JSON file")
print(request)
json_update_info = request.json
- print(request)
- print("========================")
- print(json_update_info)
- print("========================")
- print(request.args.to_dict())
opt = 0
DataBase.update_dicts(opt, request.args.to_dict(), json_update_info)
return "200: PUT succeeded"
@@ -48,8 +43,6 @@ def data_base_book():
abort(415, "content should be JSON file")
print(request)
json_file = request.json
- print(request)
- print(json_file)
DataBase.insert_document(json_file, 0)
return "200: POST succeeded"
elif request.method == "DELETE":
@@ -111,7 +104,6 @@ def data_base_author():
def data_base_scrape():
print(request.url)
param = request.args.to_dict()
- print(param)
url = param["url"]
max_book = param["max_book"]
max_author = param["max_author"]
diff --git a/web/app/src/App.js b/web/app/src/App.js
index 4b71285ad48c41eaf17dc44871871e625b81f07f..4fcf33981540bf93c2f72c8d19888402f7770e55 100644
--- a/web/app/src/App.js
+++ b/web/app/src/App.js
@@ -7,8 +7,10 @@ import ElementDisplay from './Components/ElementDisplay';
function App() {
+ /* Activate Hooks */
const { useState } = React;
+ /* Initializing Hooks for component values showed in main page */
const [queryStr, setQueryStr] = useState('')
const [sign, setSign] = useState(CorrectSign)
const [text, setText] = useState('This area shows the result of requests..')
@@ -16,6 +18,7 @@ function App() {
const [dialogState, setDialogState] = useState(false)
const [renderState, setRenderState] = useState(false)
+ /* initializing form-like input of bookData for PUT and POST */
const [bookURLState, setBookURLState] = useState('')
const [bookTitleState, setBookTitleState] = useState('')
const [bookIDState, setBookIDState] = useState('')
@@ -27,6 +30,8 @@ function App() {
const [bookReviewCountState, setBookReviewCountState] = useState('')
const [bookImageURLState, setBookImageURLState] = useState('')
const [bookSimilarBooksState, setBookSimilarBooksState] = useState('')
+
+ /* Initializing form-like input of authorData for PUT AND POST */
const [authorNameState, setAuthorNameState] = useState('')
const [authorURLState, setAuthorURLState] = useState('')
const [authorIDState, setAuthorIDState] = useState('')
@@ -37,13 +42,14 @@ function App() {
const [authorRelatedAuthorsState, setAuthorRelatedAuthorsState] = useState('')
const [authorAuthorBooksState, setAuthorAuthorBooksState] = useState('')
+ /* Hooks used to show whether the data passed in is bookData or authorData */
const [dataState, setDataState] = useState({})
-
+ /* Activating axios */
const axios = require('axios').default;
var center = {display: 'flex', justifyContent: 'center', alignItems: 'center'}
-
+ /** Function used in GET Requests */
function get() {
axios.get('http://127.0.0.1:5000/api/' + queryStr)
.then(function (response) {
@@ -66,9 +72,11 @@ function App() {
})
}
+ /** Function used in PUT and POST: extract user input of bookData from the form and parse into JSON */
function createJson() {
var bookData = {}
bookData.type = 'book'
+ /* Set corresponding value if the input is not empty */
if(bookURLState !== '') {bookData.book_url = bookURLState}
if(bookTitleState !== '') {bookData.title = bookTitleState}
if(bookIDState !== '') {bookData.id = bookIDState}
@@ -82,10 +90,12 @@ function App() {
setDataState(bookData)
return bookData
}
-
+
+ /** Function used in PUT and POST: extract user input of authorData from the form and parse into JSON */
function createJsonAuthor() {
var authorData = {}
authorData.type = 'author'
+ /* Set corresponding value if the input is not empty */
if(authorNameState !== '') {authorData.name = authorNameState}
if(authorURLState !== '') {authorData.author_url = authorURLState}
if(authorIDState !== '') {authorData.id = authorIDState}
@@ -98,10 +108,13 @@ 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') {
@@ -110,6 +123,8 @@ function App() {
setFormState('hide')
}
}
+
+ /** Function used to show authorData input form */
function changeFormStateAuthor() {
setRenderState(false)
if (formState === 'hide') {
@@ -118,10 +133,13 @@ function App() {
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() {
setRenderState(false)
hideForm()
@@ -150,6 +168,8 @@ function App() {
document.getElementById('dialog').value = error //.response.status + ":\n" + error.response.statusText
})
}
+
+ /** Function used in POST requests */
function post() {
setRenderState(false)
let config = {
@@ -178,6 +198,8 @@ function App() {
document.getElementById('dialog').value = error //.response.status + ":\n" + error.response.statusText
})
}
+
+ /** Function used in DELETE requests */
function delete_data() {
setRenderState(false)
axios.delete('http://127.0.0.1:5000/api/' + queryStr)
@@ -195,8 +217,10 @@ function App() {
})
}
+ /** HTML code */
return (
<div>
+ {/* Dialog used when received response from server */}
{dialogState === true &&
<Dialog //Warning, not responsive!
show={dialogState}
@@ -237,6 +261,7 @@ function App() {
/>
</div>
<h3 style={center}> Please input your data for uploading (only effective for POST and PUT):</h3>
+ {/* Buttons used to select book or author data to be passed to PUT/POST */}
{formState === 'hide' &&
<div style={center}>
<button style={{width:60}} onClick={changeFormStateBook}>
@@ -246,6 +271,7 @@ function App() {
author
</button>
</div>}
+ {/* Form-like input for bookData */}
{formState === 'showBook' &&
<form style={{border:'2px solid silver', marginLeft:'180px', marginRight: '180px'}}>
<div style={center}>
@@ -283,6 +309,7 @@ function App() {
</div>
</form>
}
+ {/* Form-like input for authorData */}
{formState === 'showAuthor' &&
<form style={{border:'2px solid silver', marginLeft:'180px', marginRight: '180px'}}>
<div style={center}>
@@ -318,6 +345,7 @@ function App() {
<button style={{marginLeft:600, width:60}} onClick={hideForm}> back </button>
}
<div style={{marginTop:20, display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+ {/* Fout buttons for GET PUT POST and DELETE */}
<FourButtons
backColor='blue'
borderColor='RoyalBlue'
@@ -345,6 +373,7 @@ function App() {
</div>
{renderState === true &&
<div>
+ {/* Data Table used to render response json data */}
<ElementDisplay data={dataState}/>
</div>}
</div>
diff --git a/web/app/src/Components/ElementDisplay.js b/web/app/src/Components/ElementDisplay.js
index 05945fa63d1d4e815dda881311fc3be797c9572b..a8d53ad28d9a3f4119ce123dba91f21eb2ae6eaf 100644
--- a/web/app/src/Components/ElementDisplay.js
+++ b/web/app/src/Components/ElementDisplay.js
@@ -1,5 +1,6 @@
import MUIDataTable from "mui-datatables";
+/** MUI dataTable component, used for rendering received response */
const ElementDisplay = (props) => {
var fields = Object.keys(props.data)
diff --git a/web/app/src/Components/FourButtons.js b/web/app/src/Components/FourButtons.js
index fa54761bcb9e1469a1731b9ae20b36593b08640a..e51eb2c582fc27602beb94d57e0c29e37d672e86 100644
--- a/web/app/src/Components/FourButtons.js
+++ b/web/app/src/Components/FourButtons.js
@@ -1,3 +1,4 @@
+/** Button Component for GET PUT POST DELETE */
const FourButtons = ({backColor, borderColor, leftMargin, text, func}) => {
return (
<button