react-device-detect#isMobile JavaScript Examples

export default function WalletModal({ toggleWalletModal, isOpen, ENSName }) {
  // important that these are destructed from the account-specific web3-react context
  const { active, account, connector, activate, error } = useWeb3React()

  const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT)

  const [pendingWallet, setPendingWallet] = useState()

  const [pendingError, setPendingError] = useState()

  // always reset to account view
  useEffect(() => {
    if (isOpen) {
      setPendingError(false)
      setWalletView(WALLET_VIEWS.ACCOUNT)
    }
  }, [isOpen])

  // close modal when a connection is successful
  const activePrevious = usePrevious(active)
  const connectorPrevious = usePrevious(connector)
  useEffect(() => {
    if (isOpen && ((active && !activePrevious) || (connector && connector !== connectorPrevious && !error))) {
      setWalletView(WALLET_VIEWS.ACCOUNT)
    }
  }, [setWalletView, active, error, connector, isOpen, activePrevious, connectorPrevious])

  const tryActivation = async connector => {
    let name = ''
    Object.keys(SUPPORTED_WALLETS).map(key => {
      if (connector === SUPPORTED_WALLETS[key].connector) {
        return (name = SUPPORTED_WALLETS[key].name)
      }
      return true
    })
    // log selected wallet
    ReactGA.event({
      category: 'Wallet',
      action: 'Change Wallet',
      label: name
    })
    setPendingWallet(connector) // set wallet for pending view
    setWalletView(WALLET_VIEWS.PENDING)

    // if the connector is walletconnect and the user has already tried to connect, manually reset the connector
    if (
      connector instanceof WalletConnectConnector &&
      connector.walletConnectProvider &&
      connector.walletConnectProvider.wc.uri
    ) {
      connector.walletConnectProvider = undefined
    }

    activate(connector, undefined, true).catch(error => {
      if (error instanceof UnsupportedChainIdError) {
        activate(connector) // a little janky...can't use setError because the connector isn't set
      } else {
        setPendingError(true)
      }
    })
  }

  // close wallet modal if fortmatic modal is active
  useEffect(() => {
    fortmatic.on(OVERLAY_READY, () => {
      toggleWalletModal()
    })
  }, [toggleWalletModal])

  // get wallets user can switch too, depending on device/browser
  function getOptions() {
    const isMetamask = window.ethereum && window.ethereum.isMetaMask
    return Object.keys(SUPPORTED_WALLETS).map(key => {
      const option = SUPPORTED_WALLETS[key]
      // check for mobile options
      if (isMobile) {
        //disable portis on mobile for now
        if (option.connector === portis) {
          return null
        }

        if (!window.web3 && !window.ethereum && option.mobile) {
          return (
            <Option
              onClick={() => {
                option.connector !== connector && !option.href && tryActivation(option.connector)
              }}
              id={`connect-${key}`}
              key={key}
              active={option.connector && option.connector === connector}
              color={option.color}
              link={option.href}
              header={option.name}
              subheader={null}
              icon={require('../../assets/images/' + option.iconName)}
            />
          )
        }
        return null
      }

      // overwrite injected when needed
      if (option.connector === injected) {
        // don't show injected if there's no injected provider
        if (!(window.web3 || window.ethereum)) {
          if (option.name === 'MetaMask') {
            return (
              <Option
                id={`connect-${key}`}
                key={key}
                color={'#E8831D'}
                header={'Install Metamask'}
                subheader={null}
                link={'https://metamask.io/'}
                icon={MetamaskIcon}
              />
            )
          } else {
            return null //dont want to return install twice
          }
        }
        // don't return metamask if injected provider isn't metamask
        else if (option.name === 'MetaMask' && !isMetamask) {
          return null
        }
        // likewise for generic
        else if (option.name === 'Injected' && isMetamask) {
          return null
        }
      }

      // return rest of options
      return (
        !isMobile &&
        !option.mobileOnly && (
          <Option
            id={`connect-${key}`}
            onClick={() => {
              option.connector === connector
                ? setWalletView(WALLET_VIEWS.ACCOUNT)
                : !option.href && tryActivation(option.connector)
            }}
            key={key}
            active={option.connector === connector}
            color={option.color}
            link={option.href}
            header={option.name}
            subheader={null} //use option.descriptio to bring back multi-line
            icon={require('../../assets/images/' + option.iconName)}
          />
        )
      )
    })
  }

  function getModalContent() {
    if (error) {
      return (
        <UpperSection>
          <CloseIcon onClick={toggleWalletModal}>
            <CloseColor />
          </CloseIcon>
          <HeaderRow>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error connecting'}</HeaderRow>
          <ContentWrapper>
            {error instanceof UnsupportedChainIdError ? (
              <h5>Please connect to the appropriate Ethereum network.</h5>
            ) : (
              'Error connecting. Try refreshing the page.'
            )}
          </ContentWrapper>
        </UpperSection>
      )
    }
    if (account && walletView === WALLET_VIEWS.ACCOUNT) {
      return (
        <AccountDetails
          toggleWalletModal={toggleWalletModal}
          ENSName={ENSName}
          openOptions={() => setWalletView(WALLET_VIEWS.OPTIONS)}
        />
      )
    }
    return (
      <UpperSection>
        <CloseIcon onClick={toggleWalletModal}>
          <CloseColor />
        </CloseIcon>
        {walletView !== WALLET_VIEWS.ACCOUNT ? (
          <HeaderRow color="blue">
            <HoverText
              onClick={() => {
                setPendingError(false)
                setWalletView(WALLET_VIEWS.ACCOUNT)
              }}
            >
              Back
            </HoverText>
          </HeaderRow>
        ) : (
          <HeaderRow>
            <HoverText>Connect to a wallet</HoverText>
          </HeaderRow>
        )}
        <ContentWrapper>
          {walletView === WALLET_VIEWS.PENDING ? (
            <PendingView
              connector={pendingWallet}
              error={pendingError}
              setPendingError={setPendingError}
              tryActivation={tryActivation}
            />
          ) : (
            <OptionGrid>{getOptions()}</OptionGrid>
          )}
          {walletView !== WALLET_VIEWS.PENDING && (
            <Blurb>
              <span>New to Ethereum? &nbsp;</span>{' '}
              <Link href="https://ethereum.org/use/#3-what-is-a-wallet-and-which-one-should-i-use">
                Learn more about wallets
              </Link>
            </Blurb>
          )}
        </ContentWrapper>
      </UpperSection>
    )
  }

  return (
    <Modal isOpen={isOpen} onDismiss={toggleWalletModal} minHeight={null} maxHeight={90}>
      <Wrapper>{getModalContent()}</Wrapper>
    </Modal>
  )
}

