More in depth explanation :

So when a user logs in the application from another browser except Chrome i have to hide or show an alert Saying that this application works best in Chrome , and this alert has 2 options , "Don't show me again" and "Ok" which is a button. I've implemented this behaviour to show the div when the user is not in Chrome Browser. So how can i detect if the user is logging in for the first time . Prob is if they click "Don't show me again" which is a checkbox i should never show this div ever . But if they click "Ok" button the next time they log in this should still show. This is getting me very confused . I saw some stuff you can do with localstorage but i'm not sure how to do it. Maybe i can store a value on React-redux , but i'm not a specialist on redux aswell and this project files are super big. Need some help.

import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import styled, { ThemeProvider } from 'styled-components';
import { useActions } from '../../Pages/Components/Widget/helpers';
import { ReactComponent as CyabraChrome } from '../../assets/utils/icons/cyabrachrome.svg';
import Checkbox  from '../../facelift/Checkbox/Checkbox'

const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

const PageWithSidebar = () => {
  const [checked, setChecked] = useState(false)
  const [ isOkClicked, setIsOkClicked ] = useState(false)

  const actions = useActions({ list });

  useEffect(() => {
    actions.list();
    const getFirstTimeLogin = async () => {
      const firstTimeLogin = await window.localStorage.getItem('addscan-tooltip-helper')
      if(firstTimeLogin == '0') {
        setShowChromeAlert(true)
      }
    }
    getFirstTimeLogin();
  }, []);

  const handleCheckboxClick = () => {
    setChecked(true)
    setShowChromeAlert(false);
  }

  const handleOkClick = () => {
    setIsOkClicked(true)
  }

  return (
      {!isChrome && showChromeAlert && 
      <AlertDiv style={{ display: isOkClicked ? 'none': ''}}>
        <CyabraChrome />
        <RightDiv>
          <RightDivText>Cyabra Works Better With Chrome </RightDivText>
          <RightDivInner>
              <Checkbox
                checked={checked}
                text="Don't show me again"
                onClick={handleCheckboxClick}
              />
              <ButtonRightDiv onClick={handleOkClick}>
                <RightDivText>Ok</RightDivText>
              </ButtonRightDiv>
          </RightDivInner>
        </RightDiv>  
      </AlertDiv>}
  );
};

const mapStateToProps = (state) => ({});

const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(PageWithSidebar);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

CodePudding user response：

If you want to take the localStorage aproach, at the end of the code set a local storage item to 1, such as:

localStorage.setItem('loggedIn', '1');

then at the beginning of the code use an if statement such as:

   if(localStorage.getItem('loggedIn') == 1) {
alert('This works best in Chrome')
}

CodePudding user response：

It is impossible to use only the Front area. Use the DB to accurately identify whether the user is exposed to the Alert.