diff --git a/lay/src/App/index.js b/lay/src/App/index.js
new file mode 100644
index 0000000..4170eae
--- /dev/null
+++ b/lay/src/App/index.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { component as Ws } from '../WebSocket';
+
+export class component extends React.Component {
+ render(props){
+ return
+
lay - toREST
+
+
+ }
+};
+
+export const reducer = state => {
+ return {
+ message: "Hello, World",
+ title: "LayToRest"
+ };
+};
diff --git a/lay/src/WebSocket/index.js b/lay/src/WebSocket/index.js
new file mode 100644
index 0000000..9db9df9
--- /dev/null
+++ b/lay/src/WebSocket/index.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import style from './style.css';
+
+let openConnection = () => {
+ return dispatch => {
+ dispatch(() => connectionOpened(new WebSocket("ws://localhost:3000")));
+ return {
+ type: 'WS_OPEN_CONNECTION'
+ }
+ }
+};
+
+let connectionOpened = ws => {
+ return {
+ type: 'WS_CONNECTION_OPENED',
+ ws
+ }
+};
+
+
+let closenOpened = () => {
+ return {
+ type: 'WS_CLOSE_CONNECTION',
+ }
+};
+
+
+class component_ extends React.Component {
+
+ componentDidMount(){
+ const { dispatch } = this.props;
+ dispatch(openConnection);
+ }
+
+ componentWillUnmount(){
+ const dispatch = this.props;
+ dispatch(closeConnection);
+ }
+
+ render() {
+ const { state, attempts } = this.props;
+ const connection_style = (() => {
+ switch(state) {
+ case "Connecting":
+ return style.status + " " + style.pending;
+ case "Connected":
+ return style.status + " " + style.success;
+ case "Disconnected":
+ return style.status + " " + style.error;
+ default:
+ return "";
+ }
+ })();
+ return (
+
+
Status: { state }
+
Connection attempts: { attempts }
+
+ );
+ }
+};
+
+export const component = connect(state => state.websocket)(component_);
diff --git a/lay/src/WebSocket/reducer.js b/lay/src/WebSocket/reducer.js
new file mode 100644
index 0000000..ef1b618
--- /dev/null
+++ b/lay/src/WebSocket/reducer.js
@@ -0,0 +1,40 @@
+const init = {
+ ws: null,
+ attempts: 0,
+ state: "Disconnected",
+ onopen: event => console.log(event),
+ onclose: event => console.log(event),
+ onmessage: event => console.log(event),
+ onerror: event => console.log(event),
+};
+
+export const reducer = (state = init, action) => {
+ switch(action.type) {
+ case 'WS_OPEN_CONNECTION':
+ action.ws.onmessage = state.onmessage;
+ action.ws.close = state.onclose;
+ action.ws.onopen = state.onopen;
+ action.ws.onerror = state.onerror;
+ return {
+ state: "Connecting",
+ attempts: attempts + 1,
+ ws: action.ws,
+ ...state
+ };
+ case 'WS_CONNECTION_OPENED':
+ return {
+ state: "Connected",
+ ...state
+ }
+ case 'WS_CLOSE_CONNECTION':
+ return {
+ ws: null,
+ state: "Disconnected",
+ attempts: 0,
+ ...state
+ };
+ default:
+ return state;
+ };
+ return state;
+};
diff --git a/lay/src/WebSocket/style.css b/lay/src/WebSocket/style.css
new file mode 100644
index 0000000..b8cc8ee
--- /dev/null
+++ b/lay/src/WebSocket/style.css
@@ -0,0 +1,18 @@
+.error {
+ color: red;
+}
+
+.success {
+ color: green;
+}
+
+.pending {
+ color: yellow;
+}
+
+.status {
+ font-style: italic;
+}
+
+
+
diff --git a/lay/src/index.js b/lay/src/index.js
new file mode 100644
index 0000000..42ea2ac
--- /dev/null
+++ b/lay/src/index.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { AppContainer } from 'react-hot-loader';
+
+import store from './store';
+import Root from './root';
+
+const render = Component => {
+ ReactDOM.render(
+
+
+
+ , document.getElementById(document_node)
+ );
+}
+
+const document_node = 'lay';
+
+render(Root);
+
+if(module.hot){
+ module.hot.accept('./root', () => {
+ render(Root);
+ });
+}
diff --git a/lay/src/reducer.js b/lay/src/reducer.js
new file mode 100644
index 0000000..c1b0d9e
--- /dev/null
+++ b/lay/src/reducer.js
@@ -0,0 +1,11 @@
+import { combineReducers } from 'redux';
+
+import { reducer as app } from './App';
+import { reducer as websocket } from './WebSocket/reducer';
+
+const rootReducer = combineReducers({
+ websocket,
+ app
+});
+
+export default rootReducer;
diff --git a/lay/src/root.js b/lay/src/root.js
new file mode 100644
index 0000000..1662358
--- /dev/null
+++ b/lay/src/root.js
@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import { Provider } from 'react-redux';
+import { component as App } from './App';
+
+export default class Root extends Component {
+ render() {
+ const { store } = this.props;
+ return (
+
+
+
+ );
+ }
+}
diff --git a/lay/src/store.js b/lay/src/store.js
new file mode 100644
index 0000000..bc8c2ff
--- /dev/null
+++ b/lay/src/store.js
@@ -0,0 +1,24 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+
+import thunk from 'redux-thunk';
+
+import rootReducer from './reducer';
+
+export default initialState => {
+ const store = createStore(
+ rootReducer,
+ initialState,
+// compose(
+// window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
+ applyMiddleware(thunk)
+// )
+ );
+
+ if(module.hot){
+ module.hot.accept('./', () => {
+ store.replaceReducer(require('./reducer').default)
+ });
+ }
+
+ return store;
+};