Показать уведомление на основе данных подписки - PullRequest
Новая
       18

Показать уведомление на основе данных подписки

0 голосов
/ 10 апреля 2020

Я пытаюсь изменить код из примера Material UI (https://material-ui.com/components/snackbars/#consecutive -snackbars ), чтобы отображать последовательные закусочные. Я хотел бы открыть снэк-бар при получении новых данных подписки (с помощью apollo-клиента) вместо того, чтобы открывать снэк-бар нажатием кнопки.

Проблема в том, что иногда появляется снэк-бар, а иногда нет. Может ли кто-нибудь помочь мне понять, что не так с моим кодом? 

import React from 'react';
import Button from '@material-ui/core/Button';
import Snackbar from '@material-ui/core/Snackbar';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import {useSubscription} from "@apollo/react-hooks";

export interface SnackbarMessage {
  message: string;
  key: number;
}

export interface State {
  open: boolean;
  messageInfo?: SnackbarMessage;
}

export default function ConsecutiveSnackbars() {
  const queueRef = React.useRef<SnackbarMessage[]>([]);
  const [open, setOpen] = React.useState(false);
  const [messageInfo, setMessageInfo] = React.useState<SnackbarMessage | undefined>(undefined);
  useSubscription(
    SUBSCRIPTION_QUERY,
    {
        onSubscriptionData: ({subscriptionData: {data}}) => {
            handleClick('Subscription data arrived')
        }
    }
  );

  const processQueue = () => {
    if (queueRef.current.length > 0) {
      setMessageInfo(queueRef.current.shift());
      setOpen(true);
    }
  };

  const handleClick = (message: string) => {
    queueRef.current.push({
      message,
      key: new Date().getTime(),
    });

    if (open) {
      // immediately begin dismissing current message
      // to start showing new one
      setOpen(false);
    } else {
      processQueue();
    }
  };

  const handleClose = (event: React.SyntheticEvent | MouseEvent, reason?: string) => {
    if (reason === 'clickaway') {
      return;
    }
    setOpen(false);
  };

  const handleExited = () => {
    processQueue();
  };

  return (
    <div>
      <Button onClick={() => handleClick('Message A')}>Show message A</Button>
      <Button onClick={() => handleClick('Message B')}>Show message B</Button>
      <Snackbar
        key={messageInfo ? messageInfo.key : undefined}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        open={open}
        autoHideDuration={6000}
        onClose={handleClose}
        onExited={handleExited}
        message={messageInfo ? messageInfo.message : undefined}
        action={
          <React.Fragment>
            <Button color="secondary" size="small" onClick={handleClose}>
              UNDO
            </Button>
            <IconButton
              aria-label="close"
              color="inherit"
              onClick={handleClose}
            >
              <CloseIcon />
            </IconButton>
          </React.Fragment>
        }
      />
    </div>
  );
}
...