4

Signed-off-by: Julio Jimenez <[email protected]>

.github/workflows/tests.yml

@@ -57,7 +57,10 @@ jobs:
           "chapter-6/15-bulk-delete",
           "chapter-6/16-the-delete-selected-contacts-button",
           "chapter-6/17-the-server-side-for-delete-selected-contacts",
-          "chapter-7/1-beginning-our-implementation"
+          "chapter-7/1-beginning-our-implementation",
+          "chapter-7/2-adding-the-archiving-endpoint",
+          "chapter-7/3-conditionally-rendering-a-progress-ui",
+          "chapter-7/4-using-polling-to-update-the-archive-ui"
         ]
 
     steps:

.github/workflows/typechecker.yml

@@ -57,7 +57,10 @@ jobs:
           "chapter-6/15-bulk-delete",
           "chapter-6/16-the-delete-selected-contacts-button",
           "chapter-6/17-the-server-side-for-delete-selected-contacts",
-          "chapter-7/1-beginning-our-implementation"
+          "chapter-7/1-beginning-our-implementation",
+          "chapter-7/2-adding-the-archiving-endpoint",
+          "chapter-7/3-conditionally-rendering-a-progress-ui",
+          "chapter-7/4-using-polling-to-update-the-archive-ui"
         ]
 
     steps:

README.md

@@ -102,6 +102,7 @@ Each example runs on a different port. Run multiple examples simultaneously and
 - [Beginning Our Implementation](./chapter-7/1-beginning-our-implementation/)
 - [Adding The Archiving Endpoing](./chapter-7/2-adding-the-archiving-endpoint/)
 - [Conditionally Rendering A Progress UI](./chapter-7/3-conditionally-rendering-a-progress-ui/)
+- [Using Polling To Update The Archive UI](./chapter-7/4-using-polling-to-update-the-archive-ui/)
 
 ## Support
 

chapter-7/4-using-polling-to-update-the-archive-ui/app.py

@@ -0,0 +1,132 @@
+from contacts_model import Contact, Archiver
+from flask import Flask, flash, redirect, render_template, request
+from typing import Any
+from werkzeug.wrappers import response
+
+Contact.load_db()
+
+app: Flask = Flask(__name__)
+
+app.secret_key = b"it is over"
+
+
+@app.route("/")
+def index() -> response.Response:
+    return redirect("/contacts")
+
+
+@app.route("/contacts")
+def contacts() -> str:
+    search: str | None = request.args.get("q")
+    page: int = int(request.args.get("page", 1))
+    if search is not None:
+        contacts_set: list = Contact.search(search)
+        if request.headers.get('HX-Trigger') == 'search':
+            return render_template("rows.html", contacts=contacts_set)
+    else:
+        contacts_set = Contact.all(page)
+    return render_template("index.html", contacts=contacts_set, page=page, archiver=Archiver.get())
+
+
+
+@app.route("/contacts/count")
+def contacts_count() -> str:
+    count: int = Contact.count()
+    return f"({str(count)} total Contacts)"
+
+
+@app.route("/contacts/new", methods=["GET"])
+def contacts_new_get() -> str:
+    return render_template("new.html", contact=Contact())
+
+
+@app.route("/contacts/new", methods=["POST"])
+def contacts_new() -> response.Response | str:
+    c: Contact = Contact(
+        None,
+        request.form["first_name"],
+        request.form["last_name"],
+        request.form["phone"],
+        request.form["email"],
+    )
+    if c.save():
+        flash("Created New Contact!")
+        return redirect("/contacts")
+    else:
+        return render_template("new.html", contact=c)
+
+
+@app.route("/contacts/<contact_id>")
+def contacts_view(contact_id: int = 0) -> str:
+    contact: Any | None = Contact.find(contact_id)
+    return render_template("show.html", contact=contact)
+
+
+@app.route("/contacts/<contact_id>/edit", methods=["GET"])
+def contacts_edit_get(contact_id: int = 0) -> str:
+    contact: Any | None = Contact.find(contact_id)
+    return render_template("edit.html", contact=contact)
+
+
+@app.route("/contacts/<contact_id>/edit", methods=["POST"])
+def contacts_edit_post(contact_id: int = 0) -> response.Response | str:
+    c: Any = Contact.find(contact_id)
+    c.update(
+        request.form["first_name"],
+        request.form["last_name"],
+        request.form["phone"],
+        request.form["email"],
+    )
+    if c.save():
+        flash("Updated Contact!")
+        return redirect("/contacts/" + str(contact_id))
+    else:
+        return render_template("edit.html", contact=c)
+
+
+@app.route("/contacts/<contact_id>/email", methods=["GET"])
+def contacts_email_get(contact_id=0) -> response.Response | str:
+    c: Any = Contact.find(contact_id)
+    c.email = request.args.get("email")
+    c.validate()
+    return c.errors.get("email") or ""
+
+
+@app.route("/contacts/<contact_id>", methods=["DELETE"])
+def contacts_delete(contact_id: int = 0) -> response.Response | str:
+    contact: Any | None = Contact.find(contact_id)
+    if contact is not None:
+        contact.delete()
+    if request.headers.get('HX-Trigger') == 'delete-btn':
+        flash("Deleted Contact!")
+        return redirect("/contacts", 303)
+    else:
+        return ""
+
+
+@app.route("/contacts/", methods=["DELETE"])
+def contacts_delete_all() -> str:
+    contact_ids: list = list(map(int, request.form.getlist("selected_contact_ids")))
+    for contact_id in contact_ids:
+        contact: Any | None = Contact.find(contact_id)
+        if contact is not None:
+            contact.delete()
+    flash("Deleted Contacts!")
+    contacts_set: list = Contact.all()
+    return render_template("index.html", contacts=contacts_set, page=1)
+
+
+@app.route("/contacts/archive", methods=["POST"])
+def start_archive() -> str:
+    archiver = Archiver.get()
+    archiver.run()
+    return render_template("archive_ui.html", archiver=archiver)
+
+@app.route("/contacts/archive", methods=["GET"])
+def archive_status() -> str:
+    archiver = Archiver.get()
+    return render_template("archive_ui.html", archiver=archiver)
+
+
+if __name__ == "__main__":
+    app.run(port=5050)

