add prettier, tslint config

Author: js2me

package.json

@@ -11,21 +11,24 @@
     "start:prod": "webpack-dev-server -p --progress --colors --port 3001 --open"
   },
   "license": "MIT",
+  "optionalDependencies": {
+    "~/": "./src"
+  },
   "devDependencies": {
     "@types/axios": "^0.14.0",
     "@types/classnames": "2.2.3",
     "@types/history": "4.6.2",
     "@types/node": "^8.0.53",
     "@types/prop-types": "^15.5.3",
+    "@types/react": "^16.0.25",
     "@types/react-dom": "16.0.3",
     "@types/react-redux": "5.0.13",
-    "@types/react-router-dom": "^4.2.3",
     "@types/react-router": "4.0.18",
-    "@types/react": "^16.0.25",
+    "@types/react-router-dom": "^4.2.3",
     "@types/redux-actions": "2.2.2",
     "@types/redux-thunk": "^2.1.0",
-    "@types/webpack-env": "1.13.2",
     "@types/webpack": "3.8.1",
+    "@types/webpack-env": "1.13.2",
     "awesome-typescript-loader": "^3.4.0",
     "base64-inline-loader": "^1.1.0",
     "css-loader": "^0.28.7",
@@ -35,25 +38,27 @@
     "html-webpack-plugin": "^2.30.1",
     "image-webpack-loader": "^4.1.0",
     "node-sass": "^4.7.2",
+    "postcss": "^6.0.14",
     "postcss-browser-reporter": "^0.5.0",
     "postcss-cssnext": "^3.0.2",
     "postcss-import": "^11.0.0",
     "postcss-loader": "^2.0.8",
     "postcss-reporter": "^5.0.0",
     "postcss-url": "^7.2.1",
-    "postcss": "^6.0.14",
+    "prettier": "^1.13.7",
     "react-hot-loader": "^3.1.3",
     "redux-devtools-extension": "^2.13.2",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.19.0",
+    "tslint": "^5.11.0",
     "tslint-config-prettier": "^1.13.0",
     "tslint-eslint-rules": "^5.3.1",
+    "tslint-plugin-prettier": "^1.3.0",
     "tslint-react": "^3.6.0",
-    "tslint": "^5.11.0",
     "typescript": "^2.6.1",
     "url-loader": "^0.6.2",
-    "webpack-dev-server": "^2.11.1",
-    "webpack": "^3.11.0"
+    "webpack": "^3.11.0",
+    "webpack-dev-server": "^2.11.1"
   },
   "dependencies": {
     "axios": "^0.18.0",

src/components/common/Header/index.scss

@@ -0,0 +1,13 @@
+.header {
+    flex: .1;
+    margin: 2% auto 0;
+    background: #c6c6c6;
+    padding: 10px 25px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    font-size: 39px;
+    max-width: 1200px;
+    width: 100%;
+}
+  

src/components/common/Header/index.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+import './index.scss'
+
+export default class Header extends React.Component {
+  public render() {
+    return (
+      <div className="header">
+        <span>header</span>
+      </div>
+    )
+  }
+}

src/components/common/Loading/index.tsx

@@ -0,0 +1,18 @@
+import * as PropTypes from 'prop-types'
+import * as React from 'react'
+
+export default class Loading extends React.Component {
+  public static propTypes = {
+    children: PropTypes.node
+  }
+
+  public render() {
+    const { children } = this.props
+
+    return (
+      <div className="loading">
+        {children || 'Loading'}
+      </div>
+    )
+  }
+}

src/components/pages/Home/index.tsx

@@ -1,14 +1,11 @@
 import * as React from 'react'
 
-export default class Home extends React.Component{
-
-
-    public render(){
-
-      return (
-        <div className="page home">
-          <span>lol</span>
-        </div>
-      )
-    }
-}
+export default class Home extends React.Component {
+  public render() {
+    return (
+      <div className="page home">
+        <span>lol</span>
+      </div>
+    )
+  }
+}

src/index.tsx

@@ -1,44 +1,37 @@
-/* tslint:disable:jsx-no-lambda tslint:disable:no-submodule-imports */
-
-import {createBrowserHistory} from 'history'
+import { createBrowserHistory } from 'history'
 import 'moment/locale/ru'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
-import {Provider} from 'react-redux'
-import {Route, Switch} from 'react-router'
-import { BrowserRouter, Link} from 'react-router-dom'
-import {ModalContainer, ModalRoute} from 'react-router-modal'
-import Header from './components/shared/Header'
-import {configureStore} from './store'
-import './style.scss'
-import {AsyncComponent} from './utils/AsyncComponentLoader'
+import { Provider } from 'react-redux'
+import { Route, Switch } from 'react-router'
+import { BrowserRouter, Link } from 'react-router-dom'
+import Header from '~/components/common/Header'
+
+import { configureStore } from '~/store'
+import '~/style.scss'
+import { AsyncComponent } from '~/utils/AsyncComponentLoader'
 
 const store = configureStore()
 export const history = createBrowserHistory()
 
 const Home = () => (
   <AsyncComponent
-    moduleProvider={() => import(/* webpackMode: "lazy", webpackChunkName: "home" */ './components/pages/Home')}
+    moduleProvider={() =>
+      import(/* webpackMode: "lazy", webpackChunkName: "home" */ '~/components/pages/Home')
+    }
   />
 )
 
-
-
 ReactDOM.render(
   <Provider store={store}>
     <BrowserRouter>
-      <div className='app-content'>
-        <Header/>
+      <div className="app-content">
+        <Header />
         <Switch>
-          <Route 
-            path="/" 
-            exact={true}
-            component={Home}
-          />
+          <Route path="/" exact={true} component={Home} />
         </Switch>
       </div>
     </BrowserRouter>
-  </Provider>
-  ,
+  </Provider>,
   document.getElementById('root')
 )

src/store/index.ts

@@ -1,15 +1,12 @@
 import { applyMiddleware, compose, createStore, Store } from 'redux'
 import thunk from 'redux-thunk'
-import reducers  from './reducers'
+
+import reducers from './reducers'
 
 export function configureStore(initialState?) {
   const middlewares = compose(applyMiddleware(thunk))
 
-
-  const store = createStore(
-    reducers,
-    middlewares
-  )
+  const store = createStore(reducers, middlewares)
 
   if (module.hot) {
     module.hot.accept('./reducers', () => {
@@ -19,4 +16,4 @@ export function configureStore(initialState?) {
   }
 
   return store
-}
+}

src/store/reducers/index.ts

@@ -2,8 +2,7 @@ import { combineReducers } from 'redux'
 // import search from './search'
 // import player from './player'
 
-
 export default combineReducers({
-//   search,
-//   player
-})
+  //   search,
+  //   player
+})

src/utils/AsyncComponentLoader.tsx

@@ -1,43 +1,52 @@
 import * as React from 'react'
-import Loading from '../components/shared/Loading'
+import Loading from '~/components/common/Loading'
 
 declare interface IAsyncComponentProps {
-  moduleProvider: ()=>Promise<any>
-  props?:object
+  moduleProvider: () => Promise<object>
+  componentProps?: object
 }
 
 declare interface IAsyncComponentState {
-  LoadedAsyncComponent?: (React.ComponentClass | null)
+  loadedComponent?: React.ComponentClass | null
 }
-
-
-export class AsyncComponent extends React.Component<IAsyncComponentProps, IAsyncComponentState> {
+export class AsyncComponent extends React.Component<IAsyncComponentProps,IAsyncComponentState> {
   private isLoaded: boolean = false
   private isMount: boolean = true
 
+  public static defaultProps = {
+    componentProps: {}
+  }
+
   constructor(props: any) {
     super(props)
     this.state = {
-      LoadedAsyncComponent: null
+      loadedComponent: null
     }
   }
 
   public componentWillMount() {
     if (!this.isLoaded) {
       this.isLoaded = true
-      this.props.moduleProvider().then((provideData: any) => {
-          if(this.isMount){
-            this.setState({LoadedAsyncComponent: provideData[Object.keys(provideData)[0]]})
-          }
+      this.props.moduleProvider().then((provideData: object) => {
+        if (this.isMount) {
+          this.setState({
+            loadedComponent: provideData[Object.keys(provideData)[0]]
+          })
+        }
       })
     }
-  }
-  public componentWillUnmount(){
+  }                           
+  public componentWillUnmount() {
     this.isMount = false
   }
 
   public render() {
-    const {LoadedAsyncComponent} = this.state
-    return LoadedAsyncComponent ? <LoadedAsyncComponent {...this.props.props || {}}/> : <Loading>Page loading</Loading>
+    const { loadedComponent: LoadedComponent } = this.state
+    const { componentProps } = this.props
+    return LoadedComponent ? ( 
+      <LoadedComponent {...componentProps} />
+    ) : (
+      <Loading>Page loading</Loading>
+    )
   }
 }

src/utils/PageInformer.tsx

@@ -1,15 +1,17 @@
 export default abstract class PageInformer {
-  private static pageDescriptionSelector?: HTMLDivElement;
-
-  static setPageInfo(title?: string, description: any = '') {
+  public static setPageInfo(title?: string, description: any = '') {
     if (title) {
-      document.querySelector('title').text = title + ' | MOBA';
+      document.querySelector('title').text = title + ' | MOBA'
     }
-    if (!PageInformer.pageDescriptionSelector){
-      PageInformer.pageDescriptionSelector = document.querySelector('.page-description') as HTMLDivElement;
+    if (!PageInformer.pageDescriptionSelector) {
+      PageInformer.pageDescriptionSelector = document.querySelector(
+        '.page-description'
+      ) as HTMLDivElement
     }
-      document.querySelector('meta[name="description"]').setAttribute('content', description);
-      PageInformer.pageDescriptionSelector.innerText = description;
+    document
+      .querySelector('meta[name="description"]')
+      .setAttribute('content', description)
+    PageInformer.pageDescriptionSelector.innerText = description
   }
-
+  private static pageDescriptionSelector?: HTMLDivElement
 }

src/utils/cache.ts

@@ -1,13 +1,15 @@
-export const setCache = (key:string, data:object):any => {
-  localStorage.setItem(key, JSON.stringify(data));
-  return data;
-};
-export const getCache = (key:string):any => {
-  return JSON.parse(localStorage.getItem(key));
-};
-export const clearCache = (key:string) =>{
-  localStorage.removeItem(key);
-};
-export const hasCache = (key:string):boolean=>{
-  return !!localStorage.getItem(key);
-};
+export default class Cache {
+  public static set(key: string, data: object | string | boolean | number) {
+    localStorage.setItem(key, JSON.stringify(data))
+    return data
+  }
+  public static get(key: string) {
+    return JSON.parse(localStorage.getItem(key))
+  }
+  public static remove(key: string) {
+    localStorage.removeItem(key)
+  }
+  public static has(key: string) {
+    return localStorage.getItem(key) !== null
+  }
+}

tsconfig.json

@@ -17,7 +17,11 @@
       "es6",
       "es7",
       "dom"
-    ]
+    ],
+    "baseUrl":".",
+    "paths": {
+      "~/*" :["./src/*"]
+    },
   },
   "exclude": [
     "dist",