Bump Typescript version and use recommended TSLint rules

Author: normano64

.gitignore

@@ -3,3 +3,4 @@ env/
 node_modules/
 config.js
 build/build.js
+build/awCache/

@types/global/index.d.ts

@@ -0,0 +1,29 @@
+declare const __DEV__: boolean;
+declare const Thunder: {
+    connect: (host: string, apikey: string, channels: string[], options?: object) => void;
+    listen: (
+        handler: (data: { channel: string, payload: string }) => void
+    ) => void;
+};
+
+declare const config: {
+    API: {
+        host: string;
+        key: string;
+    };
+    THUNDER: {
+        host: string;
+        key: string;
+        secret: string;
+    };
+    SENTRY?: string;
+    SCREEN: "primary" | "secondary";
+};
+
+declare module "*.scss" {
+    interface IClassNames {
+        [className: string]: string;
+    }
+    const classNames: IClassNames;
+    export = classNames;
+}

typings/reflexbox/index.d.ts @types/reflexbox/index.d.ts

@@ -9,7 +9,7 @@ declare module "reflexbox" {
 
 declare namespace __Reflexbox {
     interface Props {
-        auto?: boolean
+        auto?: boolean;
         className?: string;
         is?: string | Object | Function;
         key?: string | number;
@@ -29,7 +29,7 @@ declare namespace __Reflexbox {
         pt?: number;
         pb?: number;
         pl?: number;
-        pr?: number,
+        pr?: number;
         sm?: boolean;
         style?: React.CSSProperties;
     }
@@ -41,7 +41,7 @@ declare namespace __Reflexbox {
         order?: number;
     }
 
-    export class Box extends React.Component<BoxProps, {}> { }
+    export class Box extends React.Component<BoxProps> { }
 
     interface FlexProps extends Props {
         align?: "stretch" | "center" | "baseline" | "flex-start" | "flex-end";
@@ -53,7 +53,7 @@ declare namespace __Reflexbox {
         wrap?: boolean;
     }
 
-    export class Flex extends React.Component<FlexProps, {}> { }
+    export class Flex extends React.Component<FlexProps> { }
 }
 
 declare module "reflexbox/Box" {

package.json

@@ -4,7 +4,9 @@
   "description": "Foobar Kiosk application.",
   "scripts": {
     "start": "node server.js",
-    "build": "NODE_ENV=production webpack --progress --hide-modules --config webpack.prod.config.js"
+    "build": "NODE_ENV=production webpack --progress --hide-modules --config webpack.prod.config.js",
+    "tslint": "node node_modules/tslint/bin/tslint --project tsconfig.json",
+    "precommit": "npm run tslint"
   },
   "repository": {
     "type": "git",
@@ -16,51 +18,42 @@
   },
   "devDependencies": {
     "@types/classnames": "0.0.28",
-    "@types/es6-promise": "0.0.31",
-    "@types/isomorphic-fetch": "0.0.30",
-    "@types/node": "6.0.38",
-    "@types/object-assign": "4.0.28",
-    "@types/react": "0.14.33",
-    "@types/react-addons-css-transition-group": "0.14.16",
-    "@types/react-dom": "0.14.16",
-    "@types/react-redux": "4.4.31",
-    "@types/redux": "3.5.28",
+    "@types/isomorphic-fetch": "0.0.34",
+    "@types/qrcode.react": "0.6.2",
+    "@types/react": "15.6.1",
+    "@types/react-addons-css-transition-group": "15.0.3",
+    "@types/react-dom": "15.5.2",
+    "@types/react-redux": "4.4.47",
     "@types/redux-logger": "2.6.31",
     "@types/redux-thunk": "2.1.30",
-    "apeman-react-clock": "^3.0.3",
     "autoprefixer": "6.4.0",
-    "awesome-typescript-loader": "2.2.4",
+    "awesome-typescript-loader": "3.2.2",
     "classnames": "2.2.5",
     "css-loader": "0.24.0",
-    "expect": "1.6.0",
     "file-loader": "0.10.1",
+    "husky": "0.14.3",
     "isomorphic-fetch": "2.2.1",
     "node-sass": "3.8.0",
-    "object-assign": "4.1.0",
     "postcss": "5.1.2",
     "postcss-loader": "0.11.0",
-    "qrcode.react": "^0.6.1",
+    "qrcode.react": "0.6.1",
     "raven-for-redux": "0.3.0",
     "raven-js": "3.12.1",
     "react": "15.3.1",
-    "react-addons-css-transition-group": "15.3.1",
+    "react-addons-css-transition-group": "15.3.0",
     "react-dom": "15.3.1",
-    "react-hot-loader": "1.3.0",
-    "react-redux": "4.4.5",
-    "redux": "3.5.0",
-    "redux-devtools": "3.3.1",
+    "react-hot-loader": "1.3.1",
+    "react-redux": "4.4.8",
+    "redux": "3.7.2",
     "redux-logger": "2.6.1",
-    "redux-router": "2.1.2",
     "redux-thunk": "2.1.0",
-    "reflexbox": "2.2.3",
-    "requirejs": "2.2.0",
+    "reflexbox": "1.1.4",
     "sass-loader": "4.0.0",
     "style-loader": "0.13.1",
-    "tslint": "3.14.0",
-    "tslint-loader": "2.1.5",
-    "typed-css-modules": "0.1.12",
-    "typed-css-modules-loader": "0.0.4",
-    "typescript": "2.0.10",
+    "tslib": "1.7.1",
+    "tslint": "5.5.0",
+    "typescript": "2.4.2",
+    "typings-for-css-modules-loader": "1.5.0",
     "webpack": "1.13.1",
     "webpack-dev-middleware": "1.6.1",
     "webpack-dev-server": "1.14.1",

src/App.tsx

@@ -10,10 +10,10 @@ import { Flex } from "reflexbox";
 import { DevToolbar } from "components";
 import { IAppProps } from "types";
 
-class App extends React.Component<IAppProps, {}> {
+class App extends React.Component<IAppProps> {
     render() {
-        var classList = classNames({
-            [style.fillScreen]: process.env.SCREEN === 'secondary',
+        const classList = classNames({
+            [style.fillScreen]: config.SCREEN === 'secondary'
         });
         return (
             <Flex column className={classList}>
@@ -24,7 +24,7 @@ class App extends React.Component<IAppProps, {}> {
     }
 
     renderDevToolbar() {
-        if (process.env.NODE_ENV === 'development') {
+        if (__DEV__) {
             return (
                 <DevToolbar
                     dispatch={this.props.dispatch}
@@ -35,9 +35,9 @@ class App extends React.Component<IAppProps, {}> {
     }
 
     renderApp() {
-        if (process.env.SCREEN === 'primary') {
+        if (config.SCREEN === 'primary') {
             return (<PrimaryScreen {...this.props} />);
-        } else if (process.env.SCREEN === 'secondary') {
+        } else if (config.SCREEN === 'secondary') {
             return (<SecondaryScreen {...this.props} />);
         }
     }

src/actions/account.ts

@@ -8,27 +8,27 @@ export const FAILED_ACCOUNT = "FAILED_ACCOUNT";
 export const LOGIN_ACCOUNT = "LOGIN_ACCOUNT";
 export const CLEAR_ACCOUNT = "CLEAR_ACCOUNT";
 
-export function requestAccount(cardId: string) {
+export function requestAccount(cardId?: string) {
     return {
         type: REQUEST_ACCOUNT,
         cardId
     };
-};
+}
 
-export function receiveAccount(data: IAccount = undefined) {
+export function receiveAccount(data?: IAccount) {
     return {
         type: LOGIN_ACCOUNT,
         data
     };
-};
+}
 
 export function failedRequestAccount() {
     return {
         type: FAILED_ACCOUNT
     };
-};
+}
 
-export function login(cardId: string = undefined) {
+export function login(cardId?: string) {
     return (dispatch: Function, getState: any) => {
         const { account } = getState();
 
@@ -58,10 +58,10 @@ export function login(cardId: string = undefined) {
             }
         }
     };
-};
+}
 
 export function clearAccount() {
     return {
         type: CLEAR_ACCOUNT
     };
-};
+}

src/actions/product.ts

@@ -34,7 +34,7 @@ class Cache {
     }
 
     add(key: string, value: any, ttl: number) {
-        let expirationDate = new Date();
+        const expirationDate = new Date();
         expirationDate.setSeconds(expirationDate.getSeconds() + ttl);
 
         this.cache[key] = {
@@ -93,7 +93,7 @@ class ProductFetcher {
         // appropriate actions
         dispatch(requestProduct(code));
         this.promises[code] = apiCall(`/products/?code=${code}`)
-            .then((response: IResponse) => {
+            .then((response: any) => {
                 return response.json();
             })
             .then((data: IProduct[]) => {
@@ -111,7 +111,7 @@ class ProductFetcher {
     }
 }
 
-let fetcher = new ProductFetcher();
+const fetcher = new ProductFetcher();
 
 export function addProduct(code: string) {
     return (dispatch: Function, getState: Function) => {
@@ -124,58 +124,59 @@ export function addProduct(code: string) {
             return fetcher.productWithCode(dispatch, code);
         }
     };
-};
+}
 
 export function requestProduct(code: string) {
     return {
         type: REQUEST_PRODUCT,
         code
     };
-};
+}
+
 export function failedProduct(code: string) {
     return {
         type: FAILED_PRODUCT,
         code
     };
-};
+}
 
 export function receiveProduct(product: IProduct) {
     return {
         type: ADD_PRODUCT,
         product
     };
-};
+}
 
 export function increaseProductQty(count: number) {
     return {
         type: INCREASE_PRODUCT_QTY,
         count
     };
-};
+}
 
 export function selectProduct(code: string) {
     return {
         type: SELECT_PRODUCT,
         code
     };
-};
+}
 
 export function removeProduct(code?: string) {
     return {
         type: REMOVE_PRODUCT,
         code
     };
-};
+}
 
 export function changePage(count: number) {
     return {
         type: CHANGE_PAGE,
         count
     };
-};
+}
 
 export function clearProducts() {
     return {
         type: CLEAR_PRODUCTS
     };
-};
+}