chapter-7/4-using-polling-to-update-the-archive-ui/contacts.json

@@ -0,0 +1,162 @@
+[
+  {
+    "id": 2,
+    "first": "Carson",
+    "last": "Gross",
+    "phone": "123-456-7890",
+    "email": "[email protected]",
+    "errors": {}
+  },
+  {
+    "id": 3,
+    "first": "",
+    "last": "",
+    "phone": "",
+    "email": "[email protected]",
+    "errors": {}
+  },
+  {
+    "id": 5,
+    "first": "Joe",
+    "last": "Blow",
+    "phone": "123-456-7890",
+    "email": "[email protected]",
+    "errors": {}
+  },
+  {
+    "id": 6,
+    "first": "Joe",
+    "last": "Blow",
+    "phone": "123-456-7890",
+    "email": "[email protected]",
+    "errors": {}
+  },
+  {
+    "id": 7,
+    "first": "Joe",
+    "last": "Blow",
+    "phone": "123-456-7890",
+    "email": "[email protected]",
+    "errors": {}
+  },
+  {
+    "id": 8,
+    "first": "Joe",
+    "last": "Blow",
+    "phone": "123-456-7890",
+    "email": "[email protected]",
+    "errors": {}
+  },
+  {
+    "id": 9,
+    "first": "Joe",
+    "last": "Blow",
+    "phone": "123-456-7890",
+    "email": "[email protected]",
+    "errors": {}
+  },
+  {
+    "id": 10,
+    "first": "Joe",
+    "last": "Blow",
+    "phone": "123-456-7890",
+    "email": "[email protected]",
+    "errors": {}
+  },
+  {
+    "id": 11,
+    "first": "Joe",
+    "last": "Blow",
+    "phone": "123-456-7890",
+    "email": "[email protected]",
+    "errors": {}
+  },
+  {
+    "id": 12,
+    "first": "Joe",
+    "last": "Blow",
+    "phone": "123-456-7890",
+    "email": "[email protected]",
+    "errors": {}
+  },
+  {
+    "id": 13,
+    "first": "Joe",
+    "last": "Blow",
+    "phone": "123-456-7890",
+    "email": "[email protected]",
+    "errors": {}
+  },
+  {
+    "id": 14,
+    "first": "Joe",
+    "last": "Blow",
+    "phone": "123-456-7890",
+    "email": "[email protected]",
+    "errors": {}
+  },
+  {
+    "id": 15,
+    "first": "Joe",
+    "last": "Blow",
+    "phone": "123-456-7890",
+    "email": "[email protected]",
+    "errors": {}
+  },
+  {
+    "id": 16,
+    "first": "Joe",
+    "last": "Blow",
+    "phone": "123-456-7890",
+    "email": "[email protected]",
+    "errors": {}
+  },
+  {
+    "id": 17,
+    "first": "Joe",
+    "last": "Blow",
+    "phone": "123-456-7890",
+    "email": "[email protected]",
+    "errors": {}
+  },
+  {
+    "id": 18,
+    "first": null,
+    "last": null,
+    "phone": null,
+    "email": "[email protected]",
+    "errors": {}
+  },
+  {
+    "id": 19,
+    "first": null,
+    "last": null,
+    "phone": null,
+    "email": "[email protected]",
+    "errors": {}
+  },
+  {
+    "id": 20,
+    "first": null,
+    "last": null,
+    "phone": null,
+    "email": "[email protected]",
+    "errors": {}
+  },
+  {
+    "id": 21,
+    "first": null,
+    "last": null,
+    "phone": null,
+    "email": "[email protected]",
+    "errors": {}
+  },
+  {
+    "id": 22,
+    "first": null,
+    "last": null,
+    "phone": null,
+    "email": "[email protected]",
+    "errors": {}
+  }
+]