Merge pull request #14 from dhmit/create_add_doc_modal

Create Modal for Adding Documents
dhmit · Jun 25, 2021 · 0ce350c · 0ce350c
2 parents 239cb7d + 005b928
commit 0ce350c
Show file tree

Hide file tree

Showing 5 changed files with 253 additions and 32 deletions.
diff --git a/frontend/components/Documents.js b/frontend/components/Documents.js
@@ -2,6 +2,7 @@ import React, {useEffect, useState} from "react";
 // import * as PropTypes from "prop-types";
 // import STYLES from "./Documents.module.scss";
 import {getCookie} from "../common";
+import {Modal} from "react-bootstrap";
 
 const Documents = () => {
 
@@ -13,6 +14,10 @@ const Documents = () => {
         "text": ""
     });
     const [loading, setLoading] = useState(true);
+    const [addingDoc, setAddingDoc] = useState(false);
+    const [showModal, setShowModal] = useState(false);
+    const handleShowModal = () => setShowModal(true);
+    const handleCloseModal = () => setShowModal(false);
 
     useEffect(() => {
         fetch("/api/all_documents")
@@ -53,6 +58,7 @@ const Documents = () => {
 
     const handleSubmit = (event) => {
         event.preventDefault();
+        setAddingDoc(true);
         const csrftoken = getCookie("csrftoken");
         const requestOptions = {
             method: "POST",
@@ -77,6 +83,7 @@ const Documents = () => {
                     "year": "",
                     "text": ""
                 });
+                setAddingDoc(false);
             });
     };
 
@@ -100,40 +107,77 @@ const Documents = () => {
         );
     };
 
+    const addDocModal = () => {
+        return (
+            <>
+                <button className="btn btn-primary"
+                    onClick={handleShowModal}>Add Document</button>
+                <Modal show={showModal} onHide={handleCloseModal}>
+                    <Modal.Header closeButton>Add Document</Modal.Header>
+                    <form onSubmit={handleSubmit}>
+                        <Modal.Body>
+                            <div className="row mb-3">
+                                <label htmlFor="author"
+                                    className="col-2 col-form-label">Author</label>
+                                <div className="col">
+                                    <input type="text" className="form-control"
+                                        id="author" value={newDocData.author}
+                                        onChange={handleAuthorInputChange}/>
+                                </div>
+                            </div>
+                            <div className="row mb-3">
+                                <label htmlFor="title"
+                                    className="col-2 col-form-label">Title</label>
+                                <div className="col">
+                                    <input type="text" className="form-control"
+                                        id="title" value={newDocData.title}
+                                        onChange={handleTitleInputChange}/>
+                                </div>
+                            </div>
+                            <div className="row mb-3">
+                                <label htmlFor="year" className="col-2 col-form-label">Year</label>
+                                <div className="col">
+                                    <input type="number" className="form-control"
+                                        id="year" value={newDocData.year}
+                                        max="9999"
+                                        onChange={handleYearInputChange}/>
+                                </div>
+                            </div>
+                            <div className="row mb-3">
+                                <label htmlFor="text" className="col-2 col-form-label">Text</label>
+                                <div className="col">
+                                    <textarea className="form-control" id="text"
+                                        rows="8" value={newDocData.text}
+                                        onChange={handleTextInputChange} required></textarea>
+                                </div>
+                            </div>
+                        </Modal.Body>
+                        <Modal.Footer>
+                            <button className="btn btn-secondary"
+                                onClick={handleCloseModal}>Close</button>
+                            <button className="btn btn-primary"
+                                type="submit" onClick={handleCloseModal}>Add</button>
+                        </Modal.Footer>
+                    </form>
+                </Modal>
+            </>
+        );
+    };
+
     return (
         <div>
             <h1>This is the Documents page.</h1>
             <p>
                 This page displays all the documents stored in backend.
             </p>
-            <form onSubmit={handleSubmit}>
-                <label>
-                    <p>Author</p>
-                    <input type="text" className="form-control"
-                        id="author" value={newDocData.author}
-                        onChange={handleAuthorInputChange}/>
-                </label>
-                <label>
-                    <p>Title</p>
-                    <input type="text" className="form-control"
-                        id="title" value={newDocData.title}
-                        onChange={handleTitleInputChange}/>
-                </label>
-                <label>
-                    <p>Year</p>
-                    <input type="number" className="form-control"
-                        id="year" value={newDocData.year}
-                        max="9999"
-                        onChange={handleYearInputChange}/>
-                </label>
-                <label>
-                    <p>Text</p>
-                    <textarea className="form-control" id="text"
-                        rows="8" value={newDocData.text}
-                        onChange={handleTextInputChange} required></textarea>
-                </label>
-                <button type="submit">Add</button>
-            </form>
+            {
+                addingDoc
+                    ? <div className="alert alert-warning" role="alert">
+                        Currently adding document... Please do not close this tab.
+                    </div>
+                    : null
+            }
+            {addDocModal()}
             {
                 loading
                     ? <p>Currently Loading Documents...</p>

diff --git a/frontend/index.js b/frontend/index.js
@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import "./scss/index.scss";
+import "bootstrap/dist/css/bootstrap.min.css";
 import Base from "./components/global/Base";
 import ErrorNotFoundComponent from "./components/ErrorNotFoundComponent";
 import ExampleId from "./components/ExampleId";