Merge pull request #1 from dimorphic/development

Beta! #godspeed

README.md

@@ -2,10 +2,12 @@
 Poke all the way!
 
 ### Requirements
-Node `v6.3`
+Node `v6.3.1`
+Npm `v3.10`
 
 ### Getting started
-@TODO
+`$ npm i` (both in /client and /server)
+`$ npm start`
 
 #### Features:
 - [x] Pokemons card listing

client/.eslintrc.js

@@ -17,16 +17,20 @@ module.exports = exports = {
   rules: {
     'global-require': WARN,
     'arrow-body-style': [WARN, 'always'],
-    'comma-dangle': [ERROR, 'never'],
+    'comma-dangle': [WARN, 'never'],
     'import/no-mutable-exports': WARN,
     'import/no-unresolved': OFF,
     'quote-props': [ERROR, 'consistent-as-needed'],
     'no-console': OFF,
+    'no-debugger': WARN,
     'no-param-reassign': WARN,
     'no-unused-vars': [WARN, { args: 'after-used' }],
+    'no-underscore-dangle': OFF,
+    'no-restricted-syntax': WARN,
     'react/wrap-multilines': OFF,
     'react/jsx-no-bind': OFF,
-    'react/prefer-stateless-function': OFF
+    'react/prefer-stateless-function': OFF,
+    'quote-props': OFF
   },
 
   settings: {

client/config.js

@@ -17,14 +17,18 @@ const CONFIG = new Map();
 
 // environment
 CONFIG.set('env', process.env.NODE_ENV);
-CONFIG.set('HOST', '0.0.0.0');
-CONFIG.set('PORT', 8080);
+CONFIG.set('HOST', '0.0.0.0'); // bind to all interfaces
+CONFIG.set('PORT', 8080); // webpack dev server
 
 // app paths
 CONFIG.set('paths', {
   project: path.resolve(__dirname, './'),
   source: 'src',
-  build: 'dist'
+  build: 'build',
+
+  shared: '../shared',
+  assets: '../shared/assets',
+  data: '../shared/data'
 });
 
 // app dependencies
@@ -55,7 +59,12 @@ const paths = (() => {
   return {
     project,
     source: project.bind(null, CONFIG.get('paths').source),
-    build: project.bind(null, CONFIG.get('paths').build)
+    build: project.bind(null, CONFIG.get('paths').build),
+
+    // @TODO: time to make this more dynamic?
+    shared: project.bind(null, CONFIG.get('paths').shared),
+    assets: project.bind(null, CONFIG.get('paths').assets),
+    data: project.bind(null, CONFIG.get('paths').data)
   };
 })();
 

client/package.json

@@ -20,16 +20,23 @@
   "scripts": {
     "start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --config start.js --progress --colors",
     "build": "npm run clean && NODE_ENV=production ./node_modules/.bin/webpack --config start.js --progress --colors",
-    "clean": "rm -rf ./dist",
+    "clean": "rm -rf ./build",
     "lint": "./node_modules/.bin/eslint src --ext .js --ext .jsx"
   },
   "dependencies": {
+    "apisauce": "^0.3.0",
+    "babel-polyfill": "^6.9.1",
+    "classnames": "^2.2.5",
     "es6-promise": "^3.2.1",
-    "history": "^3.0.0",
+    "history": "2.1.2",
+    "material-ui": "^0.15.3",
+    "normalize.css": "3.0.3",
     "react": "^15.3.0",
+    "react-addons-shallow-compare": "^15.3.0",
     "react-dom": "^15.3.0",
     "react-redux": "^4.4.5",
     "react-router": "^2.6.1",
+    "react-tap-event-plugin": "^1.0.0",
     "redux": "^3.5.2",
     "redux-promise-middleware": "^3.3.2",
     "redux-router": "^2.1.2",
@@ -52,6 +59,7 @@
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-0": "^6.5.0",
     "babel-runtime": "^6.11.6",
+    "copy-webpack-plugin": "^3.0.1",
     "css-loader": "^0.23.1",
     "eslint": "^3.2.0",
     "eslint-config-airbnb": "^9.0.1",
@@ -71,6 +79,9 @@
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
     "redbox-react": "^1.2.10",
+    "redux-devtools": "^3.3.1",
+    "redux-devtools-dock-monitor": "^1.1.1",
+    "redux-devtools-inspector": "^0.7.1",
     "sass-loader": "^4.0.0",
     "style-loader": "^0.13.1",
     "webpack": "^1.13.1",

client/src/actions/pokedex.js

@@ -0,0 +1,15 @@
+// deps
+import * as PokedexAPI from 'api/pokedex';
+
+// actions types
+import { POKEDEX_TYPES as TYPES } from 'constants/action-types';
+
+export const getPokemons = () => ({
+  type: TYPES.POKEDEX_GET_POKEMONS,
+  payload: PokedexAPI.getAllPokemons()
+});
+
+export const getPokemonById = (pokemonId) => ({
+  type: TYPES.POKEDEX_GET_POKEMON_BY_ID,
+  payload: PokedexAPI.getPokemonById(pokemonId)
+});

client/src/api/api.js

@@ -0,0 +1,43 @@
+// deps
+import { create } from 'apisauce';
+import { store } from '../store';
+
+// @TODO
+// import RequestActions from './actions/request';
+
+//
+//  Le API
+//
+const API_IP = 'api.pokepedia.fyi'; // '0.0.0.0';
+const API_PORT = 9090;
+
+const API = create({
+  baseURL: `http://${API_IP}:${API_PORT}`,
+  headers: {
+    // 'Authorization': TOKEN, // @TODO
+    'Content-Type': 'application/json',
+    'Accept': 'application/json'
+  }
+});
+
+// intercept request and add status to store
+const { interceptors } = API.axiosInstance;
+
+interceptors.request.use((config) => {
+  // console.log('!!!! INTERCEPT BEFORE REQUEST !!!');
+  // store.dispatch(RequestActions.startLoad());
+  return config;
+});
+
+interceptors.response.use(
+  (response) => {
+    // store.dispatch(RequestActions.endLoad());
+    return response;
+  },
+  (err) => {
+    // store.dispatch(RequestActions.errorLoad());
+    return Promise.reject(err);
+  }
+);
+
+export default API;

client/src/api/index.js

@@ -0,0 +1,5 @@
+import Pokedex from './pokedex';
+
+export default {
+  pokedex: Pokedex
+};

client/src/api/pokedex.js

@@ -0,0 +1,6 @@
+// deps
+import API from './api';
+
+export function getAllPokemons() {
+  return API.get('/pokedex');
+}

client/src/components/atoms/Grid/Grid.jsx

@@ -0,0 +1,53 @@
+// deps
+import React, { PropTypes } from 'react';
+import cx from 'classnames';
+import { capitalize } from 'lodash';
+
+// style
+import './Grid.scss';
+
+const Grid = (props) => {
+  const {
+    className,
+    align,
+    fit,
+    flow,
+    equalHeight,
+    withGutter,
+    spaceAround,
+    children,
+    ...otherProps } = props;
+
+  const gridClasses = cx('Grid', {
+    [`Grid--flow${capitalize(flow)}`]: flow,
+    [`Grid--align${capitalize(align)}`]: align,
+    'Grid--fit': fit,
+    'Grid--equalHeight': equalHeight,
+    'Grid--withGutter': withGutter,
+    'Grid--spaceAround': spaceAround
+  }, className);
+
+
+  return (
+    <div {...otherProps} className={gridClasses}>
+      {children}
+    </div>
+  );
+};
+
+Grid.propTypes = {
+  align: PropTypes.oneOf(['center', 'right', 'middle', 'bottom']),
+  fit: PropTypes.bool,
+  flow: PropTypes.oneOf(['row', 'column']),
+  equalHeight: PropTypes.bool,
+  withGutter: PropTypes.bool,
+  className: PropTypes.string,
+  spaceAround: PropTypes.bool,
+  children: PropTypes.node
+};
+
+Grid.defaultProps = {
+  flow: 'row'
+};
+
+export default Grid;

client/src/components/atoms/Grid/Grid.scss

@@ -0,0 +1,63 @@
+$grid-space: 15px;
+$grid-gutter: $grid-space * 2;
+
+// Inspired by https://github.com/suitcss/components-grid
+// DO NOT apply dimension utilities to the `Grid` element. All cell
+// widths should be applied to child grid cells.
+
+// All content must be contained within child `GridCell` elements.
+
+.Grid {
+  display: flex;
+}
+
+// Flow order
+.Grid--flowRow {
+  flex-flow: row wrap;
+}
+
+.Grid--flowColumn {
+  flex-flow: column wrap;
+}
+
+// Alignment
+.Grid--alignCenter {
+  justify-content: center;
+}
+
+.Grid--alignRight {
+  justify-content: flex-end;
+}
+
+.Grid--spaceAround {
+  justify-content: space-around;
+}
+
+.Grid--alignMiddle {
+  align-items: center;
+}
+
+.Grid--alignBottom {
+  align-items: flex-end;
+}
+
+// Allow cells to equal distribute width
+.Grid--fit > .GridCell {
+  flex: 1 1 0%;
+}
+
+// All cells match height of tallest cell in a row
+.Grid--equalHeight > .GridCell {
+  display: flex;
+}
+
+// With gutters
+.Grid--withGutter {
+  margin-right: -($grid-gutter / 2);
+  margin-left: -($grid-gutter / 2);
+
+  > .GridCell {
+    padding-right: $grid-gutter / 2;
+    padding-left: $grid-gutter / 2;
+  }
+}

client/src/components/atoms/Grid/GridCell.jsx

@@ -0,0 +1,44 @@
+// deps
+import React, { PropTypes } from 'react';
+import cx from 'classnames';
+
+// style
+import './GridCell.scss';
+
+const GridCell = (props) => {
+  const {
+    className,
+    col,
+    fit,
+    fill,
+    full,
+    center,
+    children,
+    ...otherProps } = props;
+
+  const gridCellClasses = cx('GridCell', {
+    'GridCell--center': center,
+    'GridCell--fit': fit,
+    'GridCell--fill': fill,
+    'GridCell--full': full,
+    [`GridCell--col${col}`]: col
+  }, className);
+
+  return (
+    <div {...otherProps} className={gridCellClasses}>
+      {children}
+    </div>
+  );
+};
+
+GridCell.propTypes = {
+  col: PropTypes.number,
+  center: PropTypes.bool,
+  fit: PropTypes.bool,
+  fill: PropTypes.bool,
+  full: PropTypes.bool,
+  className: PropTypes.string,
+  children: PropTypes.node.isRequired
+};
+
+export default GridCell;