diff --git a/client/components/dialog.jsx b/client/components/dialog.jsx new file mode 100644 index 000000000..9e17be2f9 --- /dev/null +++ b/client/components/dialog.jsx @@ -0,0 +1,48 @@ +// Modal as a separate component +const React = require('react'); +const { useState, useRef, useEffect } = React; + +function Modal({ dismissKey, blocking, children, ...rest }) { + const ref = useRef(); + + const [open, setOpen] = useState(false); + + useEffect(()=>{ + if(!window || !dismissKey) return; + if(!localStorage.getItem(dismissKey)){ + setOpen(true); + } + }, []); + + useEffect(()=>{ + if(blocking) { + modal ? ref.current?.showModal() : ref.current?.show(); + } else { + ref.current?.close(); + } + }, [blocking]); + + const dismiss = function(){ + localStorage.setItem(dismissKey, true); + setOpen(false); + }; + + if(!open) return; + return ( + dismiss()} + {...rest} + > + + {children} + + ); +} + +export default Modal; \ No newline at end of file diff --git a/client/components/notificationPopup/notificationPopup.jsx b/client/components/notificationPopup/notificationPopup.jsx deleted file mode 100644 index 6872d6c3e..000000000 --- a/client/components/notificationPopup/notificationPopup.jsx +++ /dev/null @@ -1,80 +0,0 @@ -require('./notificationPopup.less'); -const React = require('react'); -const createClass = require('create-react-class'); -const _ = require('lodash'); - -const DISMISS_KEY = 'dismiss_notification12-04-23'; - -const NotificationPopup = createClass({ - displayName : 'NotificationPopup', - getInitialState : function() { - return { - notifications : {} - }; - }, - componentDidMount : function() { - this.checkNotifications(); - window.addEventListener('resize', this.checkNotifications); - }, - componentWillUnmount : function() { - window.removeEventListener('resize', this.checkNotifications); - }, - notifications : { - psa : function(){ - return ( - <> -
  • - Don't store IMAGES in Google Drive
    - Google Drive is not an image service, and will block images from being used - in brews if they get more views than expected. Google has confirmed they won't fix - this, so we recommend you look for another image hosting service such as imgur, ImgBB or Google Photos. -
    • - -
  • - Don't delete your Homebrewery folder on Google Drive!
    - 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, do not delete it! - We cannot help you recover files that you have deleted from your own - Google Drive. -
    • - -
  • - Protect your work!
    - 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!  - - See the FAQ - to learn how to avoid losing your work! -
    • - - ); - } - }, - checkNotifications : function(){ - const hideDismiss = localStorage.getItem(DISMISS_KEY); - if(hideDismiss) return this.setState({ notifications: {} }); - - this.setState({ - notifications : _.mapValues(this.notifications, (fn)=>{ return fn(); }) //Convert notification functions into their return text value - }); - }, - dismiss : function(){ - localStorage.setItem(DISMISS_KEY, true); - this.checkNotifications(); - }, - render : function(){ - if(_.isEmpty(this.state.notifications)) return null; - - return
    - - -
    -

    Notice

    - This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind: -
    -
      {_.values(this.state.notifications)}
    -
    ; - } -}); - -module.exports = NotificationPopup; diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 9bfd17aec..8168f9933 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -10,7 +10,7 @@ const ErrorBar = require('./errorBar/errorBar.jsx'); //TODO: move to the brew renderer const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx'); -const NotificationPopup = require('../../../client/components/notificationPopup/notificationPopup.jsx'); +const NotificationPopup = require('./notificationPopup/notificationPopup.jsx'); const Frame = require('react-frame-component').default; const dedent = require('dedent-tabs').default; const { printCurrentBrew } = require('../../../shared/helpers.js'); @@ -203,6 +203,12 @@ const BrewRenderer = (props)=>{ : null} + +
    + + +
    + {/*render in iFrame so broken code doesn't crash the site.*/} { tabIndex={-1} style={{ height: state.height }}> - -
    - - -
    {baseThemePath && diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx new file mode 100644 index 000000000..1b6a60093 --- /dev/null +++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx @@ -0,0 +1,43 @@ +require('./notificationPopup.less'); +const React = require('react'); +const _ = require('lodash'); + +import Dialog from '../../../components/dialog.jsx'; + +const DISMISS_KEY = 'dismiss_notification12-04-23'; + +const NotificationPopup = (props)=>{ + return +
    +

    Notice

    + This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind: +
    +
      +
    • + Don't store IMAGES in Google Drive
      + Google Drive is not an image service, and will block images from being used + in brews if they get more views than expected. Google has confirmed they won't fix + this, so we recommend you look for another image hosting service such as imgur, ImgBB or Google Photos. +
      • + +
    • + Don't delete your Homebrewery folder on Google Drive!
      + 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, do not delete it! + We cannot help you recover files that you have deleted from your own + Google Drive. +
      • + +
    • + Protect your work!
      + 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!  + + See the FAQ + to learn how to avoid losing your work! +
      • +
    +     ; +}; + +module.exports = NotificationPopup; diff --git a/client/components/notificationPopup/notificationPopup.less b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less similarity index 96% rename from client/components/notificationPopup/notificationPopup.less rename to client/homebrew/brewRenderer/notificationPopup/notificationPopup.less index dfd3c6c63..2fde67b83 100644 --- a/client/components/notificationPopup/notificationPopup.less +++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less @@ -15,6 +15,7 @@ padding-left : 25px; background-color : @blue; color : white; + border : none; a{ color : #e0e5c1; font-weight : 800; @@ -26,7 +27,7 @@ opacity : 0.8; font-size : 2.5em; } - i.dismiss{ + .dismiss{ position : absolute; top : 10px; right : 10px;