0

I currently have a modal that is based on three conditions being met that change a useState boolean through a useEffect hook, like so:

const [displayTraits, setDisplayTraits] = useState(false)

        useEffect(() => {
            const result = Object.keys(daily).filter(key => keysToCheck.includes(key)).every(key => daily[key].counter > 0);
            setDisplayTraits(result);
          }, [daily]);

and then I show the modal like so:

<Modal isVisible={ displayTraits} //maybe call isFrontDoorOpen?
                onBackdropPress={() => {
                    setDisplayTraits(false);
                }}
                onBackButtonPress={() => {
                    setDisplayTraits(false);
                }}
            >

Essentially, I think the best idea would be for the useEffect function to be ran only once per day, so that the popup only occurs once per day.

Also, this modal currently shows up on every single page of my app and I just would like it to show on the page that I implemented it. Also, It shows up everytime the app refreshes, is there a way to show it only once per day? Thank you.

guitarman
  • 165
  • 7

1 Answers1

1

Just set a cookie, that will expire in a day. Make a check for that cookie everytime your component is mounted, if it is not present show the popup else just ignore it.

Just modify your useEffect logic like this,

useEffect(() => {
    // For your usecase we only need to check the existence of cookie
    if (!document.cookie.indexOf('isModalShownForToday=')) {
        // Set cookie for max-age of 86400 seconds (24hrs)
        var expires = (new Date(Date.now() + 86400 * 1000)).toUTCString();
        document.cookie = "isModalShownForToday=true; expires=" + expires + 86400) + ";path=/;"
    const result = Object.keys(daily).filter(key => keysToCheck.includes(key)).every(key => daily[key].counter > 0);
    setDisplayTraits(result);
    }
}, []);

PS: I have not tested it myself, but this should work.

Note: The above solution will only work as long as the user doesn't clear out the cookies. Also the cookies shouldn't be disabled in the browser, for this to work

Utkarsh Dixit
  • 4,267
  • 3
  • 15
  • 38
  • What happens if the user clears their cookies and cache or if they have cookies blocked in their browser settings? Would be better to store a value in a database. – Ryan Wilson Aug 26 '21 at 20:33
  • Any type of storage in user browser can be cleared by user, as almost all browsers are very serious about protecting user's privacy. – Utkarsh Dixit Aug 26 '21 at 20:35
  • You got it, so your solution is prone to failure. – Ryan Wilson Aug 26 '21 at 20:36
  • Not really, I wouldn't call this as failure. It really depends on your use-case tbh, think about this way, if the user is going through the effort of clearing the cookies manually, he is already signing off for seeing that modal again. – Utkarsh Dixit Aug 26 '21 at 20:38
  • Similarly If you go to gmail.com and clear all the cookies, you will be automatically logged out and there's nothing gmail could do to stop this. This is what the user wants when they decide to clear the cookies. – Utkarsh Dixit Aug 26 '21 at 20:39
  • Being logged off is one thing, being shown an annoying popup is another. Most average users won't understand that clearing their cookies or cache is going to continue to cause a popup (modal). In any case, if the user has cookies disabled in their browser settings, this will never work. – Ryan Wilson Aug 26 '21 at 20:40
  • Even if you decide to save this data in. your server database, you would need an identifier to identify each user. It's easy if there is authentication in your app, but it can get really complex if you want it to work for non-authenticates users too – Utkarsh Dixit Aug 26 '21 at 20:41
  • There is almost always a way to identify a user, via session, or ip address etc. [detecting-a-unique-anonymous-user](https://stackoverflow.com/questions/3940179/detecting-a-unique-anonymous-user) – Ryan Wilson Aug 26 '21 at 20:42
  • @RyanWilson That's true, but users don't generally clear cookies on whim. You can save it in localStorage but then again if the user decides to delete them, you are out of option. – Utkarsh Dixit Aug 26 '21 at 20:42
  • @RyanWilson Yeah there is, and you can consider using them but they are still not 100% accurate. Weather you want to use them or not depends, on your use-case. If it's just to make sure that popup is only shown once a day, I don't think its worth it to go to this length to identify the user. – Utkarsh Dixit Aug 26 '21 at 20:45
  • If anything, the OP may learn something in the process. – Ryan Wilson Aug 26 '21 at 20:45
  • @RyanWilson Hmm, you are right this is one very interesting and informative topic for me but I really don't want to write a long answer this late in the night. But I have updated my answer to highlight what we have discussed in the comments – Utkarsh Dixit Aug 26 '21 at 20:53