From ee33e4f4d4ab5ffeac89d7db076c60874465882b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B8rgen=20Lien=20Sell=C3=A6g?= Date: Fri, 26 May 2017 02:29:53 +0200 Subject: [PATCH] add js code to vcs --- lay/src/App/index.js | 19 +++++++++++ lay/src/WebSocket/index.js | 65 ++++++++++++++++++++++++++++++++++++ lay/src/WebSocket/reducer.js | 40 ++++++++++++++++++++++ lay/src/WebSocket/style.css | 18 ++++++++++ lay/src/index.js | 25 ++++++++++++++ lay/src/reducer.js | 11 ++++++ lay/src/root.js | 14 ++++++++ lay/src/store.js | 24 +++++++++++++ 8 files changed, 216 insertions(+) create mode 100644 lay/src/App/index.js create mode 100644 lay/src/WebSocket/index.js create mode 100644 lay/src/WebSocket/reducer.js create mode 100644 lay/src/WebSocket/style.css create mode 100644 lay/src/index.js create mode 100644 lay/src/reducer.js create mode 100644 lay/src/root.js create mode 100644 lay/src/store.js 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; +};