Better sorting, humanize TTLs

3 files changed, 53 insertions, 16 deletions

diff --git a/src/components/Record.js b/src/components/Record.js
index e47b34c..f13bd71 100644
--- a/src/components/Record.js
+++ b/src/components/Record.js
@@ -1,3 +1,4 @@
+import { forHumans } from '../utils'
 import IconButton from './IconButton.js'
 import React from 'react'
 
@@ -10,7 +11,7 @@ export default function Record(props) {
         {props.value}
         {props.recordSpecial}
       </div>
-      <div className="records-td records-col-ttl">{props.ttl}</div>
+      <div className="records-td records-col-ttl">{forHumans(props.ttl)}</div>
       <div className="records-td records-col-actions">
         <IconButton icon="pencil" action={() => props.setAndOpenRecord()}>
           (edit)
diff --git a/src/components/RecordTable.js b/src/components/RecordTable.js
index 3fccaf7..1784f45 100644
--- a/src/components/RecordTable.js
+++ b/src/components/RecordTable.js
@@ -74,21 +74,29 @@ export default function RecordsTable({
       </div>
       <div className="records-tbody" role="rowgroup">
         {records != null &&
-          sort(sort(records.filter(r => r.type != 'NS'), sortDirections.UP, true, sortColumns.NAME), sortDirections.UP, true, sortColumns.TYPE).map(
-            (val) => {
-              return (
-                <Record
-                  id={val.id}
-                  type={val.type}
-                  name={val.name}
-                  value={val.content}
-                  ttl={val.ttl}
-                  setAndOpenRecord={() => setAndOpenRecord(val)}
-                  deleteRecord={() => deleteRecord(val.id)}
-                ></Record>
-              )
-            }
-          )}
+          sort(
+            sort(
+              records.filter((r) => r.type != 'NS'),
+              sortDirections.UP,
+              true,
+              sortColumns.NAME
+            ),
+            sortDirections.UP,
+            true,
+            sortColumns.TYPE
+          ).map((val) => {
+            return (
+              <Record
+                id={val.id}
+                type={val.type}
+                name={val.name}
+                value={val.content}
+                ttl={val.ttl}
+                setAndOpenRecord={() => setAndOpenRecord(val)}
+                deleteRecord={() => deleteRecord(val.id)}
+              ></Record>
+            )
+          })}
       </div>
     </div>
   )
diff --git a/src/utils.js b/src/utils.js
new file mode 100644
index 0000000..441a56e
--- /dev/null
+++ b/src/utils.js
@@ -0,0 +1,28 @@
+/**
+ * Translates seconds into human readable format of seconds, minutes, hours, days, and years
+ *
+ * @param  {number} seconds The number of seconds to be processed
+ * @return {string}         The phrase describing the amount of time
+ */
+export function forHumans(seconds) {
+  var levels = [
+    [Math.floor(seconds / 31536000), 'years'],
+    [Math.floor((seconds % 31536000) / 86400), 'days'],
+    [Math.floor(((seconds % 31536000) % 86400) / 3600), 'hours'],
+    [Math.floor((((seconds % 31536000) % 86400) % 3600) / 60), 'minutes'],
+    [(((seconds % 31536000) % 86400) % 3600) % 60, 'seconds'],
+  ]
+  var returntext = ''
+
+  for (var i = 0, max = levels.length; i < max; i++) {
+    if (levels[i][0] === 0) continue
+    returntext +=
+      ' ' +
+      levels[i][0] +
+      ' ' +
+      (levels[i][0] === 1
+        ? levels[i][1].substr(0, levels[i][1].length - 1)
+        : levels[i][1])
+  }
+  return returntext.trim()
+}