Merge pull request #27 from adnasa/aa-functional-generate

refactor(generate): take a functional approach

Author: nitin42

src/shared/generate.js

@@ -1,19 +1,7 @@
 import { add, average, percent } from './math'
 
-// Sort the all components by total time
-const sortComponents = components =>
-  components.sort((a, b) => b.totalTime - a.totalTime)
-
-// Align the components by their name and total time
-const alignComponents = totalTime => {
-  return Object.keys(totalTime).reduce((acc, name) => {
-    acc.push({ name, totalTime: totalTime[name] })
-    return acc
-  }, [])
-}
-
 // Get the total time taken combining all the phases
-const getTotalTime = components =>
+const getSummarisedTotalTime = components =>
   components.reduce((acc, component) => (acc += component.totalTime), 0)
 
 // Plot the timings (average time in ms, component instances, total time in ms)
@@ -58,68 +46,38 @@ const createSchema = (store, component, totalTime) => ({
   )
 })
 
-// Generate the data from React performance measures
-const generateDataFromMeasures = store => {
-  let componentsByTotalTime = {}
-
-  for (const componentName in store) {
-    // Default
-    componentsByTotalTime[componentName] =
-      componentsByTotalTime[componentName] || 0
+const getTotalComponentTimeSpent = componentPhases => {
+  const phases = [
+    'mount',
+    'unmount',
+    'update',
+    'render',
+    'componentWillMount',
+    'componentDidMount',
+    'componentWillReceiveProps',
+    'shouldComponentUpdate',
+    'componentWillUpdate',
+    'componentDidUpdate',
+    'componentWillUnmount'
+  ]
+  return phases.reduce(
+    (totalTimeSpent, phase) =>
+      (totalTimeSpent += add(componentPhases[phase].timeSpent)),
+    0
+  )
+}
 
-    // mount time
-    componentsByTotalTime[componentName] += add(
-      store[componentName].mount.timeSpent
-    )
-    // unmount time
-    componentsByTotalTime[componentName] += add(
-      store[componentName].unmount.timeSpent
-    )
-    // update time
-    componentsByTotalTime[componentName] += add(
-      store[componentName].update.timeSpent
-    )
-    // render time
-    componentsByTotalTime[componentName] += add(
-      store[componentName].render.timeSpent
-    )
-    // time spent in componentWillMount
-    componentsByTotalTime[componentName] += add(
-      store[componentName].componentWillMount.timeSpent
-    )
-    // time spent in componentDidMount
-    componentsByTotalTime[componentName] += add(
-      store[componentName].componentDidMount.timeSpent
-    )
-    // time spent in componentWillReceiveProps
-    componentsByTotalTime[componentName] += add(
-      store[componentName].componentWillReceiveProps.timeSpent
-    )
-    // time spent in shouldComponentUpdate
-    componentsByTotalTime[componentName] += add(
-      store[componentName].shouldComponentUpdate.timeSpent
-    )
-    // time spent in componentWillUpdate
-    componentsByTotalTime[componentName] += add(
-      store[componentName].componentWillUpdate.timeSpent
-    )
-    // time spent in componentDidUpdate
-    componentsByTotalTime[componentName] += add(
-      store[componentName].componentDidUpdate.timeSpent
-    )
-    // time spent in componentWillUnmount
-    componentsByTotalTime[componentName] += add(
-      store[componentName].componentWillUnmount.timeSpent
+const generateDataFromMeasures = store => {
+  const componentsWithTotalTime = Object.keys(store).map(componentName => ({
+    name: componentName,
+    totalTime: getTotalComponentTimeSpent(store[componentName])
+  }))
+  const totalTime = getSummarisedTotalTime(componentsWithTotalTime)
+  return componentsWithTotalTime
+    .map(componentWithTotalTime =>
+      createSchema(store, componentWithTotalTime, totalTime)
     )
-  }
-
-  const components = alignComponents(componentsByTotalTime)
-
-  const totalTime = getTotalTime(components)
-
-  return sortComponents(components).map(component =>
-    createSchema(store, component, totalTime)
-  )
+    .sort((a, b) => b.totalTimeSpent - a.totalTimeSpent)
 }
 
 export { generateDataFromMeasures }