add client

Author: alexander-lee

.eslintignore

@@ -0,0 +1 @@
+client/.eslintignore

.eslintrc.json

@@ -0,0 +1 @@
+client/.eslintrc.json

.sass-lint.yml

@@ -0,0 +1 @@
+client/.sass-lint.yml

PULL_REQUEST_TEMPLATE

@@ -0,0 +1,9 @@
+## Background
+- Include some background information about your PR
+
+
+## Changes
+- Include a list of changes involved in your PR
+- If you can add an image
+
+## Test on []()

bin/www

@@ -0,0 +1,92 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+var app = require('../dist/app');
+var debug = require('debug')('server');
+var http = require('http');
+
+debug.log = console.log.bind(console);
+
+/**
+ * Get port from environment and store in Express.
+ */
+
+var port = normalizePort(process.env.PORT || '3000');
+app.set('port', port);
+
+/**
+ * Create HTTP server.
+ */
+
+var server = http.createServer(app);
+
+/**
+ * Listen on provided port, on all network interfaces.
+ */
+
+server.listen(port);
+server.on('error', onError);
+server.on('listening', onListening);
+
+/**
+ * Normalize a port into a number, string, or false.
+ */
+
+function normalizePort(val) {
+  var port = parseInt(val, 10);
+
+  if (isNaN(port)) {
+    // named pipe
+    return val;
+  }
+
+  if (port >= 0) {
+    // port number
+    return port;
+  }
+
+  return false;
+}
+
+/**
+ * Event listener for HTTP server "error" event.
+ */
+
+function onError(error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  var bind = typeof port === 'string'
+    ? 'Pipe ' + port
+    : 'Port ' + port;
+
+  // handle specific listen errors with friendly messages
+  switch (error.code) {
+    case 'EACCES':
+      console.error(bind + ' requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error(bind + ' is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+}
+
+/**
+ * Event listener for HTTP server "listening" event.
+ */
+
+function onListening() {
+  var addr = server.address();
+  var bind = typeof addr === 'string'
+    ? 'pipe ' + addr
+    : 'port ' + addr.port;
+  console.log('Listening on ' + bind);
+}

client/.babelrc

@@ -0,0 +1,17 @@
+{
+  "presets": [
+    "env",
+    "es2015",
+    "es2016",
+    "es2017",
+    "stage-1",
+    "stage-2",
+    "stage-3",
+    "react"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-runtime",
+    "syntax-async-functions"
+  ]
+}

client/.eslintignore

@@ -0,0 +1,4 @@
+bin
+.eslintrc.js
+gulpfile.babel.js
+webpack.config.babel.js

client/.eslintrc.json

@@ -0,0 +1,46 @@
+{
+  "parser": "babel-eslint",
+  "extends": "airbnb",
+  "parserOptions": {
+    "ecmaVersion": 8,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "experimentalObjectRestSpread": true
+    }
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true,
+    "mocha": true
+  },
+  "plugins": [
+    "react",
+    "jsx-a11y",
+    "import"
+  ],
+  "rules": {
+    "brace-style": ["error", "stroustrup"],
+    "comma-dangle": ["error", "always-multiline"],
+    "func-names": ["error", "as-needed"],
+    "max-len": "off",
+    "no-param-reassign": ["error", { "props": false }],
+    "no-plusplus": "off",
+    "no-restricted-syntax": "off",
+    "quote-props": ["error", "consistent"],
+    "arrow-parens": ["error", "always"],
+    "arrow-body-style": "off",
+    "react/prop-types": ["error", { "ignore": ["children", "className"] }],
+    "react/require-default-props": "off",
+    "react/jsx-no-target-blank": "error",
+    "react/jsx-filename-extension": ["warn", { "extensions": [".js"] }],
+    "react/jsx-closing-bracket-location": ["error", "tag-aligned"],
+    "import/no-mutable-exports": "off",
+    "import/no-unresolved": "off",
+    "import/extensions": ["error", "never", { "scss": "always" }],
+    "import/no-absolute-path": "off",
+    "import/no-extraneous-dependencies": "off",
+    "import/no-named-as-default": "off"
+  }
+}

client/.sass-lint.yml

@@ -0,0 +1,17 @@
+files:
+  include:
+    - 'client/**/*.s+(a|c)ss'
+  exclude:
+    - 'node_modules/**'
+options:
+  formatter: stylish
+rules:
+  class-name-format:
+    - 2
+    - convention: camelcase
+  force-pseudo-nesting: 0
+  hex-length: 0
+  no-color-literals:
+    - 2
+    - allow-rgba: true
+  property-sort-order: 0

client/.yarnrc

@@ -0,0 +1 @@
+registry "https://registry.npmjs.org/"

client/app/components/App.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+/*
+If we look in index.js under the 'app' folder, we see that App is nested here:
+
+<Route path="/" component={App}>
+  <IndexRoute component={PostList} />
+  <Route path="post/:id" component={PostInformation} />
+</Route>
+
+The <Route /> component acts as wrapper around the actual 'App' component, which in turn renders its
+children (IndexRoute, Route).
+
+In this case, App is a FUNCTIONAL COMPONENT that takes in a prop (children) and renders its children within a div.
+Anything passed in-between opening and closing tags of a React component gets passed to its props as 'children'.
+*/
+
+function App({ children }) {
+  return (
+    <div>
+      {children}
+    </div>
+  );
+}
+
+export default App;

client/app/createStore.js

@@ -0,0 +1,33 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+import thunk from 'redux-thunk';
+import { routerMiddleware, syncHistoryWithStore } from 'react-router-redux';
+import { browserHistory } from 'react-router';
+
+import rootReducer from './rootReducer';
+
+const store = createStore(
+  rootReducer,
+  /*
+    compose(...middleware) is where we inject our middlewares (think middleman for your Redux data)
+    into our dataflow.
+
+    The first thing we're passing is the 'Thunk Middleware', which allows us to dispatch asynchronous actions.
+    This helps us the most when we're gathering data from an API. For more details into what a thunk is, check out
+    the following: https://github.com/gaearon/redux-thunk
+
+    The second is react-router-redux, which syncs our browser history with our redux store.
+
+    The third is Redux Devtools, which is an EXTREMELY POWERFUL extension for debugging React/Redux applications.
+    It allows you to monitor the state of your redux store and 'time-travel' between dispatched actions.
+    This way, I can see the exact affect that each action has on the store.
+  */
+  compose(
+    applyMiddleware(thunk),
+    applyMiddleware(routerMiddleware(browserHistory)),
+    process.env.NODE_ENV !== 'production' && typeof window === 'object' && typeof window.devToolsExtension !== 'undefined' ? window.devToolsExtension() : (f) => f
+  )
+);
+
+const history = syncHistoryWithStore(browserHistory, store);
+
+export { store, history };

client/app/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Router, Route, IndexRoute } from 'react-router';
+import { Provider } from 'react-redux';
+
+import PostList from 'post/scenes/PostList';
+import PostInformation from 'post/scenes/PostInformation';
+import App from './components/App';
+
+import { store, history } from './createStore';
+
+/*
+  All redux applications are wrapped around a <Provider />, which can be thought of as a container object
+  holding the entire Redux store.
+
+  Next, we have our actual <Router /> component which will dynamically match the route path to its matching component.
+  For example, if we had 'www.reddit.com/post/12345', it would get matched to <Route path="post/:id" component={PostInformation} />
+  with 12345 being passed in as a match parameter (which we will extract in the PostInformation.js component).
+
+  However, if our route doesn't match post/:id, then it will default to the IndexRoute.
+
+  NOTE: We are using React-Router 3, not React-Router 4. Don't use 4. It's bad. \s
+*/
+ReactDOM.render(
+  <Provider store={store}>
+    <Router history={history}>
+      <Route path="/" component={App}>
+        <IndexRoute component={PostList} />
+        <Route path="post/:id" component={PostInformation} />
+      </Route>
+    </Router>
+  </Provider>,
+  document.getElementById('root')
+);

client/app/rootReducer.js

@@ -0,0 +1,6 @@
+import { combineReducers } from 'redux';
+import { routerReducer as routing } from 'react-router-redux';
+
+import post from 'post/reducer';
+
+export default combineReducers({ post, routing });

client/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>React Redux App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+  <script src="/js/bundle.js"></script>
+</html>