react-feather#ExternalLink TypeScript Examples

The following examples show how to use react-feather#ExternalLink. 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: AccessHash.tsx    From gateway-ui with BSD 3-Clause "New" or "Revised" License 4 votes vote down vote up 
SharePage = (): ReactElement => {
  const classes = useStyles()

  const { hash } = useParams<{ hash: string }>()
  const bzzLink = `https://${encodeManifestReference(hash!)}.${BZZ_LINK_DOMAIN}/` //eslint-disable-line
  const { getMetadata, getChunk, download } = useContext(Context)
  const [entries, setEntries] = useState<Record<string, string>>({})
  const [metadata, setMetadata] = useState<Metadata | undefined>()
  const [preview, setPreview] = useState<string | undefined>()
  const [isLoading, setIsLoading] = useState<boolean>(true)
  const [isDownloading, setIsDownloading] = useState<boolean>(false)
  const [chunkExists, setChunkExists] = useState<boolean>(false)
  const [errorMsg, setErrorMsg] = useState<string | null>(null)

  useEffect(() => {
    if (!(Utils.isHexString(hash, 64) || Utils.isHexString(hash, 128))) {
      setErrorMsg('Not a valid Swarm Reference')
      setIsLoading(false)

      return
    }

    setErrorMsg(null)
    setEntries({})
    setIsLoading(true)
    getMetadata(hash)
      .then(({ metadata, preview, entries }) => {
        setMetadata(metadata)
        setPreview(preview)
        setEntries(entries)
        setIsLoading(false)
      })
      .catch(() => {
        // There are no metadata, but maybe there is a retrievable file
        getChunk(hash)
          .then(d => setChunkExists(Boolean(d.byteLength)))
          .catch(() => setChunkExists(false))
          .finally(() => setIsLoading(false))
      })
  }, [hash, getChunk, getMetadata])

  const handleDownload = () => {
    setIsDownloading(true)
    // The hash is already validated that is why there can be not a null assertion
    download(hash!, entries, metadata).finally(() => setIsDownloading(false)) //eslint-disable-line
  }

  if (isLoading) {
    return (
      <Layout
        top={[
          <Header key="top1">
            <Logo />
          </Header>,
        ]}
        center={[
          <div key="middle1">
            <LoadingFile />
          </div>,
        ]}
        bottom={[<div key="bottom1" />]}
      />
    )
  }

  // The hash is wrong, display error message
  if (errorMsg) {
    return (
      <Layout
        top={[
          <Header key="top1">
            <Logo />
          </Header>,
        ]}
        center={[<InvalidSwarmHash key="center" />]}
        bottom={[]}
      />
    )
  }

  // There are some metadata, display them and offer downloading the content
  if (Object.keys(entries).length > 0) {
    return (
      <Layout
        top={[
          <Header key="top1">
            <Logo />
          </Header>,
          <Typography key="top2" variant="subtitle1">
            {text.accessHashPage.useButtonToDownload}
          </Typography>,
        ]}
        center={[
          <div key="center1">
            <AssetPreview previewUri={preview} metadata={metadata} />
            {metadata?.isWebsite && metadata?.hash && (
              <Button variant="contained" className={classes.button} href={bzzLink} target="blank">
                <ExternalLink strokeWidth={1} />
                {text.accessHashPage.openWebsite}
                <ExternalLink style={{ opacity: 0 }} />
              </Button>
            )}
          </div>,
        ]}
        bottom={[
          <Footer key="bottom1">
            <Button
              variant="contained"
              className={classes.button}
              size="large"
              onClick={handleDownload}
              disabled={isDownloading}
            >
              {isDownloading ? <CircularProgress size={24} color="inherit" /> : <ArrowDown strokeWidth={1} />}
              {isDownloading ? text.accessHashPage.downloadingAction : text.accessHashPage.downloadAction}
              <ArrowDown style={{ opacity: 0 }} />
            </Button>
          </Footer>,
        ]}
      />
    )
  }

  // We have no metadata, but there is a chunk at that address. Allow users to download.
  if (chunkExists) {
    return (
      <Layout
        top={[
          <Header key="top1">
            <Logo />
          </Header>,
          <Typography key="top2" variant="subtitle1">
            {text.accessHashPage.useButtonToDownload}
          </Typography>,
        ]}
        center={[<UnknownFile key="center1" />]}
        bottom={[
          <Footer key="bottom1">
            <Button
              variant="contained"
              className={classes.button}
              size="large"
              onClick={handleDownload}
              disabled={isDownloading}
            >
              {isDownloading ? <CircularProgress size={24} color="inherit" /> : <ArrowDown strokeWidth={1} />}
              {isDownloading ? text.accessHashPage.downloadingAction : text.accessHashPage.downloadAction}
              <ArrowDown style={{ opacity: 0 }} />
            </Button>
          </Footer>,
        ]}
      />
    )
  }

  // We could not retrieve anything, display generic message
  return (
    <Layout
      top={[
        <Header key="top1">
          <Logo />
        </Header>,
        <Typography key="top2" variant="subtitle1">
          {text.accessHashPage.tagline}
        </Typography>,
      ]}
      center={[<FileNotFound key="center" />]}
      bottom={[
        <Footer key="bottom1">
          <Button variant="contained" className={classes.button} size="large" onClick={() => window.location.reload()}>
            <RefreshCw />
            {text.accessHashPage.retryAction}
            <RefreshCw style={{ opacity: 0 }} />
          </Button>
        </Footer>,
      ]}
    />
  )
}
Example #2
Source File: Share.tsx    From gateway-ui with BSD 3-Clause "New" or "Revised" License 4 votes vote down vote up 
SharePage = ({ uploadReference, metadata }: Props): ReactElement => {
  const classes = useStyles()
  const navigate = useNavigate()
  const isWebsite = metadata?.isWebsite

  const bzzLink = `https://${encodeManifestReference(uploadReference)}.${BZZ_LINK_DOMAIN}/`
  const linkHeader = isWebsite ? 'Bzz Link' : 'Web link'
  const linkUrl = isWebsite ? bzzLink : `${GATEWAY_URL}${ROUTES.ACCESS_HASH(uploadReference)}`

  const [copiedToClipboard, setCopiedToClipboard] = useState<boolean>(false)
  const [activeValue, setActiveValue] = useState<string>(uploadReference)

  return (
    <Layout
      top={[
        <Header
          key="top1"
          leftAction={
            <IconButton
              onClick={() => {
                navigate(ROUTES.LANDING_PAGE)
              }}
            >
              <ArrowLeft strokeWidth={1} />
            </IconButton>
          }
        >
          {text.shareHashPage.header}
        </Header>,
        <Typography key="top2" variant="subtitle1">
          {text.shareHashPage.tagline}
        </Typography>,
      ]}
      center={[
        <Tabs
          key="center1"
          onChange={reference => {
            if (reference !== activeValue) {
              setActiveValue(reference)
              setCopiedToClipboard(false)
            }
          }}
          values={[
            {
              label: linkHeader,
              component: (
                <div>
                  <Paper
                    square
                    elevation={0}
                    style={{ overflowWrap: 'break-word', textAlign: 'left', padding: 16, margin: 4 }}
                  >
                    <Typography variant="caption">{linkUrl}</Typography>
                  </Paper>
                  {isWebsite && (
                    <Button
                      variant="contained"
                      style={{ margin: 4, width: 'auto' }}
                      className={classes.button}
                      href={bzzLink}
                      target="blank"
                    >
                      <ExternalLink strokeWidth={1} />
                      {text.accessHashPage.openWebsite}
                      <ExternalLink style={{ opacity: 0 }} />
                    </Button>
                  )}
                </div>
              ),
              value: linkUrl,
            },
            {
              label: 'Swarm hash',
              component: (
                <Paper
                  square
                  elevation={0}
                  style={{ overflowWrap: 'break-word', textAlign: 'left', padding: 16, margin: 4 }}
                >
                  <Typography variant="caption">{uploadReference}</Typography>
                </Paper>
              ),
              value: uploadReference,
            },
          ]}
        />,
      ]}
      bottom={[
        <Typography key="bottom1" variant="body2">
          {text.shareHashPage.disclaimer}
        </Typography>,
        <Footer key="bottom2">
          <CopyToClipboard text={activeValue}>
            <Button
              variant="contained"
              className={classes.button}
              size="large"
              onClick={e => {
                e.stopPropagation()
                setCopiedToClipboard(true)
              }}
            >
              {copiedToClipboard ? <Check strokeWidth={1} /> : <Clipboard strokeWidth={1} />}
              {copiedToClipboard ? text.shareHashPage.copyLinkActionSuccess : text.shareHashPage.copyLinkAction}
              {/* Needed to properly align icon to the right and label to center */}
              <Clipboard style={{ opacity: 0 }} />
            </Button>
          </CopyToClipboard>
        </Footer>,
      ]}
    />
  )
}