Uploaded the day 3 resolved for react and redux

jotaoncode · Jul 18, 2016 · 124cfc0 · 124cfc0
1 parent e1fa8b2
commit 124cfc0
Show file tree

Hide file tree

Showing 72 changed files with 1,125 additions and 0 deletions.
diff --git a/day-2-not-resolved/.gitignore → day-2/.gitignore b/day-2-not-resolved/.gitignore → day-2/.gitignore
diff --git a/day-2-not-resolved/README.md → day-2/README.md b/day-2-not-resolved/README.md → day-2/README.md
diff --git a/day-2-not-resolved/index.html → day-2/index.html b/day-2-not-resolved/index.html → day-2/index.html
diff --git a/day-2-not-resolved/package.json → day-2/package.json b/day-2-not-resolved/package.json → day-2/package.json
diff --git a/...not-resolved/src/actions/CommonAction.tsx → day-2/src/actions/CommonAction.tsx b/...not-resolved/src/actions/CommonAction.tsx → day-2/src/actions/CommonAction.tsx
diff --git a/...2-not-resolved/src/actions/PlayAction.tsx → day-2/src/actions/PlayAction.tsx b/...2-not-resolved/src/actions/PlayAction.tsx → day-2/src/actions/PlayAction.tsx
diff --git a/...-resolved/src/actions/learningActions.tsx → day-2/src/actions/learningActions.tsx b/...-resolved/src/actions/learningActions.tsx → day-2/src/actions/learningActions.tsx
diff --git a/...-not-resolved/src/actions/playActions.tsx → day-2/src/actions/playActions.tsx b/...-not-resolved/src/actions/playActions.tsx → day-2/src/actions/playActions.tsx
diff --git a/...not-resolved/src/components/animation.tsx → day-2/src/components/animation.tsx b/...not-resolved/src/components/animation.tsx → day-2/src/components/animation.tsx
diff --git a/...ed/src/components/animations/fullList.tsx → day-2/src/components/animations/fullList.tsx b/...ed/src/components/animations/fullList.tsx → day-2/src/components/animations/fullList.tsx
diff --git a/...ed/src/components/animations/listItem.tsx → day-2/src/components/animations/listItem.tsx b/...ed/src/components/animations/listItem.tsx → day-2/src/components/animations/listItem.tsx
diff --git a/...t-resolved/src/components/application.tsx → day-2/src/components/application.tsx b/...t-resolved/src/components/application.tsx → day-2/src/components/application.tsx
diff --git a/...lved/src/components/playable/playable.tsx → day-2/src/components/playable/playable.tsx b/...lved/src/components/playable/playable.tsx → day-2/src/components/playable/playable.tsx
diff --git a/...ved/src/components/playable/playables.tsx → day-2/src/components/playable/playables.tsx b/...ved/src/components/playable/playables.tsx → day-2/src/components/playable/playables.tsx
diff --git a/...not-resolved/src/constants/animations.tsx → day-2/src/constants/animations.tsx b/...not-resolved/src/constants/animations.tsx → day-2/src/constants/animations.tsx
diff --git a/...resolved/src/dispatcher/appDispatcher.tsx → day-2/src/dispatcher/appDispatcher.tsx b/...resolved/src/dispatcher/appDispatcher.tsx → day-2/src/dispatcher/appDispatcher.tsx
diff --git a/day-2-not-resolved/src/index.tsx → day-2/src/index.tsx b/day-2-not-resolved/src/index.tsx → day-2/src/index.tsx
diff --git a/...t-resolved/src/stores/dancingControls.tsx → day-2/src/stores/dancingControls.tsx b/...t-resolved/src/stores/dancingControls.tsx → day-2/src/stores/dancingControls.tsx
diff --git a/...not-resolved/src/stores/dancingStyles.tsx → day-2/src/stores/dancingStyles.tsx b/...not-resolved/src/stores/dancingStyles.tsx → day-2/src/stores/dancingStyles.tsx
diff --git a/day-2-not-resolved/tsconfig.json → day-2/tsconfig.json b/day-2-not-resolved/tsconfig.json → day-2/tsconfig.json
diff --git a/day-2-not-resolved/typings.json → day-2/typings.json b/day-2-not-resolved/typings.json → day-2/typings.json
diff --git a/...-resolved/typings/globals/node/index.d.ts → day-2/typings/globals/node/index.d.ts b/...-resolved/typings/globals/node/index.d.ts → day-2/typings/globals/node/index.d.ts
diff --git a/...esolved/typings/globals/node/typings.json → day-2/typings/globals/node/typings.json b/...esolved/typings/globals/node/typings.json → day-2/typings/globals/node/typings.json
diff --git a/...lved/typings/globals/react-dom/index.d.ts → day-2/typings/globals/react-dom/index.d.ts b/...lved/typings/globals/react-dom/index.d.ts → day-2/typings/globals/react-dom/index.d.ts
diff --git a/...ed/typings/globals/react-dom/typings.json → day-2/typings/globals/react-dom/typings.json b/...ed/typings/globals/react-dom/typings.json → day-2/typings/globals/react-dom/typings.json
diff --git a/...resolved/typings/globals/react/index.d.ts → day-2/typings/globals/react/index.d.ts b/...resolved/typings/globals/react/index.d.ts → day-2/typings/globals/react/index.d.ts
diff --git a/...solved/typings/globals/react/typings.json → day-2/typings/globals/react/typings.json b/...solved/typings/globals/react/typings.json → day-2/typings/globals/react/typings.json
diff --git a/day-2-not-resolved/typings/index.d.ts → day-2/typings/index.d.ts b/day-2-not-resolved/typings/index.d.ts → day-2/typings/index.d.ts
diff --git a/...-resolved/typings/modules/flux/index.d.ts → day-2/typings/modules/flux/index.d.ts b/...-resolved/typings/modules/flux/index.d.ts → day-2/typings/modules/flux/index.d.ts
diff --git a/...esolved/typings/modules/flux/typings.json → day-2/typings/modules/flux/typings.json b/...esolved/typings/modules/flux/typings.json → day-2/typings/modules/flux/typings.json
diff --git a/...gs/modules/react-addons-update/index.d.ts → ...gs/modules/react-addons-update/index.d.ts b/...gs/modules/react-addons-update/index.d.ts → ...gs/modules/react-addons-update/index.d.ts
diff --git a/.../modules/react-addons-update/typings.json → .../modules/react-addons-update/typings.json b/.../modules/react-addons-update/typings.json → .../modules/react-addons-update/typings.json
diff --git a/...d/typings/modules/react-router/index.d.ts → ...2/typings/modules/react-router/index.d.ts b/...d/typings/modules/react-router/index.d.ts → ...2/typings/modules/react-router/index.d.ts
diff --git a/...typings/modules/react-router/typings.json → ...typings/modules/react-router/typings.json b/...typings/modules/react-router/typings.json → ...typings/modules/react-router/typings.json
diff --git a/day-2-not-resolved/webpack.config.js → day-2/webpack.config.js b/day-2-not-resolved/webpack.config.js → day-2/webpack.config.js
diff --git a/day-3/ecma6/README.md b/day-3/ecma6/README.md
@@ -0,0 +1,21 @@
+## Objectives
+
+This is a Directory App in order to get
+
+Directory App for react redux
+
+SPA, very simple one just to learn about redux.
+
+## Contributors
+
+Juan José García
+
+www.jotaoncode.com
+
+##References
+
+Boilerplate from :
+
+Todos from redux examples
+
+https://github.com/anorudes/redux-easy-boilerplate.
diff --git a/day-3/ecma6/bin/server.js b/day-3/ecma6/bin/server.js
@@ -0,0 +1,14 @@
+var fs = require('fs');
+
+var babelrc = fs.readFileSync('./.babelrc');
+var config;
+
+try {
+  config = JSON.parse(babelrc);
+} catch (err) {
+  console.error('==>     ERROR: Error parsing your .babelrc.');
+  console.error(err);
+}
+
+require('babel-core/register')(config);
+require('../server');
diff --git a/day-3/ecma6/dist/448c34a56d699c29117adc64c43affeb.woff2 b/day-3/ecma6/dist/448c34a56d699c29117adc64c43affeb.woff2
diff --git a/day-3/ecma6/dist/89889688147bd7575d6327160d64e760.svg b/day-3/ecma6/dist/89889688147bd7575d6327160d64e760.svg
diff --git a/day-3/ecma6/dist/bundle.css b/day-3/ecma6/dist/bundle.css
diff --git a/day-3/ecma6/dist/bundle.css.map b/day-3/ecma6/dist/bundle.css.map
diff --git a/day-3/ecma6/dist/bundle.js b/day-3/ecma6/dist/bundle.js
diff --git a/day-3/ecma6/dist/bundle.js.map b/day-3/ecma6/dist/bundle.js.map
diff --git a/day-3/ecma6/dist/e18bbf611f2a2e43afc071aa2f4e1512.ttf b/day-3/ecma6/dist/e18bbf611f2a2e43afc071aa2f4e1512.ttf
diff --git a/day-3/ecma6/dist/f4769f9bdb7466be65088239c12046d1.eot b/day-3/ecma6/dist/f4769f9bdb7466be65088239c12046d1.eot
diff --git a/day-3/ecma6/dist/fa2772327f55d8198301fdb8bcfc8158.woff b/day-3/ecma6/dist/fa2772327f55d8198301fdb8bcfc8158.woff
diff --git a/day-3/ecma6/index.html b/day-3/ecma6/index.html
@@ -0,0 +1,18 @@
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Directors Application</title>
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" type="text/css" href="dist/bundle.css"/>
+  <link rel="shortcut icon" type="image/png" href="./src/images/favicon.png"/>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+<script src="dist/bundle.js"></script>
+
+</html>
diff --git a/day-3/ecma6/karma.conf.js b/day-3/ecma6/karma.conf.js
@@ -0,0 +1,34 @@
+module.exports = (config) => {
+  config.set({
+    basePath: 'src',
+    singleRun: true,
+    frameworks: ['mocha'],
+    reporters: ['dots'],
+    browsers: ['Chrome'],
+    files: [
+      'test/**/*.spec.js',
+    ],
+    preprocessors: {
+      'test/**/*.spec.js': ['webpack'],
+    },
+    webpack: {
+      resolve: {
+        extensions: ['', '.js', '.ts'],
+        modulesDirectories: ['node_modules', 'src'],
+      },
+      module: {
+        loaders: [{
+          test: /\.js$/,
+          loader: 'babel-loader',
+        }],
+      },
+    },
+    webpackMiddleware: {
+      stats: {
+        color: true,
+        chunkModules: false,
+        modules: false,
+      },
+    },
+  });
+};
diff --git a/day-3/ecma6/package.json b/day-3/ecma6/package.json
@@ -0,0 +1,87 @@
+{
+  "name": "directors-application-react-redux",
+  "version": "0.0.1",
+  "description": "Directory application using react and redux",
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "webpack --progress --verbose --colors --display-error-details --config webpack/common.config.js",
+    "build:production": "npm run clean && npm run build",
+    "lint": "eslint src",
+    "start": "node bin/server.js",
+    "test": "karma start"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jotaoncode/directory-app-react-redux.git"
+  },
+  "license": "MIT",
+  "authors": [
+    "Jota On Code (https://github.com/jotaoncode)"
+  ],
+  "devDependencies": {
+    "autoprefixer": "6.3.1",
+    "babel-core": "^6.4.5",
+    "babel-eslint": "^5.0.0-beta6",
+    "babel-loader": "^6.2.1",
+    "babel-plugin-react-transform": "^2.0.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-polyfill": "^6.3.14",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "babel-preset-react-hmre": "^1.0.1",
+    "babel-preset-stage-0": "^6.3.13",
+    "bootstrap-loader": "^1.0.5",
+    "bootstrap-sass": "^3.3.6",
+    "classnames": "^2.2.3",
+    "css-loader": "^0.23.1",
+    "eslint": "^1.10.3",
+    "eslint-config-airbnb": "3.1.0",
+    "eslint-plugin-react": "^3.15.0",
+    "expect": "^1.13.4",
+    "exports-loader": "^0.6.2",
+    "express": "^4.13.4",
+    "express-open-in-editor": "^1.1.0",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.8.5",
+    "history": "^2.0.0-rc2",
+    "imports-loader": "^0.6.5",
+    "jasmine-core": "^2.4.1",
+    "karma": "^0.13.19",
+    "karma-chrome-launcher": "^0.2.2",
+    "karma-mocha": "^0.2.1",
+    "karma-webpack": "^1.7.0",
+    "less": "^2.5.3",
+    "less-loader": "^2.2.2",
+    "mocha": "^2.3.4",
+    "morgan": "^1.6.1",
+    "node-sass": "^3.4.2",
+    "postcss-import": "^7.1.3",
+    "postcss-loader": "^0.8.0",
+    "react-addons-css-transition-group": "^0.14.6",
+    "react-document-meta": "^2.0.0-rc2",
+    "react-dom": "^0.14.6",
+    "react-hot-loader": "^1.3.0",
+    "react-loading-order-with-animation": "^1.0.0",
+    "react-transform-hmr": "^1.0.1",
+    "redux-form": "^4.1.5",
+    "redux-logger": "2.4.0",
+    "redux-thunk": "^1.0.3",
+    "resolve-url-loader": "^1.4.3",
+    "rimraf": "^2.5.0",
+    "sass-loader": "^3.1.2",
+    "style-loader": "^0.13.0",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.12.11",
+    "webpack-dev-middleware": "^1.5.0",
+    "webpack-dev-server": "^1.14.1",
+    "webpack-hot-middleware": "^2.6.0",
+    "webpack-merge": "^0.7.3"
+  },
+  "dependencies": {
+    "jquery": "^2.2.0",
+    "react": "^0.14.6",
+    "react-redux": "^4.0.6",
+    "react-router": "^2.0.0-rc5",
+    "redux": "^3.1.4"
+  }
+}
diff --git a/day-3/ecma6/server.js b/day-3/ecma6/server.js
@@ -0,0 +1,32 @@
+const http = require('http');
+const express = require('express');
+const app = express();
+
+app.use(require('morgan')('short'));
+
+(function initWebpack() {
+  const webpack = require('webpack');
+  const webpackConfig = require('./webpack/common.config');
+  const compiler = webpack(webpackConfig);
+
+  app.use(require('webpack-dev-middleware')(compiler, {
+    noInfo: true, publicPath: webpackConfig.output.publicPath,
+  }));
+
+  app.use(require('webpack-hot-middleware')(compiler, {
+    log: console.log, path: '/__webpack_hmr', heartbeat: 10 * 1000,
+  }));
+
+  app.use(express.static(__dirname + '/'));
+})();
+
+app.get(/.*/, function root(req, res) {
+  res.sendFile(__dirname + '/index.html');
+});
+
+const server = http.createServer(app);
+server.listen(process.env.PORT || 3000, function onListen() {
+  const address = server.address();
+  console.log('Listening on: %j', address);
+  console.log(' -> that probably means: http://localhost:%d', address.port);
+});
diff --git a/day-3/ecma6/src/actions/index.js b/day-3/ecma6/src/actions/index.js
@@ -0,0 +1,6 @@
+export const removeDirector = (id) => {
+  return {
+    type: 'REMOVE_DIRECTOR',
+    id
+  }
+}
diff --git a/day-3/ecma6/src/components/Director.js b/day-3/ecma6/src/components/Director.js
@@ -0,0 +1,22 @@
+import React, { PropTypes, Component } from 'react'
+import Radium from 'radium';
+/* component styles */
+import { styles } from './Director.scss';
+
+const Director = ({ onClick, removeDirector, id, name, sex, nationality, city, dob, age, blockbuster }) => {
+  return (
+    <tr onClick={onClick} className={styles}>
+      <td>{id}</td>
+      <td>{name}</td>
+      <td>{sex}</td>
+      <td>{nationality}</td>
+      <td>{city}</td>
+      <td>{dob}</td>
+      <td>{age}</td>
+      <td>{blockbuster}</td>
+      <td><span className="glyphicon glyphicon-remove" onClick={ removeDirector }></span></td>
+    </tr>
+  )
+}
+
+export default Director
diff --git a/day-3/ecma6/src/components/Director.scss b/day-3/ecma6/src/components/Director.scss
@@ -0,0 +1,6 @@
+:local(.styles) {
+  color: black;
+  &:hover {
+    color: blue;
+  }
+}
diff --git a/day-3/ecma6/src/components/Directors.js b/day-3/ecma6/src/components/Directors.js
@@ -0,0 +1,39 @@
+import React, { PropTypes, Component } from 'react'
+var Link = require('react-router').Link
+import Director from './Director'
+import DirectorsHeader from './DirectorsHeader'
+
+const DirectorList = ({ directors, onDirectorClick, removeDirector}) => (
+  <section>
+    <table className="table">
+      <DirectorsHeader />
+      <tbody>
+        {
+          directors.map(director =>
+            <Director
+              key={director.id}
+              {...director}
+              onClick={() => onDirectorClick(director.id)}
+              removeDirector= {(ev) => { ev.preventDefault(); ev.stopPropagation(); removeDirector(director.id) } }
+            />
+          )
+        }
+      </tbody>
+    </table>
+  </section>
+)
+DirectorList.propTypes = {
+  directors: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+    sex: PropTypes.string.isRequired,
+    nationality: PropTypes.string.isRequired,
+    city: PropTypes.string.isRequired,
+    dob: PropTypes.number.isRequired,
+    age: PropTypes.number.isRequired,
+    blockbuster: PropTypes.string.isRequired
+  }).isRequired).isRequired,
+  onDirectorClick: PropTypes.func.isRequired,
+  removeDirector: PropTypes.func.isRequired
+}
+export default DirectorList
diff --git a/day-3/ecma6/src/components/DirectorsHeader.js b/day-3/ecma6/src/components/DirectorsHeader.js
@@ -0,0 +1,18 @@
+import React from 'react'
+
+const DirectorsHeader = () => (
+  <thead>
+    <tr>
+      <th>id</th>
+      <th>Name</th>
+      <th>Sex</th>
+      <th>Nationality</th>
+      <th>City</th>
+      <th>DoB</th>
+      <th>Age</th>
+      <th>BlockBuster</th>
+      <th>Options</th>
+    </tr>
+  </thead>
+)
+export default DirectorsHeader
diff --git a/day-3/ecma6/src/components/Header.js b/day-3/ecma6/src/components/Header.js
@@ -0,0 +1,10 @@
+import React, { Component } from 'react'
+
+const Header = ({ Text}) => {
+  return (
+    <h1>
+      Directors Application
+    </h1>
+  )
+}
+export default Header
diff --git a/day-3/ecma6/src/components/Subtitle.js b/day-3/ecma6/src/components/Subtitle.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Subtitle = () => (
+  <h2>
+    Director detail
+  </h2>
+)
+
+export default Subtitle
diff --git a/day-3/ecma6/src/containers/App/index.js b/day-3/ecma6/src/containers/App/index.js
@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import Header from 'components/Header'
+
+class App extends Component {
+  render() {
+    return (
+      <section className="container">
+        <Header />
+        {this.props.children}
+      </section>
+    )
+  }
+}
+export default App