WIP - project setup

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["env", "react"],
+  "plugins": ["transform-object-rest-spread"]
+}

.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  extends: 'react-app',
+
+  rules: {
+    'jsx-a11y/href-no-hash': 'off'
+  },
+
+  overrides: [
+    {
+      files: 'test/**/*.js',
+      env: {
+        jest: true,
+      },
+    },
+  ],
+}

.gitignore

@@ -0,0 +1,3 @@
+.idea
+node_modules
+aws/cloud-formation/parameters.json

.nvmrc

@@ -0,0 +1 @@
+8.10.0

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Dave Williams
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

aws/cloud-formation/parameters.json

@@ -0,0 +1,38 @@
+[
+  {
+    "ParameterKey": "AwsRegion",
+    "ParameterValue": "us-east-1"
+  },
+  {
+    "ParameterKey": "AwsAccount",
+    "ParameterValue": "887430382797"
+  },
+  {
+    "ParameterKey": "FunctionName",
+    "ParameterValue": "xilution-api-traffic-delegator"
+  },
+  {
+    "ParameterKey": "LambdaExecutionRole",
+    "ParameterValue": "arn:aws:iam::887430382797:role/lambda_basic_execution"
+  },
+  {
+    "ParameterKey": "OAuthToken",
+    "ParameterValue": "8047d12f1c2f9a611808965fbf2bd6821d33b3a7"
+  },
+  {
+    "ParameterKey": "CodeBuildRole",
+    "ParameterValue": "arn:aws:iam::887430382797:role/xilution-codebuild-role"
+  },
+  {
+    "ParameterKey": "CodeBuildDockerImage",
+    "ParameterValue": "887430382797.dkr.ecr.us-east-1.amazonaws.com/xilution/codebuild/nodejs-6.3.1:latest"
+  },
+  {
+    "ParameterKey": "CodeBuildComputeType",
+    "ParameterValue": "BUILD_GENERAL1_SMALL"
+  },
+  {
+    "ParameterKey": "CodePipelineRole",
+    "ParameterValue": "arn:aws:iam::887430382797:role/xilution-codepipeline-role"
+  }
+]

aws/cloud-formation/template.json

@@ -0,0 +1,40 @@
+{
+  "AWSTemplateFormatVersion": "2010-09-09",
+  "Parameters": {
+    "FunctionName": {
+      "Type": "String"
+    },
+    "LambdaExecutionRole": {
+      "Type": "String"
+    }
+  },
+  "Resources": {
+    "Lambda": {
+      "Type": "AWS::Lambda::Function",
+      "Properties": {
+        "Code": {
+          "ZipFile": {
+            "Fn::Join": [
+              "",
+              [
+                "exports.handler = function(event, context) {",
+                "  console.log('I am an empty Xilution Lambda function.');",
+                "};"
+              ]
+            ]
+          }
+        },
+        "FunctionName": {
+          "Ref": "FunctionName"
+        },
+        "Handler": "index.handler",
+        "MemorySize": 256,
+        "Role": {
+          "Ref": "LambdaExecutionRole"
+        },
+        "Runtime": "nodejs6.10",
+        "Timeout": 30
+      }
+    }
+  }
+}

environment.sh

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+export FUNCTION_NAME=xilution-react-todomvc

makefile

