"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,10 +24,17 @@ const NotificationAdd = ()=>{
 		const stopAt = new Date(stopAtRef.current.value);
 
 		// Basic validation
-		if(!dismissKey || !title || !text || !startAt || !stopAt) {
+		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;
 		}
@@ -37,7 +44,7 @@ const NotificationAdd = ()=>{
 			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,13 +1,12 @@
 require('./notificationLookup.less');
 
 const React = require('react');
-const { useState, useRef } = require('react');
+const { useState } = require('react');
-const cx = require('classnames');
 const request = require('superagent');
 const Moment = require('moment');
 
 const NotificationDetail = ({ notification, onDelete })=>(
-    <div>
+	<>
 		<dl>
 			<dt>Key</dt>
 			<dd>{notification.dismissKey}</dd>
@@ -28,7 +27,7 @@ const NotificationDetail = ({ notification, onDelete }) => (
 			<dd>{Moment(notification.stopAt).format('LLLL') || 'No End Time'}</dd>
 		</dl>
 		<button onClick={()=>onDelete(notification.dismissKey)}>DELETE</button>
-    </div>
+	</>
 );
 
 const NotificationLookup = ()=>{
@@ -44,8 +43,9 @@ const NotificationLookup = () => {
 		try {
 			const res = await request.get('/admin/notification/all');
 			setNotifications(res.body || []);
-        } catch {
+		} catch (error) {
-            setError('Error fetching all notifications.');
+            console.log(error);
+			setError(`Error looking up notifications: ${error.response.body.message}`)
 		} finally {
 			setSearching(false);
 		}
@@ -58,34 +58,34 @@ const NotificationLookup = () => {
 			`Really delete notification ${dismissKey}?`
 		);
 		if(!confirmed) {
-            console.log('CANCELLED');
+			console.log('Delete notification cancelled');
 			return;
 		}
-        console.log('CONFIRMED');
+		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);
 			}
-            // Optionally refresh the list of all notifications
 			lookupAll();
-        } catch {
+		} catch (error) {
-            setError('Error deleting notification.');
+            console.log(error);
-        }
+			setError(`Error deleting notification: ${error.response.body.message}`)
 		};
+	}
 
 	const renderNotificationsList = ()=>{
 		if(error) {
-            return <div className="error">{error}</div>;
+			return <div className='error'>{error}</div>;
 		}
 
 		if(notifications.length === 0) {
-            return <div className="noNotification">No notifications available.</div>;
+			return <div className='noNotification'>No notifications available.</div>;
 		}
 
 		return (
-            <ul className="notificationList">
+			<ul className='notificationList'>
 				{notifications.map((notification)=>(
 					<li key={notification.dismissKey} >
 						<details>
@@ -99,17 +99,10 @@ const NotificationLookup = () => {
 	};
 
 	return (
-        <div className="notificationLookup">
+		<div className='notificationLookup'>
 			<h2>Check all Notifications</h2><button onClick={lookupAll}>
-                    <i
+            <i className={`fas ${searching ? 'fa-spin fa-spinner' : 'fa-search'}`} />
-                        className={cx('fas', {
-                            'fa-search': !searching,
-                            'fa-spin fa-spinner': searching,
-                        })}
-                    />
 			</button>
-                
-
 			{renderNotificationsList()}
 		</div>
 	);

client/admin/notificationUtils/notificationLookup/notificationLookup.less

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

server/admin.api.js

@@ -145,20 +145,20 @@ router.get('/admin/notification/all', async (req, res, next) => {
 	try {
 		const notifications = await NotificationModel.getAll();
 		return res.json(notifications);
-		} catch (err) {
+		} catch (error) {
-			return next(err);
+			console.log('Error getting all notifications: ', error.message);
+			return res.status(500).json({message: error.message});
 		}
 });
 
 router.post('/admin/notification/add', mw.adminOnly, async (req, res, next) => {
     console.table(req.body);
     try {
-        // Assuming you have some validation logic here
         const notification = await NotificationModel.addNotification(req.body);
-        return res.json(notification);
+        return res.status(201).json(notification);
     } catch (error) {
-        console.error('Error adding notification:', error);
+        console.log('Error adding notification: ', error.message);
-        return res.status(500).json({ error: 'An error occurred while adding the notification' });
+        return res.status(500).json({message: error.message});
     }
 });
 
@@ -167,8 +167,8 @@ router.delete('/admin/notification/delete/:id', mw.adminOnly, async (req, res, n
         const notification = await NotificationModel.deleteNotification(req.params.id);
         return res.json(notification);
     } catch (error) {
-        console.error('Error deleting notification: { key: ', req.params.id , ' error: ',  error ,' }');
+        console.error('Error deleting notification: { key: ', req.params.id , ' error: ',  error.message ,' }');
-        return res.status(500).json({ error: 'An error occurred while deleting the notification' });
+        return res.status(500).json({message: error.message});
     }
 });
 

server/app.js

@@ -517,7 +517,7 @@ const getPureError = (error)=>{
 
 app.use(async (err, req, res, next)=>{
 	err.originalUrl = req.originalUrl;
-	console.error(err);
+	console.error('console.log in app.js: ', err);
 
 	if(err.originalUrl?.startsWith('/api/')) {
 		// console.log('API error');