Skip to content
Snippets Groups Projects
Commit bf2db416 authored by xaralis's avatar xaralis
Browse files

feat: limit character count of posts and announcements

parent 94b61eea
No related branches found
No related tags found
No related merge requests found
Pipeline #1991 passed
Stage: build
Hide whitespace changes
Inline Side-by-side
src/components/annoucements/AnnouncementEditModal.jsx
+ 22
− 14
View file @ bf2db416
...@@ -18,14 +18,18 @@ const AnnouncementEditModal = ({ ...@@ -18,14 +18,18 @@ const AnnouncementEditModal = ({
}) => { }) => {
const [text, setText] = useState(announcement.content); const [text, setText] = useState(announcement.content);
const [link, setLink] = useState(announcement.link); const [link, setLink] = useState(announcement.link);
const [linkValid, setLinkValid] = useState(null); const [textError, setTextError] = useState(null);
const [noTextError, setNoTextError] = useState(false); const [linkError, setLinkError] = useState(null);
const onTextInput = (newText) => { const onTextInput = (newText) => {
setText(newText); setText(newText);
if (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 = ({ ...@@ -33,7 +37,11 @@ const AnnouncementEditModal = ({
setLink(newLink); setLink(newLink);
if (!!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 = ({ ...@@ -46,12 +54,15 @@ const AnnouncementEditModal = ({
}; };
if (!text) { 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; preventAction = true;
} }
if (announcement.type === "voting" && !link) { if (announcement.type === "voting" && !link) {
setLinkValid(false); setLinkError("Zadejte platnou URL.");
preventAction = true; preventAction = true;
} else { } else {
payload.link = link; payload.link = link;
...@@ -78,11 +89,7 @@ const AnnouncementEditModal = ({ ...@@ -78,11 +89,7 @@ const AnnouncementEditModal = ({
<MarkdownEditor <MarkdownEditor
value={text} value={text}
onChange={onTextInput} onChange={onTextInput}
error={ error={textError}
noTextError
? "Před úpravou oznámení nezapomeňte vyplnit jeho obsah."
: null
}
placeholder="Vyplňte text oznámení" placeholder="Vyplňte text oznámení"
toolbarCommands={[ toolbarCommands={[
["bold", "italic", "strikethrough"], ["bold", "italic", "strikethrough"],
...@@ -92,7 +99,7 @@ const AnnouncementEditModal = ({ ...@@ -92,7 +99,7 @@ const AnnouncementEditModal = ({
<div <div
className={classNames("form-field mt-4", { className={classNames("form-field mt-4", {
hidden: announcement.type !== "voting", hidden: announcement.type !== "voting",
"form-field--error": linkValid === false, "form-field--error": !!linkError,
})} })}
> >
<div className="form-field__wrapper form-field__wrapper--shadowed"> <div className="form-field__wrapper form-field__wrapper--shadowed">
...@@ -107,8 +114,8 @@ const AnnouncementEditModal = ({ ...@@ -107,8 +114,8 @@ const AnnouncementEditModal = ({
<i className="ico--link"></i> <i className="ico--link"></i>
</div> </div>
</div> </div>
{linkValid === false && ( {!!linkError && (
<div className="form-field__error">Zadejte platnou URL.</div> <div className="form-field__error">{linkError}</div>
)} )}
</div> </div>
{error && ( {error && (
...@@ -123,6 +130,7 @@ const AnnouncementEditModal = ({ ...@@ -123,6 +130,7 @@ const AnnouncementEditModal = ({
color="blue-300" color="blue-300"
className="text-sm" className="text-sm"
loading={confirming} loading={confirming}
disabled={textError || linkError || confirming}
type="submit" type="submit"
> >
Uložit Uložit
......
src/components/posts/PostEditModal.jsx
+ 9
− 8
View file @ bf2db416
...@@ -15,13 +15,17 @@ const PostEditModal = ({ ...@@ -15,13 +15,17 @@ const PostEditModal = ({
...props ...props
}) => { }) => {
const [text, setText] = useState(post.content); const [text, setText] = useState(post.content);
const [noTextError, setNoTextError] = useState(false); const [textError, setTextError] = useState(null);
const onTextInput = (newText) => { const onTextInput = (newText) => {
setText(newText); setText(newText);
if (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 = ({ ...@@ -31,7 +35,7 @@ const PostEditModal = ({
if (!!text) { if (!!text) {
onConfirm(text); onConfirm(text);
} else { } else {
setNoTextError(true); setTextError("Před upravením příspěvku nezapomeňte vyplnit jeho obsah.");
} }
}; };
...@@ -49,11 +53,7 @@ const PostEditModal = ({ ...@@ -49,11 +53,7 @@ const PostEditModal = ({
<MarkdownEditor <MarkdownEditor
value={text} value={text}
onChange={onTextInput} onChange={onTextInput}
error={ error={textError}
noTextError
? "Před upravením příspěvku nezapomeňte vyplnit jeho obsah."
: null
}
placeholder="Vyplňte text příspěvku" placeholder="Vyplňte text příspěvku"
toolbarCommands={[ toolbarCommands={[
["header", "bold", "italic", "strikethrough"], ["header", "bold", "italic", "strikethrough"],
...@@ -72,6 +72,7 @@ const PostEditModal = ({ ...@@ -72,6 +72,7 @@ const PostEditModal = ({
hoverActive hoverActive
color="blue-300" color="blue-300"
className="text-sm" className="text-sm"
disabled={textError || confirming}
loading={confirming} loading={confirming}
onClick={confirm} onClick={confirm}
> >
......
src/containers/AddAnnouncementForm.jsx
+ 23
− 18
View file @ bf2db416
...@@ -11,8 +11,8 @@ import { urlRegex } from "utils"; ...@@ -11,8 +11,8 @@ import { urlRegex } from "utils";
const AddAnnouncementForm = ({ className }) => { const AddAnnouncementForm = ({ className }) => {
const [text, setText] = useState(""); const [text, setText] = useState("");
const [link, setLink] = useState(""); const [link, setLink] = useState("");
const [linkValid, setLinkValid] = useState(null); const [textError, setTextError] = useState(null);
const [noTextError, setNoTextError] = useState(false); const [linkError, setLinkError] = useState(null);
const [type, setType] = useState("announcement"); const [type, setType] = useState("announcement");
const [adding, addingError] = useActionState(addAnnouncement, { const [adding, addingError] = useActionState(addAnnouncement, {
...@@ -25,7 +25,11 @@ const AddAnnouncementForm = ({ className }) => { ...@@ -25,7 +25,11 @@ const AddAnnouncementForm = ({ className }) => {
setText(newText); setText(newText);
if (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 }) => { ...@@ -33,7 +37,11 @@ const AddAnnouncementForm = ({ className }) => {
setLink(newLink); setLink(newLink);
if (!!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 }) => { ...@@ -45,12 +53,15 @@ const AddAnnouncementForm = ({ className }) => {
}; };
if (!text) { 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; preventAction = true;
} }
if (type === "voting" && !link) { if (type === "voting" && !link) {
setLinkValid(false); setLinkError("Zadejte platnou URL.");
preventAction = true; preventAction = true;
} else { } else {
payload.link = link; payload.link = link;
...@@ -65,8 +76,8 @@ const AddAnnouncementForm = ({ className }) => { ...@@ -65,8 +76,8 @@ const AddAnnouncementForm = ({ className }) => {
if (!result.error) { if (!result.error) {
setText(""); setText("");
setLink(""); setLink("");
setNoTextError(false); setTextError(null);
setLinkValid(null); setLinkError(null);
} }
}; };
...@@ -107,11 +118,7 @@ const AddAnnouncementForm = ({ className }) => { ...@@ -107,11 +118,7 @@ const AddAnnouncementForm = ({ className }) => {
<MarkdownEditor <MarkdownEditor
value={text} value={text}
onChange={onTextInput} onChange={onTextInput}
error={ error={textError}
noTextError
? "Před přidáním oznámení nezapomeňte vyplnit jeho obsah."
: null
}
placeholder="Vyplňte text oznámení" placeholder="Vyplňte text oznámení"
toolbarCommands={[ toolbarCommands={[
["bold", "italic", "strikethrough"], ["bold", "italic", "strikethrough"],
...@@ -123,7 +130,7 @@ const AddAnnouncementForm = ({ className }) => { ...@@ -123,7 +130,7 @@ const AddAnnouncementForm = ({ className }) => {
<div <div
className={classNames("form-field", { className={classNames("form-field", {
hidden: type !== "voting", hidden: type !== "voting",
"form-field--error": linkValid === false, "form-field--error": !!linkError,
})} })}
> >
<div className="form-field__wrapper form-field__wrapper--shadowed"> <div className="form-field__wrapper form-field__wrapper--shadowed">
...@@ -138,9 +145,7 @@ const AddAnnouncementForm = ({ className }) => { ...@@ -138,9 +145,7 @@ const AddAnnouncementForm = ({ className }) => {
<i className="ico--link"></i> <i className="ico--link"></i>
</div> </div>
</div> </div>
{linkValid === false && ( {!!linkError && <div className="form-field__error">{linkError}</div>}
<div className="form-field__error">Zadejte platnou URL.</div>
)}
</div> </div>
</div> </div>
...@@ -149,7 +154,7 @@ const AddAnnouncementForm = ({ className }) => { ...@@ -149,7 +154,7 @@ const AddAnnouncementForm = ({ className }) => {
className="text-sm mt-4" className="text-sm mt-4"
hoverActive hoverActive
loading={adding} loading={adding}
disabled={adding} disabled={textError || linkError || adding}
fullwidth fullwidth
> >
Přidat oznámení Přidat oznámení
......
src/containers/AddPostForm.jsx
+ 16
− 14
View file @ bf2db416
...@@ -9,7 +9,7 @@ import { useActionState } from "hooks"; ...@@ -9,7 +9,7 @@ import { useActionState } from "hooks";
const AddPostForm = ({ className }) => { const AddPostForm = ({ className }) => {
const [text, setText] = useState(""); const [text, setText] = useState("");
const [type, setType] = useState("post"); const [type, setType] = useState("post");
const [noTextError, setNoTextError] = useState(false); const [error, setError] = useState(null);
const [addingPost, addingPostError] = useActionState(addPost, { const [addingPost, addingPostError] = useActionState(addPost, {
content: text, content: text,
}); });
...@@ -21,21 +21,27 @@ const AddPostForm = ({ className }) => { ...@@ -21,21 +21,27 @@ const AddPostForm = ({ className }) => {
setText(newText); setText(newText);
if (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) => { const onAdd = async (evt) => {
if (!!text) { if (!!text) {
const result = await (type === "post" ? addPost : addProposal).run({ if (!error) {
content: text, const result = await (type === "post" ? addPost : addProposal).run({
}); content: text,
});
if (!result.error) { if (!result.error) {
setText(""); setText("");
}
} }
} else { } 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 }) => { ...@@ -55,11 +61,7 @@ const AddPostForm = ({ className }) => {
<MarkdownEditor <MarkdownEditor
value={text} value={text}
onChange={onTextInput} onChange={onTextInput}
error={ error={error}
noTextError
? "Před přidáním příspěvku nezapomeňte vyplnit jeho obsah."
: null
}
placeholder="Vyplňte text vašeho příspěvku" placeholder="Vyplňte text vašeho příspěvku"
toolbarCommands={[ toolbarCommands={[
["header", "bold", "italic", "strikethrough"], ["header", "bold", "italic", "strikethrough"],
...@@ -93,7 +95,7 @@ const AddPostForm = ({ className }) => { ...@@ -93,7 +95,7 @@ const AddPostForm = ({ className }) => {
<div className="space-x-4"> <div className="space-x-4">
<Button <Button
onClick={onAdd} onClick={onAdd}
disabled={addingPost || addingProposal} disabled={error || addingPost || addingProposal}
loading={addingPost || addingProposal} loading={addingPost || addingProposal}
fullwidth fullwidth
hoverActive hoverActive
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Pirátský GitLab - Home of the CopyLeft