react-toastify#Slide JavaScript Examples

App = () => (
  <Suspense fallback={<Loader />}>
    <Fragment>
      <Routes />
      <Toaster
        {...{
          autoClose: 5000,
          position: toast.POSITION.TOP_CENTER,
          newestOnTop: true,
          closeOnClick: true,
          pauseOnVisibilityChange: true,
          draggable: true,
          className: 'solid-toaster-container',
          toastClassName: 'solid-toaster',
          bodyClassName: 'solid-toaster-body',
          transition: Slide
        }}
      />
    </Fragment>
  </Suspense>
)

export function showMsg(message, isError = false, isWarning = false) {
    let status = 'default'
    if (isError) status = 'error'
    if (isWarning) status = 'warning'
    toast(message, {
        transition: Slide,
        closeButton: true,
        autoClose: 5000,
        position: 'top-right',
        type: status,
    });
}

// This page has no blocking data requirements
// it'll be rendered as static HTML at build time
export function Layout({ children }) {
  return <>
    <Meta
      title='Pod Reference Implementation'
    />

    <ToastContainer
      className='pool-toast'
      position='top-center'
      autoClose={6000}
      transition={Slide}
    />
    
    <OnboardWrapper>
      <div className='container mx-auto py-4'>
        <ConnectWallet />
      </div>

      {children}
    </OnboardWrapper>
  </>
}

App = () => (
  <Suspense fallback={<Loader />}>
    <ThemeProvider theme={theme}>
      <Fragment>
        <Routes />
        <Toaster
          {...{
            autoClose: 3000,
            position: toast.POSITION.TOP_CENTER,
            newestOnTop: true,
            closeOnClick: true,
            pauseOnVisibilityChange: true,
            draggable: true,
            className: 'solid-toaster-container',
            toastClassName: 'solid-toaster',
            bodyClassName: 'solid-toaster-body',
            transition: Slide
          }}
        />
      </Fragment>
    </ThemeProvider>
  </Suspense>
)

Layout = (props) => {
  const { children } = props

  return (
    <>
      <Meta />

      <NotificationBanners />

      <div
        className='flex flex-col w-full page-bg'
        style={{
          minHeight: '100vh'
        }}
      >
        <div className='pool-container  flex flex-grow relative z-30 h-full page fadeIn animated'>
          <div className='flex flex-col flex-grow'>
            <div id='top' className='main-nav relative spinner-hidden z-10 pt-2'>
              <Nav />
            </div>
            <div
              className='relative flex justify-center flex-grow h-full z-10 text-white'
              style={{
                flex: 1
              }}
            >
              <div className='px-4 sm:px-8 my-4 w-100 max-w-screen-sm flex flex-col flex-grow'>
                {React.cloneElement(children, {
                  ...props
                })}
              </div>
            </div>

            <div className='main-footer z-10'>
              <Footer />
            </div>
          </div>
        </div>
      </div>

      <ToastContainer
        className='pool-toast'
        position='top-center'
        autoClose={6000}
        transition={Slide}
      />
    </>
  )
}

Layout = (props) => {
  const { children } = props

  return (
    <>
      <Meta />

      <NotificationBanners />

      <div
        className='flex flex-col'
        style={{
          minHeight: '100vh'
        }}
      >
        <div className='pool-container flex flex-grow relative z-30 h-full page fadeIn animated'>
          <div className='flex flex-col flex-grow'>
            <div id='top' className='main-nav relative z-20 pt-2 sm:px-0 lg:px-12'>
              <Nav />
            </div>

            <div
              className='relative flex flex-col flex-grow h-full z-10 px-4 sm:px-0 lg:px-12 text-white pb-48'
              style={{
                flex: 1
              }}
            >
              {React.cloneElement(children, {
                ...props
              })}
            </div>

            <div className='main-footer z-10'>
              <Footer />
            </div>
          </div>
        </div>
      </div>

      <ToastContainer
        className='pool-toast'
        position='top-center'
        autoClose={6000}
        transition={Slide}
      />
    </>
  )
}

