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