From ebc3b4ee66bf2ee2a729cdae8c72f63ced63265e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 14 Sep 2024 23:58:47 +0200 Subject: [PATCH] "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 | 8 + .../notificationAdd/notificationAdd.jsx | 23 ++- .../notificationAdd/notificationAdd.less | 1 + .../notificationLookup/notificationLookup.jsx | 179 +++++++++--------- .../notificationLookup.less | 4 +- server/admin.api.js | 16 +- server/app.js | 2 +- 7 files changed, 121 insertions(+), 112 deletions(-) diff --git a/client/admin/admin.less b/client/admin/admin.less index 4c30cff93..c6c9b4662 100644 --- a/client/admin/admin.less +++ b/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; + } } diff --git a/client/admin/notificationUtils/notificationAdd/notificationAdd.jsx b/client/admin/notificationUtils/notificationAdd/notificationAdd.jsx index 78862eb8e..951a25e6b 100644 --- a/client/admin/notificationUtils/notificationAdd/notificationAdd.jsx +++ b/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 = ()=>{ Save Notification - {state.error &&
{state.error}
} ); diff --git a/client/admin/notificationUtils/notificationAdd/notificationAdd.less b/client/admin/notificationUtils/notificationAdd/notificationAdd.less index f274e694f..878da24c2 100644 --- a/client/admin/notificationUtils/notificationAdd/notificationAdd.less +++ b/client/admin/notificationUtils/notificationAdd/notificationAdd.less @@ -25,6 +25,7 @@ min-height : 7em; max-height : 20em; resize : vertical; + padding : 10px; } } diff --git a/client/admin/notificationUtils/notificationLookup/notificationLookup.jsx b/client/admin/notificationUtils/notificationLookup/notificationLookup.jsx index b9214921a..b9762149e 100644 --- a/client/admin/notificationUtils/notificationLookup/notificationLookup.jsx +++ b/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 }) => ( -
-
-
Key
-
{notification.dismissKey}
+const NotificationDetail = ({ notification, onDelete })=>( + <> +
+
Key
+
{notification.dismissKey}
-
Title
-
{notification.title || 'No Title'}
+
Title
+
{notification.title || 'No Title'}
-
Text
-
{notification.text || 'No Text'}
+
Text
+
{notification.text || 'No Text'}
-
Created
-
{Moment(notification.createdAt).format('LLLL')}
+
Created
+
{Moment(notification.createdAt).format('LLLL')}
-
Start
-
{Moment(notification.startAt).format('LLLL') || 'No Start Time'}
+
Start
+
{Moment(notification.startAt).format('LLLL') || 'No Start Time'}
-
Stop
-
{Moment(notification.stopAt).format('LLLL') || 'No End Time'}
-
- -
+
Stop
+
{Moment(notification.stopAt).format('LLLL') || 'No End Time'}
+ + + ); -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
{error}
; - } + const renderNotificationsList = ()=>{ + if(error) { + return
{error}
; + } - if (notifications.length === 0) { - return
No notifications available.
; - } + if(notifications.length === 0) { + return
No notifications available.
; + } - return ( - - ); - }; + return ( + + ); + }; - {renderNotificationsList()} - - ); + return ( +
+

Check all Notifications

+ {renderNotificationsList()} +
+ ); }; module.exports = NotificationLookup; diff --git a/client/admin/notificationUtils/notificationLookup/notificationLookup.less b/client/admin/notificationUtils/notificationLookup/notificationLookup.less index 9402dc9f7..3f9b78310 100644 --- a/client/admin/notificationUtils/notificationLookup/notificationLookup.less +++ b/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; diff --git a/server/admin.api.js b/server/admin.api.js index 55bea2892..4c9fa5e39 100644 --- a/server/admin.api.js +++ b/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) { - return next(err); + } catch (error) { + 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); - return res.status(500).json({ error: 'An error occurred while adding the notification' }); + console.log('Error adding notification: ', error.message); + 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 ,' }'); - return res.status(500).json({ error: 'An error occurred while deleting the notification' }); + console.error('Error deleting notification: { key: ', req.params.id , ' error: ', error.message ,' }'); + return res.status(500).json({message: error.message}); } }); diff --git a/server/app.js b/server/app.js index c03fb2dc2..16c145573 100644 --- a/server/app.js +++ b/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');