add react-java-mysql application sample

Signed-off-by: Anca Iordache <anca.iordache@docker.com>

samples/react-java-mysql/frontend/src/app/app.jsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import { Switch } from "react-router-dom"
+import { renderRoutes } from "./routes"
+
+import { ApplicationContainer } from "app/components/layout"
+
+require("./core/styles/reset.css");
+require("./core/styles/normalize.scss");
+//require("./core/styles/main.scss");
+
+export class App extends React.Component {
+    render() {
+        return (
+            <ApplicationContainer>
+                <Switch>
+                    {renderRoutes()}
+                </Switch>
+            </ApplicationContainer>
+        )
+    }
+}
+

samples/react-java-mysql/frontend/src/app/components/layout/ApplicationContainer.jsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+export default class ApplicationContainer extends React.Component {
+
+    render() {
+        return (
+            <div className="main-container">
+                <div className="main-content">
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+
+}

samples/react-java-mysql/frontend/src/app/components/layout/index.js

@@ -0,0 +1,5 @@
+import ApplicationContainer from "./ApplicationContainer";
+
+export {
+    ApplicationContainer,
+}

samples/react-java-mysql/frontend/src/app/core/styles/normalize.scss

@@ -0,0 +1,396 @@
+/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
+
+// ==========================================================================
+// HTML5 display definitions
+// ==========================================================================
+
+//
+// Correct `block` display not defined in IE 8/9.
+//
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+
+//
+// Correct `inline-block` display not defined in IE 8/9.
+//
+
+audio,
+canvas,
+video {
+  display: inline-block;
+}
+
+//
+// Prevent modern browsers from displaying `audio` without controls.
+// Remove excess height in iOS 5 devices.
+//
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+//
+// Address styling not present in IE 8/9.
+//
+
+[hidden] {
+  display: none;
+}
+
+// ==========================================================================
+// Base
+// ==========================================================================
+
+//
+// 1. Set default font family to sans-serif.
+// 2. Prevent iOS text size adjust after orientation change, without disabling
+//    user zoom.
+//
+
+html {
+  font-family: sans-serif; // 1
+  -webkit-text-size-adjust: 100%; // 2
+  -ms-text-size-adjust: 100%; // 2
+}
+
+//
+// Remove default margin.
+//
+
+body {
+  margin: 0;
+}
+
+// ==========================================================================
+// Links
+// ==========================================================================
+
+//
+// Address `outline` inconsistency between Chrome and other browsers.
+//
+
+a:focus {
+  outline: thin dotted;
+}
+
+//
+// Improve readability when focused and also mouse hovered in all browsers.
+//
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+// ==========================================================================
+// Typography
+// ==========================================================================
+
+//
+// Address variable `h1` font-size and margin within `section` and `article`
+// contexts in Firefox 4+, Safari 5, and Chrome.
+//
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+//
+// Address styling not present in IE 8/9, Safari 5, and Chrome.
+//
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+//
+// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+//
+
+b,
+strong {
+  font-weight: bold;
+}
+
+//
+// Address styling not present in Safari 5 and Chrome.
+//
+
+dfn {
+  font-style: italic;
+}
+
+//
+// Address differences between Firefox and other browsers.
+//
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+//
+// Address styling not present in IE 8/9.
+//
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+//
+// Correct font family set oddly in Safari 5 and Chrome.
+//
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, serif;
+  font-size: 1em;
+}
+
+//
+// Improve readability of pre-formatted text in all browsers.
+//
+
+pre {
+  white-space: pre-wrap;
+}
+
+//
+// Set consistent quote types.
+//
+
+q {
+  quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+//
+// Address inconsistent and variable font size in all browsers.
+//
+
+small {
+  font-size: 80%;
+}
+
+//
+// Prevent `sub` and `sup` affecting `line-height` in all browsers.
+//
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+// ==========================================================================
+// Embedded content
+// ==========================================================================
+
+//
+// Remove border when inside `a` element in IE 8/9.
+//
+
+img {
+  border: 0;
+}
+
+//
+// Correct overflow displayed oddly in IE 9.
+//
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+// ==========================================================================
+// Figures
+// ==========================================================================
+
+//
+// Address margin not present in IE 8/9 and Safari 5.
+//
+
+figure {
+  margin: 0;
+}
+
+// ==========================================================================
+// Forms
+// ==========================================================================
+
+//
+// Define consistent border, margin, and padding.
+//
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+//
+// 1. Correct `color` not being inherited in IE 8/9.
+// 2. Remove padding so people aren't caught out if they zero out fieldsets.
+//
+
+legend {
+  border: 0; // 1
+  padding: 0; // 2
+}
+
+//
+// 1. Correct font family not being inherited in all browsers.
+// 2. Correct font size not being inherited in all browsers.
+// 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+//
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit; // 1
+  font-size: 100%; // 2
+  margin: 0; // 3
+}
+
+//
+// Address Firefox 4+ setting `line-height` on `input` using `!important` in
+// the UA stylesheet.
+//
+
+button,
+input {
+  line-height: normal;
+}
+
+//
+// Address inconsistent `text-transform` inheritance for `button` and `select`.
+// All other form control elements do not inherit `text-transform` values.
+// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
+// Correct `select` style inheritance in Firefox 4+ and Opera.
+//
+
+button,
+select {
+  text-transform: none;
+}
+
+//
+// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+//    and `video` controls.
+// 2. Correct inability to style clickable `input` types in iOS.
+// 3. Improve usability and consistency of cursor style between image-type
+//    `input` and others.
+//
+
+button,
+html input[type="button"], // 1
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; // 2
+  cursor: pointer; // 3
+}
+
+//
+// Re-set default cursor for disabled elements.
+//
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+//
+// 1. Address box sizing set to `content-box` in IE 8/9.
+// 2. Remove excess padding in IE 8/9.
+//
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; // 1
+  padding: 0; // 2
+}
+
+//
+// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+//    (include `-moz` to future-proof).
+//
+
+input[type="search"] {
+  -webkit-appearance: textfield; // 1
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; // 2
+  box-sizing: content-box;
+}
+
+//
+// Remove inner padding and search cancel button in Safari 5 and Chrome
+// on OS X.
+//
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+//
+// Remove inner padding and border in Firefox 4+.
+//
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+//
+// 1. Remove default vertical scrollbar in IE 8/9.
+// 2. Improve readability and alignment in all browsers.
+//
+
+textarea {
+  overflow: auto; // 1
+  vertical-align: top; // 2
+}
+
+// ==========================================================================
+// Tables
+// ==========================================================================
+
+//
+// Remove most spacing between table cells.
+//
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

