Orbit doesn't distinguish between days

[daviddias]

It is mixing messages from different days because the ordering is done by hour:min

[daviddias]

consider also handling timezones

[theobat]

Links to #118

[theobat]

EDIT: I'm asking this because this bit of code is in the Channel component where messages.map is called which is where -I believe- we should put a function which assess whether given two timstamps (previous message and current) we need a date separator.

So I dived a little bit into this @haadcode and I don't understand why we have two different components for messages when so little seems to differ on the input side. Shall we use some kind of argument in the props if this is just a matter of size ? We could simplify this :

      if (appSettings.useLargeMessage) {
        return <Message2
          message={message}
          key={message.hash}
          onReplyTo={this.onReplyTo.bind(this)}
          onShowProfile={this.onShowProfile.bind(this)}
          onDragEnter={this.onDragEnter.bind(this)}
          onScrollToPreview={this.onScrollToPreview.bind(this)}
          highlightWords={username}
          colorifyUsername={colorifyUsernames}
          useEmojis={useEmojis}
          style={{
            fontFamily: useMonospaceFont ? monospaceFont : font,
            fontSize: useMonospaceFont ? '0.9em' : '1.0em',
            fontWeight: useMonospaceFont ? '100' : '300',
            padding: spacing,
          }}
        />
      } else {
        return <Message
          message={message}
          key={message.hash}
          onReplyTo={this.onReplyTo.bind(this)}
          onShowProfile={this.onShowProfile.bind(this)}
          onDragEnter={this.onDragEnter.bind(this)}
          onScrollToPreview={this.onScrollToPreview.bind(this)}
          highlightWords={username}
          colorifyUsername={colorifyUsernames}
          useEmojis={useEmojis}
          style={{
            fontFamily: useMonospaceFont ? monospaceFont : font,
            fontSize: useMonospaceFont ? '0.9em' : '1.0em',
            fontWeight: useMonospaceFont ? '100' : '300',
            padding: spacing,
          }}
        />
      }

[haadcode]

@theobat Yes, absolutely, this part could be refactored to be much simpler. I would not put the size as a flag but wrap it in higher order components that handle only the layout.

I've been prototyping to re-write all of the channel components, something like this: https://codepen.io/anon/pen/PbBryY?editors=0010 (code https://gist.github.com/haadcode/b038ce6be019e0ef841258c168b3bd53). You can play with the Pen by changing the largeMessages and feedMessages booleans (at the bottom) to change the layout. The actual decision between large/small happens here: https://gist.github.com/haadcode/b038ce6be019e0ef841258c168b3bd53#file-components-js-L236.

Hope that gives an idea how this could be refactored.

[haadcode]

Working on this and tracking the work in the original issue. Closing in favor of https://github.com/orbitdb/orbit/issues/118.