Add US state to phone inventory page

package.json

@@ -159,6 +159,7 @@
     "timezonecomplete": "^5.5.0",
     "twilio": "^3.40.0",
     "url-join": "^4.0.1",
+    "us-area-codes": "^1.0.0",
     "uuid": "^3.1.0",
     "wait-for-expect": "^1.1.1",
     "webpack": "^3.8.1",

src/api/organization.js

@@ -15,6 +15,7 @@ export const schema = gql`
 
   type PhoneNumberCounts {
     areaCode: String!
+    state: String!
     availableCount: Int!
     allocatedCount: Int!
   }

src/containers/AdminPhoneNumberInventory.js

@@ -117,7 +117,14 @@ class AdminPhoneNumberInventory extends React.Component {
       {
         key: "areaCode",
         label: "Area Code",
-        style: inlineStyles.column
+        style: inlineStyles.column,
+        sortable: true
+      },
+      {
+        key: "state",
+        label: "State",
+        style: inlineStyles.column,
+        sortable: true
       },
       {
         key: "allocatedCount",
@@ -208,6 +215,16 @@ class AdminPhoneNumberInventory extends React.Component {
         availableCount: 0
       }));
     const tableData = [...newAreaCodeRows, ...phoneNumberCounts];
+    const handleSortOrderChange = (key, order) => {
+      tableData.sort((a,b) => {
+        if (order == 'asc') {
+          return a[key] < b[key] ? 1 : -1;
+        }
+        if (order == 'desc') {
+          return a[key] > b[key] ? 1 : -1;
+        }
+      })
+    }
     return (
       <div>
         <DataTables
@@ -217,6 +234,8 @@ class AdminPhoneNumberInventory extends React.Component {
           count={tableData.length}
           showFooterToolbar={false}
           showRowHover
+          initialSort={{column: 'areaCode', order: 'desc'}}
+          onSortOrderChange={handleSortOrderChange}
         />
         <FloatingActionButton
           {...dataTest("buyPhoneNumbers")}
@@ -247,6 +266,7 @@ const queries = {
           twilioMessageServiceSid
           phoneNumberCounts {
             areaCode
+            state
             availableCount
             allocatedCount
           }

src/server/api/organization.js

@@ -9,6 +9,7 @@ import {
   getAvailableActionHandlers,
   getActionChoiceData
 } from "../../integrations/action-handlers";
+import { get as stateLookup } from "us-area-codes";
 
 export const resolvers = {
   Organization: {
@@ -184,7 +185,8 @@ export const resolvers = {
       ) {
         throw Error("Twilio inventory management is not enabled");
       }
-      const service = getConfig("DEFAULT_SERVICE");
+      const service = getConfig("service", organization) ||
+        getConfig("DEFAULT_SERVICE");
       const counts = await r
         .knex("owned_phone_number")
         .select(
@@ -201,6 +203,7 @@ export const resolvers = {
         .groupBy("area_code");
       return counts.map(row => ({
         areaCode: row.area_code,
+        state: stateLookup(Number(row.area_code)),
         allocatedCount: Number(row.allocated_count),
         availableCount: Number(row.available_count)
       }));

yarn.lock

@@ -10164,7 +10164,7 @@ memory-fs@^0.5.0:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
-meow@^3.3.0:
+meow@^3.3.0, meow@^3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
   integrity sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=
@@ -15593,6 +15593,13 @@ [email protected], url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+us-area-codes@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/us-area-codes/-/us-area-codes-1.0.0.tgz#1b9085a1eaae4a2caba9e92f45790556b91cec59"
+  integrity sha512-FBM+sTU2OxS96zAGknWMtckSVPyT9MvQ9AySm0lvxQ71QHQ9GGyrqPAD61BRT61PrHoEtzGglQzCwZ7EL3Rv3w==
+  dependencies:
+    meow "^3.7.0"
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"