Web interface - clicking an email can toggle all other emails

[sapphire-bt]

Hi there.

Thanks for this project.

According to RFC 2822:

Though optional, every message SHOULD have a "Message-ID:" field.

I appreciate this is an uncommon scenario, but if incoming emails don't have the Message-ID field then the email toggling can get screwed up in the web interface.

The toggle code in App.js looks like this:

handleToggle = email => () => {
    if (this.state.activeEmail === email.messageId) {
        this.setState({ activeEmail: null });
    } else {
        this.setState({ activeEmail: email.messageId });
    }
};

Without a message ID, the this.state.activeEmail === email.messageId check becomes null === undefined, which of course falls to the else block and sets activeEmail to undefined.

Once that's happened, the isOpen attribute of the Email component becomes true for any email that has no messageId property:

{hasEmails && this.state.emails.map(email => (
    <Email email={email}
        isOpen={this.state.activeEmail === email.messageId} // i.e. undefined === undefined
        onToggle={this.handleToggle(email)}
        key={email.messageId} />
    ))
}

I haven't tested, but presumably state.activeEmail could be changed to something like activeIndex and make use of the map index.