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

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"]

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>

web/app/src/Components/ElementDisplay.js

 import MUIDataTable from "mui-datatables";
 
+/** MUI dataTable component, used for rendering received response */
 const ElementDisplay = (props) => {
 
     var fields = Object.keys(props.data)

web/app/src/Components/FourButtons.js

+/** Button Component for GET PUT POST DELETE */
 const FourButtons = ({backColor, borderColor, leftMargin, text, func}) => {
     return (
         <button