f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-26 09:32:51 +00:00
Code Wiki Activity

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

Browse Source
This commit is contained in:
Víctor Losada Hernández
2024-09-14 23:58:47 +02:00
parent 9bf28f1433
commit ebc3b4ee66
7 changed files with 121 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
client/admin/notificationUtils/notificationLookup/notificationLookup.jsx
View File

@@ -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;

4
client/admin/notificationUtils/notificationLookup/notificationLookup.less
View File

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