Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add option to select mass email recipients #207

Open
7 tasks done
ghost opened this issue Apr 3, 2019 · 0 comments
Open
7 tasks done

Add option to select mass email recipients #207

ghost opened this issue Apr 3, 2019 · 0 comments
Assignees
Labels
Frontend Feature for React code New Functionality Feature that has not yet been implemented Priority 2 Get it done, but *maybe* push back
Projects

Comments

@ghost
Copy link

ghost commented Apr 3, 2019

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.
@ghost ghost added New Functionality Feature that has not yet been implemented Frontend Feature for React code Priority 1 Get it done! labels Apr 3, 2019
@ghost ghost added this to the 4 - It's crunch time! 🏃 milestone Apr 3, 2019
@ghost ghost assigned RheaChatterjee Apr 3, 2019
@ghost ghost added this to Backlog in Drawchange via automation Apr 3, 2019
@ghost ghost added Priority 2 Get it done, but *maybe* push back and removed Priority 1 Get it done! labels Apr 10, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Frontend Feature for React code New Functionality Feature that has not yet been implemented Priority 2 Get it done, but *maybe* push back
Projects
Drawchange
  
Backlog
Development

No branches or pull requests

1 participant