Skip to content
Snippets Groups Projects
Commit d8e2853e authored by zshan2's avatar zshan2
Browse files

assignment-2.2 ver4.1: fixing small bugs and adding comments

parent 82b8bfd6
No related branches found
No related tags found
1 merge request!2Implementation of assignment-2.2
......@@ -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"]
......
......@@ -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>
......
import MUIDataTable from "mui-datatables";
/** MUI dataTable component, used for rendering received response */
const ElementDisplay = (props) => {
var fields = Object.keys(props.data)
......
/** Button Component for GET PUT POST DELETE */
const FourButtons = ({backColor, borderColor, leftMargin, text, func}) => {
return (
<button
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment