initial commit

Author: grgur

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["es2015-native-modules", "react"],
+  "plugins": ["transform-runtime"]
+}

.editorconfig

@@ -0,0 +1,3 @@
+[*.js]
+indent_style=space
+indent_size=2

.eslintrc

@@ -0,0 +1,28 @@
+extends: 
+  eslint-config-airbnb
+
+parser: 
+  babel-eslint
+
+settings:
+  ecmascript: 6
+
+ecmaFeatures: 
+  jsx: true
+  modules: true
+  destructuring: true
+  classes: true
+  forOf: true
+  blockBindings: true
+  arrowFunctions: true 
+
+env:
+  browser: true
+
+rules:
+  indent: 2
+  func-style: 0
+  func-names: 0
+  comma-dangle: 0
+  no-console: 0
+  no-param-reassign: 0

.gitignore

@@ -0,0 +1,8 @@
+.DS_STORE
+node_modules
+static
+.module-cache
+*.log*
+coverage
+__nogit
+.idea

README.md

@@ -0,0 +1,33 @@
+# React Router Dynamic Route Loading w/ Webpack 2 Chunks
+
+Webpack 2 automatically splits routes in chunks (small bundles) and loads them on demand. 
+
+## Contains
+
+- [x] [Webpack 2](https://webpack.github.io)
+- [x] [React 0.15](https://facebook.github.io/react/)
+- [x] [Babel 6.5](https://babeljs.io/)
+
+##System Requirements
+Before installing the dependencies, make sure your system has the correct Node and Npm versions, otherwise you will get errors.
+
+- Node 5.x.x
+- Npm 3.x.x
+
+## Setup
+
+```
+$ npm install
+```
+
+## Running
+
+```
+$ npm start
+```
+
+## Build
+
+```
+$ npm run build
+```

build.js

@@ -0,0 +1,24 @@
+/* eslint no-var: 0 */
+var exec = require('child_process').exec;
+
+var cmdLine = './node_modules/.bin/webpack --progress';
+var environ = (!process.argv[2].indexOf('development')) ? 'development' : 'production';
+var command;
+
+if (process.platform === 'win32') {
+  cmdLine = 'set NODE_ENV=' + environ + '&& ' + cmdLine;
+} else {
+  cmdLine = 'NODE_ENV=' + environ + ' ' + cmdLine;
+}
+
+command = exec(cmdLine);
+
+command.stdout.on('data', function(data) {
+  process.stdout.write(data);
+});
+command.stderr.on('data', function(data) {
+  process.stderr.write(data);
+});
+command.on('error', function(err) {
+  process.stderr.write(err);
+});

client/_variables.scss

@@ -0,0 +1,7 @@
+$light: #e6e6e6;
+$dark: #4d4d4d;
+$white: #ffffff;
+$grey: #7d7d7d;
+$red: #ec3d2b;
+$blue: #113d92;
+$lightBlue: #258ce7;

client/actions/index.js

@@ -0,0 +1,33 @@
+export const ADD_TRANSACTION = 'ADD_TRANSACTION';
+export const DELETE_TRANSACTION = 'DELETE_TRANSACTION';
+export const GET_TRANSACTION_GRID_FIELDS = 'GET_TRANSACTION_GRID_FIELDS';
+export const REQUEST_SUM = 'REQUEST_SUM';
+
+function createTransaction(transaction) {
+  return {
+    type: ADD_TRANSACTION,
+    transaction
+  };
+}
+
+export function deleteTransaction(id) {
+  return {
+    type: ADD_TRANSACTION,
+    id
+  };
+}
+
+export function requestSum(data) {
+  return {
+    type: REQUEST_SUM,
+    data
+  };
+}
+
+export function addTransaction(transaction) {
+  return (dispatch, getState) => {
+    const addedResult = dispatch(createTransaction(transaction));
+    dispatch(requestSum(getState().transactions.transactions));
+    return addedResult;
+  };
+}

client/actions/navigation.js

@@ -0,0 +1,26 @@
+import { menuSections } from 'data/menu.json';
+
+export const RECEIVE_MENU_SECTIONS = 'RECEIVE_MENU_SECTIONS';
+export const TOGGLE_MENU = 'TOGGLE_MENU';
+export const SELECT_MENU_SECTION = 'SELECT_MENU_SECTION';
+
+export function toggleMenu() {
+  return (dispatch, getState) => dispatch({
+    type: TOGGLE_MENU,
+    menuVisible: !getState().navigation.menu.menuVisible
+  });
+}
+
+export function loadMenuData() {
+  return dispatch => dispatch({
+    type: RECEIVE_MENU_SECTIONS,
+    menuSections
+  });
+}
+
+export function selectMenuSection(menuSection) {
+  return dispatch => dispatch({
+    type: SELECT_MENU_SECTION,
+    menuSection
+  });
+}

client/components/Header/header.scss

@@ -0,0 +1,33 @@
+@import "client/variables";
+
+.header-container {
+  background-color: $grey;
+  padding: 10px;
+  user-select: none;
+  -webkit-user-select: none;
+
+  .header-title {
+    color: $white;
+    margin: 0;
+    font-size: 1.4em;
+  }
+
+  &.header-white {
+    background-color: $white;
+    .header-title {
+      color: $dark;
+    }
+  }
+  &.header-red {
+    background-color: $red;
+  }
+  &.header-dark {
+    background-color: $dark;
+  }
+  &.header-grey {
+    background-color: $grey;
+  }
+  &.header-blue {
+    background-color: $blue;
+  }
+}