You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

104 lines
3.0 KiB
JavaScript

'use strict'
const React = require('react')
const ReactDOM = require('react-dom')
const create = require('create-react-class')
const Promise = require('bluebird')
const debounce = require('debounce')
let chat = create({
displayName: "Chat",
render: function() {
let tmpEvents = [
{sender: "Foks", content: "Hello"},
{sender: "Foks", content: "This is Neo v4"},
{sender: "Foks", content: "Here is one test event\nWith\n Multiple\nLines\n:)"},
{sender: "Different Foks", content: "Look at these nice colors"},
{sender: "Different Foks", content: "And the font"},
{sender: "Lain", content: "image"},
{sender: "Lain", content: "image"},
{sender: "Lain", content: "image"},
{sender: "Different Foks", content: "And the avatars"},
{sender: "Foks", content: "Every line has it's own message"},
{sender: "Foks", content: "But if the sender is the same, we don't repeat the name+image"},
{sender: "Foks", content: "Isn't message grouping great?"}
]
let messageGroups = {
current: [],
groups: [],
sender: ""
}
// if the sender is the same, add it to the 'current' messageGroup, if not,
// push the old one to 'groups' and start with a new array.
tmpEvents.forEach((event, id) => {
if (event.sender != messageGroups.sender) {
messageGroups.sender = event.sender
if (messageGroups.current.length != 0) {
messageGroups.groups.push(messageGroups.current)
}
messageGroups.current = []
}
messageGroups.current.push(event)
})
messageGroups.groups.push(messageGroups.current)
let events = messageGroups.groups.map((events, id) => {
return <EventGroup events={events} key={id}/>
})
//TODO: replace with something that only renders events in view
return <div className="chat">
<div className="events">
{events}
</div>
</div>
}
})
let EventGroup = create({
displayName: "EventGroup",
getInitialState: function() {
let color = ["red", "green", "yellow", "blue", "purple", "cyan"][Math.floor(Math.random()*6)]
return {
color: color
}
},
render: function() {
let events = this.props.events.map((event, id) => {
return <Event event={event} key={id}/>
})
return <div className="eventGroup">
<svg id="avatar" data-jdenticon-value={this.props.events[0].sender}></svg>
<div className="col">
<div id="name" className={`fg-palet-${this.state.color}`}>{this.props.events[0].sender}</div>
{events}
</div>
</div>
}
})
let Event = create({
displayName: "Event",
render: function() {
//TODO: HTML Sanitize
let parsedBody = this.props.event.content.split("\n").map((line, id) => {
if (line.startsWith("image")) {
return <img src="neo.png"/>
}
return <span key={id}>{line}<br/></span>
})
return <div className="event">
<div className="body">
{parsedBody}
</div>
</div>
}
})
module.exports = chat