updated most of the components and containers & updated reducers and actions & added redux-dev-tools

Author: Chong Guo

LICENSE

@@ -3,36 +3,40 @@
 
 ## Stack
 
-- [x] [express](http://expressjs.com/) as backend
-- [x] [yarn](https://github.com/yarnpkg/yarn) as dependency manager
-- [x] [gulp](https://github.com/gulpjs/gulp) as task runner
-- [x] [materialize](http://materializecss.com/) a modern responsive front-end framework based on Material Design
-- [x] [webpack 2](https://github.com/webpack/webpack) as module bundler
-- [x] [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) offers a dev middleware for webpack, which arguments a live bundle to a directory
-- [x] [webpack-hot-middleware](https://github.com/glenjamin/webpack-hot-middleware) add hot reloading into an existing server without [webpack-dev-server](https://github.com/webpack/webpack-dev-server)
+- [x] [express](http://expressjs.com/) - backend
+- [x] [yarn](https://github.com/yarnpkg/yarn) - dependency manager
+- [x] [gulp](https://github.com/gulpjs/gulp) - task runner
+- [x] [materialize](http://materializecss.com/) - a modern responsive front-end framework based on Material Design
+- [x] [sass](https://github.com/sass/sass) - CSS pre-processors
+- [x] [postcss](https://github.com/postcss/postcss) - CSS post-processor
+- [x] [webpack 2](https://github.com/webpack/webpack) - module bundler
+- [x] [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) - offers a dev middleware for webpack, which arguments a live bundle to a directory
+- [x] [webpack-hot-middleware](https://github.com/glenjamin/webpack-hot-middleware) - add hot reloading into an existing server without [webpack-dev-server](https://github.com/webpack/webpack-dev-server)
 - [x] followed [ES6 standard](https://github.com/lukehoban/es6features)
-- [x] [babel](https://babeljs.io/) as ES6 to ES5 compiler
-- [x] [react](https://facebook.github.io/react/) for building user interfaces.
-- [x] [react-router](https://github.com/ReactTraining/react-router) for routing
-- [x] [react-redux](https://github.com/reactjs/react-redux) the official react bindings for [redux](https://github.com/reactjs/redux) (a predictable state container for js apps)
-- [x] [react-router-redux](https://github.com/reactjs/react-router-redux) to keep react-router and redux in sync
-- [x] [typescript](https://github.com/Microsoft/TypeScript) let's write future javascript => now!
-- [x] [react-hot-loader 3](https://github.com/gaearon/react-hot-loader) for hot module reload!
-- [x] [editorconfig](http://editorconfig.org/) to maintain consistent coding styles between different editors and IDEs
-- [x] [eslint](http://eslint.org/) to lint javascript files (.js, .jsx)
-- [x] [tslint](https://palantir.github.io/tslint/) to lint typescript files (.ts, .tsx)
-- [x] [stylelint](https://stylelint.io/) to lint style files (.css, .scss)
-- [x] [prismjs](https://github.com/PrismJS/prism) for code syntax highlight
-- [ ] [jest](https://facebook.github.io/jest/) for testing
-- [ ] [istanbul](https://github.com/gotwarlost/istanbul) for test coverage
+- [x] [babel](https://babeljs.io/) - compile ES6 to ES5
+- [x] [react](https://facebook.github.io/react/) - building user interfaces
+- [x] [react-hot-loader 3](https://github.com/gaearon/react-hot-loader) - hot module reload!
+- [x] [react-router](https://github.com/ReactTraining/react-router) - routing
+- [x] [react-redux](https://github.com/reactjs/react-redux) - the official react bindings for [redux](https://github.com/reactjs/redux) (a predictable state container for js apps)
+- [x] [react-router-redux](https://github.com/reactjs/react-router-redux) - keep react-router and redux in sync
+- [x] [typescript](https://github.com/Microsoft/TypeScript) - a typed superset of javascript that scales
+- [x] [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped) - high quality TypeScript type definitions
+- [x] [editorconfig](http://editorconfig.org/) - maintain consistent coding styles between different editors and IDEs
+- [x] [eslint](http://eslint.org/) - lint javascript files (.js, .jsx)
+- [x] [tslint](https://palantir.github.io/tslint/) - lint typescript files (.ts, .tsx)
+- [x] [stylelint](https://stylelint.io/) - lint style files (.css, .scss)
+- [x] [postgresql](https://www.postgresql.org/) - advanced open source database
+- [x] [prismjs](https://github.com/PrismJS/prism) - code syntax highlight
+- [ ] [jest](https://facebook.github.io/jest/) - testing
+- [ ] [istanbul](https://github.com/gotwarlost/istanbul) - test coverage
 
 ## Install && Run
 
 ### Prerequisite
 
 * `node`
 * `yarn` (recommended) or `npm`
-* `postgresql` (or other database if you want)
+* `postgresql` or other database
 
 Install [yarn](https://yarnpkg.com/en/docs/install#linux-tab) follows official documentation.
 
@@ -61,7 +65,7 @@ gulp
 **On production (with uglify-js and other optimazitions):**
 
 ```bash
-gulp --env production
+NODE_ENV=production gulp
 ```
 
 
@@ -77,4 +81,4 @@ Check my [another boilerplate](https://github.com/Armour/Django-Webpack-React-Ty
 
 ### License
 
-GPL-3.0 License
+MIT License

README.md

@@ -9,11 +9,12 @@ import webpack from 'webpack';
 import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
 import webpackConfig from '../webpack.config.dev.babel';
+
 import config from './config.json';
 
 import api from './routes/api';
 
-const isDev = process.env.NODE_ENV !== 'production';
+const isProduction = process.env.NODE_ENV === 'production';
 const port = config.http_port;
 const app = express();
 
@@ -25,7 +26,7 @@ app.use(cookieParser());
 // Api router
 app.use('/api', api);
 
-if (isDev) {
+if (!isProduction) {
   const compiler = webpack(webpackConfig);
   const middleware = webpackDevMiddleware(compiler, {
     // The public URL of the output resource directory (CDN), should be the same as output.publicPath

backend/server.js

@@ -1,31 +1,25 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import { Router, browserHistory } from 'react-router';
-import { routerReducer, syncHistoryWithStore } from 'react-router-redux';
-import { combineReducers, createStore } from 'redux';
+import { Router } from 'react-router';
 
+import DevTools from 'containers/DevTools';
 import routes from 'router';
+import { isProduction } from 'utils';
 
 import 'image/favicon.ico';
 import 'js/bin/materialize.min';
 import 'sass/index.scss';
 
-// Add the reducer to your store on the `routing` key
-const store = createStore(
-  combineReducers({
-    // ...reducers,
-    routing: routerReducer,
-  }),
-);
-
-// Create an enhanced history that syncs navigation events with the store
-const history = syncHistoryWithStore(browserHistory, store);
-
 // Set the store, history and routers
-export default () => {
-  return (
-    <Provider store={store}>
-      <Router history={history} routes={routes}/>
-    </Provider>
-  );
-};
+export default class App extends React.Component<any, any> {
+  public render() {
+    return (
+      <Provider store={this.props.store}>
+        <div>
+          <Router history={this.props.history} routes={routes}/>
+          {!isProduction && <DevTools />}
+        </div>
+      </Provider>
+    );
+  }
+}

frontend/src/App.tsx

@@ -0,0 +1 @@
+export * from 'actions/todoList';

frontend/src/actions/index.tsx

@@ -0,0 +1,26 @@
+import { ADD_TODO, SET_VISIBILITY_FILTER, TOGGLE_TODO } from 'constants/actionTypes';
+import { IActionAddTodo, IActionSetVisibilityFilter, IActionToggleTodo, IVisibilityFilterOptions } from 'types';
+import { v1 } from 'uuid';
+
+export const addTodo = (text: string): IActionAddTodo => {
+  return {
+    type: ADD_TODO,
+    id: v1(),
+    text,
+    completed: false,
+  };
+};
+
+export const toggleTodo = (id: string): IActionToggleTodo => {
+  return {
+    type: TOGGLE_TODO,
+    id,
+  };
+};
+
+export const setVisibilityFilter = (filter: IVisibilityFilterOptions): IActionSetVisibilityFilter => {
+  return {
+    type: SET_VISIBILITY_FILTER,
+    filter,
+  };
+};

frontend/src/actions/todoList.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import { TOAST_DISPLAY_DURATION, TOOLTIP_DELAY_TIME } from 'constants/Timers';
+import { TOAST_DISPLAY_DURATION, TOOLTIP_DELAY_TIME } from 'constants/timers';
 
 interface ICarouselProps {}
 
 interface ICarouselState {}
 
-let tooltipConfig: Materialize.TooltipOptions = {
+const tooltipConfig: Materialize.TooltipOptions = {
   delay: TOOLTIP_DELAY_TIME,
   position: 'top',
   tooltip: 'Click Me! >. <',

frontend/src/components/Carousel.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
 import NavLink from 'components/NavLink';
-
-import { upperCaseFirstChar } from 'utils/index';
+import { upperCaseFirstChar } from 'utils';
 
 interface IDropdownProps {
   id: string;
@@ -17,10 +16,9 @@ class Dropdown extends React.Component<IDropdownProps, IDropdownState> {
   }
 
   public render() {
-    const links = [];
-    for (const key of this.props.dropdownLists) {
-      links.push(<li key={key}><NavLink to={`/${key}`}>{upperCaseFirstChar(key)}</NavLink></li>);
-    }
+    const links = this.props.dropdownLists.map(key =>
+      <li key={key}><NavLink to={`/${key}`}>{upperCaseFirstChar(key)}</NavLink></li>,
+    );
     return (
       <ul id={this.props.id} className="dropdown-content">
         {links}

frontend/src/components/Dropdown.tsx

@@ -13,7 +13,10 @@ interface IHeaderState {
 class Header extends React.Component<IHeaderProps, IHeaderState> {
   constructor(props: IHeaderProps) {
     super(props);
-    this.state = {dropdownLists: ['parallax'], dropdownId: 'header-dropdown'};
+    this.state = {
+      dropdownLists: ['parallax'],
+      dropdownId: 'header-dropdown',
+    };
   }
 
   public render() {

frontend/src/components/Header.tsx

@@ -8,7 +8,7 @@ interface INavLinkState {}
 class NavLink extends React.Component<INavLinkProps, INavLinkState> {
   public render() {
     return (
-      <Link {...this.props} activeClassName="active"/>
+      <Link {...this.props} activeClassName="active-link"/>
     );
   }
 }

frontend/src/components/NavLink.tsx

@@ -11,11 +11,6 @@ interface IPrismCodesState {
 }
 
 class PrismCodes extends React.Component<IPrismCodesProps, IPrismCodesState> {
-  constructor(props: IPrismCodesProps) {
-    super(props);
-    this.highlightCode = this.highlightCode.bind(this);
-  }
-
   public highlightCode = (code: Element) => {
     this.setState({ code }, () => {
       Prism.highlightElement(this.state.code, false);

frontend/src/components/PrismCodes.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
 
-import { upperCaseFirstChar } from 'utils/index';
+import { upperCaseFirstChar } from 'utils';
 
 const pushpinStyle = {
   top: '0px',
 };
 
-interface IPushipinProps {
+interface IPushpinProps {
   color: string;
 }
 
-interface IPushipinState {}
+interface IPushpinState {}
 
-class Pushipin extends React.Component<IPushipinProps, IPushipinState> {
+class Pushpin extends React.Component<IPushpinProps, IPushpinState> {
   public render() {
     return (
       <div id={this.props.color} className={`block ${this.props.color} lighten-1`}>
@@ -32,4 +32,4 @@ class Pushipin extends React.Component<IPushipinProps, IPushipinState> {
   }
 }
 
-export default Pushipin;
+export default Pushpin;

frontend/src/components/Pushpin.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { ITodoModel } from 'types';
+
+interface ITodoProps extends ITodoModel {
+  onClick: () => void;
+}
+
+interface ITodoState {}
+
+class Todo extends React.Component<ITodoProps, ITodoState> {
+  public render() {
+    return (
+      <li onClick={this.props.onClick} style={{ textDecoration: this.props.completed ? 'line-through' : 'none' }}>
+        {this.props.text}
+      </li>
+    );
+  }
+}
+
+export default Todo;

frontend/src/components/Todo.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import TodoFooter from 'components/TodoFooter';
+import AddTodo from 'containers/AddTodo';
+import VisibleTodoList from 'containers/VisibleTodoList';
+
+interface ITodoAppProps {}
+
+interface ITodoAppState {}
+
+class TodoApp extends React.Component<ITodoAppProps, ITodoAppState> {
+  public render() {
+    return (
+      <div>
+        <AddTodo />
+        <VisibleTodoList />
+        <TodoFooter />
+      </div>
+    );
+  }
+}
+
+export default TodoApp;

frontend/src/components/TodoApp.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import FilterLink from 'containers/FilterLink';
+
+interface ITodoFooterProps {}
+
+interface ITodoFooterState {}
+
+class TodoFooter extends React.Component<ITodoFooterProps, ITodoFooterState> {
+  public render() {
+    return (
+      <p>
+        Show:
+        {' '}
+        <FilterLink filter="SHOW_ALL">
+          All
+        </FilterLink>
+        {', '}
+        <FilterLink filter="SHOW_ACTIVE">
+          Active
+        </FilterLink>
+        {', '}
+        <FilterLink filter="SHOW_COMPLETED">
+          Completed
+        </FilterLink>
+      </p>
+    );
+  }
+}
+
+export default TodoFooter;

frontend/src/components/TodoFooter.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+export interface ITodoInputStateProps {}
+
+export interface ITodoInputDispatchProps {
+  onSubmit: (inputValue: string) => void;
+}
+
+type ITodoInputProps = ITodoInputStateProps & ITodoInputDispatchProps;
+
+interface ITodoInputState {}
+
+let input: HTMLInputElement;
+
+class TodoInput extends React.Component<ITodoInputProps, ITodoInputState> {
+  public onSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
+    e.preventDefault();
+    if (!input.value.trim()) {
+      return;
+    }
+    this.props.onSubmit(input.value);
+    input.value = '';
+  }
+
+  public setInput = (node: HTMLInputElement): void => {
+    input = node;
+  }
+
+  public render() {
+    return (
+      <div>
+        <form onSubmit={this.onSubmit}>
+          <input ref={this.setInput}/>
+          <button type="submit">
+            Add Todo
+          </button>
+        </form>
+      </div>
+    );
+  }
+}
+
+export default TodoInput;