PrivacyCheck = ({ setIsPrivate, isPrivate, title, toastText }) => {
  return (
    <>
      <GlobalStyle />
      <Divider>
        <Flex>
          <PublicCheckbox
            id="checkbox"
            type="checkbox"
            onChange={() => setIsPrivate((bool) => !bool)}
            checked={isPrivate}
          />
          <PrivateLabel htmlFor="checkbox">
            Make {title} private{" "}
            <IconWrap
              type="button"
              onClick={() =>
                toast.info(
                  toastText,
                  {
                    toastId: "private-toast",
                    position: toast.POSITION.TOP_CENTER,
                  }
                )
              }
            >
              <HelpIcon />
            </IconWrap>
          </PrivateLabel>
        </Flex>
      </Divider>
      <ToastContainer
        limit={1}
        autoClose={5000}
        hideProgressBar
        closeOnClick
        transition={Slide}
        pauseOnFocusLoss={false}
      />
    </>
  )
}

Code = ({data: {primary}}) => {
  const {theme, colorMode} = useThemeUI()
  const [copied, setCopied] = useState(false)

  /**
   * Toast
   * language of the block copied to clipboard
   * @param {String} lang
   */
  const copyText = (lang) => {
    // remove older toast and copied state
    toast.dismiss()
    setCopied(false)

    // new toast and copied state
    toast.info(`${lang.toUpperCase()} block copied to clipboard`, {
      onOpen: () => {
        setCopied(true)
      },
      onClose: () => {
        setCopied(false)
      },
    })
  }

  const Button = styled.button`
    color: ${theme.colors.text};
    background: ${theme.colors.shade2};
    padding: 0.25rem;
    border: none;
    font-family: ${theme.fonts.body};
    letter-spacing: 1px;
    cursor: pointer;
    &:hover {
      color: ${theme.colors.accent};
      background: ${theme.colors.text};
    }
  `

  return (
    <Fragment>
      <Highlight
        {...defaultProps}
        theme={colorMode === 'light' ? light : dark}
        code={RichText.asText(primary.code)}
        language={primary.lang}>
        {({className, style, tokens, getLineProps, getTokenProps}) => (
          <pre
            className={className}
            style={{
              ...style,
              backgroundColor: theme.colors.code,
              marginLeft: primary.type === 'List' ? '2.5rem' : null,
              borderWidth: '1px',
              borderStyle: 'solid',
              borderColor: theme.colors.shade2,
              borderRadius: '0.25rem',
            }}>
            <div
              className={className}
              style={{
                ...style,
                margin: '-0.25rem auto 0.5rem auto',
                textAlign: 'right',
                color: theme.colors.accent,
                backgroundColor: theme.colors.code,
              }}>
              <span>{primary.lang.toUpperCase()}</span>
              <CopyToClipboard
                text={primary.code.text}
                onCopy={() => copyText(primary.lang)}
                style={{margin: '0 0.5rem'}}>
                {copied ? <span>Copied</span> : <Button>Copy</Button>}
              </CopyToClipboard>
            </div>
            {tokens.map((line, i) => (
              <div {...getLineProps({line, key: i})}>
                {line.map((token, key) => (
                  <span {...getTokenProps({token, key})} />
                ))}
              </div>
            ))}
          </pre>
        )}
      </Highlight>
      <ToastContainer
        autoClose={2500}
        closeOnClick
        newestOnTop
        pauseOnHover
        transition={Slide}
        draggable
        role='alert'
      />
    </Fragment>
  )
}

