Messaging front end

[jonganc]

Thanks Marcus. It looks good!

I had a few thoughts:

• 'init' can perhaps be 'editing', especially if we later incorporate message editing.

• For consistency with the back-end, it might be better to call the class Post or maybe PostMessage rather than Message (although it's not really a problem to change the backend name, either). It could also be good if we ever add functionality to list messages

• Can placeholderMessage perhaps just be a constant, rather than in state?

• (Your choice) You may not need to to bind message at all, and instead just read the content of the textarea before posting.

• I'm thinking that perhaps the confirm state is maybe the same as the init state but with the button and textarea grayed, like in these images. What do you think? init: confirm:

• Add initial member groups to state. Perhaps call it numGroups? I think it might be easier, however, to not mention the number of group at all

• Might be good practice to give buttons preventDefault, just in case...? Maybe doesn't matter.

• Of course, we also need to add the actual posting functionality

[jonganc]

It looks better!

I have a few more thoughts.

1) cancelMessage needs an event argument.

2) Instead of having completely separate code for editing and confirm, it might be better to have the textarea part in common and then use conditional code to add disabled and the additional buttons only for the confirm status.

For example, the textarea code could be:

<textarea
  name=""
  value={this.state.message}
  id=""
  cols="30"
  rows="10"
  disabled={this.state.status !== 'editing'}
/>

(and similarly for the button). Similarly, the extra content for the confirmation can be saved into a variable, like so:

const confirmation = this.state.status === 'editing' ? null :
    (<div>
        <p
          style={{ marginTop: '0.5em' }}
        >
          This message will post to all
          groups in your jurisdiction.
          OK to continue, cancel to continue
          editing.
          ....
     </div>);

(Note that code always has to be wrapped in a single tag, so you will need a surrounding div).

Then you can have

content = (
  <div>...
    </button>
    {confirmation}
  </div>
);