Haunted: useSubscription

import { useSubscription, useState, component, html } from '@apollo-elements/hybrids';

import { UserAddedSubscription } from './UserAdded.subscription.graphql.js';

import '@material/mwc-snackbar';

function UserAdded() {
  const [last, setLast] = useState('');

  const [opened, setOpened] = useState(false);

  const { data } = useSubscription(UserAddedSubscription, {
    onSubscriptionData({ subscriptionData }) {
      setLast(subscriptionData.data.userAdded.name);
    }
  });

  return html`
    <link rel="stylesheet" href="user-added.css">
    <mwc-snackbar
        labeltext="${data?.name} Joined!"
        open="${opened}"
        onMDCSnackbar:closed="${() => setOpened(false)}"
        onMDCSnackbar:opened="${() => setOpened(true)}"
    ></mwc-snackbar>
  `,
});

customElements.define('user-added', components(UserAdded));