initial commit

client/admin/notificationUtils/notificationAdd/notificationAdd.jsx

@@ -66,7 +66,7 @@ const NotificationAdd = ()=>{
 			<label className='field'>
 				Dismiss Key:
 				<input className='fieldInput' type='text' ref={dismissKeyRef} required
-					placeholder='GOOGLEDRIVENOTIF'
+					placeholder='dismiss_notif_drive'
 				/>
 			</label>
 

client/admin/notificationUtils/notificationLookup/notificationLookup.jsx

@@ -14,9 +14,6 @@ const NotificationDetail = ({ notification, onDelete })=>(
 			<dt>Title</dt>
 			<dd>{notification.title || 'No Title'}</dd>
 
-			<dt>Text</dt>
-			<dd>{notification.text || 'No Text'}</dd>
-
 			<dt>Created</dt>
 			<dd>{Moment(notification.createdAt).format('LLLL')}</dd>
 
@@ -25,6 +22,9 @@ const NotificationDetail = ({ notification, onDelete })=>(
 
 			<dt>Stop</dt>
 			<dd>{Moment(notification.stopAt).format('LLLL') || 'No End Time'}</dd>
+
+			<dt>Text</dt>
+			<dd>{notification.text || 'No Text'}</dd>
 		</dl>
 		<button onClick={()=>onDelete(notification.dismissKey)}>DELETE</button>
 	</>

client/components/dialog.jsx

@@ -1,22 +1,29 @@
 // Dialog box, for popups and modal blocking messages
-const React = require('react');
-const { useRef, useEffect } = React;
+import React from "react"; // Correct the import statement
+const { useRef, useEffect } = React; // Use React instead of react
 
-function Dialog({ dismissKey, closeText = 'Close', blocking = false, ...rest }) {
+function Dialog({ dismissKeys, closeText = 'Close', blocking = false, ...rest }) {
 	const dialogRef = useRef(null);
 
 	useEffect(()=>{
-		if(!dismissKey || !localStorage.getItem(dismissKey)) {
-			blocking ? dialogRef.current?.showModal() : dialogRef.current?.show();
-		}
-	}, []);
+		blocking ? dialogRef.current?.showModal() : dialogRef.current?.show();
+	}, [dialogRef.current]);
 
-	const dismiss = ()=>{
-		dismissKey && localStorage.setItem(dismissKey, true);
+	console.log(dismissKeys);
+	if (dismissKeys.length === 0) {
+		return null;
+	}
+
+	const dismiss = () => {
+		dismissKeys.forEach(key => {
+			if (key) {
+				localStorage.setItem(key, 'true');
+			}
+		});
 		dialogRef.current?.close();
 	};
-
-	return	(
+	console.log('rendering');
+	return (
 		<dialog ref={dialogRef} onCancel={dismiss} {...rest}>
 			{rest.children}
 			<button className='dismiss' onClick={dismiss}>

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -1,6 +1,6 @@
 require('./notificationPopup.less');
-const React = require('react');
-const _     = require('lodash');
+import React, { useEffect, useState } from 'react';
+const request = require('../../utils/request-middleware.js');
 
 import Dialog from '../../../components/dialog.jsx';
 
@@ -8,37 +8,60 @@ const DISMISS_KEY = 'dismiss_notification04-09-24';
 const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
 
 const NotificationPopup = ()=>{
-	return <Dialog className='notificationPopup' dismissKey={DISMISS_KEY} closeText={DISMISS_BUTTON} >
+
+	const [notifications, setNotifications] = useState([]);
+	const [error, setError] = useState(null);
+
+	useEffect(()=>{
+		getNotifications();
+	}, []);
+
+	const getNotifications = async () => {
+		setError(null);
+
+		try {
+			const res = await request.get('/admin/notification/all');
+			console.log('res', res.body);
+			pickActiveNotifications(res.body || []);
+		} catch (err) {
+			console.log(err);
+			setError(`Error looking up notifications: ${err?.response?.body?.message || err.message}`);
+		}
+	}
+
+	const pickActiveNotifications = (notifs) => {
+		const now = new Date();
+		const filteredNotifications = notifs.filter(notification => {
+			const startDate = new Date(notification.startAt);
+			const stopDate = new Date(notification.stopAt);
+			const dismissed = localStorage.getItem(notification.dismissKey) ? true : false;
+			return now >= startDate && now <= stopDate && !dismissed;
+		});
+		setNotifications(filteredNotifications);
+	}
+
+	const renderNotificationsList = ()=>{
+		if(error)
+			return <div className='error'>{error}</div>;
+
+		return notifications.map((notification)=>(
+					<li key={notification.dismissKey} >
+						<em>{notification.title}</em><br />
+						<p>{notification.text}</p>
+					</li>
+				))
+	};
+
+	const dissmissKeyList = notifications.map(notif => notif.dismissKey);
+
+	return <Dialog className='notificationPopup' dismissKeys={dissmissKeyList} closeText={DISMISS_BUTTON} >
 		<div className='header'>
 			<i className='fas fa-info-circle info'></i>
 			<h3>Notice</h3>
 			<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
 		</div>
 		<ul>
-			<li key='Vault'>
-				<em>Search brews with our new page!</em><br />
-				We have been working very hard in making this possible, now you can share your work and look at it in the new <a href='/vault'>Vault</a> page!
-				All PUBLISHED brews will be available to anyone searching there, by title or author, and filtering by renderer.
-
-				More features will be coming.
-			</li>
-
-			<li key='googleDriveFolder'>
-				<em>Don't delete your Homebrewery folder on Google Drive!</em> <br />
-				We have had several reports of users losing their brews, not realizing
-				that they had deleted the files on their Google Drive. If you have a Homebrewery folder
-				on your Google Drive with *.txt files inside, <em>do not delete it</em>!
-				We cannot help you recover files that you have deleted from your own
-				Google Drive.
-			</li>
-
-			<li key='faq'>
-				<em>Protect your work! </em> <br />
-				If you opt not to use your Google Drive, keep in mind that we do not save a history of your projects. Please make frequent backups of your brews!&nbsp;
-				<a target='_blank' href='https://www.reddit.com/r/homebrewery/comments/adh6lh/faqs_psas_announcements/'>
-					See the FAQ
-				</a> to learn how to avoid losing your work!
-			</li>
+			{renderNotificationsList()}
 		</ul>
 	</Dialog>;
 };

client/homebrew/brewRenderer/notificationPopup/notificationPopup.less

@@ -55,7 +55,10 @@
 			margin-top  : 1.4em;
 			font-size   : 0.8em;
 			line-height : 1.4em;
-			em { font-weight : 800; }
+			em { 
+				text-transform:capitalize;
+				font-weight : 800;
+			}
 		}
 	}
 }

server/admin.api.js

@@ -144,7 +144,9 @@ router.get('/admin/stats', mw.adminOnly, async (req, res)=>{
 router.get('/admin/notification/all', async (req, res, next)=>{
 	try {
 		const notifications = await NotificationModel.getAll();
+		console.log('notifications: ', notifications);
 		return res.json(notifications);
+		
 	} catch (error) {
 		console.log('Error getting all notifications: ', error.message);
 		return res.status(500).json({ message: error.message });