App = () => {
    const dispatch = useDispatch();

    const {
        selectedLanguage,
        web3Instance,
        chainId,
        selectedAccount: selectedWeb3Account,
        needsRegistration,
        authStatusLoading,
        loopringAccount,
        loopringWallet,
        supportedTokens,
        supportedMarkets,
    } = useSelector((state) => ({
        selectedLanguage: state.i18n.selectedLanguage,
        web3Instance: state.web3.instance,
        chainId: state.web3.chainId,
        selectedAccount: state.web3.selectedAccount,
        needsRegistration: state.loopring.authStatus.needsRegistration,
        authStatusLoading: !!state.loopring.authStatus.loadings,
        loopringAccount: state.loopring.account,
        loopringWallet: state.loopring.wallet,
        supportedTokens: state.loopring.supportedTokens.data,
        supportedMarkets: state.loopring.supportedMarkets.data,
    }));

    const [lightTheme, setLightTheme] = useState(true);
    const [drawerOpen, setDrawerOpen] = useState(false);

    useEffect(() => {
        dispatch(getSupportedMarkets());
    }, [dispatch]);

    useEffect(() => {
        if (supportedMarkets && supportedMarkets.length > 0) {
            dispatch(getSupportedTokens(supportedMarkets));
        }
    }, [dispatch, supportedMarkets]);

    useEffect(() => {
        if (
            loopringAccount &&
            loopringWallet &&
            supportedTokens &&
            supportedTokens.length > 0
        ) {
            dispatch(
                getUserBalances(
                    loopringAccount,
                    loopringWallet,
                    supportedTokens
                )
            );
        }
    }, [dispatch, loopringAccount, loopringWallet, supportedTokens]);

    // setting up local storage-saved theme
    useEffect(() => {
        const cachedTheme =
            localStorage.getItem("loopring-swap-theme") || "light";
        const lightTheme = cachedTheme === "light";
        setLightTheme(lightTheme);
        web3ModalOptions.theme = lightTheme
            ? lightWeb3ModalTheme
            : darkWeb3ModalTheme;
    }, [dispatch]);

    // setting up local storage-saved language
    useEffect(() => {
        const cachedLanguage = localStorage.getItem("loopring-swap-language");
        if (cachedLanguage && cachedLanguage in localizedMessages) {
            dispatch(switchLanguage(cachedLanguage));
        }
    }, [dispatch]);

    useEffect(() => {
        if (selectedWeb3Account) {
            dispatch(getAuthStatus(selectedWeb3Account));
        }
    }, [selectedWeb3Account, dispatch]);

    const handleDrawerOpenClick = useCallback(() => {
        setDrawerOpen(true);
    }, []);

    const handleDrawerClose = useCallback(() => {
        setDrawerOpen(false);
    }, []);

    const handleConnectWallet = useCallback(() => {
        dispatch(initializeWeb3());
    }, [dispatch]);

    const handleLogin = useCallback(() => {
        dispatch(login(web3Instance, selectedWeb3Account));
    }, [dispatch, selectedWeb3Account, web3Instance]);

    const handleRegister = useCallback(() => {
        dispatch(register(web3Instance, selectedWeb3Account));
    }, [dispatch, selectedWeb3Account, web3Instance]);

    const handleLogout = useCallback(() => {
        dispatch(logout());
    }, [dispatch]);

    const handleOverlayClick = useCallback(() => {
        setDrawerOpen(false);
    }, []);

    const handleThemeChange = useCallback(() => {
        const newLightTheme = !lightTheme;
        const textTheme = newLightTheme ? "light" : "dark";
        localStorage.setItem("loopring-swap-theme", textTheme);
        web3ModalOptions.theme = newLightTheme
            ? lightWeb3ModalTheme
            : darkWeb3ModalTheme;
        setLightTheme(newLightTheme);
        selectedTheme = newLightTheme ? light : dark;
    }, [lightTheme]);

    const handleSelectedLanguageChange = useCallback(
        (language) => {
            localStorage.setItem("loopring-swap-language", language);
            dispatch(switchLanguage(language));
        },
        [dispatch]
    );

    return (
        <IntlProvider
            locale={selectedLanguage}
            messages={localizedMessages[selectedLanguage]}
        >
            <ThemeProvider theme={lightTheme ? light : dark}>
                <GlobalStyle />
                <Layout onDrawerOpenClick={handleDrawerOpenClick}>
                    <Flex
                        width="100%"
                        height="100%"
                        justifyContent="center"
                        alignItems="center"
                    >
                        <Box maxWidth="420px" p="16px">
                            {!chainId || chainId === CHAIN_ID ? (
                                <Swapper
                                    onConnectWalletClick={handleDrawerOpenClick}
                                />
                            ) : (
                                <InvalidChainId />
                            )}
                        </Box>
                    </Flex>
                </Layout>
                <FullScreenOverlay
                    open={drawerOpen}
                    onClick={handleOverlayClick}
                />
                <Drawer
                    open={drawerOpen}
                    onClose={handleDrawerClose}
                    onConnectWallet={handleConnectWallet}
                    selectedWeb3Account={selectedWeb3Account}
                    onLogin={handleLogin}
                    onRegister={handleRegister}
                    needsRegistration={needsRegistration}
                    loadingAuthStatus={authStatusLoading}
                    onLogout={handleLogout}
                    loggedIn={!!loopringAccount}
                    darkTheme={!lightTheme}
                    onDarkThemeChange={handleThemeChange}
                    selectedLanguage={selectedLanguage}
                    onSelectedLanguageChange={handleSelectedLanguageChange}
                />
                <ToastContainer
                    className="custom-toast-root"
                    toastClassName="custom-toast-container"
                    bodyClassName="custom-toast-body"
                    position="top-right"
                    closeButton={false}
                    transition={Slide}
                    limit={3}
                />
            </ThemeProvider>
        </IntlProvider>
    );
}

