From: Greg Hurrell <greg@hurrell.net>
Date: Mon, 3 Aug 2015 22:41:54 +0000 (-0700)
Subject: Extract <Size> component
X-Git-Url: https://git.wincent.com/hextrapolate.git/commitdiff_plain/b8110ed664ce0d0fcacf394cb50149bf9b369323

Extract <Size> component

Keeps things a little cleaner.
---

diff --git a/src/App.js b/src/App.js
index 088634a..2dadf8f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,7 +12,7 @@ import React from 'react';
 import type Value from './Field.react';
 import Field from './Field.react';
 import Label from './Label.react';
-import convert from './convert';
+import Size from './Size.react';
 
 import './App.css';
 
@@ -30,21 +30,11 @@ export default class App extends React.Component {
 
   render() {
     const {value} = this.state;
-    const bits = value ? convert(
-      value.value,
-      value.base,
-      16
-    ).length * 8 : 0;
 
     return (
       <div className="hextrapolate">
         <h1>
-          Hextrapolate
-          &mdash;
-          {' '}
-          {bits / 8 } byte{bits / 8 === 1 ? '' : 's'},
-          {' '}
-          {bits} bits
+          Hextrapolate &mdash; <Size value={value} />
         </h1>
         <Label text="Hexadecimal">
           <Field
diff --git a/src/Size.react.js b/src/Size.react.js
new file mode 100644
index 0000000..99b2b10
--- /dev/null
+++ b/src/Size.react.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright 2015-present Greg Hurrell. All rights reserved.
+ * Licensed under the terms of the MIT license.
+ *
+ * @flow
+ */
+
+'use strict';
+
+import React from 'react';
+import {ValuePropType} from './Field.react';
+import convert from './convert';
+
+export default class App extends React.Component {
+  static propTypes = {
+    value: ValuePropType,
+  };
+
+  render() {
+    const {value} = this.props;
+    const bits = value ? convert(value.value, value.base, 16).length * 8 : 0;
+    const bytes = bits / 8;
+    return (
+      <span>
+        {bytes} byte{bytes === 1 ? '' : 's'},
+        {' '}
+        {bits} bits
+      </span>
+    );
+  }
+}