fix: Remove reudx-devtool #21

app/package.json

@@ -8,7 +8,7 @@
     "clean:dist": "node tools/clean.js",
     "build:html": "node tools/buildHtml.js",
     "prebuild": "npm run clean:dist && npm run build:html",
-    "build": "npm run test && node tools/build.js",
+    "build": "npm run test && node tools/build.js && npm run open:dist",
     "test": "cross-env NODE_ENV=test mocha --reporter progress --compilers js:babel/register --recursive \"./src/**/*.spec.js\"",
     "test:watch": "npm run test -- --watch"
   },
@@ -30,7 +30,9 @@
     "yeoman-generator"
   ],
   "license": "Apache-2.0",
-  "dependencies": {},
+  "dependencies": {
+    "redux": "^3.3.1"
+  },
   "devDependencies": {
     "autoprefixer": "^6.3.1",
     "babel": "5.8.23",
@@ -73,11 +75,8 @@
     "react-transform-catch-errors": "1.0.1",
     "react-transform-hmr": "1.0.1",
     "redbox-react": "1.2.0",
-    "redux": "3.0.5",
+    "redux": "3.3.1",
     "redux-actions": "^0.9.1",
-    "redux-devtools": "^3.0.1",
-    "redux-devtools-log-monitor": "^1.0.2",
-    "redux-logger": "^2.4.0",
     "redux-promise": "^0.5.1",
     "redux-thunk": "^1.0.3",
     "rimraf": "^2.5.0",

app/src/components/MainTabs/TabContentActivity/index.js

@@ -32,36 +32,21 @@ export default class TabContentActivity extends React.Component {
     super(props)
 
     this.state = {
-      activities: [],
+      /** used to filter*/
+      filterKeyword: '',
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    const { activities, } = nextProps
-
-    this.setState({ activities: activities, })
-  }
-
   handleFilterChange(event) {
     const filterKeyword = event.target.value.trim().toLowerCase()
-    const allActivities = this.props.activities
-
-    const filtered = allActivities.filter(activity => {
-      return (activity.repo.toLowerCase().includes(filterKeyword)
-        || activity.type.toLowerCase().includes(filterKeyword))
-    })
-
-    this.setState({ activities: filtered, })
+    this.setState({ filterKeyword: filterKeyword, })
   }
 
-  renderTitle() {
-    const { activities, } = this.state
-
+  renderTitle(activities) {
     const titleText = (activities === void 0) ? 'No Activity' :
       (activities.length < 2) ? `${activities.length} Activity` :
         `${activities.length} Activities`
 
-
     return (
       <div style={styles.title}>{titleText}</div>
     )
@@ -77,17 +62,23 @@ export default class TabContentActivity extends React.Component {
     )
   }
 
-
   render() {
     /**
      * since React doesn't support to passing an object as the ReactElement,
      * we should split TimeLine events to separated arrays (contents, badges)
      */
-    const tiles = []
-    const badges = []
-    const { activities, } = this.state
+    const { activities, } = this.props
+    const { filterKeyword, } = this.state
+
+    const filtered = activities.filter(activity => {
+      return (activity.repo.toLowerCase().includes(filterKeyword)
+      || activity.type.toLowerCase().includes(filterKeyword))
+    })
+
+    let tiles = []
+    let badges = []
 
-    activities.map((activity, index) => {
+    filtered.map((activity, index) => {
       tiles.push(
         this.renderLazily(<ActivityTile activity={activity} key={index} />, index)
       )
@@ -98,7 +89,7 @@ export default class TabContentActivity extends React.Component {
 
     return (
       <div className='container' style={styles.container}>
-        {this.renderTitle()}
+        {this.renderTitle(filtered)}
         <Filter handler={this.handleFilterChange.bind(this)} floatingLabel='INSERT FILTER' />
         <TimeLine containerStyle={styles.timelineContainer} tiles={tiles} badges={badges} />
       </div>

app/src/components/MainTabs/TabContentRepository/RepositoryTile.js

@@ -102,10 +102,9 @@ class RepositoryTile extends Component {
     super(props)
   }
 
-  renderLangSection(repository, color) {
+  renderLangSection(repository) {
     const style = Object.assign({}, styles.sectionLang, {
       backgroundColor: MainColors[2],
-      //backgroundColor: color,
     })
 
     return (
@@ -206,12 +205,12 @@ class RepositoryTile extends Component {
   }
 
   render() {
-    const { repository, languageColor, } = this.props
+    const { repository, } = this.props
 
     return (
       <div className='col s12 m6 l6' style={styles.paperContainer}>
         <Paper rounded={false} zDepth={1} style={styles.paper}>
-          {this.renderLangSection(repository, languageColor)}
+          {this.renderLangSection(repository)}
           {this.renderRepoSection(repository)}
           {this.renderStatSection(repository)}
         </Paper>
@@ -225,5 +224,4 @@ export default RepositoryTile
 
 RepositoryTile.propTypes = {
   repository: PropTypes.object.isRequired,
-  languageColor: PropTypes.string.isRequired,
 }

app/src/components/MainTabs/TabContentRepository/index.js

@@ -47,70 +47,29 @@ export default class TabContentRepository extends Component {
     super(props)
 
     this.state = {
-      /** filtered repositories */
-      repositories: [],
-
-      /** color per language */
-      languageToColor: {},
-
       /** used to sort */
       sortComparator: SORTING_STRATEGIES[0].comparator,
 
+      /** used to filter */
+      filterKeyword: '',
+
       /** used to paginate */
-      totalPageCount: 0,
       currentItemOffset: 0,
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    const { repositories, } = nextProps
-    const totalPageCount = Math.ceil( repositories.length / CONST_ITEM_COUNT_PER_PAGE)
-
-    const sorted = repositories.slice().sort(this.state.sortComparator)
-
-    /** color per language */
-    const languageToColor = {}
-    const languages = Array.from(new Set(sorted.map(repo => repo.language)))
-    const colors = RandomColor({
-      luminosity: 'dark', format: 'rgba', count: languages.length,
-    }).map(rgbString => { return Color(rgbString).setAlpha(0.60).toString() })
-
-    for (let index = 0; index < languages.length; index++) {
-      languageToColor[languages[index]] = colors[index]
-    }
-
-    this.setState({totalPageCount: totalPageCount, repositories: sorted, languageToColor: languageToColor, })
-  }
-
   handlePageChange(data) {
     const offset = Math.ceil(data.selected * CONST_ITEM_COUNT_PER_PAGE)
     this.setState({currentItemOffset: offset,})
   }
 
   handleFilterChange(event) {
     const filterKeyword = event.target.value.trim().toLowerCase()
-    const allRepos = this.props.repositories
-    const { sortComparator, } = this.state
-
-    const filtered = allRepos
-      .filter(repo => { /** return true if keyword is included in name or lang of repo */
-        if (repo.name.toLowerCase().includes(filterKeyword)) return true
-
-        const lang = repo.language
-        if (lang && lang.toLowerCase().includes(filterKeyword)) return true
-
-        return false
-      })
-
-    const sorted = filtered.sort(sortComparator)
-
-    const totalPageCount = Math.ceil( sorted.length / CONST_ITEM_COUNT_PER_PAGE)
-    this.setState({repositories: sorted, totalPageCount: totalPageCount, currentItemOffset: 0,})
+    this.setState({filterKeyword: filterKeyword, })
   }
 
   sortRepository(comparator) {
-    const sorted = this.state.repositories.slice().sort(comparator)
-    this.setState({repositories: sorted, sortComparator: comparator, })
+    this.setState({sortComparator: comparator, })
   }
 
   renderTitle() {
@@ -122,23 +81,24 @@ export default class TabContentRepository extends Component {
     return (<h2 style={styles.title}>{titleText}</h2>)
   }
 
-  renderPageItems() {
-    const { languageToColor, repositories, currentItemOffset, } = this.state
-    const sliced = repositories.slice(currentItemOffset, currentItemOffset + CONST_ITEM_COUNT_PER_PAGE)
+  renderPageItems(repos) {
+
+    const { currentItemOffset, } = this.state
+
+    const sliced = repos.slice(currentItemOffset, currentItemOffset + CONST_ITEM_COUNT_PER_PAGE)
 
     const items = sliced.map((repo, index) => {
       return (<RepositoryTile key={index}
-                              repository={repo}
-                              languageColor={languageToColor[repo.language]} />
+                              repository={repo} />
       )
     })
 
     return (<div> {items} </div>)
   }
 
   /** since react-paginate doesn't support es6 class, we can't extract it as an independent class */
-  renderPaginator() {
-    const { totalPageCount, currentItemOffset, } = this.state
+  renderPaginator(totalPageCount) {
+    const { currentItemOffset, } = this.state
     const currentPage = Math.ceil(currentItemOffset/ CONST_ITEM_COUNT_PER_PAGE)
 
     return(
@@ -157,17 +117,35 @@ export default class TabContentRepository extends Component {
   }
 
   render() {
+
+    const { repositories, } = this.props
+    const { sortComparator, filterKeyword, } = this.state
+
+    const filtered = repositories
+      .filter(repo => { /** return true if keyword is included in name or lang of repo */
+        if (repo.name.toLowerCase().includes(filterKeyword)) return true
+
+        const lang = repo.language
+        if (lang && lang.toLowerCase().includes(filterKeyword)) return true
+
+        return false
+      })
+
+    const sorted = filtered.slice().sort(sortComparator)
+
+    const totalPageCount = Math.ceil(sorted.length / CONST_ITEM_COUNT_PER_PAGE)
+
     return (
       <div className='container'>
         {this.renderTitle()}
         <Filter handler={this.handleFilterChange.bind(this)} floatingLabel='INSERT FILTER' />
         <Sorter callback={this.sortRepository.bind(this)} sortingStrategies={SORTING_STRATEGIES} />
 
         <div className='row'>
-          {this.renderPageItems()}
+          {this.renderPageItems(sorted)}
         </div>
         <div className='row center'>
-          {this.renderPaginator()}
+          {this.renderPaginator(totalPageCount)}
         </div>
       </div>
     )

app/src/index.js

@@ -22,7 +22,3 @@ ReactDOM.render(
   </Provider>, document.getElementById('app')
 )
 
-if (process.env.NODE_ENV !== 'production') {
-  const showDevTools = require('./showDevTools')
-  //showDevTools(store)
-}

app/src/reducers/ProfileReducer.js

@@ -10,15 +10,15 @@ const initialState = {
   languages: [],
 }
 
-export default function profileReducer(state = initialState, action) {
+export default function profileReducer(state = initialState, action = null) {
   const { type, payload, error, } = action
 
   if (ActionTypes.FETCH_PROFILE !== type) return state
 
   if (error) return state
 
   /** recently occurred events first */
-  const sorted = payload.activities.slice().sort((act1, act2) => { /** latest */
+  const sorted = payload.activities.slice().sort((act1, act2) => {
     return moment(act2.created_at).valueOf() - moment(act1.created_at).valueOf()
   })
 

app/src/store/configureStore.dev.js

@@ -1,29 +1,31 @@
-
-//Remember to keep the production/development version of this file in sync.
-//This boilerplate file is likely to be the same for each project that uses Redux.
-//With Redux, the actual stores are in /reducers.
-
 import { createStore, applyMiddleware, compose, } from 'redux'
 import promise from 'redux-promise'
 import thunk from 'redux-thunk'
-import createLogger from 'redux-logger'
-
-const middlewares = [promise, createLogger(),]
 
 import rootReducer from '../reducers'
-import DevTools from '../containers/DevTools'
 
-const finalCreateStore = compose(
-  applyMiddleware(...middlewares),
-  DevTools.instrument()
-)(createStore)
+const middlewares = [promise]
 
 export default function configureStore(initialState) {
-  const store = finalCreateStore(rootReducer, initialState)
+  let store
+
+  if (window.devToolsExtension) {
+    store = createStore(
+      rootReducer,
+      initialState,
+      compose(
+      applyMiddleware(...middlewares),
+      window.devToolsExtension ? window.devToolsExtension() : f => f
+    ))
+  } else {
+    store = createStore(
+      rootReducer,
+      initialState,
+      applyMiddleware(...middlewares)
+    )
+  }
 
-  // Configure the store for hot reloading
   if (module.hot) {
-    // Enable Webpack hot module replacement for reducers
     module.hot.accept('../reducers', () => {
       const nextReducer = require('../reducers')
       store.replaceReducer(nextReducer)

app/src/store/configureStore.js

@@ -1,5 +1,3 @@
-// Use DefinePlugin (Webpack) or loose-envify (Browserify)
-// together with Uglify to strip the dev branch in prod build.
 if (process.env.NODE_ENV === 'production') {
   module.exports = require('./configureStore.prod')
 } else {