Basic layout and frameworks

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    "@babel/preset-react",
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "entry"
+      }
+    ]
+  ]
+}

.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules

TODO

@@ -0,0 +1 @@
+* [ ] Abstract filtering list for reuse with memberlist

app.js

@@ -0,0 +1,35 @@
+'use strict'
+const React = require('react')
+const ReactDOM = require('react-dom')
+const create = require('create-react-class')
+const Promise = require('bluebird')
+
+const Matrix = require('./backends/matrix.js')
+
+const Sidebar = require('./components/sidebar.js')
+
+const Info = require('./components/info.js')
+const Chat = require('./components/chat.js')
+
+let backend = new Matrix("user", "pass", "http://localhost")
+
+let App = create({
+  displayName: "App",
+
+  render: function() {
+    return (
+      <>
+        <Sidebar/>
+        <div className="main">
+          <Info />
+          <Chat />
+        </div>
+      </>
+    )
+  }
+})
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+)

backends/matrix.js

@@ -0,0 +1,12 @@
+class Matrix {
+  constructor(user, password, homeserver) {
+    console.log(user, password)
+  }
+
+  getEvents() {
+    console.log("new event")
+  }
+}
+
+
+module.exports = Matrix

budo.js

@@ -0,0 +1,15 @@
+var budo = require('budo')
+var babelify = require('babelify')
+
+budo('app.js', {
+  live: true,             // setup live reload
+  port: 3000,             // use this port
+  browserify: {
+    transform: babelify   // ES6
+  }
+}).on('connect', function (ev) {
+  console.log('Server running on %s', ev.uri)
+  console.log('LiveReload running on port %s', ev.livePort)
+}).on('update', function (buffer) {
+  console.log('bundle - %d bytes', buffer.length)
+})

components/chat.js

@@ -0,0 +1,15 @@
+'use strict'
+const React = require('react')
+const ReactDOM = require('react-dom')
+const create = require('create-react-class')
+const Promise = require('bluebird')
+
+let chat = create({
+  displayName: "Chat",
+  render: function() {
+    return <div className="chat">chat window</div>
+  }
+})
+
+
+module.exports = chat

components/info.js

@@ -0,0 +1,15 @@
+'use strict'
+const React = require('react')
+const ReactDOM = require('react-dom')
+const create = require('create-react-class')
+const Promise = require('bluebird')
+
+let info = create({
+  displayName: "Info",
+  render: function() {
+    return <div className="info">Room Title</div> 
+  }
+})
+
+
+module.exports = info

components/sidebar.js

@@ -0,0 +1,90 @@
+'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 Filter = create({
+  displayName: "Filter",
+
+  inputRef: function(ref) {
+    if (ref == null) {
+      return
+    }
+    this.setState({
+      inputRef: ref
+    })
+    ref.addEventListener("keyup", debounce(this.input, 20))
+  },
+
+  input: function(e) {
+    this.props.setFilter(e.target.value.toUpperCase())
+  },
+
+  render: function() {
+    return <div className="filter">
+        <input ref={this.inputRef}/>
+      </div>
+  }
+})
+
+let List = create({
+  displayName: "List",
+
+  render: function() {
+    let rooms = ["Test", "aaaa", "Neo", "zzz", "Iris"]
+    let roomList = rooms.map((room, i) => {
+      return <RoomListItem name={room} filter={this.props.filter} key={i}/>
+    })
+    return <div className="list">
+      {roomList}
+    </div>
+  }
+})
+
+let RoomListItem = create({
+  displayName: "RoomListItem",
+
+  getInitialState: function() {
+    return {
+      filterName: this.props.name.toUpperCase()
+    }
+  },
+
+  render: function() {
+    if (this.state.filterName.indexOf(this.props.filter) == -1) {
+      return null
+    }
+    return <div className="roomListItem">
+      {this.props.name}
+    </div>
+  }
+})
+
+let Sidebar = create({
+  displayName: "Sidebar",
+
+  getInitialState: function() {
+    return {
+      filter: ""
+    }
+  },
+
+  setFilter: function(filter) {
+    this.setState({
+      filter: filter.toUpperCase()
+    })
+    console.log("setting", filter)
+  },
+
+  render: function() {
+    return <div className="sidebar">
+      <Filter setFilter={this.setFilter} />
+      <List filter={this.state.filter} />
+    </div>
+  }
+})
+
+
+module.exports = Sidebar

gulpfile.js

@@ -0,0 +1,31 @@
+const gulp = require('gulp');
+const sass = require('gulp-sass');
+const concat = require('gulp-concat');
+const gutil = require('gulp-util');
+
+var budo = require('budo')
+var babelify = require('babelify')
+
+const cssFiles = 'public/scss/**/*.?(s)css';
+
+let css = gulp.src(cssFiles)
+    .pipe(sass())
+    .pipe(concat('style.css'))
+    .pipe(gulp.dest('assets'));
+
+gulp.task('watch', function(cb) {
+  budo("app.js", {
+  live: true,
+  port: 3000,
+  browserify: {
+    transform: babelify
+  }
+  }).on('exit', cb);
+  gulp.watch(cssFiles, function() {
+    console.log("Compiling CSS")
+    return gulp.src(cssFiles)
+      .pipe(sass())
+      .pipe(concat('style.css'))
+      .pipe(gulp.dest('./dist'))
+    });
+});

index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+      <link rel="stylesheet" href="/dist/style.css">
+    </head>
+    <body>
+      <div id='root'>
+      </div>
+      <script src="app.js"></script>
+    </body>
+</html>

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "vortex",
+  "version": "1.0.0",
+  "description": "",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "f0x",
+  "license": "AGPL-3.0",
+  "dependencies": {
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.2.0",
+    "@babel/preset-react": "^7.0.0",
+    "babelify": "^10.0.0",
+    "bluebird": "^3.5.3",
+    "budo": "^11.5.0",
+    "create-react-class": "^15.6.3",
+    "debounce": "^1.2.0",
+    "gulp": "^4.0.0",
+    "gulp-cli": "^2.0.1",
+    "gulp-concat": "^2.6.1",
+    "gulp-sass": "^4.0.2",
+    "gulp-util": "^3.0.8",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
+    "webpack": "^4.27.1"
+  },
+  "devDependencies": {
+    "gulp-watch": "^5.0.1"
+  }
+}

public/scss/style.scss

@@ -0,0 +1,53 @@
+$bg: #1c1c1c;
+
+html, body {
+  margin: 0;
+  padding: 0;
+  background: #1c1c1c;
+  color: white;
+}
+
+body {
+  height: 100vh;
+  display: flex;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+}
+
+.sidebar {
+  flex: 0 0 15vw;
+}
+
+.main {
+  flex: 1 1 auto;
+}
+
+.sidebar, .main {
+  display: flex;
+  flex-direction: column;
+
+  div:nth-child(2) { // Room list & Chat
+    flex: 1 1 auto;
+    overflow-y: auto;
+  }
+}
+
+.filter {
+  background: red;
+}
+
+.list {
+  background: purple
+}
+
+.info {
+  background: lime;
+}
+
+.chat {
+  background: blue;
+}