refactor

Author: iansedano

build-a-rest-api-frontend/.gitignore

@@ -0,0 +1 @@
+*.db

build-a-rest-api-frontend/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "printWidth": 79
+}

build-a-rest-api-frontend/source_code_final/app.py

@@ -2,6 +2,8 @@
 import config
 from models import Person
 
+import sys
+
 app = config.connex_app
 app.add_api("swagger.yml")
 
@@ -10,6 +12,13 @@
 def home():
     people = Person.query.all()
     return render_template("home.html", people=people)
+    
+@app.route("/<person_name>")
+def person(person_name):
+    print(person_name, file=sys.stderr)
+    person_object = Person.query.order_by(Person.fname.ilike("person_name")).first()
+    print(person_object.fname, file=sys.stderr)
+    return render_template("person.html", person=person_object)
 
 
 if __name__ == "__main__":

build-a-rest-api-frontend/source_code_final/config.py

@@ -7,7 +7,7 @@
 connex_app = connexion.App(__name__, specification_dir=basedir)
 
 app = connex_app.app
-app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:////" + os.path.join(
+app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///" + os.path.join(
     basedir, "people.db"
 )
 app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False

build-a-rest-api-frontend/source_code_final/static/js/debug.js

@@ -0,0 +1,42 @@
+import { getData } from "./request.js";
+
+export function showInDebug(data) {
+  const debugCard = document.querySelector(".debug-card");
+  if (debugCard) {
+    let code = debugCard.querySelector("code");
+    code.innerText = data;
+  }
+}
+
+export class DebugForm {
+  constructor() {
+    this.debugCard = document.querySelector(".debug-card");
+    this.form = this.debugCard.querySelector(".debug-form");
+    this.clearButton = this.form.querySelector("button[data-action='clear']");
+    this.clearButton.addEventListener(
+      "click",
+      this.handleClearClick.bind(this)
+    );
+    this.sendButton = this.form.querySelector("button[data-action='read']");
+    this.sendButton.addEventListener("click", this.handleSendClick.bind(this));
+  }
+
+  handleClearClick(event) {
+    event.preventDefault();
+    let code = this.debugCard.querySelector("code");
+    code.innerText = "";
+  }
+
+  handleSendClick(event) {
+    event.preventDefault();
+    const input = document.querySelector(".debug-card input");
+    const endpoint = input.value;
+    getData(endpoint, this.showResponse);
+  }
+
+  showResponse(data) {
+    const debugCard = document.querySelector(".debug-card");
+    let code = debugCard.querySelector("code");
+    code.innerText = data;
+  }
+}

build-a-rest-api-frontend/source_code_final/static/js/index.js

@@ -0,0 +1,12 @@
+import { People } from "./people.js";
+import { Notes } from "./notes.js";
+import { DebugForm } from "./debug.js";
+
+function main() {
+  new People();
+  new Notes();
+  const debug = new DebugForm();
+  debug.showResponse("");
+}
+
+main();

build-a-rest-api-frontend/source_code_final/static/js/notes.js

