Add basic Notification Lookup functionality

client/admin/notificationUtils/notificationLookup/notificationLookup.jsx

@@ -0,0 +1,82 @@
+require('./notificationLookup.less');
+const React = require('react');
+const createClass = require('create-react-class');
+const cx    = require('classnames');
+
+const request = require('superagent');
+const Moment = require('moment');
+
+
+const NotificationLookup = createClass({
+	getDefaultProps() {
+		return {};
+	},
+	getInitialState() {
+		return {
+			query             : '',
+			foundNotification : null,
+			searching         : false,
+			error             : null
+		};
+	},
+	handleChange(e){
+		this.setState({ query: e.target.value });
+	},
+	lookup(){
+		this.setState({ searching: true, error: null });
+
+		request.get(`/admin/notification/lookup/${this.state.query}`)
+			.then((res)=>this.setState({ foundNotification: res.body }))
+			.catch((err)=>this.setState({ error: err }))
+			.finally(()=>this.setState({ searching: false }));
+	},
+
+	renderFoundNotification(){
+		const notification = this.state.foundnotification;
+		return <div className='foundNotification'>
+			<dl>
+				<dt>Key</dt>
+				<dd>{notification.dismissKey}</dd>
+
+				<dt>Title</dt>
+				<dd>{notification.title || 'No Title'}</dd>
+
+				<dt>Text</dt>
+				<dd>{notification.text || 'No Text'}</dd>
+
+				<dt>Created</dt>
+				<dd>{Moment(notification.createdAt).fromNow()}</dd>
+
+				<dt>Start</dt>
+				<dd>{Moment(notification.startAt).fromNow() || 'No Start Time'}</dd>
+
+				<dt>Created</dt>
+				<dd>{Moment(notification.stopAt).fromNow() || 'No End Time'}</dd>
+			</dl>
+		</div>;
+	},
+
+	render(){
+		return <div className='notificationLookup'>
+			<h2>Notification Lookup</h2>
+			<input type='text' value={this.state.query} onChange={this.handleChange} placeholder='notification key' />
+			<button onClick={this.lookup}>
+				<i className={cx('fas', {
+					'fa-search'          : !this.state.searching,
+					'fa-spin fa-spinner' : this.state.searching,
+				})} />
+			</button>
+
+			{this.state.error
+				&& <div className='error'>{this.state.error.toString()}</div>
+			}
+
+			{this.state.foundNotification
+				? this.renderFoundNotification()
+				: <div className='noNotification'>No notification found.</div>
+			}
+		</div>;
+	}
+});
+
+module.exports = NotificationLookup;