@@ -0,0 +1,42 @@
+build:
+	build-client
+	build-serverless
+
+build-client:
+	echo "not implemented yet"
+
+build-serverless:
+	if [ ! -d ./temp ]; then mkdir ./temp; fi
+	cp -rf ./node_modules ./temp
+	cp -rf ./src/* ./temp
+	cp ./package.json ./temp
+	cd ./temp ; zip -qr ./$(FUNCTION_NAME).zip . * ; cd ..
+	if [ ! -d ./dist ]; then mkdir ./dist; fi
+	mv ./temp/$(FUNCTION_NAME).zip ./dist
+	rm -rf ./temp
+
+deploy:
+	deploy-client
+	deploy-serverless
+
+deploy-client:
+	echo "not implemented yet"
+
+deploy-serverless:
+	aws lambda update-function-code --function-name $(FUNCTION_NAME) --zip-file fileb://./dist/$(FUNCTION_NAME).zip
+
+deprovision:
+	aws cloudformation delete-stack --stack-name $(FUNCTION_NAME)
+
+provision:
+	aws cloudformation create-stack --stack-name $(FUNCTION_NAME) \
+		--template-body file://./aws/cloud-formation/template.json \
+		--parameters file://./aws/cloud-formation/parameters.json
+
+reprovision:
+	aws cloudformation update-stack --stack-name $(FUNCTION_NAME) \
+		--template-body file://./aws/cloud-formation/template.json \
+		--parameters file://./aws/cloud-formation/parameters.json
+
+test-with-coverage:
+	./node_modules/.bin/istanbul cover ./node_modules/.bin/_mocha -- --recursive ./test/unit/

package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@xilution/xilution-react-todomvc",
+  "version": "0.0.0",
+  "description": "Xilution - React - TODO MVC",
+  "scripts": {
+    "lint": "eslint ./test/**/*.js ./src/**/*.js",
+    "test": "mocha --require babel-polyfill --require babel-register --require ./test/unit/client/setup.js --recursive ./test/unit/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/xilution/xilution-react-todomvc"
+  },
+  "bugs": {
+    "url": "https://github.com/xilution/xilution-react-todomvc/issues"
+  },
+  "homepage": "https://github.com/xilution/xilution-react-todomvc",
+  "dependencies": {
+    "aws-sdk": "^2.224.1",
+    "prop-types": "^15.6.1",
+    "react": "^16.3.1",
+    "react-dom": "^16.3.1",
+    "react-redux": "^5.0.7",
+    "redux": "^3.7.2",
+    "request": "^2.85.0"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-eslint": "^8.2.3",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-register": "^6.26.0",
+    "chai": "^4.1.2",
+    "chance": "^1.0.13",
+    "enzyme": "^3.3.0",
+    "eslint": "^4.19.1",
+    "eslint-config-react-app": "^2.1.0",
+    "eslint-plugin-flowtype": "^2.46.2",
+    "eslint-plugin-import": "^2.11.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.7.0",
+    "istanbul": "^0.4.5",
+    "jsdom": "^11.8.0",
+    "mocha": "^5.1.0",
+    "react-addons-test-utils": "^15.6.2",
+    "sinon": "^4.5.0",
+    "sinon-chai": "^3.0.0"
+  },
+  "engines": {
+    "node": ">=8.10.0",
+    "yarn": ">=1.3.2",
+    "npm": ">=5.6.0"
+  },
+  "author": "Todd Brunia <tbrunia@gmail.com> (http://www.github.com/tbrunia)",
+  "license": "MIT"
+}

public/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Redux Todos Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` in this folder.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>

src/client/actions/index.js

@@ -0,0 +1,23 @@
+let nextTodoId = 0;
+
+export const addTodo = text => ({
+  type: 'ADD_TODO',
+  id: nextTodoId++,
+  text
+});
+
+export const setVisibilityFilter = filter => ({
+  type: 'SET_VISIBILITY_FILTER',
+  filter
+});
+
+export const toggleTodo = id => ({
+  type: 'TOGGLE_TODO',
+  id
+});
+
+export const VisibilityFilters = {
+  SHOW_ALL: 'SHOW_ALL',
+  SHOW_COMPLETED: 'SHOW_COMPLETED',
+  SHOW_ACTIVE: 'SHOW_ACTIVE'
+};

src/client/components/App.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import Footer from './Footer'
+import AddTodo from '../containers/AddTodo'
+import VisibleTodoList from '../containers/VisibleTodoList'
+
+const App = () => (
+  <div>
+    <AddTodo />
+    <VisibleTodoList />
+    <Footer />
+  </div>
+);
+
+export default App

src/client/components/Footer.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import FilterLink from '../containers/FilterLink'
+import { VisibilityFilters } from '../actions'
+
+const Footer = () => (
+  <div>
+    <span>Show: </span>
+    <FilterLink filter={VisibilityFilters.SHOW_ALL}>
+      All
+    </FilterLink>
+    <FilterLink filter={VisibilityFilters.SHOW_ACTIVE}>
+      Active
+    </FilterLink>
+    <FilterLink filter={VisibilityFilters.SHOW_COMPLETED}>
+      Completed
+    </FilterLink>
+  </div>
+);
+
+export default Footer

src/client/components/Link.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Link = ({ active, children, onClick }) => (
+    <button
+       onClick={onClick}
+       disabled={active}
+       style={{
+           marginLeft: '4px',
+       }}
+    >
+      {children}
+    </button>
+);
+
+Link.propTypes = {
+  active: PropTypes.bool.isRequired,
+  children: PropTypes.node.isRequired,
+  onClick: PropTypes.func.isRequired
+};
+
+export default Link

src/client/components/Todo.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Todo = ({ onClick, completed, text }) => (
+  <li
+    onClick={onClick}
+    style={{
+      textDecoration: completed ? 'line-through' : 'none'
+    }}
+  >
+    {text}
+  </li>
+);
+
+Todo.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  completed: PropTypes.bool.isRequired,
+  text: PropTypes.string.isRequired
+};
+
+export default Todo

src/client/components/TodoList.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Todo from './Todo'
+
+const TodoList = ({ todos, toggleTodo }) => (
+  <ul>
+    {todos.map(todo =>
+      <Todo
+        key={todo.id}
+        {...todo}
+        onClick={() => toggleTodo(todo.id)}
+      />
+    )}
+  </ul>
+);
+
+TodoList.propTypes = {
+  todos: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    completed: PropTypes.bool.isRequired,
+    text: PropTypes.string.isRequired
+  }).isRequired).isRequired,
+  toggleTodo: PropTypes.func.isRequired
+};
+
+export default TodoList