From 021caa2093497f67950251a803fb9de89d339a34 Mon Sep 17 00:00:00 2001
From: Dean Mckendry <dean.mckendry91@gmail.com>
Date: Wed, 29 Jun 2022 11:00:28 +1000
Subject: [PATCH] Add RelativeDateTime component

---
 src/types/RelativeDateTime.js | 35 +++++++++++++++++++++++++++++++++++
 src/types/index.js            |  1 +
 2 files changed, 36 insertions(+)
 create mode 100644 src/types/RelativeDateTime.js

diff --git a/src/types/RelativeDateTime.js b/src/types/RelativeDateTime.js
new file mode 100644
index 0000000..f27707d
--- /dev/null
+++ b/src/types/RelativeDateTime.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Moment from 'moment'
+import DatePart from './DatePart'
+import Empty from './Empty'
+import {SHORTDATETIME_FORMAT} from '../utils'
+
+/**
+ * Displays a datetime relative to the current time eg. "4 days ago" or "in 3 hours"
+ * alongside the datetime passed in
+ */
+class RelativeDateTime extends React.Component {
+  static propTypes = {
+    value: PropTypes.string,
+  }
+
+  render() {
+    const date = Moment(this.props.value)
+    const isValid = date.isValid()
+    if (isValid) {
+      return (
+        <div>
+          <div>
+            {Moment(this.props.value).fromNow()}
+          </div>
+          <div className="text-muted">
+            <DatePart value={this.props.value} outputFormat={SHORTDATETIME_FORMAT} />
+          </div>
+        </div>
+      )
+    }
+    return (<Empty />)
+  }
+}
+export default RelativeDateTime
diff --git a/src/types/index.js b/src/types/index.js
index 757f312..0141167 100644
--- a/src/types/index.js
+++ b/src/types/index.js
@@ -7,4 +7,5 @@ export DatePart from './DatePart'
 export DateTime from './DateTime'
 export BooleanType from './BooleanType'
 export RelativeDate from './RelativeDate'
+export RelativeDateTime from './RelativeDateTime'
 export Currency from './Currency'