diff --git a/src/components/annoucements/AnnouncementEditModal.jsx b/src/components/annoucements/AnnouncementEditModal.jsx index 2f666543e7a0bbea47605a5a5448c67d1a63f7be..afff7c9b28f5ece6f9cefb07f74f995deb5f52f7 100644 --- a/src/components/annoucements/AnnouncementEditModal.jsx +++ b/src/components/annoucements/AnnouncementEditModal.jsx @@ -18,14 +18,18 @@ const AnnouncementEditModal = ({ }) => { const [text, setText] = useState(announcement.content); const [link, setLink] = useState(announcement.link); - const [linkValid, setLinkValid] = useState(null); - const [noTextError, setNoTextError] = useState(false); + const [textError, setTextError] = useState(null); + const [linkError, setLinkError] = useState(null); const onTextInput = (newText) => { setText(newText); if (newText !== "") { - setNoTextError(false); + if (newText.length > 1024) { + setTextError("MaximálnĂ dĂ©lka pĹ™ĂspÄ›vku je 1024 znakĹŻ."); + } else { + setTextError(null); + } } }; @@ -33,7 +37,11 @@ const AnnouncementEditModal = ({ setLink(newLink); if (!!newLink) { - setLinkValid(urlRegex.test(newLink)); + if (newLink.length > 1024) { + setLinkError("MaximálnĂ dĂ©lka URL je 256 znakĹŻ."); + } else { + setLinkError(urlRegex.test(newLink) ? null : "Zadejte platnou URL."); + } } }; @@ -46,12 +54,15 @@ const AnnouncementEditModal = ({ }; if (!text) { - setNoTextError(true); + setTextError("PĹ™ed Ăşpravou oznámenĂ nezapomeĹte vyplnit jeho obsah."); + preventAction = true; + } else if (!!text && text.length > 1024) { + setTextError("MaximálnĂ dĂ©lka oznámenĂ je 1024 znakĹŻ."); preventAction = true; } if (announcement.type === "voting" && !link) { - setLinkValid(false); + setLinkError("Zadejte platnou URL."); preventAction = true; } else { payload.link = link; @@ -78,11 +89,7 @@ const AnnouncementEditModal = ({ <MarkdownEditor value={text} onChange={onTextInput} - error={ - noTextError - ? "PĹ™ed Ăşpravou oznámenĂ nezapomeĹte vyplnit jeho obsah." - : null - } + error={textError} placeholder="VyplĹte text oznámenĂ" toolbarCommands={[ ["bold", "italic", "strikethrough"], @@ -92,7 +99,7 @@ const AnnouncementEditModal = ({ <div className={classNames("form-field mt-4", { hidden: announcement.type !== "voting", - "form-field--error": linkValid === false, + "form-field--error": !!linkError, })} > <div className="form-field__wrapper form-field__wrapper--shadowed"> @@ -107,8 +114,8 @@ const AnnouncementEditModal = ({ <i className="ico--link"></i> </div> </div> - {linkValid === false && ( - <div className="form-field__error">Zadejte platnou URL.</div> + {!!linkError && ( + <div className="form-field__error">{linkError}</div> )} </div> {error && ( @@ -123,6 +130,7 @@ const AnnouncementEditModal = ({ color="blue-300" className="text-sm" loading={confirming} + disabled={textError || linkError || confirming} type="submit" > UloĹľit diff --git a/src/components/posts/PostEditModal.jsx b/src/components/posts/PostEditModal.jsx index e880b05d5b608f3a58a961a8d17903fb5313cbab..78e0055414f0bb9368a2236ddec2bfdd068b99e9 100644 --- a/src/components/posts/PostEditModal.jsx +++ b/src/components/posts/PostEditModal.jsx @@ -15,13 +15,17 @@ const PostEditModal = ({ ...props }) => { const [text, setText] = useState(post.content); - const [noTextError, setNoTextError] = useState(false); + const [textError, setTextError] = useState(null); const onTextInput = (newText) => { setText(newText); if (newText !== "") { - setNoTextError(false); + if (newText.length >= 1024) { + setTextError("MaximálnĂ dĂ©lka pĹ™ĂspÄ›vku je 1024 znakĹŻ."); + } else { + setTextError(null); + } } }; @@ -31,7 +35,7 @@ const PostEditModal = ({ if (!!text) { onConfirm(text); } else { - setNoTextError(true); + setTextError("PĹ™ed upravenĂm pĹ™ĂspÄ›vku nezapomeĹte vyplnit jeho obsah."); } }; @@ -49,11 +53,7 @@ const PostEditModal = ({ <MarkdownEditor value={text} onChange={onTextInput} - error={ - noTextError - ? "PĹ™ed upravenĂm pĹ™ĂspÄ›vku nezapomeĹte vyplnit jeho obsah." - : null - } + error={textError} placeholder="VyplĹte text pĹ™ĂspÄ›vku" toolbarCommands={[ ["header", "bold", "italic", "strikethrough"], @@ -72,6 +72,7 @@ const PostEditModal = ({ hoverActive color="blue-300" className="text-sm" + disabled={textError || confirming} loading={confirming} onClick={confirm} > diff --git a/src/containers/AddAnnouncementForm.jsx b/src/containers/AddAnnouncementForm.jsx index 26541927bf7957571eec55cef2f594750b57a44e..37bd25284f072654b8e211b58785804aa7a8d1b0 100644 --- a/src/containers/AddAnnouncementForm.jsx +++ b/src/containers/AddAnnouncementForm.jsx @@ -11,8 +11,8 @@ import { urlRegex } from "utils"; const AddAnnouncementForm = ({ className }) => { const [text, setText] = useState(""); const [link, setLink] = useState(""); - const [linkValid, setLinkValid] = useState(null); - const [noTextError, setNoTextError] = useState(false); + const [textError, setTextError] = useState(null); + const [linkError, setLinkError] = useState(null); const [type, setType] = useState("announcement"); const [adding, addingError] = useActionState(addAnnouncement, { @@ -25,7 +25,11 @@ const AddAnnouncementForm = ({ className }) => { setText(newText); if (newText !== "") { - setNoTextError(false); + if (newText.length > 1024) { + setTextError("MaximálnĂ dĂ©lka pĹ™ĂspÄ›vku je 1024 znakĹŻ."); + } else { + setTextError(null); + } } }; @@ -33,7 +37,11 @@ const AddAnnouncementForm = ({ className }) => { setLink(newLink); if (!!newLink) { - setLinkValid(urlRegex.test(newLink)); + if (newLink.length > 1024) { + setLinkError("MaximálnĂ dĂ©lka URL je 256 znakĹŻ."); + } else { + setLinkError(urlRegex.test(newLink) ? null : "Zadejte platnou URL."); + } } }; @@ -45,12 +53,15 @@ const AddAnnouncementForm = ({ className }) => { }; if (!text) { - setNoTextError(true); + setTextError("PĹ™ed pĹ™idánĂm oznámenĂ nezapomeĹte vyplnit jeho obsah."); + preventAction = true; + } else if (!!text && text.length > 1024) { + setTextError("MaximálnĂ dĂ©lka oznámenĂ je 1024 znakĹŻ."); preventAction = true; } if (type === "voting" && !link) { - setLinkValid(false); + setLinkError("Zadejte platnou URL."); preventAction = true; } else { payload.link = link; @@ -65,8 +76,8 @@ const AddAnnouncementForm = ({ className }) => { if (!result.error) { setText(""); setLink(""); - setNoTextError(false); - setLinkValid(null); + setTextError(null); + setLinkError(null); } }; @@ -107,11 +118,7 @@ const AddAnnouncementForm = ({ className }) => { <MarkdownEditor value={text} onChange={onTextInput} - error={ - noTextError - ? "PĹ™ed pĹ™idánĂm oznámenĂ nezapomeĹte vyplnit jeho obsah." - : null - } + error={textError} placeholder="VyplĹte text oznámenĂ" toolbarCommands={[ ["bold", "italic", "strikethrough"], @@ -123,7 +130,7 @@ const AddAnnouncementForm = ({ className }) => { <div className={classNames("form-field", { hidden: type !== "voting", - "form-field--error": linkValid === false, + "form-field--error": !!linkError, })} > <div className="form-field__wrapper form-field__wrapper--shadowed"> @@ -138,9 +145,7 @@ const AddAnnouncementForm = ({ className }) => { <i className="ico--link"></i> </div> </div> - {linkValid === false && ( - <div className="form-field__error">Zadejte platnou URL.</div> - )} + {!!linkError && <div className="form-field__error">{linkError}</div>} </div> </div> @@ -149,7 +154,7 @@ const AddAnnouncementForm = ({ className }) => { className="text-sm mt-4" hoverActive loading={adding} - disabled={adding} + disabled={textError || linkError || adding} fullwidth > PĹ™idat oznámenĂ diff --git a/src/containers/AddPostForm.jsx b/src/containers/AddPostForm.jsx index a1d2ba22555985462edae40f3a823b157f845bdd..ace1a15b49850c88b126d584a99ad18ec23e962f 100644 --- a/src/containers/AddPostForm.jsx +++ b/src/containers/AddPostForm.jsx @@ -9,7 +9,7 @@ import { useActionState } from "hooks"; const AddPostForm = ({ className }) => { const [text, setText] = useState(""); const [type, setType] = useState("post"); - const [noTextError, setNoTextError] = useState(false); + const [error, setError] = useState(null); const [addingPost, addingPostError] = useActionState(addPost, { content: text, }); @@ -21,21 +21,27 @@ const AddPostForm = ({ className }) => { setText(newText); if (newText !== "") { - setNoTextError(false); + if (newText.length >= 1024) { + setError("MaximálnĂ dĂ©lka pĹ™ĂspÄ›vku je 1024 znakĹŻ."); + } else { + setError(null); + } } }; const onAdd = async (evt) => { if (!!text) { - const result = await (type === "post" ? addPost : addProposal).run({ - content: text, - }); + if (!error) { + const result = await (type === "post" ? addPost : addProposal).run({ + content: text, + }); - if (!result.error) { - setText(""); + if (!result.error) { + setText(""); + } } } else { - setNoTextError(true); + setError("PĹ™ed pĹ™idánĂm pĹ™ĂspÄ›vku nezapomeĹte vyplnit jeho obsah."); } }; @@ -55,11 +61,7 @@ const AddPostForm = ({ className }) => { <MarkdownEditor value={text} onChange={onTextInput} - error={ - noTextError - ? "PĹ™ed pĹ™idánĂm pĹ™ĂspÄ›vku nezapomeĹte vyplnit jeho obsah." - : null - } + error={error} placeholder="VyplĹte text vašeho pĹ™ĂspÄ›vku" toolbarCommands={[ ["header", "bold", "italic", "strikethrough"], @@ -93,7 +95,7 @@ const AddPostForm = ({ className }) => { <div className="space-x-4"> <Button onClick={onAdd} - disabled={addingPost || addingProposal} + disabled={error || addingPost || addingProposal} loading={addingPost || addingProposal} fullwidth hoverActive