Implement basic functionality

client/src/App.js

@@ -3,19 +3,113 @@ import logo from './logo.svg';
 import './App.css';
 
 class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
-    );
+	constructor(props) {
+		super(props);
+		this.state = {value: ''};
+
+		this.handleChange = this.handleChange.bind(this);
+		this.handleSubmit = this.handleSubmit.bind(this);
+	}
+
+	handleChange(event) {
+		this.setState({value: event.target.value});
+	}
+
+	handleSubmit(event) {
+
+    let data = new FormData()
+    let params = {
+      type: 'post',
+      text: this.state.value
+    }
+
+    data.append('json', JSON.stringify(params));
+
+    fetch(`http://mainframe.fraction.io:3000/publish`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(params)
+    })
+    .then(function(response) {
+      return response.json();
+    })
+    .then((json) => {
+			console.log(json.data)
+		})
+		.then(() => {
+      let params = {
+        id: this.state.id
+      };
+
+      let queryString = new URLSearchParams()
+
+      for (var p in params) {
+        queryString.append(p, params[p])
+      }
+
+			fetch(`http://mainframe.fraction.io:3000/create-user-stream?${queryString}`)
+				.then(function(response) {
+				return response.json();
+			})
+			.then((json) => {
+				console.log(json.data)
+				return this.setState({userStream: [].concat(json.data).map((x) => x && x.value && x.value.content && x.value.content.text && <div>{x.value.content.text}</div>)})
+			});
+		})
+		event.preventDefault();
+	}
+
+	componentDidMount() {
+		fetch('http://mainframe.fraction.io:3000/whoami')
+		.then(function(response) {
+			return response.json();
+		})
+		.then((json) => {
+			this.setState({id: json.data.id})
+			return json.data.id
+		})
+		.then(() => {
+      let params = {
+        id: this.state.id
+      };
+
+      let queryString = new URLSearchParams()
+
+      for (var p in params) {
+        queryString.append(p, params[p])
+      }
+
+			fetch(`http://mainframe.fraction.io:3000/create-user-stream?${queryString}`)
+				.then(function(response) {
+				return response.json();
+			})
+			.then((json) => {
+				console.log(json.data)
+				return this.setState({userStream: [].concat(json.data).map((x) => x && x.value && x.value.content && x.value.content.text && <div>{x.value.content.text}</div>)})
+			});
+		})
   }
+
+	render() {
+		return (
+			<div className="App">
+			<header className="App-header">
+			<img src={logo} className="App-logo" alt="logo" />
+			<h1 className="App-title">{this.state.id}</h1>
+			</header>
+			<br />
+			<form onSubmit={this.handleSubmit}>
+			<label>
+			<input type="text" value={this.state.value} onChange={this.handleChange} />
+			</label>
+			<input type="submit" value="Submit" />
+			</form>
+			<center>
+			<div>{this.state.userStream}</div>
+			</center>
+			</div>
+		);
+	}
 }
 
 export default App;

database/Dockerfile

@@ -9,6 +9,8 @@ COPY package.json /usr/src/app/
 RUN npm install && npm cache clean --force
 COPY . /usr/src/app
 
+VOLUME /root/.ssb/
+
 CMD [ "npm", "start" ]
 
 EXPOSE 8008

database/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "docker-scuttlebot",
+  "name": "database",
   "version": "1.0.0",
   "description": "",
   "main": "sbot",

docker-compose.yml

@@ -1,15 +1,26 @@
 version: '3'
 
+volumes:
+  database-ssb: {}
+  server-secrets: {}
+
 services:
   client:
     build: client
     ports:
       - 8000:3000
+    volumes:
+      - ./client/src:/usr/src/app/src
   database:
     build: database
+    volumes:
+      - database-ssb:/root/.ssb/
   server:
     build: server
     depends_on:
       - database
     ports:
       - 3000:3000
+    volumes:
+      - server-secrets:/mnt/secrets
+      - ./server/routes:/usr/src/app/routes

server/Dockerfile

@@ -9,6 +9,8 @@ COPY package.json /usr/src/app/
 RUN npm install && npm cache clean --force
 COPY . /usr/src/app
 
+VOLUME /mnt/secrets/
+
 CMD [ "npm", "start" ]
 
 EXPOSE 3000

server/app.js

@@ -1,27 +1,32 @@
 var express = require('express');
 var path = require('path');
-var favicon = require('serve-favicon');
 var logger = require('morgan');
 var cookieParser = require('cookie-parser');
 var bodyParser = require('body-parser');
 
 var index = require('./routes/index');
 var users = require('./routes/users');
+var bodyParser = require('body-parser')
 
 var app = express();
 
-// view engine setup
-app.set('views', path.join(__dirname, 'views'));
-app.set('view engine', 'pug');
-
-// uncomment after placing your favicon in /public
-//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
 app.use(logger('dev'));
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: false }));
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'public')));
 
+app.use( bodyParser.json() );
+app.use(bodyParser.urlencoded({
+    extended: true
+})); 
+
+app.use(function(req, res, next) {
+  res.header("Access-Control-Allow-Origin", "*");
+  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
+  next();
+});
+
 app.use('/', index);
 app.use('/users', users);
 
@@ -40,7 +45,11 @@ app.use(function(err, req, res, next) {
 
   // render the error page
   res.status(err.status || 500);
-  res.render('error');
+  res.json({
+    errors: [
+      err.message
+    ]
+  });
 });
 
 module.exports = app;