"Refactor notification utils components to use React Hooks instead of createClass"

client/admin/notificationUtils/notificationAdd/notificationAdd.jsx

@@ -1,101 +1,113 @@
 require('./notificationAdd.less');
 const React = require('react');
-const createClass = require('create-react-class');
-const cx    = require('classnames');
-
+const { useState } = require('react');
+const cx = require('classnames');
 const request = require('superagent');
 
 const fields = ['dismissKey', 'title', 'text', 'startAt', 'stopAt'];
 
+const NotificationAdd = () => {
+    const [state, setState] = useState({
+        query: '',
+        notificationResult: null,
+        searching: false,
+        error: null,
+        dismissKey: '',
+        title: '',
+        text: '',
+        startAt: '',
+        stopAt: ''
+    });
 
-const NotificationAdd = createClass({
-	displayName : 'NotificationAdd',
-	getDefaultProps() {
-		return {};
-	},
-	getInitialState() {
-		return {
-			query              : '',
-			notificationResult : null,
-			searching          : false,
-			error              : null,
+    const handleChange = (e, field) => {
+        const value = e.target.value;
+        setState(prevState => ({
+            ...prevState,
+            [field]: value
+        }));
+    };
 
-			dismissKey : '',
-			title      : '',
-			text       : '',
-			startAt    : '',
-			stopAt     : ''
-		};
-	},
-	handleChange(e, field){
-		const data = {};
-		data[field] = e.target.value;
-		this.setState(data);
-	},
-	saveNotification : async function(){
-		if(!this.state.dismissKey) return 'No notification key!';
-		const data = {
-			dismissKey : this.state.dismissKey,
-			title      : this.state.title,
-			text       : this.state.text,
-			startAt    : Date.parse(this.state.startAt),
-			stopAt     : Date.parse(this.state.stopAt)
-		};
+    const saveNotification = async () => {
+        if (!state.dismissKey) {
+            setState(prevState => ({
+                ...prevState,
+                error: 'No notification key!'
+            }));
+            return;
+        }
 
-		const notification = await request.post('/admin/notification/add')
-			.send(data)
-			.then((response)=>{
-				return response.body;
-			});
+        const data = {
+            dismissKey: state.dismissKey,
+            title: state.title,
+            text: state.text,
+            startAt: Date.parse(state.startAt),
+            stopAt: Date.parse(state.stopAt)
+        };
 
-		const update = {
-			notificationResult : `Created notification: ${JSON.stringify(notification, null, 2)}`
-		};
-		if(notification.err) {
-			update.notificationResult = JSON.stringify(notification.err);
-			if(notification.err.code == 11000) {
-				update.notificationResult = `Duplicate dismissKey error! ${this.state.dismissKey} already exists.`;
-			}
-		};
-		if(!notification.err) {
-			update.dismissKey = '';
-			update.title = '';
-			update.text = '';
-			update.startAt = '';
-			update.stopAt = '';
-		}
+        try {
+            const response = await request.post('/admin/notification/add').send(data);
+            const notification = response.body;
+            let update = {
+                notificationResult: `Created notification: ${JSON.stringify(notification, null, 2)}`
+            };
 
-		console.log(update);
+            if (notification.err) {
+                update.notificationResult = JSON.stringify(notification.err);
+                if (notification.err.code == 11000) {
+                    update.notificationResult = `Duplicate dismissKey error! ${state.dismissKey} already exists.`;
+                }
+            } else {
+                update = {
+                    ...update,
+                    dismissKey: '',
+                    title: '',
+                    text: '',
+                    startAt: '',
+                    stopAt: ''
+                };
+            }
 
-		this.setState(update);
-	},
+            setState(prevState => ({
+                ...prevState,
+                ...update,
+                searching: false
+            }));
+        } catch (err) {
+            setState(prevState => ({
+                ...prevState,
+                error: err.message,
+                searching: false
+            }));
+        }
+    };
 
-	render(){
-		return <div className='notificationAdd'>
-			<h2>Add</h2>
-			{fields.map((field, idx)=>{
-				return <div key={idx}>
-					<label className='fieldLabel'>{field.toUpperCase()}</label>
-					<input className='fieldInput' type='text' value={this.state[field]} onChange={(e)=>this.handleChange(e, field)} placeholder={field} />
-				</div>;
-			})}
-			<div className='notificationResult'>{this.state.notificationResult}</div>
-			{/* <label>Dismiss Key:</label>
-			<input type='text' value={this.state.dismissKey} onChange={this.handleChange} placeholder='notification key' />
-			<label>Title:</label>
-			<input type='text' value={this.state.title} onChange={this.handleChange} placeholder='title' />  */}
-			<button onClick={this.saveNotification}>
-				<i className={cx('fas', {
-					'fa-save'            : !this.state.searching,
-					'fa-spin fa-spinner' : this.state.searching,
-				})} />
-			</button>
-
-			{this.state.error
-				&& <div className='error'>{this.state.error.toString()}</div>
-			}
-		</div>;
-	}
-});
+    return (
+        <div className='notificationAdd'>
+            <h2>Add</h2>
+            {fields.map((field, idx) => (
+                <div key={idx}>
+                    <label className='fieldLabel'>{field.toUpperCase()}</label>
+                    <input
+                        className='fieldInput'
+                        type='text'
+                        value={state[field]}
+                        onChange={(e) => handleChange(e, field)}
+                        placeholder={field}
+                    />
+                </div>
+            ))}
+            <div className='notificationResult'>{state.notificationResult}</div>
+            <button onClick={saveNotification}>
+                <i
+                    className={cx('fas', {
+                        'fa-save': !state.searching,
+                        'fa-spin fa-spinner': state.searching
+                    })}
+                />
+            </button>
+            {state.error && <div className='error'>{state.error.toString()}</div>}
+        </div>
+    );
+};
 
 module.exports = NotificationAdd;

