Merge pull request #327 from realpython/build-a-rest-api-frontend-ian

Suggestions for frontend code

Author: acsany

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

@@ -1,9 +1,10 @@
 from flask import render_template
+
 import config
 from models import Person
 
 app = config.connex_app
-app.add_api("swagger.yml")
+app.add_api(config.basedir / "swagger.yml")
 
 
 @app.route("/")

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

@@ -1,37 +1,44 @@
 from datetime import datetime
+
 from config import app, db
-from models import Person, Note
+from models import Note, Person
 
 PEOPLE_NOTES = [
     {
         "lname": "Fairy",
-        "fname": "Sugar",
+        "fname": "Tooth",
         "notes": [
-            ("Cool, a mini-blogging application!", "2022-01-06 22:17:54"),
-            ("This could be useful", "2022-01-08 22:17:54"),
-            ("Well, sort of useful", "2022-03-06 22:17:54"),
+            ("I brush my teeth after each meal.", "2022-01-06 17:10:24"),
+            (
+                "The other day a friend said, I have big teeth.",
+                "2022-03-05 22:17:54",
+            ),
+            ("Do you pay per gram?", "2022-03-05 22:18:10"),
         ],
     },
     {
         "lname": "Ruprecht",
         "fname": "Knecht",
         "notes": [
             (
-                "I'm going to make really profound observations",
-                "2022-01-07 22:17:54",
+                "I swear, I'll do better this year.",
+                "2022-01-01 09:15:03",
             ),
             (
-                "Maybe they'll be more obvious than I thought",
-                "2022-02-06 22:17:54",
+                "Really! Only good deeds from now on!",
+                "2022-02-06 13:09:21",
             ),
         ],
     },
     {
         "lname": "Bunny",
         "fname": "Easter",
         "notes": [
-            ("Has anyone seen my Easter eggs?", "2022-01-07 22:47:54"),
-            ("I'm really late delivering these!", "2022-04-06 22:17:54"),
+            (
+                "Please keep the current inflation rate in mind!",
+                "2022-01-07 22:47:54",
+            ),
+            ("No need to hide the eggs this time.", "2022-04-06 13:03:17"),
         ],
     },
 ]
@@ -41,8 +48,7 @@
     db.create_all()
     for data in PEOPLE_NOTES:
         new_person = Person(lname=data.get("lname"), fname=data.get("fname"))
-        for note in data.get("notes"):
-            content, timestamp = note
+        for content, timestamp in data.get("notes", []):
             new_person.notes.append(
                 Note(
                     content=content,
@@ -52,5 +58,4 @@
                 )
             )
         db.session.add(new_person)
-
     db.session.commit()

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

@@ -1,15 +1,14 @@
-import os
+import pathlib
+
 import connexion
-from flask_sqlalchemy import SQLAlchemy
 from flask_marshmallow import Marshmallow
+from flask_sqlalchemy import SQLAlchemy
 
-basedir = os.path.abspath(os.path.dirname(__file__))
+basedir = pathlib.Path(__file__).parent.resolve()
 connex_app = connexion.App(__name__, specification_dir=basedir)
 
 app = connex_app.app
-app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:////" + os.path.join(
-    basedir, "people.db"
-)
+app.config["SQLALCHEMY_DATABASE_URI"] = f"sqlite:///{basedir / 'people.db'}"
 app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
 
 db = SQLAlchemy(app)

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

@@ -1,5 +1,7 @@
 from datetime import datetime
+
 from marshmallow_sqlalchemy import fields
+
 from config import db, ma
 
 
@@ -29,8 +31,9 @@ class Person(db.Model):
     timestamp = db.Column(
         db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow
     )
+
     notes = db.relationship(
-        "Note",
+        Note,
         backref="person",
         cascade="all, delete, delete-orphan",
         single_parent=True,
@@ -46,3 +49,8 @@ class Meta:
         include_relationships = True
 
     notes = fields.Nested(NoteSchema, many=True)
+
+
+note_schema = NoteSchema()
+person_schema = PersonSchema()
+people_schema = PersonSchema(many=True)

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

@@ -1,18 +1,13 @@
-from flask import make_response, abort
+from flask import abort, make_response
 
 from config import db
-from models import (
-    Note,
-    NoteSchema,
-    Person,
-)
+from models import Note, Person, note_schema
 
 
 def read_one(note_id):
     note = Note.query.get(note_id)
 
     if note is not None:
-        note_schema = NoteSchema()
         return note_schema.dump(note)
     else:
         abort(404, f"Note with ID {note_id} not found")
@@ -22,12 +17,11 @@ def update(note_id, note):
     existing_note = Note.query.get(note_id)
 
     if existing_note:
-        schema = NoteSchema()
-        update_note = schema.load(note, session=db.session)
+        update_note = note_schema.load(note, session=db.session)
         existing_note.content = update_note.content
         db.session.merge(existing_note)
         db.session.commit()
-        return schema.dump(existing_note), 201
+        return note_schema.dump(existing_note), 201
     else:
         abort(404, f"Note with ID {note_id} not found")
 
@@ -38,7 +32,7 @@ def delete(note_id):
     if existing_note:
         db.session.delete(existing_note)
         db.session.commit()
-        return make_response(f"{note_id} successfully deleted", 200)
+        return make_response(f"{note_id} successfully deleted", 204)
     else:
         abort(404, f"Note with ID {note_id} not found")
 
@@ -48,10 +42,9 @@ def create(note):
     person = Person.query.get(person_id)
 
     if person:
-        schema = NoteSchema()
-        new_note = schema.load(note, session=db.session)
+        new_note = note_schema.load(note, session=db.session)
         person.notes.append(new_note)
         db.session.commit()
-        return schema.dump(new_note), 201
+        return note_schema.dump(new_note), 201
     else:
         abort(404, f"Person not found for ID: {person_id}")

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

@@ -1,31 +1,25 @@
-from flask import make_response, abort
+from flask import abort, make_response
 
 from config import db
-from models import (
-    Person,
-    PersonSchema,
-)
+from models import Person, people_schema, person_schema
 
 
 def read_all():
     people = Person.query.all()
-    person_schema = PersonSchema(many=True)
-    return person_schema.dump(people)
+    return people_schema.dump(people)
 
 
 def create(person):
-    schema = PersonSchema()
-    new_person = schema.load(person, session=db.session)
+    new_person = person_schema.load(person, session=db.session)
     db.session.add(new_person)
     db.session.commit()
-    return schema.dump(new_person), 201
+    return person_schema.dump(new_person), 201
 
 
 def read_one(person_id):
     person = Person.query.get(person_id)
 
     if person is not None:
-        person_schema = PersonSchema()
         return person_schema.dump(person)
     else:
         abort(404, f"Person with ID {person_id} not found")
@@ -35,12 +29,11 @@ def update(person_id, person):
     existing_person = Person.query.get(person_id)
 
     if existing_person:
-        schema = PersonSchema()
-        update_person = schema.load(person, session=db.session)
+        update_person = person_schema.load(person, session=db.session)
         existing_person.fname = update_person.fname
         db.session.merge(existing_person)
         db.session.commit()
-        return schema.dump(existing_person), 201
+        return person_schema.dump(existing_person), 201
     else:
         abort(404, f"Person with ID {person_id} not found")
 

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();