EditADeck = ({ title, reactGA }) => {
  const [whiteCard, setWhiteCard] = useState('');
  const [blackCard, setBlackCard] = useState('');
  const [initialDecks, setInitialDecks] = useState([]);
  const [filteredDecks, setFilteredDecks] = useState([]);
  const [deckTable, setDeckTable] = useState([]);
  const [deckExists, setDeckExists] = useState('');
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);
  const [publicDecksInputVal, setPublicDecksInputVal] = useState(false);
  const defaultLocation = useLocation();
  const location = defaultLocation.pathname.replace('/edit-deck', '');

  useEffect(() => {
    // If we haven't chosen a deck and are just hitting the "/edit-deck" page
    if (!location || location === '/') {
      axios.get(`${SERVER_URL}/api/getPublicDecks`).then((res) => {
        console.log(res.data);
        setInitialDecks(res.data);
      });
    } else {
      const secret = queryString.parse(defaultLocation.search).secret;
      async function checkSecret() {
        try {
          // check for the deck secret first
          await axios.post(`${SERVER_URL}/api/getDeckSecret`, {
            secret,
            deckName: location.replace('/', ''),
          });
          // if secret is legit, keep going and get cards from the deck
          axios
            .get(`${SERVER_URL}/api/getCardsFromDeck${location}`)
            .then((res) => {
              if (res.data === 'no result') {
                return setDeckExists('no result');
              }
              if (!secret) {
                return setError(
                  "You don't have permissions to edit this deck."
                );
              }
              if (res.data.includes('Error')) {
                return setError(res.data);
              }
              setDeckTable(res.data);
              setDeckExists('result found');
              // Pop a success toast
              toast.info(
                'Note: Bookmark or save this page. You can only update this deck with this exact link. Only send to people you trust.',
                {
                  toastId: 'copy-link-info',
                  position: toast.POSITION.TOP_CENTER,
                }
              );
            });
        } catch (err) {
          return setError(err.response.data);
        }
      }
      checkSecret();
    }
  }, [location, defaultLocation]);
  return (
    <Page>
      <GlobalStyle />
      <Helmet>
        <title>{title}</title>
      </Helmet>
      <Title location={location} />

      {location && location !== '/' ? (
        <>
          {deckExists === 'result found' ? (
            <>
              <p>
                <em>
                  This deck has {getCardsLength({ type: 'white', deckTable })} and{' '}
                  {getCardsLength({ type: 'black', deckTable })}
                </em>
              </p>

              <Form
                onSubmit={(e) =>
                  addCard({
                    e,
                    setIsLoading,
                    deckTable,
                    type: 'white',
                    text: whiteCard,
                    initialDecks,
                    setFilteredDecks,
                    setDeckTable,
                    location,
                    setError,
                    setWhiteCard,
                    defaultLocation,
                    reactGA,
                  })
                }
              >
                <InputWithLabel
                  type="white"
                  whiteCard={whiteCard}
                  buttonText="ADD WHITE CARD"
                  labelText="Add a White Card"
                  onChange={setWhiteCard}
                  placeholderText="e.g. Spontaneous combustion"
                  isLoading={isLoading}
                />
              </Form>
              {error && error.includes('white') && (
                <ErrorText>{error}</ErrorText>
              )}

              <Form
                onSubmit={(e) =>
                  addCard({
                    e,
                    setIsLoading,
                    deckTable,
                    type: 'black',
                    text: blackCard,
                    initialDecks,
                    setFilteredDecks,
                    setDeckTable,
                    location,
                    setError,
                    setBlackCard,
                    defaultLocation,
                    reactGA,
                  })
                }
              >
                <InputWithLabel
                  type="black"
                  blackCard={blackCard}
                  buttonText="ADD BLACK CARD"
                  labelText="Add a Black Card"
                  onChange={setBlackCard}
                  placeholderText="e.g. Abraham Lincoln once said _______."
                  isLoading={isLoading}
                />
              </Form>
              {error && error.includes('black') && (
                <ErrorText>{error}</ErrorText>
              )}
              <Subtitle>The cards in this deck so far</Subtitle>
              <Block>
                <Table headers={['White Cards']} color="white" isCollapsible>
                  {deckTable &&
                    [...deckTable]
                      .reverse()
                      .filter((card) => card.type === 'white')
                      .map(({ text, type }) => (
                        <tr key={text}>
                          <td>{text}</td>
                          <td style={{ textAlign: 'center', padding: '.5em' }}>
                            <RegularButton onClick={e => deleteCard({
                              e, setIsDeleting,
                              type,
                              text,
                              setDeckTable,
                              location,
                              setError,
                              defaultLocation,
                              reactGA,
                            })} disabled={isDeleting}>
                              <DeleteIcon />
                            </RegularButton>
                          </td>
                        </tr>
                      ))}
                </Table>
              </Block>
              <Block>
                <Table headers={['Black Cards']} color="green" isCollapsible>
                  {deckTable &&
                    [...deckTable]
                      .reverse()
                      .filter((card) => card.type === 'black')
                      .map(({ text, type, _id }) => (
                        <tr key={text}>
                          <td>{text}</td>
                          <td style={{ textAlign: 'center', padding: '.5em' }}>
                            <RegularButton onClick={e => deleteCard({
                              e, setIsDeleting,
                              type,
                              text,
                              setDeckTable,
                              location,
                              setError,
                              defaultLocation,
                              reactGA,
                            })} disabled={isDeleting}>
                              <DeleteIcon />
                            </RegularButton>
                          </td>
                        </tr>
                      ))}
                </Table>
              </Block>
            </>
          ) : deckExists === 'no result' ? (
            <>
              <p>Deck not found. Would you like to create one?</p>
              <Link to="/create-deck">Create Deck</Link>
            </>
          ) : error &&
            (error.includes('permissions') || error.includes('exist')) ? (
                  <ErrorText>{error}</ErrorText>
                ) : (
                  <p>Loading...</p>
                )}
        </>
      ) : (
          <Wrapper>
            <Label htmlFor="searchPublicDecks">Search Public Decks</Label>
            <Input
              type="text"
              onKeyUp={(e) =>
                handleKeyUp({
                  e,
                  initialDecks,
                  setFilteredDecks,
                  setPublicDecksInputVal,
                })
              }
            />
            {filteredDecks && filteredDecks.length > 0 && (
              <ResultsList>
                {filteredDecks.map(({ name }) => (
                  <li>
                    <StyledLink to={`/edit-deck/${name}`}>
                      {name.replace(/-/g, ' ')}
                    </StyledLink>
                  </li>
                ))}
                {publicDecksInputVal &&
                  filteredDecks &&
                  !filteredDecks.length && <li>No results found.</li>}
              </ResultsList>
            )}
          </Wrapper>
        )}
      <ToastContainer
        limit={1}
        autoClose={false}
        hideProgressBar
        closeOnClick
        transition={Slide}
        pauseOnFocusLoss={false}
      />
    </Page>
  );
}

