add js code to vcs

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  <div>
+            <h1> lay - toREST </h1>
+            <Ws />
+            </div>
+    }
+};
+
+export const reducer = state => {
+    return {
+        message: "Hello, World",
+        title:  "LayToRest"
+    };
+};

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 (
+            <div>
+                <p>Status: <span className={connection_style} >{ state }</span></p>
+                <p>Connection attempts: <span className={style.status} >{ attempts }</span></p>
+            </div>
+        );
+  }
+};
+
+export const component = connect(state => state.websocket)(component_);

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;
+};

lay/src/WebSocket/style.css

@@ -0,0 +1,18 @@
+.error {
+  color: red;    
+}
+
+.success {
+    color: green;
+}
+
+.pending {
+    color: yellow;
+}
+
+.status {
+  font-style: italic;
+}
+
+
+

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(
+            <AppContainer>
+              <Component store={store} />
+            </AppContainer>
+            , document.getElementById(document_node)
+    );
+}
+
+const document_node = 'lay';
+
+render(Root);
+
+if(module.hot){
+    module.hot.accept('./root', () => {
+        render(Root);
+    });
+}

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;

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 (
+        <Provider store={store()}>
+        <App />
+        </Provider>
+    );
+  }
+}

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;
+};