diff --git a/backend/data/blooms.py b/backend/data/blooms.py index 7e280cf..b5eb03a 100644 --- a/backend/data/blooms.py +++ b/backend/data/blooms.py @@ -16,6 +16,9 @@ class Bloom: def add_bloom(*, sender: User, content: str) -> Bloom: + # // 280 char limit + if len(content) > 280: + return {"error": "Too long!"}, 400 hashtags = [word[1:] for word in content.split(" ") if word.startswith("#")] now = datetime.datetime.now(tz=datetime.UTC) diff --git a/front-end/components/bloom-form.mjs b/front-end/components/bloom-form.mjs index e047f9a..544f653 100644 --- a/front-end/components/bloom-form.mjs +++ b/front-end/components/bloom-form.mjs @@ -1,4 +1,4 @@ -import {apiService} from "../index.mjs"; +import { apiService } from "../index.mjs"; /** * Create a bloom form component @@ -7,12 +7,12 @@ import {apiService} from "../index.mjs"; * @returns {DocumentFragment} - The bloom form fragment */ function createBloomForm(template, isLoggedIn) { - if (!isLoggedIn) return; - const bloomFormElement = document - .getElementById(template) - .content.cloneNode(true); + if (!isLoggedIn) return; + const bloomFormElement = document + .getElementById(template) + .content.cloneNode(true); - return bloomFormElement; + return bloomFormElement; } /** @@ -20,26 +20,32 @@ function createBloomForm(template, isLoggedIn) { * @param {Event} event - The form submission event */ async function handleBloomSubmit(event) { - event.preventDefault(); - const form = event.target; - const submitButton = form.querySelector("[data-submit]"); - const originalText = submitButton.textContent; - const textarea = form.querySelector("textarea"); - const content = textarea.value.trim(); + event.preventDefault(); + const form = event.target; + const submitButton = form.querySelector("[data-submit]"); + const originalText = submitButton.textContent; + const textarea = form.querySelector("textarea"); + const content = textarea.value.trim(); - try { - // Make form inert while we call the back end - form.inert = true; - submitButton.textContent = "Posting..."; - await apiService.postBloom(content); - textarea.value = ""; - } catch (error) { - throw error; - } finally { - // Restore form - submitButton.textContent = originalText; - form.inert = false; - } + //add char limit + if (content.length > 280) { + alert("Too long! Maximum 280 characters."); + return; + } + + try { + // Make form inert while we call the back end + form.inert = true; + submitButton.textContent = "Posting..."; + await apiService.postBloom(content); + textarea.value = ""; + } catch (error) { + throw error; + } finally { + // Restore form + submitButton.textContent = originalText; + form.inert = false; + } } /** @@ -47,12 +53,12 @@ async function handleBloomSubmit(event) { * @param {Event} event - The input event from textarea drives the character counter */ function handleTyping(event) { - const textarea = event.target; - const counter = textarea - .closest("[data-form]") - ?.querySelector("[data-counter]"); - const maxLength = parseInt(textarea.getAttribute("maxlength"), 10); - counter.textContent = `${textarea.value.length} / ${maxLength}`; + const textarea = event.target; + const counter = textarea + .closest("[data-form]") + ?.querySelector("[data-counter]"); + const maxLength = parseInt(textarea.getAttribute("maxlength"), 10); + counter.textContent = `${textarea.value.length} / ${maxLength}`; } -export {createBloomForm, handleBloomSubmit, handleTyping}; +export { createBloomForm, handleBloomSubmit, handleTyping };