fix lint

babel.config.js

@@ -8,16 +8,7 @@ module.exports = {
     ['@babel/preset-react'],
     ['@babel/preset-typescript'],
   ],
-  plugins: [
-    ['@babel/plugin-proposal-decorators', {
-      decoratorsBeforeExport: true,
-    }],
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-proposal-object-rest-spread',
-    '@babel/plugin-transform-flow-strip-types',
-    'react-require',
-    'transform-class-properties',
-  ],
+  plugins: [],
   ignore: [
     /node_modules\/(?!onefx)/g,
   ],

gulpfile.babel.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-process-env,no-unused-vars */
+
 const del = require('del');
 const gulp = require('gulp');
 const gulpLivereload = require('gulp-livereload');
@@ -40,9 +40,13 @@ const watchJavascripts = done => {
     [
       'src/client/javascripts/**/*.js',
       'src/client/javascripts/**/*.jsx',
+      'src/client/javascripts/**/*.ts',
+      'src/client/javascripts/**/*.tsx',
       'src/client/javascripts/**/*.json',
       'src/shared/**/*.js',
       'src/shared/**/*.jsx',
+      'src/shared/**/*.ts',
+      'src/shared/**/*.tsx',
       'src/shared/**/*.json',
     ],
     compileJavascripts,

package.json

@@ -5,7 +5,7 @@
   "main": "server.js",
   "scripts": {
     "start": "ts-node ./server.ts",
-    "test": "npm run cover",
+    "test": "npm run lint && npm run cover",
     "check-coverage": "nyc check-coverage --lines 65 --functions 60 --Statements 65",
     "ava": "NODE_ENV=test ava",
     "watch": "gulp watch",

src/api-gateway/api-gateway.ts

@@ -5,6 +5,7 @@ import {GraphQLDateTime} from 'graphql-iso-date';
 import {Server} from 'onefx';
 
 // Construct a schema, using GraphQL schema language
+// tslint:disable-next-line
 const typeDefs = gql`${fs.readFileSync(`${__dirname}/api-gateway.graphql`)}`;
 
 export function setApiGateway(server: Server): void {

src/server/middleware/manifest-middleware.ts

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import koa from 'koa';
 // @ts-ignore
 import {Server} from 'onefx';

src/server/start-server.ts

@@ -9,7 +9,7 @@ import {setGateways} from './gateway/gateway';
 import {setMiddleware} from './middleware';
 import {setServerRoutes} from './server-routes';
 
-export async function startServer() {
+export async function startServer(): Promise<void> {
   const server = new Server(config);
   setGateways(server);
   server.auth = new OnefxAuth(server, authConfig);

src/shared/app-container.ts

@@ -3,10 +3,15 @@ import {withRouter} from 'react-router';
 
 import {App} from './app';
 
+type Props = {
+  googleTid: string,
+  locale: string,
+};
+
 export const AppContainer = withRouter(
   // @ts-ignore
-  connect(
-    function mapStateToProps(state) {
+  connect<Props>(
+    (state: object): Props => {
       return {
         // @ts-ignore
         googleTid: state.base.analytics.googleTid,

src/shared/app.tsx

@@ -26,11 +26,11 @@ type Props = {
 };
 
 export class App extends Component<Props> {
-  public componentDidMount() {
+  public componentDidMount(): void {
     initGoogleAnalytics({tid: this.props.googleTid});
   }
 
-  public render() {
+  public render(): JSX.Element {
     const {locale} = this.props;
 
     return (

src/shared/common/apollo-ssr.tsx

@@ -25,7 +25,7 @@ type Opts = {
   clientScript: string,
 }
 
-export async function apolloSSR(ctx: koa.Context, uri: string, {VDom, reducer, clientScript}: Opts) {
+export async function apolloSSR(ctx: koa.Context, uri: string, {VDom, reducer, clientScript}: Opts): Promise<string> {
   ctx.setState('base.apiGatewayUrl', uri);
   const apolloClient = new ApolloClient({
     ssrMode: true,

src/shared/common/button.tsx

@@ -8,35 +8,19 @@ import {btnStyle, disabledBtn, secondaryBtnColor} from './styles/style-button';
 type Props = {
   id?: string;
   href?: string;
-  children?: any;
-  onClick?: any;
+  children?: Array<JSX.Element> | JSX.Element | string;
+  onClick?: Function;
   secondary?: boolean;
   disabled?: boolean;
-  target?: any;
+  target?: string;
   width?: string;
-  preventDoubleClickFor?: string;
 };
 
 export class Button extends Component<Props> {
-  public wrapper: any;
+  public wrapper: HTMLDivElement | null = null;
 
-  public preventDoubleClick() {
-    const btn = this.wrapper.children[0];
-    const form = document.getElementById(this.props.preventDoubleClickFor || '');
-    if (form instanceof HTMLFormElement && form.checkValidity()) {
-      // eslint-disable-next-line no-unused-expressions
-      typeof form.submit === 'function' && form.submit();
-      btn.setAttribute('disabled', 'disabled');
-      btn.style.opacity = '0.5';
-      const preloader = document.createElement('i');
-      preloader.setAttribute('class', 'fab fa-gear fa-spin');
-      btn.appendChild(document.createTextNode(' '));
-      btn.appendChild(preloader);
-    }
-  }
-
-  public render() {
-    const {href, children, onClick, secondary, disabled, target, width, preventDoubleClickFor = '', id} = this.props;
+  public render(): JSX.Element {
+    const {href, children, onClick, secondary, disabled, target, width, id} = this.props;
     let style = btnStyle;
     if (secondary) {
       style = {
@@ -61,9 +45,6 @@ export class Button extends Component<Props> {
     return (
       <div ref={r => this.wrapper = r}>
         <Button id={id} href={href} onClick={(e: Event) => {
-          if (preventDoubleClickFor) {
-            this.preventDoubleClick();
-          }
           if (onClick) {
             return onClick(e);
           }

src/shared/common/color-hover.ts

@@ -1,6 +1,6 @@
 import {shade} from './styles/shade';
 
-export function colorHover(color: string) {
+export function colorHover(color: string): object {
   return {
     color,
     ':hover': {

src/shared/common/error-page.tsx

@@ -20,7 +20,7 @@ type Props = {
 };
 
 export class ErrorPage extends PureComponent<Props> {
-  public render() {
+  public render(): JSX.Element {
     const {bar, title, info} = this.props;
     return (
       <ContentPadding style={{backgroundColor: colors.ui02}}>

src/shared/common/flex.tsx

@@ -2,8 +2,10 @@
 import {styled} from 'onefx/lib/styletron-react';
 import React from 'react';
 
+type Element = JSX.Element | string | boolean | void;
+
 type PropTypes = {
-  children?: any,
+  children?: Array<Element> | Element,
   column?: boolean,
   center?: boolean,
   nowrap?: boolean,
@@ -31,7 +33,7 @@ export function Flex({
   backgroundColor = AUTO,
   justifyContent,
   ...otherProps
-}: PropTypes) {
+}: PropTypes): JSX.Element {
   const StyledDiv = styled('div', {
     display: 'flex',
     '-webkit-box-flex': 1,

src/shared/common/footer.tsx

@@ -12,7 +12,7 @@ export const FOOTER_ABOVE = {
   minHeight: `calc(100vh - ${(FOOTER_HEIGHT + TOP_BAR_HEIGHT)}px)`,
 };
 
-export function Footer() {
+export function Footer(): JSX.Element {
   return (
     <Align>
       <Flex>{`Copyright © ${new Date().getFullYear()}`}</Flex>

src/shared/common/google-analytics.js

@@ -1,4 +1,4 @@
-/* eslint-disable */
+
 let loaded = false;
 module.exports = function initGoogleAnalytics({tid, userId, cb}) {
   if (loaded || process.env.NODE_ENV.indexOf('production') === -1) {

src/shared/common/head.tsx

@@ -9,7 +9,7 @@ import Helmet from 'onefx/lib/react-helmet';
 import React from 'react';
 import {colors} from './styles/style-color';
 
-export function Head({locale}: {locale: string}) {
+export function Head({locale}: {locale: string}): JSX.Element {
   return (
     <Helmet
       title={`${t('meta.title')} - ${t('meta.description')}`}

src/shared/common/icon.tsx

@@ -12,10 +12,12 @@ type PropTypes = {
   margin?: string,
 };
 
-export function Icon({width = LEN, height = LEN, url, margin = '0'}: PropTypes) {
+export function Icon({width = LEN, height = LEN, url, margin = '0'}: PropTypes): JSX.Element {
   const StyledDiv = styled('div', {
-    background: `url("${url}") no-repeat center`,
-    backgroundSize: 'contain !important',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+    backgroundSize: 'contain',
+    backgroundImage: `url("${url}")`,
     boxSizing: 'border-box',
     width,
     height,

src/shared/common/icons/cross.svg.tsx

@@ -1,6 +1,7 @@
+/* tslint:disable:no-http-string */
 import React from 'react';
 
-function Cross() {
+function Cross(): JSX.Element {
   return (
     <svg width="20" height="20" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
       <g id="Icons" stroke="currentColor" strokeWidth="1" fill="none" fillRule="evenodd">

src/shared/common/icons/hamburger.svg.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 function Hamburger(): JSX.Element {
   return (
-    <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+    <svg width="30" height="30" viewBox="0 0 30 30" xmlns="https://www.w3.org/2000/svg">
       <path stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeMiterlimit="10"
             d="M4 7h22M4 15h22M4 23h22"/>
     </svg>

src/shared/common/language-switcher.tsx

@@ -19,12 +19,16 @@ const languages = [
   {value: 'zh-CN', children: '简体中文'},
 ];
 
-class LanguageSwitcher extends Component {
-  public state = {
+type State = {
+  displayTranslationMenu: boolean,
+}
+
+class LanguageSwitcher extends Component<{}, State> {
+  public state: State = {
     displayTranslationMenu: false,
   };
 
-  public switchLanguage(e: FormEvent<HTMLFormElement>) {
+  public switchLanguage(e: FormEvent<HTMLFormElement>): void {
     const locale = e.currentTarget.value;
     if (locale === GOTO_TRANS) {
       window.location.href = 'https://github.com/iotexproject/web-iotex-translations';
@@ -35,7 +39,7 @@ class LanguageSwitcher extends Component {
     window.location.href = updateQueryStringParameter(uri, 'locale', locale);
   }
 
-  public componentDidMount() {
+  public componentDidMount():void {
     const script = document.createElement('script');
     script.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
     script.async = true;
@@ -53,7 +57,7 @@ class LanguageSwitcher extends Component {
     return undefined;
   };
 
-  public render() {
+  public render(): JSX.Element {
     let uri = '';
     if (window.location) {
       uri = window.location.href;
@@ -174,7 +178,7 @@ const LanguageItem = styled('li', {
 });
 
 // todo: move to a common file?
-function updateQueryStringParameter(uri: string, key: string, value: string) {
+function updateQueryStringParameter(uri: string, key: string, value: string): string {
   const re = new RegExp(`([?&])${key}=.*?(&|$)`, 'i');
   const separator = uri.indexOf('?') !== -1 ? '&' : '?';
   if (uri.match(re)) {
@@ -183,8 +187,12 @@ function updateQueryStringParameter(uri: string, key: string, value: string) {
   return `${uri + separator + key}=${value}`;
 }
 
-export const LanguageSwitcherContainer = connect(
-  function mapStateToProps(state) {
+type ReduxProps = {
+  locale: string, acceptLanguage: string, localeSelected: string
+}
+
+export const LanguageSwitcherContainer =connect<ReduxProps>(
+  (state) => {
     // @ts-ignore
     const {locale, acceptLanguage, localeSelected} = state.base;
     return {locale, acceptLanguage, localeSelected};

src/shared/common/not-found.tsx

@@ -1,22 +1,32 @@
 // @ts-ignore
 import {t} from 'onefx/lib/iso-i18n';
 import * as React from 'react';
-import {Route} from 'react-router';
+import {Route, RouteComponentProps} from 'react-router';
+import router from 'react-router'
 import {ErrorPage} from './error-page';
 
-export function NotFound() {
+export function NotFound(): JSX.Element {
   return (
     <Status code={404}>
-      <ErrorPage bar={t('not_found.bar')} title={t('not_found.title')} info={t('not_found.info')}/>
+      <ErrorPage
+        bar={t('not_found.bar')}
+        title={t('not_found.title')}
+        info={t('not_found.info')}
+      />
     </Status>
   );
 }
 
-const Status = ({code, children}: any) => (
+type Props = {
+  code: number,
+  children: Array<JSX.Element> | JSX.Element
+}
+
+const Status = ({code, children}: Props): JSX.Element => (
   <Route
-    render={({staticContext}: any) => {
+    render={({staticContext}: RouteComponentProps<{}, router.StaticContext>) => {
       if (staticContext) {
-        staticContext.status = code;
+        staticContext.statusCode = code;
       }
       return children;
     }}

src/shared/common/styles/shade.tsx

@@ -1,6 +1,6 @@
 // @ts-ignore
 import shader from 'shader';
 
-export function shade(color: string) {
+export function shade(color: string): string {
   return shader(color, -0.09);
 }