J'essaie de créer un composant de réaction pour afficher une notification d'utilisation. Le truc c'est que ça ne fonctionne pas correctement... La notification est censée apparaître lorsqu'un utilisateur se connecte avec un email avec un mauvais fournisseur

Ce que je fais, c'est que je vérifie le courrier électronique de l'utilisateur après sa connexion si le courrier ne contient pas le bon fournisseur, je le déconnecte.

Ce qui se passe, c'est que la notification apparaît et disparaît rapidement après la déconnexion de l'utilisateur bien que j'aie fait un long intervalle pour cela.

J'ai essayé d'expérimenter avec l'interface utilisateur matérielle, le framework d'interface utilisateur réactif. Rien ne fonctionne pour l'instant

Navbar.js

import React, { Component } from "react";
import withFirebaseAuth from "react-with-firebase-auth";
import * as firebase from "firebase/app";
import firebaseConfig from "../../firebase.config";
import "firebase/auth";
// Material UI
import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import AccountCircle from "@material-ui/icons/AccountCircle";
import Tooltip from "@material-ui/core/Tooltip";
import Notify from "../notification/notification"


const firebaseApp = firebase.initializeApp(firebaseConfig);

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  menuButton: {
    marginRight: theme.spacing(2)
  },
  title: {
    flexGrow: 1
  }
}));

const filler = () => {console.log(' ')}

function HomeNav(props) {
  const { user, signOut, signInWithGoogle } = props;
  const classes = useStyles();
  const userMail = (user)?user.email.includes("@hijrah.org"):'';
  let notify = false;
  if(user && !userMail){
    signOut();
    notify = true;
  }

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            aria-label="menu"
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            News
          </Typography>      
          {user? (
            <Tooltip title={user.displayName}>
              <IconButton
                edge="end"
                aria-label="account of current user"
                aria-haspopup="true"
                onClick={signOut}
                color="inherit"
                >
                <AccountCircle />
              </IconButton>
            </Tooltip>
          ) : (   
            <Button color="inherit" onClick={signInWithGoogle}>
                  Login
            </Button>
          )}
        </Toolbar>
      </AppBar>
      <React.Fragment>
        {/*this is the part where i try to display notification on*/}
        {(notify)? <Notify /> : <span></span>}
      </React.Fragment>
    </div>
  );
}

class Nav extends Component {
  render() {
    return <HomeNav {...this.props} />;
  }
}

const firebaseAppAuth = firebaseApp.auth();
const providers = {
  googleProvider: new firebase.auth.GoogleAuthProvider()
};
providers.googleProvider.setCustomParameters({hd:"hijrah.org"});

export default withFirebaseAuth({
  providers,
  firebaseAppAuth
})(Nav);

Mon composant de notification notify.js

import React from "react";
import PropTypes from "prop-types";
import clsx from "clsx";
import CheckCircleIcon from "@material-ui/icons/CheckCircle";
import ErrorIcon from "@material-ui/icons/Error";
import InfoIcon from "@material-ui/icons/Info";
import CloseIcon from "@material-ui/icons/Close";
import { amber, green } from "@material-ui/core/colors";
import IconButton from "@material-ui/core/IconButton";
import Snackbar from "@material-ui/core/Snackbar";
import SnackbarContent from "@material-ui/core/SnackbarContent";
import WarningIcon from "@material-ui/icons/Warning";
import { makeStyles } from "@material-ui/core/styles";

const variantIcon = {
  success: CheckCircleIcon,
  warning: WarningIcon,
  error: ErrorIcon,
  info: InfoIcon
};

const useStyles1 = makeStyles(theme => ({
  success: {
    backgroundColor: green[600]
  },
  error: {
    backgroundColor: theme.palette.error.dark
  },
  info: {
    backgroundColor: theme.palette.primary.main
  },
  warning: {
    backgroundColor: amber[700]
  },
  icon: {
    fontSize: 20
  },
  iconVariant: {
    opacity: 0.9,
    marginRight: theme.spacing(1)
  },
  message: {
    display: "flex",
    alignItems: "center"
  }
}));

function MySnackbarContentWrapper(props) {
  const classes = useStyles1();
  const { className, message, onClose, variant, ...other } = props;
  const Icon = variantIcon[variant];

  return (
    <SnackbarContent
      className={clsx(classes[variant], className)}
      aria-describedby="client-snackbar"
      message={
        <span id="client-snackbar" className={classes.message}>
          <Icon className={clsx(classes.icon, classes.iconVariant)} />
          {message}
        </span>
      }
      action={[
        <IconButton
          key="close"
          aria-label="close"
          color="inherit"
          onClick={onClose}
        >
          <CloseIcon className={classes.icon} />
        </IconButton>
      ]}
      {...other}
    />
  );
}

MySnackbarContentWrapper.propTypes = {
  className: PropTypes.string,
  message: PropTypes.string,
  onClose: PropTypes.func,
  variant: PropTypes.oneOf(["error", "info", "success", "warning"]).isRequired
};

export default function CustomizedSnackbars() {
  const [open, setOpen] = React.useState(true);

  const handleClose = (event, reason) => {
    if (reason === "clickaway") {
      return;
    }

    setOpen(false);
  };

  return (
    <div>
      <Snackbar
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left"
        }}
        open={open}
        autoHideDuration={60000}
        onClose={handleClose}
      >
        <MySnackbarContentWrapper
          onClose={handleClose}
          variant="warning"
          message="Please login with a @hijrah.org mail"
        />

      </Snackbar>
    </div>
  );
}

Je m'attends à afficher le message d'erreur après la déconnexion de l'utilisateur et à ce qu'il reste pendant 5 secondes environ.

1
Ahmed Gaafer 10 oct. 2019 à 22:01

1 réponse

Meilleure réponse

Je soupçonne ce qui se passe lorsque vous vous déconnectez de l'utilisateur, le composant Nav n'est plus rendu et donc le composant Notify car il s'agit d'un enfant de Nav (Nav > > HomeNav >> Notifier). Parce qu'il n'est plus rendu, le message disparaît.

Si tel est le cas, vous devez déplacer le Notify vers un niveau supérieur dans votre application afin qu'il s'affiche, que l'utilisateur soit connecté ou non.

1
mahi-man 10 oct. 2019 à 20:57