react-toastify#Slide JavaScript Examples

The following examples show how to use react-toastify#Slide. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: App.js    From viade_es2a with BSD 2-Clause "Simplified" License 6 votes vote down vote up
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>
)
Example #2
Source File: helpers.js    From ErgoAuctionHouse with MIT License 6 votes vote down vote up
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,
    });
}
Example #3
Source File: Layout.jsx    From pods-frontend with MIT License 6 votes vote down vote up
// 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>
  </>
}
Example #4
Source File: App.js    From portal with GNU General Public License v3.0 6 votes vote down vote up
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>
)
Example #5
Source File: Layout.jsx    From pooltogether-community-ui with MIT License 5 votes vote down vote up
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}
      />
    </>
  )
}
Example #6
Source File: Layout.jsx    From pooltogether-pool-builder-ui with MIT License 5 votes vote down vote up
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}
      />
    </>
  )
}
Example #7
Source File: PrivacyCheck.js    From cards-of-personality-frontend with GNU Affero General Public License v3.0 5 votes vote down vote up
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}
      />
    </>
  )
}
Example #8
Source File: Code.jsx    From nextjs-prismic-blog-starter with MIT License 4 votes vote down vote up
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>
  )
}
Example #9
Source File: index.jsx    From loopring-swap with GNU General Public License v3.0 4 votes vote down vote up
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>
    );
}
Example #10
Source File: EditADeck.js    From cards-of-personality-frontend with GNU Affero General Public License v3.0 4 votes vote down vote up
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>
  );
}
Example #11
Source File: Game.js    From cards-of-personality-frontend with GNU Affero General Public License v3.0 4 votes vote down vote up
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>}
        />
      </>
    );
  }