@@ -1,4 +1,6 @@
-class Notes {
+import { sendForm } from "./request.js";
+
+export class Notes {
   constructor() {
     this.allNoteLists = document.querySelectorAll(".note-list");
     this.allNotes = document.querySelectorAll(".note-card");
@@ -17,21 +19,23 @@ class Notes {
   activateAllControls() {
     this.allNotes.forEach((noteCard) => {
       new NoteControl(noteCard);
-    })
+    });
   }
 }
 
 class NoteCreateForm {
   constructor(noteList, personID) {
     this.noteList = noteList;
     this.personID = personID;
-    this.form = this.noteList.querySelector(".note-create-card form")
-    this.createButton = this.form.querySelector("button[data-action='create']");
+    this.form = this.noteList.querySelector(".note-create-card form");
+    this.createButton = this.form.querySelector(
+      "button[data-action='create']"
+    );
     this.createButton.addEventListener("click", this.onCreateClick.bind(this));
     this.connectPerson();
   }
 
- connectPerson() {
+  connectPerson() {
     let fieldPersonID = this.form.querySelector("input[name='person_id']");
     fieldPersonID.setAttribute("value", this.personID);
   }
@@ -44,15 +48,14 @@ class NoteCreateForm {
 
   addNoteToList(rawData) {
     const data = JSON.parse(rawData);
-    const template = document.querySelector(".note-card");
-    const personCard = document.querySelector("[data-person-id= '" + data.person_id + "']");
-    const noteList = personCard.querySelector(".note-list");
-    let noteCard = template.cloneNode(true);
-    let noteContent = noteCard.querySelector(".note-content");
-    noteContent.textContent = data.content;
-    noteContent.setAttribute("data-note-id", data.id);
-    new NoteControl(noteCard);
-    noteList.insertBefore(noteCard, noteList.children[1]);
+    const noteList = document
+      .querySelector("[data-person-id= '" + data.person_id + "']")
+      .querySelector(".note-list");
+    const newNoteCard = document.querySelector(".note-card").cloneNode(true);
+    newNoteCard.querySelector(".note-content").textContent = data.content;
+    newNoteCard.setAttribute("data-note-id", data.id);
+    new NoteControl(newNoteCard);
+    noteList.insertBefore(newNoteCard, noteList.children[1]);
   }
 }
 
@@ -63,47 +66,49 @@ class NoteControl {
     this.noteControl = this.noteCard.querySelector(".note-control");
     this.noteID = this.noteCard.getAttribute("data-note-id");
     this.form = this.noteCard.querySelector("form");
+
     this.editButton = this.noteCard.querySelector(".toggle-control");
-    this.editButton.addEventListener("click", this.onEditClick.bind(this));
+    this.editButton.addEventListener("click", this.handleEditClick.bind(this));
     this.cancel = this.noteCard.querySelector("[data-action='cancel']");
-    this.cancel.addEventListener("click", this.onCancelClick.bind(this));
+    this.cancel.addEventListener("click", this.handleCancelClick.bind(this));
     this.delete = this.noteCard.querySelector("[data-action='delete']");
-    this.delete.addEventListener("click", this.onDeleteClick.bind(this));
+    this.delete.addEventListener("click", this.handleDeleteClick.bind(this));
     this.update = this.noteCard.querySelector("[data-action='update']");
-    this.update.addEventListener("click", this.onUpdateClick.bind(this));
+    this.update.addEventListener("click", this.handleUpdateClick.bind(this));
+
     this.fillControlForm();
   }
 
-  onEditClick(event) {
+  handleEditClick(event) {
     event.preventDefault();
     this.noteCard.classList.add("editing");
     this.noteElement.classList.add("hidden");
     this.editButton.classList.add("hidden");
     this.noteControl.classList.remove("hidden");
   }
 
-  onCancelClick(event) {
+  handleCancelClick(event) {
     event.preventDefault();
     this.noteCard.classList.remove("editing");
     this.noteElement.classList.remove("hidden");
     this.editButton.classList.remove("hidden");
     this.noteControl.classList.add("hidden");
   }
 
-  onDeleteClick(event) {
+  handleDeleteClick(event) {
     event.preventDefault();
     const endpoint = "/api/notes/" + this.noteID;
     sendForm(this.form, "DELETE", endpoint, this.removeNoteFromList);
   }
 
   removeNoteFromList(data, inputForm) {
-    let noteCard = inputForm.closest(".note-card");
+    const noteCard = inputForm.closest(".note-card");
     if (window.confirm("Do you really want to remove this note?")) {
       noteCard.remove();
     }
   }
 
-  onUpdateClick(event) {
+  handleUpdateClick(event) {
     event.preventDefault();
     const endpoint = "/api/notes/" + this.noteID;
     sendForm(this.form, "PUT", endpoint, this.updateNoteInList);
@@ -112,18 +117,17 @@ class NoteControl {
 
   updateNoteInList(rawData, inputForm) {
     const data = JSON.parse(rawData);
-    const noteCard = inputForm.closest(".note-card");
-    let noteContent = noteCard.querySelector(".note-content");
+    const noteContent = inputForm
+      .closest(".note-card")
+      .querySelector(".note-content");
     noteContent.textContent = data.content;
   }
 
   fillControlForm() {
     const noteContent = this.noteElement.textContent;
-    let fieldNoteID = this.form.querySelector("[name='id']");
-    let fieldNoteContent = this.form.querySelector("[name='content']");
-    fieldNoteID.setAttribute("value", this.noteID);
-    fieldNoteContent.setAttribute("value", noteContent);
+    this.form.querySelector("[name='id']").setAttribute("value", this.noteID);
+    this.form
+      .querySelector("[name='content']")
+      .setAttribute("value", noteContent);
   }
 }
-
-new Notes();