client/admin/notificationUtils/notificationLookup/notificationLookup.jsx

@@ -1,94 +1,97 @@
 require('./notificationLookup.less');
+
 const React = require('react');
-const createClass = require('create-react-class');
-const cx    = require('classnames');
+const { useState } = require('react');
+const cx = require('classnames');
 
 const request = require('superagent');
 const Moment = require('moment');
 
+const NotificationLookup = () => {
+    const [query, setQuery] = useState('');
+    const [foundNotification, setFoundNotification] = useState(null);
+    const [searching, setSearching] = useState(false);
+    const [error, setError] = useState(null);
 
-const NotificationLookup = createClass({
-	displayName : 'NotificationLookup',
-	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 });
+    const handleChange = (e) => {
+        setQuery(e.target.value);
+    };
 
-		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 }));
-	},
+    const lookup = () => {
+        setSearching(true);
+        setError(null);
 
-	deleteNotification : function(){
-		console.log('DELETE');
-		if(!confirm(`Really delete notification ${this.state.foundNotification.dismissKey} : ${this.state.foundNotification.title}?`)) {
-			console.log('CANCELLED');
-			return;
-		}
-		console.log('CONFIRMED');
-		return;
-	},
+        request.get(`/admin/notification/lookup/${query}`)
+            .then((res) => setFoundNotification(res.body))
+            .catch((err) => setError(err))
+            .finally(() => setSearching(false));
+    };
 
-	renderFoundNotification(){
-		const notification = this.state.foundNotification;
-		return <div className='foundNotification'>
-			<dl>
-				<dt>Key</dt>
-				<dd>{notification.dismissKey}</dd>
+    const deleteNotification = () => {
+        if (!foundNotification) return;
 
-				<dt>Title</dt>
-				<dd>{notification.title || 'No Title'}</dd>
+        const confirmed = window.confirm(`Really delete notification ${foundNotification.dismissKey} : ${foundNotification.title}?`);
+        if (!confirmed) {
+            console.log('CANCELLED');
+            return;
+        }
+        console.log('CONFIRMED');
+        // Perform delete operation here
+    };
 
-				<dt>Text</dt>
-				<dd>{notification.text || 'No Text'}</dd>
+    const renderFoundNotification = () => {
+        if (!foundNotification) return null;
 
-				<dt>Created</dt>
-				<dd>{Moment(notification.createdAt).toLocaleString()}</dd>
+        return (
+            <div className='foundNotification'>
+                <dl>
+                    <dt>Key</dt>
+                    <dd>{foundNotification.dismissKey}</dd>
 
-				<dt>Start</dt>
-				<dd>{Moment(notification.startAt).toLocaleString() || 'No Start Time'}</dd>
+                    <dt>Title</dt>
+                    <dd>{foundNotification.title || 'No Title'}</dd>
 
-				<dt>Stop</dt>
-				<dd>{Moment(notification.stopAt).toLocaleString() || 'No End Time'}</dd>
-			</dl>
-			<button onClick={this.deleteNotification}>DELETE</button>
-		</div>;
-	},
+                    <dt>Text</dt>
+                    <dd>{foundNotification.text || 'No Text'}</dd>
 
-	render(){
-		return <div className='notificationLookup'>
-			<h2>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>
+                    <dt>Created</dt>
+                    <dd>{Moment(foundNotification.createdAt).toLocaleString()}</dd>
 
-			{this.state.error
-				&& <div className='error'>{this.state.error.toString()}</div>
-			}
+                    <dt>Start</dt>
+                    <dd>{Moment(foundNotification.startAt).toLocaleString() || 'No Start Time'}</dd>
 
-			{this.state.foundNotification
-				? this.renderFoundNotification()
-				: <div className='noNotification'>No notification found.</div>
-			}
-		</div>;
-	}
-});
+                    <dt>Stop</dt>
+                    <dd>{Moment(foundNotification.stopAt).toLocaleString() || 'No End Time'}</dd>
+                </dl>
+                <button onClick={deleteNotification}>DELETE</button>
+            </div>
+        );
+    };
+
+    return (
+        <div className='notificationLookup'>
+            <h2>Lookup</h2>
+            <input
+                type='text'
+                value={query}
+                onChange={handleChange}
+                placeholder='notification key'
+            />
+            <button onClick={lookup}>
+                <i className={cx('fas', {
+                    'fa-search': !searching,
+                    'fa-spin fa-spinner': searching,
+                })} />
+            </button>
+
+            {error && <div className='error'>{error.toString()}</div>}
+
+            {foundNotification
+                ? renderFoundNotification()
+                : <div className='noNotification'>No notification found.</div>
+            }
+        </div>
+    );
+};
 
 module.exports = NotificationLookup;

client/admin/notificationUtils/notificationUtils.jsx

@@ -1,19 +1,16 @@
 const React = require('react');
-const createClass = require('create-react-class');
 
 const NotificationLookup = require('./notificationLookup/notificationLookup.jsx');
 const NotificationAdd = require('./notificationAdd/notificationAdd.jsx');
 
-const NotificationUtils = createClass({
-	displayName : 'NotificationUtils',
-
-	render : function(){
-		return <>
-			<NotificationAdd />
-			<hr />
-			<NotificationLookup />
-		</>;
-	}
-});
+const NotificationUtils = () => {
+    return (
+        <>
+            <NotificationAdd />
+            <hr />
+            <NotificationLookup />
+        </>
+    );
+};
 
 module.exports = NotificationUtils;