export function BodyClasses(props) {
  const router = useRouter()

  const deposit = /deposit/.test(router.asPath)
  const manage = /\/manage-tickets/.test(router.asPath)

  const checkoutFlowOpen = deposit || manage

  useEffect(() => {
    const body = document.body
    if (isMobile) {
      body.classList.add('device-is-touch')
    } else {
      body.classList.remove('device-is-touch')
    }
  }, [isMobile])

  useEffect(() => {
    const body = document.body
    if (checkoutFlowOpen) {
      body.classList.add('overflow-y-hidden')
    } else {
      body.classList.remove('overflow-y-hidden')
    }
  }, [checkoutFlowOpen])

  // When next.js loads in production and encounters an error (such as the nefarious ChunkLoadError)
  // it adds 'overflow-hidden' to the body to show an error msg (but then never shows the error)
  // This reverses that dumb class modification
  useInterval(() => {
    const body = document.body
    if (body.classList.contains('overflow-hidden')) {
      body.classList.remove('overflow-hidden')
    }
  }, 1000)

  return null
}

webClientType = isMobile ? mobileClientType : browserClientType

export function useEagerConnect() {
  const triedToConnectToSafe = useSafeAppConnection(safeMultisigConnector)
  const { active: networkActive, activate, active } = useWeb3React() // specifically using useWeb3React because of what this hook does
  const [tried, setTried] = useState(false)

  useEffect(() => {
    if (triedToConnectToSafe && !networkActive && !active) {
      injected.isAuthorized().then((isAuthorized) => {
        if (isAuthorized) {
          activate(injected, undefined, true).catch(() => {
            setTried(true)
          })
        } else {
          if (isMobile && window.ethereum) {
            activate(injected, undefined, true).catch(() => {
              setTried(true)
            })
          } else {
            setTried(true)
          }
        }
      })
    }
  }, [activate, triedToConnectToSafe, networkActive, active]) // intentionally only running on mount (make sure it's only mounted once :))

  // if the connection worked, wait until we get confirmation of that to flip the flag
  useEffect(() => {
    if (active) {
      setTried(true)
    }
  }, [active])

  return tried
}

