Orbit doesn't distinguish between days
daviddias opened this issue · 5 comments
consider also handling timezones
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,
}}
/>
}
@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.