Add stats saving, refactor

Author: ebeloded

src/Components/App.tsx

@@ -158,6 +158,7 @@ export default class App extends React.PureComponent<Props, State> {
           ...getCleanStats(),
           startTime,
           finishTime: startTime + EXPERIMENT_DURATION,
+          type: this.state.renderType,
         },
       },
       () => {

src/Components/Stats.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react'
+import { RenderType } from './RenderTypes'
 export interface StatsProps {
+  type?: RenderType
   startTime?: number
   finishTime?: number
   FPS?: number
@@ -15,7 +17,20 @@ export interface StatsProps {
   }
 }
 
-class Stats extends React.PureComponent<{ stats: StatsProps }> {
+const asTable = ({ type, FPS, shuffles, mutations, render }: StatsProps) => ({
+  type,
+  FPS,
+  shuffles,
+  'mutations.attributes': mutations.attributes || 0,
+  'mutations.childList': mutations.childList || 0,
+  'mutations.characterData': mutations.characterData || 0,
+  'render.list': render.list || 0,
+  'render.child': render.child || 0,
+})
+
+class Stats extends React.PureComponent<{
+  stats: StatsProps
+}> {
   render() {
     const stats = this.props.stats
     return (
@@ -94,6 +109,11 @@ class Stats extends React.PureComponent<{ stats: StatsProps }> {
             value={stats.render.child || 0}
           />
         </div>
+        <div className="footer">
+          <button onClick={() => console.table(asTable(stats))}>
+            Save Stats
+          </button>
+        </div>
       </fieldset>
     )
   }

src/main.scss

@@ -44,6 +44,7 @@ fieldset {
     h4 {
       text-align: center;
     }
+
   }
   fieldset > div {
     display: flex;
@@ -54,6 +55,12 @@ fieldset {
     input {
       flex: 0 1 50%;
     }
+
+    &.footer {
+      padding: 20px 0 0;
+      justify-content: center;
+      border-top: dashed 1px #eee;
+    }
   }
 }
 $box-shadow-color: rgba(0, 0, 0, 0.3);