Skip to content

Commit

Permalink
feat: add validation to Announcments too
Browse files Browse the repository at this point in the history
  • Loading branch information
gwynndp committed Mar 18, 2022
1 parent 5599de4 commit 2a5e19b
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 29 deletions.
2 changes: 1 addition & 1 deletion src/api/apiUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export function handleError(error) {
// Ignore `AbortError`
log.debug('Aborted', error);
} else {
log.error('API call failed. ' + error);
log.error('API call failed. ' + error.name, error.message, error);
throw error;
}
}
Expand Down
70 changes: 53 additions & 17 deletions src/components/Messaging/AnnounceMessage.js
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ const AnnounceMessageForm = ({ setToggleAnnounceMessage }) => {
const [inputValueOrg, setInputValueOrg] = useState('');
const [region, setRegion] = useState({});
const [inputValueRegion, setInputValueRegion] = useState('');
const [error, setError] = useState(false);
const [errors, setErrors] = useState(null);

const [values, setValues] = useState({
title: '',
Expand All @@ -77,13 +77,34 @@ const AnnounceMessageForm = ({ setToggleAnnounceMessage }) => {
});

const handleChange = (e) => {
setErrors(null);
const { name, value } = e.target;
setValues({
...values,
[name]: value,
});
};

const validateSurvey = (payload) => {
const errors = {};

if (!payload.subject) {
errors.subject = 'Please enter a subject for your announcement';
}
console.log('body', /\w/g.test(payload.body.trim()));
if (payload.body.length === 0 || !/\w/g.test(payload.body.trim())) {
errors.body = 'Please enter a message';
}

if (
(!payload.region_id && !payload.organization_id) ||
(payload.region_id && payload.organization_id)
) {
errors.recipient = 'Please select an organization or region';
}
return errors;
};

const handleSubmit = async (e) => {
e.preventDefault();
const payload = {
Expand All @@ -93,11 +114,6 @@ const AnnounceMessageForm = ({ setToggleAnnounceMessage }) => {
body: values.message,
};

if (!region?.id && !organization?.id) {
setError(true);
return;
}

if (values?.videoLink) {
payload['video_link'] = values.videoLink;
}
Expand All @@ -110,16 +126,20 @@ const AnnounceMessageForm = ({ setToggleAnnounceMessage }) => {
payload['organization_id'] = organization.stakeholder_uuid;
}

const errs = validateSurvey(payload);

try {
if (
(payload.body && payload.organization_id) ||
(payload.body && payload.region_id)
) {
const errorsFound = Object.keys(errs).length > 0;
if (errorsFound) {
setErrors(errs);
} else {
const res = await postBulkMessageSend(payload);

setErrorMessage('');
if (res.error) {
setErrorMessage(res.message);
setErrorMessage(
`Sorry, something went wrong and we couldn't create the announcement: ${res.message}`
);
} else {
// close the drawer
setValues({
Expand Down Expand Up @@ -166,14 +186,29 @@ const AnnounceMessageForm = ({ setToggleAnnounceMessage }) => {

return (
<form className={form} onSubmit={handleSubmit}>
{errors?.subject && (
<Typography
style={{ color: 'red', fontWeight: 'bold', margin: '20px 10px 0px' }}
>
{errors.subject}
</Typography>
)}
<GSInputLabel text="Announce: Title" />
<TextField
fullWidth
label="Title"
name="title"
value={values.title}
onChange={handleChange}
required
/>
{errors?.body && (
<Typography
style={{ color: 'red', fontWeight: 'bold', margin: '20px 10px 0px' }}
>
{errors.body}
</Typography>
)}
<GSInputLabel text={'Message'} />
<TextField
multiline
Expand All @@ -182,6 +217,7 @@ const AnnounceMessageForm = ({ setToggleAnnounceMessage }) => {
value={values.message}
onChange={handleChange}
label="Write your message here ..."
required
/>
<GSInputLabel text={'Add a Video Link'} />
<TextField
Expand All @@ -190,13 +226,13 @@ const AnnounceMessageForm = ({ setToggleAnnounceMessage }) => {
onChange={handleChange}
label="Add a video link, e.g., YouTube URL"
/>
{error ? (
{errors?.recipient && (
<Typography
style={{ color: 'red', fontWeight: 'bold', margin: '20px 10px 0px' }}
>
Please select a region or an organization!
{errors.recipient}
</Typography>
) : null}
)}
<GSInputLabel
id="select-label"
text={'Target Audience by Organization'}
Expand All @@ -212,7 +248,7 @@ const AnnounceMessageForm = ({ setToggleAnnounceMessage }) => {
inputValue={inputValueOrg}
getOptionSelected={(option, value) => option.id === value.id}
onInputChange={(e, val) => {
setError(false);
setErrors(null);
setInputValueOrg(val);
}}
id="controllable-states-demo"
Expand All @@ -234,7 +270,7 @@ const AnnounceMessageForm = ({ setToggleAnnounceMessage }) => {
inputValue={inputValueRegion}
getOptionSelected={(option, value) => option.id === value.id}
onInputChange={(e, val) => {
setError(false);
setErrors(null);
setInputValueRegion(val);
}}
id="controllable-states-demo"
Expand All @@ -244,7 +280,7 @@ const AnnounceMessageForm = ({ setToggleAnnounceMessage }) => {
<TextField {...params} label="Select Region" />
)}
/>
<Button disabled={error} className={sendButton} type="submit">
<Button disabled={!!errors} className={sendButton} type="submit">
Send Message
</Button>
</form>
Expand Down
22 changes: 11 additions & 11 deletions src/components/Messaging/Survey.js
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ const SurveyForm = ({ setToggleSurvey }) => {
const validateSurvey = (payload) => {
const errors = {};

if (!payload.title) {
if (!payload.subject && payload.survey.title.length <= 1) {
errors.title = 'Please enter a title for your survey';
}

Expand Down Expand Up @@ -170,10 +170,15 @@ const SurveyForm = ({ setToggleSurvey }) => {
title: title,
questions: [],
},
region_id: region ? region.id : null,
organization_id: organization ? organization.stakeholder_uuid : null,
};

if (region?.id) {
payload['region_id'] = region.id;
}
if (organization?.id) {
payload['organization_id'] = organization.stakeholder_uuid;
}

Object.values(allQuestions).forEach((question) => {
const { prompt, choiceOne, choiceTwo, choiceThree } = question;
if (prompt.length > 1) {
Expand All @@ -187,15 +192,10 @@ const SurveyForm = ({ setToggleSurvey }) => {
const errs = validateSurvey(payload);

try {
if (Object.keys(errs).length > 0) {
const errorsFound = Object.keys(errs).length > 0;
if (errorsFound) {
setErrors(errs);
}

if (
payload.author_handle &&
payload.survey.title.length > 1 &&
(payload['region_id'] || payload['organization_id'])
) {
} else {
const res = await postBulkMessageSend(payload);

setErrorMessage('');
Expand Down

0 comments on commit 2a5e19b

Please sign in to comment.