function App() {
    const isDarkTheme = useSelector((s) => s.settings.darkTheme);

    if (!isMobile)
        return (
            <ThemeProvider theme={isDarkTheme ? darkTheme : lightTheme}>
                <>
                    <GlobalStyles />
                    <AppContainer>
                        <Router>
                            <Menu />
                            <Switch>
                                <Route path="/notes">
                                    <Notes />
                                </Route>
                                <Route path="/settings">
                                    <Settings />
                                </Route>
                                <Route path="/">
                                    <>
                                        <Dashboard />
                                        <TaskBoard />
                                    </>
                                </Route>
                            </Switch>
                        </Router>
                    </AppContainer>
                </>
            </ThemeProvider>
        );
    else {
        return (
            <AppContainer>
                <MobileView />
            </AppContainer>
        );
    }
}

Dashboard = () => {
  return (
    <Provider store={store}>
      <Container>
        {isMobile && (
          <NoSSR>
            <NetworkMap
              height={isMobile ? '50%' : '100%'}
              width={isMobile ? '100%' : '70%'}
            />
          </NoSSR>
        )}
        <FilterPanel />
        <SidePanel />
        {isBrowser && (
          <NoSSR>
            <NetworkMap
              height={isMobile ? '50%' : '100%'}
              width={isMobile ? '100%' : '70%'}
            />
          </NoSSR>
        )}
      </Container>
    </Provider>
  )
}

export function useEagerConnect() {
  const { activate, active } = useWeb3React() // specifically using useWeb3React because of what this hook does
  const [tried, setTried] = useState(false)

  useEffect(() => {
    injected.isAuthorized().then(isAuthorized => {
      if (isAuthorized) {
        activate(injected, undefined, true).catch(() => {
          setTried(true)
        })
      } else {
        if (isMobile && window.ethereum) {
          activate(injected, undefined, true).catch(() => {
            setTried(true)
          })
        } else {
          setTried(true)
        }
      }
    })
  }, [activate]) // intentionally only running on mount (make sure it's only mounted once :))

  // if the connection worked, wait until we get confirmation of that to flip the flag
  useEffect(() => {
    if (active) {
      setTried(true)
    }
  }, [active])

  return tried
}

export function BodyClasses(props) {
  useEffect(() => {
    const body = document.body

    if (isMobile) {
      body.classList.add('device-is-touch')
    } else {
      body.classList.remove('device-is-touch')
    }
  }, [isMobile])

  return null
}

BannerUILoader = (props) => {
  const bgColor = '#401C94'
  const foreColor = '#501C94'

  if (isMobile) {
    return (
      <ContentLoader
        {...UI_LOADER_ANIM_DEFAULTS}
        viewBox='0 0 600 300'
        backgroundColor={bgColor}
        foregroundColor={foreColor}
      >
        <rect x='0' y='0' rx='15' ry='15' width='600' height='300' />
      </ContentLoader>
    )
  }

  return (
    <ContentLoader
      {...UI_LOADER_ANIM_DEFAULTS}
      viewBox='0 0 600 50'
      backgroundColor={bgColor}
      foregroundColor={foreColor}
    >
      <rect x='0' y='0' rx='5' ry='5' width='600' height='50' />
    </ContentLoader>
  )
}

Home = () => {
    const query = new URLSearchParams(useLocation().search)
    return (
        <>
            <header>
                <nav style={{ marginBottom: 0 }}>
                    <h1>
                        <Link to='/' style={{ color: 'var(--color-text)' }}>rendezvous</Link>
                        {query.get('subject') && !isMobile && (<sup>{'@' + query.get('subject')}</sup>)}
                    </h1>
                    <ul>
                        <li><Link to='/about'>About</Link></li>
                        <li><a href='https://github.com/this-fifo/rendezvous' rel='noopener noreferrer' target='_blank'>GitHub</a></li>
                    </ul>
                </nav>
                <BrowserView>
                    {query.get('code') && query.get('email')
                        ? <InviteForm code={query.get('code')} email={query.get('email')}/>
                        : !query.get('room') && <EmailConfirmation />}
                    {query.get('room') &&
                        <Jutsu
                            containerStyles={{ width: '1080px', height: '600px' }}
                            subject={query.get('subject')}
                            roomName={query.get('room')}
                            password={query.get('password')}
                            displayName={query.get('name')} />}
                </BrowserView>
                <MobileView>
                    <Mobile room={query.get('room')} password={query.get('password')} />
                </MobileView>
            </header>
            <Footer />
        </>
    )
}

export default function Layout({ children }) {
  const style = {
    margin: `2rem auto`,
    maxWidth: 650,
    padding: `0.5rem 0.5rem`,
    border: `1px solid #e1e4e8`,
    borderRadius: `6px`,
  };

  if (isMobile) {
    style.margin = `auto`;
    style.border = `inherit`;
    return <MobileView style={style}>{children}</MobileView>;
  }

  return <BrowserView style={style}>{children}</BrowserView>;
}

function useEagerConnect() {
  const { activate, active } = useWeb3ReactCore(); // specifically using useWeb3ReactCore because of what this hook does
  const [tried, setTried] = useState(false);

  useEffect(() => {
    injected.isAuthorized().then(isAuthorized => {
      if (isAuthorized) {
        activate(injected, undefined, true).catch(() => {
          setTried(true);
        });
      } else {
        if (isMobile && window.ethereum) {
          activate(injected, undefined, true).catch(() => {
            setTried(true);
          });
        } else {
          setTried(true);
        }
      }
    });
    // intentionally only running on mount (make sure it's only mounted once :))
  }, [activate]);

  // if the connection worked, wait until we get confirmation of that to flip the flag
  useEffect(() => {
    if (active) {
      setTried(true);
    }
  }, [active]);

  return tried;
}

export function useEagerConnect() {
  const { activate, active } = useWeb3ReactCore() // specifically using useWeb3ReactCore because of what this hook does

  const [tried, setTried] = useState(false)

  useEffect(() => {
    injected.isAuthorized().then(isAuthorized => {
      if (isAuthorized) {
        activate(injected, undefined, true).catch(() => {
          setTried(true)
        })
      } else {
        if (isMobile && window.ethereum) {
          activate(injected, undefined, true).catch(() => {
            setTried(true)
          })
        } else {
          setTried(true)
        }
      }
    })
  }, [activate]) // intentionally only running on mount (make sure it's only mounted once :))

  // if the connection worked, wait until we get confirmation of that to flip the flag
  useEffect(() => {
    if (active) {
      setTried(true)
    }
  }, [active])

  return tried
}

Vertical =(props)=> {

  const { drawerType } = useSelector(({settings})=>settings);
    const drawerStyle = drawerType.includes(FIXED_DRAWER) ? "fixed-drawer" : drawerType.includes(COLLAPSED_DRAWER) ? "collapsible-drawer" : "mini-drawer";

    //set default height and overflow for iOS mobile Safari 10+ support.
    if (isIOS && isMobile) {
      document.body.classList.add("ios-mobile-view-height");
    } else if (document.body.classList.contains("ios-mobile-view-height")) {
      document.body.classList.remove("ios-mobile-view-height");
    }

    return (
      <div className={`app-container ${drawerStyle}`} data-test="drawerComp">
        {/* <Tour/> */}

        <SideBar/>
        <div className="app-main-container">
          <div className="app-header">
            <Header/>
          </div>

          <main className="app-main-content-wrapper">
            <div className="app-main-content">
              {props.children}
            </div>
            {/* <Footer/> */}
          </main>
        </div>
        {/* <ColorOption/> */}
      </div>
    );
  }

TicketsUILoader = (props) => {
  if (typeof window === 'undefined') {
    return null
  }

  const { theme } = useContext(ThemeContext)

  const bgColor = theme === 'light' ? '#ffffff' : '#401C94'
  const foreColor = theme === 'light' ? '#f5f5f5' : '#501C94'

  if (isMobile) {
    return (
      <ContentLoader
        {...UI_LOADER_ANIM_DEFAULTS}
        viewBox='0 0 200 80'
        backgroundColor={bgColor}
        foregroundColor={foreColor}
        className='my-4'
      >
        <rect x='0' y='0' rx='3' ry='3' width='200' height='70' />
      </ContentLoader>
    )
  }

  return (
    <ContentLoader
      {...UI_LOADER_ANIM_DEFAULTS}
      viewBox='0 0 400 50'
      backgroundColor={bgColor}
      foregroundColor={foreColor}
      className='my-4'
    >
      <rect x='0' y='0' rx='3' ry='3' width='400' height='50' />{' '}
    </ContentLoader>
  )
}

export function useEagerConnect() {
  const { activate, active } = useWeb3ReactCore() // specifically using useWeb3ReactCore because of what this hook does

  const [tried, setTried] = useState(false)

  useEffect(() => {
    injected.isAuthorized().then(isAuthorized => {
      if (isAuthorized) {
        activate(injected, undefined, true).catch(() => {
          setTried(true)
        })
      } else {
        if (isMobile && window.ethereum) {
          activate(injected, undefined, true).catch(() => {
            setTried(true)
          })
        } else {
          setTried(true)
        }
      }
    })
  }, [activate]) // intentionally only running on mount (make sure it's only mounted once :))

  // if the connection worked, wait until we get confirmation of that to flip the flag
  useEffect(() => {
    if (active) {
      setTried(true)
    }
  }, [active])

  return tried
}

render() {
    const { tags, selectTag, selectedTag } = this.props
    const childrenElement = (
      <div className="tag-list" onScroll={this.handleScrollX}>
        {isMobile && this.state.showSwipeIcon && (
          <StyledFA className="icon-hand-ptr" icon={faHandPointer} />
        )}
        {/* Used to apply overflow to work with sticky */}
        <div className="tag-list-inner">
          <Tag
            title={TAG.ALL}
            selectTag={selectTag}
            selectedTag={selectedTag}
          />
          {tags.map((tag, i) => {
            return (
              <Tag
                key={i}
                title={tag}
                selectTag={selectTag}
                selectedTag={selectedTag}
              />
            )
          })}
        </div>
      </div>
    )

    return !isMobile ? (
      <StyledTagsVertical className="tags-vertical">
        {childrenElement}
      </StyledTagsVertical>
    ) : (
      <StyledTagsHorizontal className="tags-horizontal" ref={this.tagRef}>
        {childrenElement}
      </StyledTagsHorizontal>
    )
  }

IndexUILoader = (props) => {
  if (typeof window === 'undefined') {
    return null
  }

  const { theme } = useContext(ThemeContext)

  const bgColor = theme === 'light' ? '#ffffff' : '#401C94'
  const foreColor = theme === 'light' ? '#f5f5f5' : '#501C94'

  if (isMobile) {
    return (
      <ContentLoader
        {...UI_LOADER_ANIM_DEFAULTS}
        viewBox='0 0 400 150'
        backgroundColor={bgColor}
        foregroundColor={foreColor}
      >
        <rect x='0' y='0' rx='5' ry='5' width='400' height='150' />
      </ContentLoader>
    )
  }

  return (
    <ContentLoader
      {...UI_LOADER_ANIM_DEFAULTS}
      viewBox='0 0 600 300'
      backgroundColor={bgColor}
      foregroundColor={foreColor}
    >
      <rect x='0' y='0' rx='5' ry='5' width='600' height='300' />
    </ContentLoader>
  )
}

componentDidMount() {
    this.setState({ location: window.location.href })
    if (isMobile) {
      this.moveAnchorHeadings()
    }
    this.zoomImages()
    if (comments.facebook.enabled) {
      this.registerFacebookComments()
    }
    if (comments.utterances.enabled && comments.utterances.repoUrl) {
      this.registerUtterancesComments(comments.utterances.repoUrl)
    }
  }

export function postUserFeedback(text) {
  const postData = {
    message: text,
    mobile: isMobile,
  };

  axios({
    method: "POST",
    url: baseUrl + "api/discord",
    headers: {
      "Content-Type": "application/json",
    },
    data: JSON.stringify(postData),
  }).catch((e) => {
    throw e;
  });
}

Tag = ({ title, selectTag, selectedTag, unmountTagsAnimation }) => {
  const handleClick = () => {
    selectTag(title)
  }

  return !isMobile ? (
    <StyledTagVertical
      className="tag-vertical"
      onClick={handleClick}
      selected={selectedTag === title}
    >
      {title}
    </StyledTagVertical>
  ) : (
    <StyledTagHorizontal
      className="tag-horizontal"
      onClick={handleClick}
      selected={selectedTag === title}
    >
      {title}
    </StyledTagHorizontal>
  )
}

PoolShowUILoader = (props) => {
  if (typeof window === 'undefined') {
    return null
  }

  const { theme } = useContext(ThemeContext)

  const bgColor = theme === 'light' ? '#ffffff' : '#401C94'
  const foreColor = theme === 'light' ? '#f5f5f5' : '#501C94'

  if (isMobile) {
    return (
      <ContentLoader
        {...UI_LOADER_ANIM_DEFAULTS}
        viewBox='0 0 600 1200'
        backgroundColor={bgColor}
        foregroundColor={foreColor}
      >
        <rect x='0' y='0' rx='5' ry='5' width='350' height='100' />{' '}
        <rect x='0' y='120' rx='5' ry='5' width='600' height='90' />{' '}
        <rect x='0' y='230' rx='5' ry='5' width='600' height='500' />
        <rect x='0' y='760' rx='5' ry='5' width='600' height='510' />
      </ContentLoader>
    )
  }

  return (
    <>
      <ContentLoader
        {...UI_LOADER_ANIM_DEFAULTS}
        viewBox='0 0 600 600'
        backgroundColor={bgColor}
        foregroundColor={foreColor}
      >
        <rect x='0' y='0' rx='5' ry='5' width='200' height='50' />{' '}
        <rect x='440' y='0' rx='5' ry='5' width='160' height='50' />
        <rect x='0' y='60' rx='5' ry='5' width='600' height='110' />
        <rect x='0' y='180' rx='5' ry='5' width='600' height='300' />
      </ContentLoader>
    </>
  )
}

function Index({ trackId, backSideContent, latestId }) {
  const [start, setStart] = React.useState(false);
  const [randomMsg] = React.useState(
    getRandomFromArray(getRandomInt(0, 158) ? MESSAGES : EE_MESSAGES)
  );

  const getMessage = () => {
    if (isMobile) {
      return getRandomFromArray(MOBILE_MESSAGES);
    } else if (trackId) {
      return `Play the track #${trackId}`;
    } else {
      return randomMsg;
    }
  };

  const enterKey = useKeyPress("Enter");

  React.useEffect(() => {
    if (enterKey) setStart(true);
  }, [enterKey]);

  React.useEffect(() => {
    ReactGA.initialize("UA-172416216-1");
    ReactGA.pageview(window.location.pathname + window.location.search);
    document.getElementById(
      "app"
    ).style.backgroundImage = `url('/images/${getRandomFromArray(BG_IMAGES)}')`;
  }, []);

  if (start) {
    return (
      <React.Fragment>
        <Head>
          <title>CoolModFiles.com - Play some cool MOD files!</title>
        </Head>
        <div id="app">
          <Player
            sharedTrackId={trackId}
            backSideContent={backSideContent}
            latestId={latestId}
          />
          <Footer />
        </div>
      </React.Fragment>
    );
  }
  return (
    <React.Fragment>
      <Head>
        <title>CoolModFiles.com - Play some cool MOD files!</title>
      </Head>
      <div id="app">
        <div className="randombtn" onClick={() => setStart(true)}>
          <p suppressHydrationWarning>{getMessage()}</p>
        </div>
      </div>
    </React.Fragment>
  );
}

render() {
        const { currentRegion, plotParameters, plotDataAll, plotTheme } = this.props

        if (plotParameters.type !== 'bump') return <div />

        return (
            <ResponsiveBump
                data={plotDataAll.plotData}
                theme={plotTheme}
                margin={{ top: 10, right: 100, bottom: 20, left: 50 }}
                colors={(d) => d.color}
                lineWidth={2}
                activeLineWidth={4}
                inactiveLineWidth={2}
                inactiveOpacity={0.15}
                pointSize={0}
                activePointSize={0}
                inactivePointSize={0}
                pointBorderWidth={3}
                activePointBorderWidth={3}
                enableGridX={false}
                enableGridY={false}
                axisRight={null}
                axisTop={null}
                axisBottom={null}
                axisLeft={{
                    tickSize: 5,
                    tickPadding: 5,
                    tickRotation: 0
                }}
                onClick={(serie) => {
                    if (isMobile || isIPad13) return
                    this.props.regionToggle(
                        currentRegion.length === 1 && currentRegion[0] === str.GLOBAL_ZH
                            ? [ serie.name ]
                            : [ ...currentRegion, serie.name ]
                    )
                }}
                tooltip={plotParameters.tooltip}
            />
        )
    }

export default function AddToHomeScreenModal() {
  const intl = useIntl();
  const [modalShow, setModalShow] = useState(true);

  const handleOnCloseButtonClick = () => {
    setModalShow(false);
  };

  const renderInThisDevice =
    (process.env.REACT_APP_ADD_TO_HOME_SCREEN_MODAL_ANDROID === 'true' &&
      isAndroid) ||
    (process.env.REACT_APP_ADD_TO_HOME_SCREEN_MODAL_IOS === 'true' &&
      (isMobile || isIPad13));

  const shouldRender = renderInThisDevice && modalShow && !isInStandaloneMode();

  //TODO Add time for modal show again

  return (
    <div>
      {shouldRender && (
        <Dialog fullScreen open={modalShow} className="add-to-home-screen">
          <div className="logo">
            <img src={logo} alt="logo" />
          </div>
          <h3 className="flex-column perfect-center">
            {isAndroid && intl.formatMessage('add-to-home.android.title')}
            {(isIOS || isIPad13) && intl.formatMessage('add-to-home.ios.title')}
          </h3>
          <Paper className="steps flex-column perfect-center">
            <span>
              {(isIOS || isIPad13) &&
                intl.formatMessage('add-to-home.ios.step1.first')}
              {(isIOS || isIPad13) && (
                <img className="share-icon" src={ShareIcon} alt="Share" />
              )}
              {isAndroid &&
                intl.formatMessage('add-to-home.android.step1.first')}
              {isAndroid && (
                <img
                  className="chrome-menu"
                  src={AndroidChromeMenu}
                  alt="Menu"
                />
              )}
              {intl.formatMessage('add-to-home.ios.step1.end')}
            </span>
            <span>
              {intl.formatMessage('add-to-home.step2.first')}
              {(isIOS || isIPad13) && (
                <img
                  className="add-to-home-screen-icon"
                  src={AddToHomeScreenIcon}
                  alt="Add To Home Screen"
                />
              )}
              {isAndroid && (
                <span className="add-to-home-screen-icon">
                  {intl.formatMessage(
                    'add-to-home.android.step2.add-to-home-screen'
                  )}
                </span>
              )}
              {intl.formatMessage('add-to-home.step2.end')}
            </span>
            <span>{intl.formatMessage('add-to-home.step3.first')}</span>
          </Paper>
          <Button
            variant="contained"
            color="primary"
            onClick={handleOnCloseButtonClick}
          >
            {intl.formatMessage('add-to-home.add-later')}
          </Button>
        </Dialog>
      )}
    </div>
  );
}

PrizeShowUILoader = (props) => {
  if (typeof window === 'undefined') {
    return null
  }

  const { theme } = useContext(ThemeContext)

  const bgColor = theme === 'light' ? '#ffffff' : '#401C94'
  const foreColor = theme === 'light' ? '#f5f5f5' : '#501C94'

  if (isMobile) {
    return (
      <ContentLoader
        {...UI_LOADER_ANIM_DEFAULTS}
        viewBox='0 0 600 1200'
        backgroundColor={bgColor}
        foregroundColor={foreColor}
      >
        <rect x='0' y='0' rx='5' ry='5' width='600' height='110' />{' '}
        <rect x='0' y='130' rx='5' ry='5' width='600' height='140' />
        <rect x='0' y='290' rx='5' ry='5' width='600' height='710' />
      </ContentLoader>
    )
  }

  return (
    <>
      <ContentLoader
        {...UI_LOADER_ANIM_DEFAULTS}
        viewBox='0 0 600 600'
        backgroundColor={bgColor}
        foregroundColor={foreColor}
      >
        <rect x='0' y='0' rx='5' ry='5' width='300' height='50' />{' '}
        <rect x='0' y='58' rx='5' ry='5' width='600' height='60' />
        <rect x='0' y='125' rx='5' ry='5' width='600' height='470' />
      </ContentLoader>
    </>
  )
}

function App() {

  const theme = createMuiTheme({
    palette: {
      primary: {
        main: '#24292E',
      },
    },
  });

  React.useEffect(() => {
    const ele = document.getElementById('ipl-progress-indicator')
    if (ele) {
      setTimeout(() => {
        // fade out
        ele.classList.add('available')
        setTimeout(() => {
          // remove from DOM
          ele.outerHTML = ''
        }, 2000)
      }, 3000);
    }
  }, [])



  return (
    <div>
      <ThemeProvider theme={theme}>
        {
          !isMobile ?
            <>
              <Grid container>

                <Grid item xs={12}>
                  <AppBar />
                </Grid>

                <Grid item>
                  <ToolBar />
                </Grid>

                <Grid item xs style={{ height: 'calc(100vh - 64px)', overflow: 'scroll' }}>
                  <GridContainer />
                </Grid>
              </Grid>

              <CoordinateToolTip />
              <MouseToolTip />
              <SetScaleModal />
            </>
            :
            <div style={{ position: 'fixed', top: '30%', width: '100vw' }} >
              <div style={{ display: 'flex', justifyContent: 'center' }}>
                <img width="112" height="112" src={logo} />
              </div>
              <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 16 }}>
                <Typography variant='h6'>
                  Coming soon to mobile platforms.
                </Typography>
              </div>
              <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 4 }}>
                <Typography variant='subtitle2'>
                  Floor Plan Lab is currently only available on desktop.
                </Typography>
              </div>
            </div>
        }

      </ThemeProvider>
    </div>
  );
}

export default function Editor({
  forcedContent,
  setForcedContent,
  actualContent,
  setActualContent,
  contentType,
  pasteId,
}) {
  const [language, setLanguage] = useState('plain');
  const [readOnly, setReadOnly] = useState(isMobile && pasteId);

  const [theme, setTheme] = usePreference(
    'theme',
    'dark',
    pref => !!themes[pref]
  );
  const [fontSize, setFontSize, fontSizeCheck] = usePreference(
    'fontsize',
    16,
    pref => pref >= 10 && pref <= 22
  );

  useEffect(() => {
    if (contentType) {
      setLanguage(contentType);
    }
  }, [contentType]);

  function zoom(delta) {
    const newFontSize = fontSize + delta;
    if (fontSizeCheck(newFontSize)) {
      setFontSize(newFontSize);
    }
  }

  return (
    <>
      <ThemeProvider theme={themes[theme]}>
        <EditorGlobalStyle />
        <EditorControls
          actualContent={actualContent}
          setForcedContent={setForcedContent}
          language={language}
          setLanguage={setLanguage}
          readOnly={readOnly}
          setReadOnly={setReadOnly}
          theme={theme}
          setTheme={setTheme}
          zoom={zoom}
        />
        <EditorTextArea
          forcedContent={forcedContent}
          actualContent={actualContent}
          setActualContent={setActualContent}
          theme={themes[theme]}
          language={language}
          fontSize={fontSize}
          readOnly={readOnly}
          setReadOnly={setReadOnly}
        />
      </ThemeProvider>
    </>
  );
}

DateRangeSlider = (props) => {

    const classes = useStyles();
    // takes a start date, and current date
    //
    // reports an offset from currentdate (eg. current - start - value)

    const startDate = moment(props.startDate);
    const currentDate = moment(props.currentDate);
    const daysBetween = currentDate.diff(startDate, 'days');

    let defaultValue = props.defaultValue !== undefined ? (daysBetween - props.defaultValue) : daysBetween - 30
    defaultValue = (defaultValue > -1) ? defaultValue : 0;

    const defaultMaxValue = (daysBetween > 13) ? daysBetween - 14 : daysBetween;
    const maxValue = props.minOffset !== undefined ? daysBetween - props.minOffset : defaultMaxValue

    const [valueState, setValueState] = React.useState(defaultValue)

    const constLabelFormat = (value) => {
        return moment(startDate).add(value, 'days').format("MM/DD");
    }

    const handleValueChange = (value) => {
        if (value !== valueState) {
            setValueState(value);
            props.valueChanged(daysBetween - value);
        }
    }

    const marks = [{ value: (daysBetween - 30 > -1) ? daysBetween - 30 : daysBetween }];

    const sliderPropsShared = {
        "aria-label":"Start Date",
        track: false,
        "aria-labelledby": "discrete-slider",
        valueLabelFormat: constLabelFormat,
        step: 1,
        marks: marks,
        min: 0,
        max: maxValue,
        value: valueState,
        onChange: (event, value) => handleValueChange(value)
    }

    const sliderPropsMobile = {
        valueLabelDisplay:"off",
    }
    const sliderPropsWeb = {
        valueLabelDisplay:"auto",
    }

    const gridProps = {
        container: true,
        direction: "row",
        justify: "center",
        alignItems: "flex-end"
    }

    return (isMobile ?
        <Grid {...gridProps} className={`${classes.mobileDiv} ${classes.container}`}>
            <IOSSlider {...sliderPropsShared} {...sliderPropsMobile} />
        </Grid>
        :
        <Grid {...gridProps} className={`${classes.webDiv} ${classes.container}`}>
            <StyledSlider {...sliderPropsShared} {...sliderPropsWeb} />
        </Grid>);
}