From a08d2892c71a58a5a950cdbad48fadb4f7a8a6e5 Mon Sep 17 00:00:00 2001
From: f0x <f@0x52.eu>
Date: Thu, 18 Apr 2019 13:53:23 +0200
Subject: [PATCH] create base Event element

---
 components/chat.js         | 16 +++-------------
 components/events/Event.js | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 13 deletions(-)
 create mode 100644 components/events/Event.js

diff --git a/components/chat.js b/components/chat.js
index f0b63f9..2d8c6ad 100644
--- a/components/chat.js
+++ b/components/chat.js
@@ -7,10 +7,7 @@ const debounce = require('debounce')
 const jdenticon = require('jdenticon')
 const defaultValue = require('default-value')
 
-const elements = {
-  "m.text": require('./events/text.js'),
-  "m.image": require('./events/image.js')
-}
+const Event = require('./events/Event.js') 
 
 jdenticon.config = {
     lightness: {
@@ -131,8 +128,8 @@ let EventGroup = create({
   },
 
   render: function() {
-    let events = this.props.events.map((event, id) => {
-      return getRenderedEvent(event, id, this.props.client)
+    let events = this.props.events.map((event, key) => {
+      return <Event event={event} key={key} client={this.props.client} />
     })
     return <div className="eventGroup">
       <svg id="avatar" ref={this.avatarRef} ></svg>
@@ -144,11 +141,4 @@ let EventGroup = create({
   }
 })
 
-function getRenderedEvent(event, id, client) {
-  if (event.type == "m.room.message") {
-    let msgtype = event.content.msgtype;
-    return React.createElement(defaultValue(elements[msgtype], elements["m.text"]), {event: event, key: id, client: client})
-  }
-}
-
 module.exports = chat
diff --git a/components/events/Event.js b/components/events/Event.js
new file mode 100644
index 0000000..8d4fa68
--- /dev/null
+++ b/components/events/Event.js
@@ -0,0 +1,37 @@
+'use strict'
+const React = require('react')
+const ReactDOM = require('react-dom')
+const create = require('create-react-class')
+const defaultValue = require('default-value')
+
+const elements = {
+  "m.text": require('./text.js'),
+  "m.image": require('./image.js')
+}
+
+let Event = create({
+  displayName: "Event",
+
+  render: function() {
+    let state = ""
+
+    if (this.props.event.local) {
+      state = " local"
+    }
+
+    return (
+      <div className={"event" + state}>
+        {getRenderedEvent(this.props.event, this.props.client)}
+      </div>
+    )
+  }
+})
+
+function getRenderedEvent(event, client) {
+  if (event.type == "m.room.message") {
+    let msgtype = event.content.msgtype;
+    return React.createElement(defaultValue(elements[msgtype], elements["m.text"]), {event: event, client: client})
+  }
+}
+
+module.exports = Event