Switch to netmask library

3 files changed, 19 insertions, 12 deletions

diff --git a/index.js b/index.js
index d286152..293a0c0 100644
--- a/index.js
+++ b/index.js
@@ -1,5 +1,6 @@
 import './style.scss'
 
+import { Netmask } from 'netmask'
 import React from 'react'
 import ReactDOM from 'react-dom'
 
@@ -39,21 +40,18 @@ class IPAddress extends React.Component {
   }
 
   getNetmask = () => {
-    if (this.state.cidr == 0) {
-      return '0.0.0.0'
-    }
-    else {
-      return [...Array(4)].map((x, octet) =>
-        ((((0xFFFFFFFF << (32 - this.state.cidr)) >>> 0) >>> (3-octet)*8) & 0xFF)
-      ).join('.')
-    }
+    var block = new Netmask(this.getPretty())
+    return block.mask
+  }
+
+  getRange = () => {
+    var block = new Netmask(this.getPretty())
+    return block.first + ' - ' + block.last
   }
 
   getCount = () => {
-    if (this.state.cidr == 32) {
-      return 1;
-    }
-    return ((0xFFFFFFFF >>> this.state.cidr) >>> 0) + 1
+    var block = new Netmask(this.getPretty())
+    return block.size
   }
 
   render() {
@@ -87,6 +85,10 @@ class IPAddress extends React.Component {
           <span className="value">{this.getNetmask()}</span>
           <span className="label">Netmask</span>
         </span>
+        <span className="range">
+          <span className="value">{this.getRange()}</span>
+          <span className="label">Range</span>
+        </span>
         <span className="count">
           <span className="value">{this.getCount().toLocaleString()}</span>
           <span className="label">Addresses</span>
diff --git a/package.json b/package.json
index 6e03ef5..05d4012 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
     "babel-preset-stage-0": "^6.3.13",
+    "netmask": "^1.0.5",
     "react": "^0.14.3",
     "react-dom": "^0.14.3"
   }
diff --git a/style.scss b/style.scss
index 983c872..33d9731 100644
--- a/style.scss
+++ b/style.scss
@@ -88,6 +88,10 @@ body {
       span.netmask {
         display: inline-block;
       }
+      span.range {
+        display: inline-block;
+        margin-left: 3em;
+      }
       span.count {
         display: inline-block;
         margin-left: 3em;