From 983004927ac838d02c38ecabba95ee7f13d56120 Mon Sep 17 00:00:00 2001 From: f0x Date: Thu, 21 Mar 2019 15:01:07 +0100 Subject: [PATCH] components are completely backend independant might not be ideal, hard to code like this --- backends/matrix.js | 58 +++++++++++++++++++++++++++++++--------- components/chat.js | 36 ++++++++----------------- components/filterList.js | 5 ---- components/sidebar.js | 2 +- package.json | 1 + public/scss/style.scss | 3 --- shrinkwrap.yaml | 12 +++++++++ 7 files changed, 71 insertions(+), 46 deletions(-) diff --git a/backends/matrix.js b/backends/matrix.js index 811cddd..996bc0f 100644 --- a/backends/matrix.js +++ b/backends/matrix.js @@ -1,20 +1,15 @@ +'use strict' +const React = require('react') +const ReactDOM = require('react-dom') +const defaultValue = require('default-value'); + +const components = require('../components/backends/Matrix.js'); + class Matrix { constructor(user, password, homeserver) { this.a = 0 this.events = { "roomId": [ - {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?"} ] } @@ -70,8 +65,47 @@ class Matrix { let now = new Date().getMilliseconds() this.rooms[roomId].lastEvent = now this.updates = true + + let event = { + content: { + body: "Testing m.text", + msgtype: "m.text" + }, + event_id: this.fakeEventId(), + origin_server_ts: 1432735824653, + room_id: "!jEsUZKDJdhlrceRyVU:domain.com", + sender: "@example:domain.com", + type: "m.room.message", + unsigned: { + age: 1234 + } + } + this.events["roomId"].push(this.getReactEvent(event)) setTimeout(() => {this.sync()}, 2000) } + + fakeEventId() { + let id = "" + let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789" + + for (let i = 0; i < 32; i++) { + id += possible.charAt(Math.floor(Math.random() * possible.length)) + } + return id + } + + getReactEvent(event) { + let msgTypes = { + "m.text": components.text + } + if (event.type == "m.room.message") { + let msgtype = event.content.msgtype + return React.createElement( + defaultValue(msgTypes[msgtype], components.text), + {event: event, key: event.event_id} + ) + } + } } diff --git a/components/chat.js b/components/chat.js index 7cffee0..8e8f841 100644 --- a/components/chat.js +++ b/components/chat.js @@ -6,6 +6,8 @@ const Promise = require('bluebird') const debounce = require('debounce') const jdenticon = require('jdenticon') +const Matrix = require('./backends/Matrix.js') + jdenticon.config = { lightness: { color: [0.58, 0.66], @@ -81,47 +83,31 @@ let EventGroup = create({ displayName: "EventGroup", getInitialState: function() { + console.log(this.props.events); let color = ["red", "green", "yellow", "blue", "purple", "cyan"][Math.floor(Math.random()*6)] return { - color: color + color: color, + sender: this.props.events[0].props.event.sender } }, avatarRef: function(ref) { - jdenticon.update(ref, this.props.events[0].sender) + jdenticon.update(ref, this.state.sender) }, render: function() { - let events = this.props.events.map((event, id) => { - return - }) + let events = this.props.events; + //let events = this.props.events.map((event, id) => { + //return event + //}) return
-
{this.props.events[0].sender}
+
{this.state.sender}
{events}
} }) -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 - } - return {line}
 - }) - return
-
- {parsedBody} -
-
- } -}) - module.exports = chat diff --git a/components/filterList.js b/components/filterList.js index 3f8c50d..0584c28 100644 --- a/components/filterList.js +++ b/components/filterList.js @@ -38,10 +38,6 @@ let FilterList = create({ render: function() { let items = Object.keys(this.props.items).map((itemKey, id) => { - let index = id - if (this.props.order != undefined) { - index = this.props.order.indexOf(itemKey) - } let item = this.props.items[itemKey] let props = { @@ -50,7 +46,6 @@ let FilterList = create({ content: item, key: itemKey, listId: itemKey, - order: index, select: this.select, } return React.createElement(this.props.element, props) diff --git a/components/sidebar.js b/components/sidebar.js index d5fe74a..36f81fa 100644 --- a/components/sidebar.js +++ b/components/sidebar.js @@ -36,7 +36,7 @@ let RoomListItem = create({ if (this.state.unread) { className += " unread" } - return
+ return
{this.props.content.name}
diff --git a/package.json b/package.json index 41810a8..508a7a3 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "budo": "^11.5.0", "create-react-class": "^15.6.3", "debounce": "^1.2.0", + "default-value": "^1.0.0", "del": "^3.0.0", "gulp": "^4.0.0", "gulp-babel": "^8.0.0", diff --git a/public/scss/style.scss b/public/scss/style.scss index b0c1796..cd050e8 100644 --- a/public/scss/style.scss +++ b/public/scss/style.scss @@ -87,7 +87,6 @@ body { .list { background: $bg0; - position: relative; div { cursor: pointer; @@ -95,8 +94,6 @@ body { } .roomListItem { - position: absolute; - top: 0; height: 2rem + 2* $spacing; display: grid; grid-template-columns: 2rem + 2*$spacing - 0.2rem auto; diff --git a/shrinkwrap.yaml b/shrinkwrap.yaml index aab8587..4f66a84 100644 --- a/shrinkwrap.yaml +++ b/shrinkwrap.yaml @@ -8,6 +8,7 @@ dependencies: budo: 11.5.0 create-react-class: 15.6.3 debounce: 1.2.0 + default-value: 1.0.0 del: 3.0.0 gulp: 4.0.0 gulp-babel: 8.0.0 @@ -2789,6 +2790,12 @@ packages: node: '>= 0.10' resolution: integrity: sha1-vLgrqnKtebQmp2cy8aga1t8m1oQ= + /default-value/1.0.0: + dependencies: + es6-promise-try: 0.0.1 + dev: false + resolution: + integrity: sha1-jG9SpaEZP+eP3J+G63HRbJdXyDo= /define-properties/1.1.3: dependencies: object-keys: 1.0.12 @@ -3185,6 +3192,10 @@ packages: dev: false resolution: integrity: sha1-p96IkUGgWpSwhUQDstCg+/qY87c= + /es6-promise-try/0.0.1: + dev: false + resolution: + integrity: sha1-EPFA2tJ0Wc75SZc+XSGgh/cnSyA= /es6-promisify/6.0.1: dev: false resolution: @@ -9439,6 +9450,7 @@ specifiers: budo: ^11.5.0 create-react-class: ^15.6.3 debounce: ^1.2.0 + default-value: ^1.0.0 del: ^3.0.0 gulp: ^4.0.0 gulp-babel: ^8.0.0