"Updated admin notification management: added error handling and styling, modified notification add and lookup functionality, and refactored server-side API routes and error handling."

client/admin/admin.less

@@ -89,4 +89,12 @@ body {
 			justify-content : space-between;
 		}
 	}
+
+	.error {
+		background: rgb(178, 54, 54);
+		color:white;
+		font-weight: 900;
+		margin-block:10px;
+		padding:10px;
+	}
 }

client/admin/notificationUtils/notificationAdd/notificationAdd.jsx

@@ -24,20 +24,27 @@ const NotificationAdd = ()=>{
 		const stopAt = new Date(stopAtRef.current.value);
 
 		// Basic validation
-		if(!dismissKey || !title || !text || !startAt || !stopAt) {
-			setState((prevState)=>({
+		if (!dismissKey || !title || !text || isNaN(startAt.getTime()) || isNaN(stopAt.getTime())) {
+			setState((prevState) => ({
 				...prevState,
-				error : 'All fields are required!',
+				error: 'All fields are required',
 			}));
 			return;
 		}
-
+		if (startAt >= stopAt) {
+			setState((prevState) => ({
+				...prevState,
+				error: 'End date must be after the start date!',
+			}));
+			return;
+		}
+	
 		const data = {
 			dismissKey,
 			title,
 			text,
 			startAt : startAt?.toISOString() ?? '',
-			stopAt  : stopAt?.stopAt.toISOString() ?? '',
+			stopAt  : stopAt?.toISOString() ?? '',
 		};
 
 		try {
@@ -56,10 +63,11 @@ const NotificationAdd = ()=>{
 				...update,
 				searching : false,
 			}));
-		} catch (err) {
+		} catch (error) {
+            console.log(error.response.body.message);
 			setState((prevState)=>({
 				...prevState,
-				error     : `Error saving notification: ${err.message}`,
+				error     : `Error saving notification: ${error.response.body.message}`,
 				searching : false,
 			}));
 		}
@@ -110,7 +118,6 @@ const NotificationAdd = ()=>{
 				<i className={`fas ${state.searching ? 'fa-spin fa-spinner' : 'fa-save'}`} />
                 Save Notification
 			</button>
-
 			{state.error && <div className='error'>{state.error}</div>}
 		</div>
 	);

client/admin/notificationUtils/notificationAdd/notificationAdd.less

@@ -25,6 +25,7 @@
 			min-height : 7em;
 			max-height : 20em;
 			resize     : vertical;
+			padding	   : 10px;
 		}
 	}
 

client/admin/notificationUtils/notificationLookup/notificationLookup.jsx

@@ -1,118 +1,111 @@
 require('./notificationLookup.less');
 
 const React = require('react');
-const { useState, useRef } = require('react');
-const cx = require('classnames');
+const { useState } = require('react');
 const request = require('superagent');
 const Moment = require('moment');
 
-const NotificationDetail = ({ notification, onDelete }) => (
-    <div>
-        <dl>
-            <dt>Key</dt>
-            <dd>{notification.dismissKey}</dd>
+const NotificationDetail = ({ notification, onDelete })=>(
+	<>
+		<dl>
+			<dt>Key</dt>
+			<dd>{notification.dismissKey}</dd>
 
-            <dt>Title</dt>
-            <dd>{notification.title || 'No Title'}</dd>
+			<dt>Title</dt>
+			<dd>{notification.title || 'No Title'}</dd>
 
-            <dt>Text</dt>
-            <dd>{notification.text || 'No Text'}</dd>
+			<dt>Text</dt>
+			<dd>{notification.text || 'No Text'}</dd>
 
-            <dt>Created</dt>
-            <dd>{Moment(notification.createdAt).format('LLLL')}</dd>
+			<dt>Created</dt>
+			<dd>{Moment(notification.createdAt).format('LLLL')}</dd>
 
-            <dt>Start</dt>
-            <dd>{Moment(notification.startAt).format('LLLL') || 'No Start Time'}</dd>
+			<dt>Start</dt>
+			<dd>{Moment(notification.startAt).format('LLLL') || 'No Start Time'}</dd>
 
-            <dt>Stop</dt>
-            <dd>{Moment(notification.stopAt).format('LLLL') || 'No End Time'}</dd>
-        </dl>
-        <button onClick={() => onDelete(notification.dismissKey)}>DELETE</button>
-    </div>
+			<dt>Stop</dt>
+			<dd>{Moment(notification.stopAt).format('LLLL') || 'No End Time'}</dd>
+		</dl>
+		<button onClick={()=>onDelete(notification.dismissKey)}>DELETE</button>
+	</>
 );
 
-const NotificationLookup = () => {
-    const [foundNotification, setFoundNotification] = useState(null);
-    const [searching, setSearching] = useState(false);
-    const [error, setError] = useState(null);
-    const [notifications, setNotifications] = useState([]);
+const NotificationLookup = ()=>{
+	const [foundNotification, setFoundNotification] = useState(null);
+	const [searching, setSearching] = useState(false);
+	const [error, setError] = useState(null);
+	const [notifications, setNotifications] = useState([]);
 
-    const lookupAll = async () => {
-        setSearching(true);
-        setError(null);
+	const lookupAll = async ()=>{
+		setSearching(true);
+		setError(null);
 
-        try {
-            const res = await request.get('/admin/notification/all');
-            setNotifications(res.body || []);
-        } catch {
-            setError('Error fetching all notifications.');
-        } finally {
-            setSearching(false);
-        }
-    };
+		try {
+			const res = await request.get('/admin/notification/all');
+			setNotifications(res.body || []);
+		} catch (error) {
+            console.log(error);
+			setError(`Error looking up notifications: ${error.response.body.message}`)
+		} finally {
+			setSearching(false);
+		}
+	};
 
-    const deleteNotification = async (dismissKey) => {
-        if (!dismissKey) return;
+	const deleteNotification = async (dismissKey)=>{
+		if(!dismissKey) return;
 
-        const confirmed = window.confirm(
-            `Really delete notification ${dismissKey}?`
-        );
-        if (!confirmed) {
-            console.log('CANCELLED');
-            return;
-        }
-        console.log('CONFIRMED');
-        try {
-            await request.delete(`/admin/notification/delete/${dismissKey}`);
-            // Only reset the foundNotification if it matches the one being deleted
-            if (foundNotification && foundNotification.dismissKey === dismissKey) {
-                setFoundNotification(null);
-            }
-            // Optionally refresh the list of all notifications
-            lookupAll(); 
-        } catch {
-            setError('Error deleting notification.');
-        }
-    };
+		const confirmed = window.confirm(
+			`Really delete notification ${dismissKey}?`
+		);
+		if(!confirmed) {
+			console.log('Delete notification cancelled');
+			return;
+		}
+		console.log('Delete notification confirm');
+		try {
+			await request.delete(`/admin/notification/delete/${dismissKey}`);
+			// Only reset the foundNotification if it matches the one being deleted
+			if(foundNotification && foundNotification.dismissKey === dismissKey) {
+				setFoundNotification(null);
+			}
+			lookupAll();
+		} catch (error) {
+            console.log(error);
+			setError(`Error deleting notification: ${error.response.body.message}`)
+		};
+	}
 
-    const renderNotificationsList = () => {
-        if (error) {
-            return <div className="error">{error}</div>;
-        }
+	const renderNotificationsList = ()=>{
+		if(error) {
+			return <div className='error'>{error}</div>;
+		}
 
-        if (notifications.length === 0) {
-            return <div className="noNotification">No notifications available.</div>;
-        }
+		if(notifications.length === 0) {
+			return <div className='noNotification'>No notifications available.</div>;
+		}
 
-        return (
-            <ul className="notificationList">
-                {notifications.map((notification) => (
-                    <li key={notification.dismissKey} >
-                        <details>
-                        <summary>{notification.title || 'No Title'}</summary>
-                        <NotificationDetail notification={notification} onDelete={deleteNotification} />
-                    </details></li>
-                    
-                ))}
-            </ul>
-        );
-    };
+		return (
+			<ul className='notificationList'>
+				{notifications.map((notification)=>(
+					<li key={notification.dismissKey} >
+						<details>
+							<summary>{notification.title || 'No Title'}</summary>
+							<NotificationDetail notification={notification} onDelete={deleteNotification} />
+						</details></li>
 
-    return (
-        <div className="notificationLookup">
-                <h2>Check all Notifications</h2><button onClick={lookupAll}>
-                    <i
-                        className={cx('fas', {
-                            'fa-search': !searching,
-                            'fa-spin fa-spinner': searching,
-                        })}
-                    />
-                </button>
-                
+				))}
+			</ul>
+		);
+	};
 
-                {renderNotificationsList()}
-        </div>
-    );
+	return (
+		<div className='notificationLookup'>
+			<h2>Check all Notifications</h2><button onClick={lookupAll}>
+            <i className={`fas ${searching ? 'fa-spin fa-spinner' : 'fa-search'}`} />
+			</button>
+			{renderNotificationsList()}
+		</div>
+	);
 };
 
 module.exports = NotificationLookup;

client/admin/notificationUtils/notificationLookup/notificationLookup.less

@@ -1,7 +1,7 @@
 
 .notificationLookup {
-	width     : max-content;
-	min-width : 450px;
+	width     : 450px;
+	height	  : fit-content;
 
 	.notificationList {
 		display        : flex;