frontend setup complete

daemon/web/.eslintrc.json

@@ -5,12 +5,15 @@
   },
   "extends": "airbnb",
   "rules": {
+    "import/prefer-default-export": 0,
     "prefer-template": 0,
     "react/jsx-filename-extension": 0,
     "react/require-default-props": 0,
+    "react/forbid-prop-types": 0,
     "react/jsx-closing-bracket-location": 0,
     "object-curly-newline": 0,
-    "arrow-body-style": [2, "as-needed"],
+    "jsx-a11y/anchor-is-valid": 0,
+    "arrow-body-style": [2, "as-needed", { "requireReturnForObjectLiteral": true }],
     "comma-dangle": ["error", "always-multiline", {
       "arrays": "always",
       "objects": "always",

daemon/web/actions/_constants.js

@@ -0,0 +1,3 @@
+export const TEST_DASHBOARD_ACTION = 'TEST_DASHBOARD_ACTION';
+export const TEST_LOGIN_ACTION = 'TEST_LOGIN_ACTION';
+export const TEST_HOME_ACTION = 'TEST_HOME_ACTION';

daemon/web/actions/dashboard.js

@@ -0,0 +1,13 @@
+import {
+  TEST_DASHBOARD_ACTION,
+} from './_constants';
+
+
+export const testAction = payload => (dispatch) => {
+  // remove later
+  console.log('dashboard action fired!');
+  dispatch({
+    type: TEST_DASHBOARD_ACTION,
+    payload,
+  });
+};

daemon/web/actions/login.js

@@ -0,0 +1,13 @@
+import {
+  TEST_LOGIN_ACTION,
+} from './_constants';
+
+
+export const testAction = payload => (dispatch) => {
+  // remove later
+  console.log('login action fired!');
+  dispatch({
+    type: TEST_LOGIN_ACTION,
+    payload,
+  });
+};

daemon/web/actions/main.js

@@ -0,0 +1,13 @@
+import {
+  TEST_MAIN_ACTION,
+} from './_constants';
+
+
+export const testAction = payload => (dispatch) => {
+  // remove later
+  console.log('main action fired!');
+  dispatch({
+    type: TEST_MAIN_ACTION,
+    payload,
+  });
+};

daemon/web/client.js → daemon/web/common/client.js

@@ -1,4 +1,4 @@
-import encodeURL from './common/encodeURL';
+import encodeURL from './encodeURL';
 
 export default class InertiaClient {
   constructor(url) {

daemon/web/index.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
 
-import App from './components/App';
-import './index.sass';
+import App from './pages/app/App';
+import store from './store';
+import './styles/index.sass';
 
-ReactDOM.render(<App />, document.getElementById('app'));
+ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('app'));

daemon/web/package.json

@@ -22,13 +22,17 @@
     "babel-preset-react": "6.24.1",
     "babel-preset-stage-3": "6.24.1",
     "css-loader": "0.28.11",
+    "eslint-plugin-jsx-a11y": "6.0.3",
     "history": "4.7.2",
     "html-webpack-plugin": "3.2.0",
     "node-sass": "4.9.0",
     "prop-types": "15.6.1",
     "react": "16.3.2",
     "react-dom": "16.3.2",
+    "react-redux": "5.0.7",
     "react-router-dom": "4.2.2",
+    "redux": "4.0.0",
+    "redux-thunk": "2.3.0",
     "sass-loader": "7.0.1",
     "style-loader": "0.21.0",
     "webpack": "4.8.3",
@@ -39,7 +43,6 @@
     "eslint": "4.19.1",
     "eslint-config-airbnb": "16.1.0",
     "eslint-plugin-import": "2.12.0",
-    "eslint-plugin-jsx-a11y": "6.0.3",
     "eslint-plugin-react": "7.8.1"
   }
 }

daemon/web/components/App.js → daemon/web/pages/app/App.js

@@ -3,9 +3,9 @@ import { HashRouter, Redirect, Route } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import createHistory from 'history/createBrowserHistory';
 
-import InertiaClient from '../client';
-import Login from './Login';
-import Home from './Home';
+// import InertiaClient from '../../common/client';
+import Login from '../login/Login';
+import Main from '../main/Main';
 
 const styles = {
   container: {
@@ -27,7 +27,7 @@ const AuthRoute = ({ authenticated, component: Component, props, ...rest }) => (
 );
 AuthRoute.propTypes = {
   authenticated: PropTypes.bool,
-  component: PropTypes.node,
+  component: PropTypes.any,
   props: PropTypes.shape(),
 };
 
@@ -40,14 +40,16 @@ const PropsRoute = ({ component: Component, props, ...rest }) => (
   )} />
 );
 PropsRoute.propTypes = {
-  component: PropTypes.node,
+  component: PropTypes.any,
   props: PropTypes.shape(),
 };
 
 export default class App extends React.Component {
   static async isAuthenticated() {
-    const response = await InertiaClient.validate();
-    return (response.status === 200);
+    // TODO: disable route guards
+    // const response = await InertiaClient.validate();
+    // return (response.status === 200);
+    return true;
   }
 
   constructor(props) {
@@ -104,7 +106,7 @@ export default class App extends React.Component {
           <AuthRoute
             path="/home"
             authenticated={this.state.authenticated}
-            component={Home}
+            component={Main}
             props={this.props} />
         </div>
       </HashRouter>

daemon/web/pages/containers/containers.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+const styles = {
+};
+
+class ContainersWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <div style={styles.container}>
+        <h1>Hello!</h1>
+      </div>
+    );
+  }
+}
+ContainersWrapper.propTypes = {};
+
+const mapStateToProps = () => { return {}; };
+
+const mapDispatchToProps = () => { return {}; };
+
+const Containers = connect(mapStateToProps, mapDispatchToProps)(ContainersWrapper);
+
+
+export default Containers;

daemon/web/components/Dashboard.js → daemon/web/pages/dashboard/Dashboard.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 
-import InertiaClient from '../client';
-import LogView from './metrics/LogView';
+import InertiaClient from '../../common/client';
+import LogView from '../../components/LogView';
+import * as dashboardActions from '../../actions/dashboard';
 
 const styles = {
   container: {
@@ -26,7 +29,7 @@ function promiseState(p) {
     .then(v => (v === t ? 'pending' : ('fulfilled', () => 'rejected')));
 }
 
-export default class Dashboard extends React.Component {
+class DashboardWrapper extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -122,6 +125,19 @@ export default class Dashboard extends React.Component {
     );
   }
 }
-Dashboard.propTypes = {
+DashboardWrapper.propTypes = {
   container: PropTypes.string,
 };
+
+const mapStateToProps = ({ Dashboard }) => {
+  return {
+    testState: Dashboard.testState,
+  };
+};
+
+const mapDispatchToProps = dispatch => bindActionCreators({ ...dashboardActions }, dispatch);
+
+const Dashboard = connect(mapStateToProps, mapDispatchToProps)(DashboardWrapper);
+
+
+export default Dashboard;