Add option to select mass email recipients #207
Labels
Frontend
Feature for React code
New Functionality
Feature that has not yet been implemented
Priority 2
Get it done, but *maybe* push back
Milestone
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
index.js
to tell whether the checkboxes should be shown. Just add a boolean to the state declared in the constructor (maybe calledshowMassEmailCheckboxes
) to keep track.Styled.MailAll
link should be changed to a button. Scroll to the top where styles are declared and findMailAll
and change it to astyled.button
for this. If the styling breaks, Ben the master of style can fix it. On button click, just usesetState(...)
to toggle the boolean on.<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.Forms
component (look at the import inFilters
for this) to the list item from themap
statement, and wrap it in a container. This container should be a styled component as astyled.div
(look in, say,ApplicantInfo.jsx
for an example of a styled component). Now, pass theshowCheckbox
prop to this styled component to conditionally apply adisplay: 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 withflex-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).index
toApplicantList
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.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 toApplicantList
. From here, we can set thevalue
prop on the checkbox to whether that component's email exists in the email list. If it does, the value should betrue
; otherwise, it should befalse
. 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 theindex
state.👆 The above may or may not work, but hopefully it does!
The text was updated successfully, but these errors were encountered: