Merge pull request #253 from brave/ts

Adds TS support

.travis.yml

@@ -1,29 +1,32 @@
-git:
-  depth: 10
-notifications:
-  email: false
-
 language: node_js
 node_js:
-  - "4"
-os:
-  - linux
-  - osx
-env:
-  - TARGET_ARCH=x64
-osx_image: xcode7.3
-
-matrix:
-  include:
-    - os: linux
-      env: TARGET_ARCH=arm
-    - os: linux
-      env: TARGET_ARCH=ia32
-  allow_failures:
-    - os: osx
+  - "node"
 
-script: './script/cibuild'
+dist: trusty
 
 branches:
   only:
     - master
+    - /\d+\.\d+\.x/
+
+cache:
+  directories:
+    - $HOME/.npm
+    - node_modules
+
+env:
+  - TEST_SUITE=lint
+  - TEST_SUITE=test-security
+
+before_install:
+  - npm i -g npm
+  - npm --version
+
+install:
+  - npm i
+
+script:
+  - npm run $TEST_SUITE
+
+
+

components/brave_rewards_ui/constants/rewards_types.js → components/brave_adblock_ui/actions/adblock_actions.ts

@@ -2,6 +2,9 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-export const CREATE_WALLET_REQUESTED = 'CREATE_WALLET_REQUESTED'
-export const WALLET_CREATED = 'WALLET_CREATED'
-export const WALLET_CREATE_FAILED = 'WALLET_CREATE_FAILED'
+import { action } from 'typesafe-actions'
+
+// Constants
+import { types } from '../constants/adblock_types'
+
+export const statsUpdated = () => action(types.ADBLOCK_STATS_UPDATED)

components/brave_adblock_ui/brave_adblock.js → components/brave_adblock_ui/brave_adblock.tsx

@@ -2,17 +2,22 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-const React = require('react')
-const { render } = require('react-dom')
-const { Provider } = require('react-redux')
-const App = require('./components/app')
-const { bindActionCreators } = require('redux')
+import * as React from 'react'
+import { render } from 'react-dom'
+import { Provider } from 'react-redux'
+import { bindActionCreators } from 'redux'
+
+// Components
+import App from './components/app'
+
+// Utils
+import store from './store'
+import * as adblockActions from './actions/adblock_actions'
 
 window.cr.define('brave_adblock', function () {
   'use strict'
 
   function initialize () {
-    const store = require('./store')
     render(
       <Provider store={store}>
         <App />
@@ -22,8 +27,6 @@ window.cr.define('brave_adblock', function () {
   }
 
   function statsUpdated () {
-    const store = require('./store')
-    const adblockActions = require('./actions/adblock_actions')
     const actions = bindActionCreators(adblockActions, store.dispatch.bind(store))
     actions.statsUpdated()
   }

components/brave_adblock_ui/components/app.tsx

@@ -0,0 +1,50 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+import { bindActionCreators, Dispatch } from 'redux'
+import { connect } from 'react-redux'
+
+// Components
+import { RegionalAdBlockEnabled } from './regionalAdBlockEnabled'
+import { NumBlockedStat } from './numBlockedStat'
+
+// Utils
+import * as adblockActions from '../actions/adblock_actions'
+
+interface Props {
+  actions: any
+  adblockData: AdBlock.State
+}
+
+class AdblockPage extends React.Component<Props, {}> {
+  get actions () {
+    return this.props.actions
+  }
+
+  render () {
+    const { adblockData } = this.props
+    return (
+      <div>
+        <NumBlockedStat adsBlockedStat={adblockData.stats.adsBlockedStat || 0} />
+        <RegionalAdBlockEnabled
+          regionalAdBlockEnabled={adblockData.stats.regionalAdBlockEnabled}
+          regionalAdBlockTitle={adblockData.stats.regionalAdBlockTitle || ''}
+        />
+      </div>)
+  }
+}
+
+const mapStateToProps = (state: {adblockData: AdBlock.State}) => ({
+  adblockData: state.adblockData
+})
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  actions: bindActionCreators(adblockActions, dispatch)
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(AdblockPage)

components/brave_adblock_ui/components/numBlockedStat.tsx

@@ -0,0 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+
+interface Props {
+  adsBlockedStat: number
+}
+
+export const NumBlockedStat = (props: Props) => (
+  <div>
+    <span i18n-content='adsBlocked'/> {props.adsBlockedStat || 0}
+  </div>
+)

components/brave_adblock_ui/components/regionalAdBlockEnabled.tsx

@@ -0,0 +1,28 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+
+interface Props {
+  regionalAdBlockEnabled: boolean
+  regionalAdBlockTitle: string
+}
+
+export const RegionalAdBlockEnabled = (props: Props) => (
+  <div>
+    <span i18n-content='regionalAdblockEnabledTitle'/>&nbsp;
+    {
+      props.regionalAdBlockEnabled
+      ? <span i18n-content='regionalAdblockEnabled'/>
+      : <span i18n-content='regionalAdblockDisabled'/>
+    }
+    <div>
+    {
+      props.regionalAdBlockEnabled
+      ? props.regionalAdBlockTitle
+      : null
+    }
+    </div>
+  </div>
+)

components/brave_adblock_ui/constants/adblock_types.js → components/brave_adblock_ui/constants/adblock_types.ts

@@ -2,4 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-export const ADBLOCK_STATS_UPDATED = 'ADBLOCK_STATS_UPDATED'
+export const enum types {
+  ADBLOCK_STATS_UPDATED = '@@adblock/ADBLOCK_STATS_UPDATED'
+}

components/brave_adblock_ui/reducers/adblock_reducer.js → components/brave_adblock_ui/reducers/adblock_reducer.ts

@@ -1,16 +1,18 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
-/* global chrome */
 
-const types = require('../constants/adblock_types')
-const storage = require('../storage')
-let getGridSites_
+import { Reducer } from 'redux'
 
-const adblockReducer = (state, action) => {
+// Constants
+import { types } from '../constants/adblock_types'
+
+// Utils
+import * as storage from '../storage'
+
+const adblockReducer: Reducer<AdBlock.State | undefined> = (state: AdBlock.State | undefined, action) => {
   if (state === undefined) {
-    state = storage.load() || {}
-    state = Object.assign(storage.getInitialState(), state)
+    state = storage.load()
   }
 
   const startingState = state

components/brave_adblock_ui/reducers/index.js → components/brave_adblock_ui/reducers/index.ts

@@ -3,10 +3,10 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { combineReducers } from 'redux'
+
+// Utils
 import adblockReducer from './adblock_reducer'
 
-const combinedReducer = combineReducers({
+export default combineReducers<AdBlock.ApplicationState>({
   adblockData: adblockReducer
 })
-
-export default combinedReducer

components/brave_adblock_ui/storage.js → components/brave_adblock_ui/storage.ts

@@ -2,38 +2,40 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* global chrome */
-
-const debounce = require('../common/debounce')
+import { debounce } from '../common/debounce'
 
 const keyName = 'adblock-data'
 
-const cleanData = (state) => {
-  return module.exports.getLoadTimeData(state)
+const defaultState: AdBlock.State = {
+  stats: {
+    numBlocked: 0,
+    regionalAdBlockEnabled: false
+  }
 }
 
-module.exports.getLoadTimeData = (state) => {
+export const getLoadTimeData = (state: AdBlock.State): AdBlock.State => {
   state = { ...state }
-  state.stats = {}
+  state.stats = defaultState.stats
+
   // Expected to be numbers
-  ;['adsBlockedStat', 'regionalAdBlockEnabled'].forEach(
-      (stat) => { state.stats[stat] = parseInt(chrome.getVariableValue(stat)) })
+  ;['adsBlockedStat', 'regionalAdBlockEnabled'].forEach((stat) => {
+    state.stats[stat] = parseInt(chrome.getVariableValue(stat), 10)
+  })
   // Expected to be Strings
-  ;['regionalAdBlockTitle'].forEach(
-      (stat) => { state.stats[stat] = chrome.getVariableValue(stat) })
+  ;['regionalAdBlockTitle'].forEach((stat) => {
+    state.stats[stat] = chrome.getVariableValue(stat)
+  })
+
   return state
 }
 
-module.exports.getInitialState = () => cleanData({
-  stats: {
-    numBlocked: 0,
-    regionalAdBlockEnabled: false
-  }
-})
+export const cleanData = (state: AdBlock.State): AdBlock.State => {
+  return getLoadTimeData(state)
+}
 
-module.exports.load = () => {
+export const load = (): AdBlock.State => {
   const data = window.localStorage.getItem(keyName)
-  let state
+  let state: AdBlock.State = defaultState
   if (data) {
     try {
       state = JSON.parse(data)
@@ -44,7 +46,7 @@ module.exports.load = () => {
   return cleanData(state)
 }
 
-module.exports.debouncedSave = debounce((data) => {
+export const debouncedSave = debounce((data: AdBlock.State) => {
   if (data) {
     window.localStorage.setItem(keyName, JSON.stringify(cleanData(data)))
   }

components/brave_rewards_ui/store.js → components/brave_adblock_ui/store.ts

@@ -3,7 +3,8 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { createStore } from 'redux'
+
+// Utils
 import reducers from './reducers'
 
-const store = createStore(reducers)
-module.exports = store
+export default createStore(reducers)