Skip to content

Add option to select mass email recipients #207

@ghost

Description

It's nice to be able to send a mass email to everyone in a filtered list, but what if you just want to send to some of them? For this, we should change "compose mass email" to instead display checkboxes next to each item in the list for the user to select.

Action items

  • We need something in the state of the admin dash's index.js to tell whether the checkboxes should be shown. Just add a boolean to the state declared in the constructor (maybe called showMassEmailCheckboxes) to keep track.
  • To update this state, the Styled.MailAll link should be changed to a button. Scroll to the top where styles are declared and find MailAll and change it to a styled.button for this. If the styling breaks, Ben the master of style can fix it. On button click, just use setState(...) to toggle the boolean on.
  • Now we need checkboxes. Send the state variable down to the <ApplicantList> as a prop first. Then, use styled components to make the show and hide a lot simpler. Styled components can actually read props to decide what styles to apply. Here is a basic explanation of how prop passing works.
  • Add a Checkbox from the Forms component (look at the import in Filters for this) to the list item from the map statement, and wrap it in a container. This container should be a styled component as a styled.div (look in, say, ApplicantInfo.jsx for an example of a styled component). Now, pass the showCheckbox prop to this styled component to conditionally apply a display: none attribute. This will say, well, whether or not to display the box. To position the box correctly, you may need to use flex box with flex-direction: row on the container component for the entire list item so the checkbox is aligned left. This likely requires a separate div container added to wrap everything in the list item other than the checkbox (so we don't flex everything along a single row).
  • Now clicking the checkbox should do something. This should be tied to an onclick callback that's passed from index to ApplicantList as a prop. To this listener, you should pass the applicant's email from their bio so the index can get which email to send to. Basically, there should be running array in the index state with all the emails that should be sent to. When a checkbox is clicked, the email is added to the list. When clicked again, it should be removed.
  • The last thing that should be added is a "send" button. Ben can style these, but for now, just show two buttons somewhere in the index layout when in the checkbox mode: one labeled "send" and one labeled "cancel." Send is easy enough; just use the same reduce function for mail all to loop over the list of emails selected. Cancel, though, is a bit harder, since we have to uncheck all boxes currently selected. The easiest option I can see is to pass the list of selected emails as a prop to ApplicantList. From here, we can set the value prop on the checkbox to whether that component's email exists in the email list. If it does, the value should be true; otherwise, it should be false. This is kind of abusing on checkbox should work by setting what value it should be on click, but it means all we have to do to reset all boxes is clear the email list in the index state.
    👆 The above may or may not work, but hopefully it does!
  • All we do now is hide checkboxes on send or on cancel, and we're good to go.

Metadata

Metadata

Labels

FrontendFeature for React codeNew FunctionalityFeature that has not yet been implementedPriority 2Get it done, but *maybe* push back

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions