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;

client/admin/notificationUtils/notificationLookup/notificationLookup.less

@@ -0,0 +1,30 @@
+
+.notificationLookup{
+	input{
+		height        : 33px;
+		margin-bottom : 20px;
+		padding       : 0px 10px;
+		font-family   : monospace;
+	}
+	button{
+		vertical-align : middle;
+		height         : 37px;
+	}
+	dl{
+		@maxItemWidth : 132px;
+		dt{
+			float      : left;
+			clear      : left;
+			width      : @maxItemWidth;
+			text-align : right;
+			&::after {
+				content: " : ";
+			}
+		}
+		dd{
+			height      : 1em;
+			margin-left : @maxItemWidth + 6px;
+			padding     : 0 0 0.5em 0;
+		}
+	}
+}

client/admin/notificationUtils/notificationUtils.jsx

@@ -1,10 +1,12 @@
 const React = require('react');
 const createClass = require('create-react-class');
 
+const NotificationLookup = require('./notificationLookup/notificationLookup.jsx');
+
 const NotificationUtils = createClass({
 	render : function(){
 		return <>
-			<div>Notifications</div>
+			<NotificationLookup />
 		</>;
 	}
 });