Merge branch 'master' of https://github.com/naturalcrit/homebrewery into userpage-to-func-comp

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,26 @@
 // Dialog box, for popups and modal blocking messages
-const React = require('react');
+import React from "react";
 const { useRef, useEffect } = 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)) {
+		if (dismisskeys.length !== 0) {
 			blocking ? dialogRef.current?.showModal() : dialogRef.current?.show();
 		}
-	}, []);
+	}, [dialogRef.current, dismisskeys]);
 
-	const dismiss = ()=>{
+	const dismiss = () => {
-		dismissKey && localStorage.setItem(dismissKey, true);
+		dismisskeys.forEach(key => {
+			if (key) {
+				localStorage.setItem(key, 'true');
+			}
+		});
 		dialogRef.current?.close();
 	};
-
+	
-	return	(
+	return (
 		<dialog ref={dialogRef} onCancel={dismiss} {...rest}>
 			{rest.children}
 			<button className='dismiss' onClick={dismiss}>

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -78,6 +78,8 @@ const BrewRenderer = (props)=>{
 	}
 
 	const scrollToHash = (hash) => {
+		if (!hash) return;
+
 		const iframeDoc = document.getElementById('BrewRenderer').contentDocument;
 		let anchor = iframeDoc.querySelector(hash);
 

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -1,44 +1,62 @@
 require('./notificationPopup.less');
-const React = require('react');
+import React, { useEffect, useState } from 'react';
-const _     = require('lodash');
+const request = require('../../utils/request-middleware.js');
 
 import Dialog from '../../../components/dialog.jsx';
 
-const DISMISS_KEY = 'dismiss_notification01-10-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 [dissmissKeyList, setDismissKeyList] = useState([]);
+	const [error, setError] = useState(null);
+
+	useEffect(()=>{
+		getNotifications();
+	}, []);
+
+	const getNotifications = async ()=>{
+		setError(null);
+		try {
+			const res = await request.get('/admin/notification/all');
+			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);
+		setDismissKeyList(filteredNotifications.map((notif)=>notif.dismissKey));
+	};
+
+	const renderNotificationsList = ()=>{
+		if(error) return <div className='error'>{error}</div>;
+
+		return notifications.map((notification)=>(
+			<li key={notification.dismissKey} >
+				<em>{notification.title}</em><br />
+				<p dangerouslySetInnerHTML={{ __html: notification.text }}></p>
+			</li>
+		));
+	};
+
+	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'>
+			{renderNotificationsList()}
-				<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>
 		</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;
+			}
 		}
 	}
 }

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -150,6 +150,7 @@ const Snippetbar = createClass({
 
 	renderSnippetGroups : function(){
 		const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view);
+		if(snippets.length === 0) return null;
 
 		return <div className='snippets'>
 			{_.map(snippets, (snippetGroup)=>{
@@ -206,21 +207,16 @@ const Snippetbar = createClass({
 	renderEditorButtons : function(){
 		if(!this.props.showEditButtons) return;
 
-		let foldButtons;
+		const foldButtons = <>
-		if(this.props.view == 'text'){
+			<div className={`editorTool foldAll ${this.props.view !== 'meta' && this.props.foldCode ? 'active' : ''}`}
-			foldButtons =
+				onClick={this.props.foldCode} >
-				<>
+				<i className='fas fa-compress-alt' />
-					<div className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
+			</div>
-						onClick={this.props.foldCode} >
+			<div className={`editorTool unfoldAll ${this.props.view !== 'meta' && this.props.unfoldCode ? 'active' : ''}`}
-						<i className='fas fa-compress-alt' />
+				onClick={this.props.unfoldCode} >
-					</div>
+				<i className='fas fa-expand-alt' />
-					<div className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
+			</div>
-						onClick={this.props.unfoldCode} >
+		</>;
-						<i className='fas fa-expand-alt' />
-					</div>
-				</>;
-
-		}
 
 		return <div className='editors'>
 			<div className='historyTools'>

client/homebrew/editor/snippetbar/snippetbar.less

@@ -7,19 +7,23 @@
 	display          : flex;
 	flex-wrap        : wrap-reverse;
 	justify-content  : space-between;
-	min-width        : 331px;
 	height           : auto;
 	color            : black;
 	background-color : #DDDDDD;
 
 	.snippets {
 		display         : flex;
-		justify-content : space-evenly;
+		justify-content : flex-start;
+		min-width       : 327.58px;
 	}
 
 	.editors {
 		display         : flex;
-		justify-content : space-between;
+		justify-content : flex-end;
+		min-width       : 225px;
+
+		&:only-child { margin-left : auto; }
+
 		>div {
 			display         : flex;
 			flex            : 1;
@@ -59,12 +63,14 @@
 				&.foldAll {
 					.tooltipLeft('Fold All');
 					font-size : 0.75em;
-					color     : inherit;
+					color     : grey;
+					&.active { color : inherit; }
 				}
 				&.unfoldAll {
 					.tooltipLeft('Unfold All');
 					font-size : 0.75em;
-					color     : inherit;
+					color     : grey;
+					&.active { color : inherit; }
 				}
 				&.history {
 					.tooltipLeft('History');
@@ -218,9 +224,18 @@
 		}
 	}
 }
-
 @container editor (width < 553px) {
-	.editors,.snippets { flex : 1; }
+	.snippetBar {
-	.editors { border-bottom : 1px solid;}
+		.editors { 
-	.snippetBar .editors > div.history > .dropdown { right : unset; }
+			flex            : 1;
+			justify-content : space-between;
+			border-bottom   : 1px solid;
+		}
+		.snippets { 
+			flex            : 1;
+			justify-content : space-evenly; 
+		}
+		.editors > div.history > .dropdown { right : unset; }
+	}
 }
+

package.json

@@ -86,10 +86,10 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.25.8",
+    "@babel/core": "^7.25.9",
-    "@babel/plugin-transform-runtime": "^7.25.7",
+    "@babel/plugin-transform-runtime": "^7.25.9",
-    "@babel/preset-env": "^7.25.8",
+    "@babel/preset-env": "^7.25.9",
-    "@babel/preset-react": "^7.25.7",
+    "@babel/preset-react": "^7.25.9",
     "@googleapis/drive": "^8.14.0",
     "body-parser": "^1.20.2",
     "classnames": "^2.5.1",
@@ -130,7 +130,7 @@
     "@stylistic/stylelint-plugin": "^3.1.1",
     "eslint": "^9.13.0",
     "eslint-plugin-jest": "^28.8.3",
-    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react": "^7.37.2",
     "globals": "^15.11.0",
     "jest": "^29.7.0",
     "jest-expect-message": "^1.1.3",

server/admin.api.js

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