const express = require('express');
const app = express();
const webpack = require('webpack');
const webpackMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config.js');
const compiler = webpack(config);
const server = require('http').Server(app);
const io = require('socket.io')(server);

app.use(webpackMiddleware(compiler, {publicPath:config.output.publicPath}))
app.use(express.static(__dirname + '/src'))

io.on('connection', socket => {
    io.emit('create', socket.id)
})

server.listen(3000, () => console.log('server is up!'))

import React from 'react'
import io from 'socket.io-client'
const socket = io ()

class Create extends React.Component {
    constructor(props) {
        super(props);
        this.state={rooms: []}
        this.add = this.add.bind(this)
    }

    add() {
        socket.on('create', id => {
            this.setState({rooms: [id, ...this.state.rooms]})
            console.log(this.state.rooms);
        })
    }

    render() {
        return (<div>
      <button className = 'btn btn-primary create' onClick={this.add}>Create Room </button>
            </div>);
    }
}

export default Create;