render() {
    return (
      <>
        <div className={`Game ${this.state.isTourOpen ? 'is-tourActive' : ''}`}>
          <GlobalStyle />
          {this.state.showNamePopup && (
            <NamePopup
              handleSubmit={this.handleSubmit}
              inviteInputRef={this.inviteInputRef}
              roomId={this.roomId}
              copyLink={this.copyLink}
              updateMyName={this.updateMyName}
              myName={this.state.myName}
              nameError={this.state.nameError}
              reactGA={this.props.reactGA}
            />
          )}
          <DndProvider
            backend={TouchBackend}
            options={{ enableMouseEvents: true }}
          >
            <Table>
              <CardsWrap>
                <Piles>
                  <CardWrap isPickUpPile className="Game-bigBlackCard">
                    <BlackCardDrop
                      addBlackCardBackToPile={this.addBlackCardBackToPile}
                    >
                      {this.state.blackCards
                        .slice(
                          Math.max(
                            this.state.blackCards.length - (MAX_PLAYERS + 1),
                            0
                          )
                        )
                        .map((text, index) => (
                          <BlackCard
                            setUserIsDragging={this.setUserIsDragging}
                            key={text}
                            id={index}
                            text={text}
                            socket={this.socket}
                            isMyCardsOpen={this.state.isMyCardsOpen}
                            isSubmittedTableOpen={this.state.isSubmittedTableOpen}
                          />
                        ))}
                    </BlackCardDrop>
                  </CardWrap>
                  <CardWrap isPickUpPile innerRef={this.whiteCardRef} className="WhiteCardPile">
                    {this.state.whiteCards
                      .slice(
                        Math.max(
                          this.state.whiteCards.length - (MAX_PLAYERS + 1),
                          0
                        )
                      )
                      .map((text, index) => (
                        <PickUpPile
                          setUserIsDragging={this.setUserIsDragging}
                          key={text}
                          id={index}
                          text={text}
                          socket={this.socket}
                          isMyCardsOpen={this.state.isMyCardsOpen}
                          isSubmittedTableOpen={this.state.isSubmittedTableOpen}
                        />
                      ))}
                    {!this.state.showNamePopup &&
                      this.state.myCards.length > 0 &&
                      !this.state.animationOver && (
                        <AnimatedDraw
                          cardDimensions={this.state.cardDimensions}
                          myCards={this.state.myCards}
                          onAnimationEnd={this.setAnimationOver}
                        >
                          <DraggableCard
                            bgColor="#fff"
                            isBroadcastingDrag={false}
                            isFlipBroadcasted={false}
                            color="#000"
                            type="whiteCard"
                            setUserIsDragging={this.setUserIsDragging}
                            isFlippable={false}
                          />
                        </AnimatedDraw>
                      )}
                  </CardWrap>
                </Piles>
                <PlayerDecks className="Table-playerDecks">
                  {this.state.players &&
                    this.state.players.map(({ name }, index) => (
                      <PlayerDrop
                        className={index === 0 ? 'PlayerOneSlot' : index === 1 ? 'PlayerTwoSlot' : ''}
                        setUserIsDragging={this.setUserIsDragging}
                        userIsDragging={this.state.userIsDragging}
                        key={index}
                        index={index}
                        socket={this.socket}
                        addCardToPlayer={this.addCardToPlayer}
                        players={this.state.players}
                        myName={this.state.myName}
                        winningPlayerIndex={this.state.winningPlayerIndex}
                        isMyCardsOpen={this.state.isMyCardsOpen}
                        isSubmittedTableOpen={this.state.isSubmittedTableOpen}
                      />
                    ))}
                  {this.getBlankPlayerCards(this.state.players).map(
                    (num, index) => (
                      <BlankPlayerCard
                        className={this.state.players && this.state.players.length === 1 && index === 0 ? 'PlayerTwoSlot' : ''}
                        key={num}
                        index={index}
                        count={this.state.players.length}
                      />
                    )
                  )}
                </PlayerDecks>
              </CardsWrap>
              <MyCardsDropZone
                setUserIsDragging={this.setUserIsDragging}
                blackCards={this.state.blackCards}
                userIsDragging={this.state.userIsDragging}
                socket={this.socket}
                discardACard={this.discardACard}
                addCardToMyCards={this.addCardToMyCards}
                submitACard={this.submitACard}
                submittedCards={this.state.submittedCards}
                myCards={this.state.myCards}
                myName={this.state.myName}
                setChatOpen={this.setChatOpen}
                unreadCount={this.state.unreadCount}
                setMyCardsOpen={this.setMyCardsOpen}
                setSubmittedTableOpen={this.setSubmittedTableOpen}
                isMyCardsOpen={this.state.isMyCardsOpen}
                isSubmittedTableOpen={this.state.isSubmittedTableOpen}
              />
            </Table>
          </DndProvider>
          <ToastContainer
            limit={1}
            hideProgressBar
            closeOnClick
            transition={Slide}
            pauseOnFocusLoss={false}
          />
          <ChatBox
            chatOpen={this.state.chatOpen}
            setChatOpen={this.setChatOpen}
            socket={this.socket}
            myName={this.state.myName}
            setUnreadCount={this.setUnreadCount}
            reactGA={this.props.reactGA}
            roomId={this.roomId}
          />
        </div>
        <Tour
          steps={this.getSteps()}
          closeWithMask={false}
          isOpen={this.state.isTourOpen}
          onRequestClose={this.setTourClosed}
          highlightedMaskClassName="is-highlighted"
          maskClassName="MaskOverlay"
          rounded={8}
          accentColor="#2cce9f"
          lastStepNextButton={<DoneButton type="button">Got it!</DoneButton>}
        />
      </>
    );
  }