enforce 280-character limit for blooms in backend, DB, and frontend

Author: Ameneh-Keshavarz

backend/data/blooms.py

@@ -16,10 +16,13 @@ class Bloom:
 
 
 def add_bloom(*, sender: User, content: str) -> Bloom:
-    hashtags = [word[1:] for word in content.split(" ") if word.startswith("#")]
+    if len(content) > 280:
+        raise ValueError("Bloom content exceeds the 280 character limit.")
 
+    hashtags = [word[1:] for word in content.split(" ") if word.startswith("#")]
     now = datetime.datetime.now(tz=datetime.UTC)
     bloom_id = int(now.timestamp() * 1000000)
+
     with db_cursor() as cur:
         cur.execute(
             "INSERT INTO blooms (id, sender_id, content, send_timestamp) VALUES (%(bloom_id)s, %(sender_id)s, %(content)s, %(timestamp)s)",

backend/populate.py

@@ -64,8 +64,8 @@ def main():
     writer_access_token = create_user("AS", "neverSt0pTalking")
     send_bloom(
         writer_access_token,
-        "In this essay I will convince you that my views are correct in ways you have never imagined. If it doesn't change your life, read it again. Marshmallows are magnificent. They have great squish, tasty good, and you can even toast them over a fire. Toast them just right until they have a tiny bit of crunch when you bite into them, and have just started melting in the middle.",
-    )
+        "In this essay I will convince you my views are correct in ways you never imagined. If it doesn't change your life, read it again. Marshmallows are magnificent—great squish, tasty, and perfect toasted with a crisp outside and melty middle."
+        )
 
     justsomeguy_access_token = create_user("JustSomeGuy", "mysterious")
     send_bloom(justsomeguy_access_token, "Hello.")

db/schema.sql

@@ -9,7 +9,7 @@ CREATE TABLE users (
 CREATE TABLE blooms (
     id BIGSERIAL NOT NULL PRIMARY KEY,
     sender_id INT NOT NULL REFERENCES users(id),
-    content TEXT NOT NULL,
+    content TEXT NOT NULL CHECK (char_length(content) <= 280),
     send_timestamp TIMESTAMP NOT NULL
 );
 

front-end/components/bloom-form.mjs

@@ -52,7 +52,18 @@ function handleTyping(event) {
     .closest("[data-form]")
     ?.querySelector("[data-counter]");
   const maxLength = parseInt(textarea.getAttribute("maxlength"), 10);
-  counter.textContent = `${textarea.value.length} / ${maxLength}`;
+  const currentLength = textarea.value.length;
+
+  counter.textContent = `${currentLength} / ${maxLength}`;
+
+  if (currentLength >= maxLength) {
+    counter.style.color = "red";
+    counter.setAttribute("aria-live", "polite");
+    counter.textContent += " — character limit reached!";
+  } else {
+    counter.style.color = "";
+  }
 }
 
+
 export {createBloomForm, handleBloomSubmit, handleTyping};

front-end/index.html

@@ -219,6 +219,7 @@ <h2 id="bloom-form-title" class="bloom-form__title">Share a Bloom</h2>
               placeholder="What's happening?"
               maxlength="280"
               spellcheck="true"
+              maxlength="280"
               required
             ></textarea>
             <div class="bloom-form__counter" data-counter>0/280</div>