samples/react-java-mysql/frontend/src/app/core/styles/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

samples/react-java-mysql/frontend/src/app/entry.jsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { render, unmountComponentAtNode } from "react-dom"
+import { AppContainer } from "react-hot-loader"
+import { Provider } from 'react-redux';
+import { ConnectedRouter } from "react-router-redux"
+import { createBrowserHistory } from "history"
+
+import { configureStore, sagaMiddleware } from "./store"
+import { runApplicationSagas } from "./sagas"
+
+const history = createBrowserHistory();
+const store = configureStore(history);
+
+const getAppContainer = () => document.getElementById('app-container');
+
+const renderApp = () => {
+    const App = require('./app').App;
+    render(
+        <AppContainer>
+            <Provider store={store}>
+                <ConnectedRouter history={history}>
+                    <App/>
+                </ConnectedRouter>
+            </Provider>
+        </AppContainer>
+        , getAppContainer());
+};
+
+if (__DEV__ && module.hot) {
+    const hotReloadApp = () => renderApp();
+    module.hot.accept('./app', () => {
+        // Preventing the hot reloading error from react-router
+        unmountComponentAtNode(getAppContainer());
+        hotReloadApp();
+    })
+}
+
+// runApplicationSagas(sagaMiddleware);
+renderApp();

samples/react-java-mysql/frontend/src/app/pages/home/HomePage.jsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { connect } from "react-redux";
+
+require("./home.scss");
+
+const mapStateToProps = (state, props) => {
+    return {};
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {};
+};
+
+class HomePage extends React.Component {
+
+    render() {
+        return (
+            <div className="home-page page">
+                <h1>My New React App</h1>
+            </div>
+        )
+    }
+
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(HomePage)

samples/react-java-mysql/frontend/src/app/pages/home/home.scss

@@ -0,0 +1,6 @@
+
+
+.home-page {
+  background-color: blue;
+  color: red;
+}

samples/react-java-mysql/frontend/src/app/pages/home/index.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { Route } from "react-router-dom";
+import HomePage from './HomePage';
+
+const route = <Route path="/" exact key="home" component={HomePage}/>;
+
+export default route;

samples/react-java-mysql/frontend/src/app/reducers.js

@@ -0,0 +1,10 @@
+import { combineReducers } from 'redux';
+import { routerReducer } from 'react-router-redux';
+
+import whalesReducer from 'app/redux/whales';
+
+export const rootReducer = combineReducers({
+    router: routerReducer,
+
+    whales: whalesReducer,
+});

samples/react-java-mysql/frontend/src/app/redux/whales/action-creators.js

@@ -0,0 +1,4 @@
+import { createAction } from 'redux-actions';
+import * as ActionTypes from "./action-types";
+
+export const fetchWhales = createAction(ActionTypes.FETCH_WHALES);

samples/react-java-mysql/frontend/src/app/redux/whales/action-types.js

@@ -0,0 +1,4 @@
+
+const prefix = 'WHALES';
+
+export const FETCH_WHALES = `${prefix}/FETCH`;

samples/react-java-mysql/frontend/src/app/redux/whales/index.js

@@ -0,0 +1,3 @@
+import Reducer from './reducer';
+
+export default Reducer;

samples/react-java-mysql/frontend/src/app/redux/whales/reducer.js

@@ -0,0 +1,16 @@
+import * as ActionTypes from "./action-types";
+import { handleActions } from "redux-actions";
+
+const defaultState = {
+    list: [],
+};
+
+const handleFetchWhales = (state, {payload}) => {
+    return state;
+};
+
+const reducer = handleActions({
+    [ActionTypes.FETCH_WHALES] : handleFetchWhales
+}, defaultState);
+
+export default reducer;

samples/react-java-mysql/frontend/src/app/routes.jsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+import Home from "./pages/home"
+
+const routes = [
+    Home,
+];
+
+export const renderRoutes = () => {
+    return routes;
+};

samples/react-java-mysql/frontend/src/app/sagas.js

@@ -0,0 +1,9 @@
+//import { templatesSaga } from "./data/templates/sagas";
+//import { appWizardSaga } from "./data/app-wizard/sagas";
+
+const startupSagas = [
+];
+
+export const runApplicationSagas = (sagaMiddleware) => {
+    startupSagas.forEach(sagaMiddleware.run);
+};

samples/react-java-mysql/frontend/src/app/store.js

@@ -0,0 +1,37 @@
+import { routerMiddleware } from 'react-router-redux';
+import { createStore, applyMiddleware, compose } from 'redux';
+import createSagaMiddleware from "redux-saga";
+import { rootReducer } from "./reducers";
+
+export const sagaMiddleware = createSagaMiddleware();
+
+export const configureStore = (history, initialState = {}) => {
+
+    const middlewares = [
+        routerMiddleware(history),
+        sagaMiddleware
+    ];
+
+    const enhancers = [
+        applyMiddleware(...middlewares),
+    ];
+
+    if(__DEV__) {
+        const devToolEnhancer = () => {
+            return typeof window === 'object' && typeof window.devToolsExtension !== 'undefined'
+                ? window.devToolsExtension() : f => f;
+        };
+        enhancers.push(devToolEnhancer())
+    }
+
+    const store = createStore(rootReducer, initialState, compose(...enhancers));
+
+    if(__DEV__ && module.hot) {
+        module.hot.accept('./reducers', () => {
+            const nextReducer = require('./reducers').default;
+            store.replaceReducer(nextReducer);
+        })
+    }
+
+    return store;
+};

samples/react-java-mysql/frontend/src/index.ejs

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Sample application</title>
+  </head>
+  <body>
+    <div id="app-container"></div>
+  </body>
+</html>

samples/react-java-mysql/frontend/src/test/mocks/imageMock.js

@@ -0,0 +1,3 @@
+// Return an empty string or other mock path to emulate the url that
+// Webpack provides via the file-loader
+module.exports = 'mocked-image.jpg';

samples/react-java-mysql/frontend/src/test/mocks/styleMock.js

@@ -0,0 +1,2 @@
+// Return a Proxy to emulate css modules (if you are using them)
+module.exports = require('identity-obj-proxy');