date-fns#formatDistanceToNowStrict TypeScript Examples

DataRow: React.FC<{ transaction: Transaction }> = ({ transaction }) => {
  const { t } = useTranslation()
  const abs0 = Math.abs(transaction.amountToken0)
  const abs1 = Math.abs(transaction.amountToken1)
  const outputTokenSymbol = transaction.amountToken0 < 0 ? transaction.token0Symbol : transaction.token1Symbol
  const inputTokenSymbol = transaction.amountToken1 < 0 ? transaction.token0Symbol : transaction.token1Symbol

  return (
    <ResponsiveGrid>
      <LinkExternal href={getBscScanLink(transaction.hash, 'transaction')}>
        <Text>
          {transaction.type === TransactionType.MINT
            ? t('Add %token0% and %token1%', { token0: transaction.token0Symbol, token1: transaction.token1Symbol })
            : transaction.type === TransactionType.SWAP
            ? t('Swap %token0% for %token1%', { token0: inputTokenSymbol, token1: outputTokenSymbol })
            : t('Remove %token0% and %token1%', { token0: transaction.token0Symbol, token1: transaction.token1Symbol })}
        </Text>
      </LinkExternal>
      <Text>${formatAmount(transaction.amountUSD)}</Text>
      <Text>
        <Text>{`${formatAmount(abs0)} ${transaction.token0Symbol}`}</Text>
      </Text>
      <Text>
        <Text>{`${formatAmount(abs1)} ${transaction.token1Symbol}`}</Text>
      </Text>
      <LinkExternal href={getBscScanLink(transaction.sender, 'address')}>
        {truncateHash(transaction.sender)}
      </LinkExternal>
      <Text>{formatDistanceToNowStrict(parseInt(transaction.timestamp, 10) * 1000)}</Text>
    </ResponsiveGrid>
  )
}

DataRow: React.FC<{ transaction: Transaction }> = ({ transaction }) => {
  const { t } = useTranslation()
  const abs0 = Math.abs(transaction.amountToken0)
  const abs1 = Math.abs(transaction.amountToken1)
  const outputTokenSymbol = transaction.amountToken0 < 0 ? transaction.token0Symbol : transaction.token1Symbol
  const inputTokenSymbol = transaction.amountToken1 < 0 ? transaction.token0Symbol : transaction.token1Symbol

  return (
    <ResponsiveGrid>
      <LinkExternal href={getExplorerLink(transaction.hash, 'transaction')}>
        <Text>
          {transaction.type === TransactionType.MINT
            ? t('Add %token0% and %token1%', { token0: transaction.token0Symbol, token1: transaction.token1Symbol })
            : transaction.type === TransactionType.SWAP
            ? t('Swap %token0% for %token1%', { token0: inputTokenSymbol, token1: outputTokenSymbol })
            : t('Remove %token0% and %token1%', { token0: transaction.token0Symbol, token1: transaction.token1Symbol })}
        </Text>
      </LinkExternal>
      <Text>${formatAmount(transaction.amountUSD)}</Text>
      <Text>
        <Text>{`${formatAmount(abs0)} ${transaction.token0Symbol}`}</Text>
      </Text>
      <Text>
        <Text>{`${formatAmount(abs1)} ${transaction.token1Symbol}`}</Text>
      </Text>
      <LinkExternal href={getExplorerLink(transaction.sender, 'address')}>
        <Text>{truncateHash(transaction.sender)}</Text>
      </LinkExternal>
      <Text>{formatDistanceToNowStrict(parseInt(transaction.timestamp, 10) * 1000)}</Text>
    </ResponsiveGrid>
  )
}

formatDateAgo = (date: Date): string => {
  return `${formatDistanceToNowStrict(date)} ago`
}

PlaygroundEstimatingBlockTime = () => {
  const [datetimeLocal, setDatetimeLocal] = useState('')
  const [blockNumber, setBlockNumber] = useState(0)

  const { currentBlock } = useJoystream()
  const { convertBlockToMsTimestamp, convertMsTimestampToBlock } = useBlockTimeEstimation()
  const msTimestamp = useMsTimestamp()

  const blockNumberMsTimeStamp = convertBlockToMsTimestamp(blockNumber)

  return (
    <div>
      <div>
        <Text variant="h700">Current state</Text>
        <Text variant="h300">Current block number: {currentBlock}</Text>
        <Text variant="h300">Current time: {new Date(msTimestamp).toLocaleString()}</Text>
      </div>
      <br />
      <div>
        <Text variant="h700">Convert block to time</Text>
        <FormField title="Change number of block">
          <TextField
            type="number"
            value={String(blockNumber)}
            onChange={(e) => setBlockNumber(Number(e.currentTarget.value))}
          />
        </FormField>
        <Text variant="h500">Results:</Text>
        <Text variant="h300">Block number: {blockNumber}</Text>
        <Text variant="h300">
          Date: {blockNumberMsTimeStamp ? new Date(blockNumberMsTimeStamp).toLocaleString() : null}{' '}
        </Text>
        <Text variant="h300">
          Timeleft:{' '}
          {blockNumberMsTimeStamp
            ? formatDistanceToNowStrict(new Date(blockNumberMsTimeStamp), { addSuffix: true })
            : null}{' '}
        </Text>
      </div>
      <br />
      <div>
        <Text variant="h700">Convert time to block</Text>
        <FormField title="Change date">
          <input
            type="datetime-local"
            step={1}
            value={datetimeLocal}
            onChange={(e) => setDatetimeLocal(e.currentTarget.value)}
          />
        </FormField>
        <Text variant="h500">Results:</Text>
        <Text variant="h300">Block number: {convertMsTimestampToBlock(Date.parse(datetimeLocal))}</Text>
        <Text variant="h300">Date: {datetimeLocal}</Text>
      </div>
    </div>
  )
}

GetQuestdbPage = () => {
  const title = "Download QuestDB"
  const description =
    "Download QuestDB, an open source time series SQL database for fast ingestion and queries"
  const { release } = usePluginData<{ release: Release }>(
    "fetch-latest-release",
  )
  const [os, setOs] = useState<Os | undefined>()
  const [releaseDate, setReleaseDate] = useState(
    format(new Date(release.published_at), "MMMM M, yyyy"),
  )
  const assets = getAssets(release)

  useEffect(() => {
    const isClient = typeof window !== "undefined"

    if (!isClient) {
      return
    }

    if (differenceInDays(new Date(), new Date(release.published_at)) < 31) {
      setReleaseDate(
        `${formatDistanceToNowStrict(new Date(release.published_at))} ago`,
      )
    }
    setOs(getOs())
  }, [release.published_at])

  const perOs = {
    linux: (
      <Binary
        architecture
        href={assets.linux.href}
        logo={
          <img
            alt="Linux Logo"
            className={biCss.binary__logo}
            height={49}
            src="/img/pages/getQuestdb/linux.svg"
            width={42}
          />
        }
        rt
        size={assets.linux.size}
        title="Linux"
      >
        <p className={biCss.binary__docs}>
          <a href="/docs/get-started/binaries#your-operating-system-version">
            Docs
          </a>
        </p>
      </Binary>
    ),
    macos: (
      <Binary
        basis="15px"
        grow={1}
        logo={
          <img
            alt="macOS Logo"
            className={biCss.binary__logo}
            height={49}
            src="/img/pages/getQuestdb/macos.svg"
            width={41}
          />
        }
        title="macOS (via Homebrew)"
      >
        <div />

        <CodeBlock className="language-shell">
          {`brew update
brew install questdb`}
        </CodeBlock>

        <p className={biCss.binary__docs}>
          <a href="/docs/get-started/homebrew">Docs</a>
        </p>
      </Binary>
    ),
    windows: (
      <Binary
        architecture
        href={assets.windows.href}
        logo={
          <img
            alt="Windows Logo"
            className={biCss.binary__logo}
            height={49}
            src="/img/pages/getQuestdb/windows.svg"
            width={49}
          />
        }
        rt
        size={assets.windows.size}
        title="Windows"
      >
        <p className={biCss.binary__docs}>
          <a href="/docs/get-started/binaries#your-operating-system-version">
            Docs
          </a>
        </p>
      </Binary>
    ),
  }

  useEffect(() => {
    const isClient = typeof window !== "undefined"

    if (!isClient) {
      return
    }

    setOs(getOs())
  }, [])

  return (
    <Layout canonical="/get-questdb" description={description} title={title}>
      <section
        className={clsx(seCss["section--inner"], seCss["section--accent"])}
      >
        <div className={seCss.section__header}>
          <h1
            className={clsx(
              seCss.section__title,
              seCss["section__title--accent"],
            )}
          >
            Download QuestDB
          </h1>

          <p
            className={clsx(
              seCss.section__subtitle,
              seCss["section__subtitle--accent"],
              "text--center",
            )}
          >
            You can find below download links for the latest version of QuestDB
            ({release.name}). Once your download is finished, you can check our
            documentation for <a href="/docs/get-started/docker/">Docker</a>,
            the <a href="/docs/get-started/binaries/">binaries</a> or{" "}
            <a href="/docs/get-started/homebrew/">Homebrew</a> to get started.
          </p>

          <img
            alt="Screenshot of the Web Console showing various SQL statements and the result of one as a chart"
            className={ilCss.illustration}
            height={375}
            src="/img/pages/getQuestdb/console.png"
            width={500}
          />

          <div className={ctCss.cta}>
            <p
              className={clsx(ctCss.cta__details, {
                [ctCss["cta__details--download"]]: os !== "macos",
              })}
            >
              Latest Release:&nbsp;
              <span className={ctCss.cta__version}>{release.name}</span>
              &nbsp;({releaseDate})
            </p>
            {os != null && os !== "macos" && assets[os] && (
              <Button href={assets[os].href} newTab={false}>
                {os}&nbsp;Download
              </Button>
            )}
          </div>

          <div className={chCss.changelog}>
            <a
              className={chCss.changelog__link}
              href={release.html_url}
              rel="noopener noreferrer"
              target="_blank"
            >
              View the changelog
            </a>
            <a
              className={chCss.changelog__link}
              href={`${customFields.githubUrl}/tags`}
              rel="noopener noreferrer"
              target="_blank"
            >
              View previous releases
            </a>
          </div>
        </div>
      </section>

      <div className={seCss["section--flex-wrap"]}>
        <Binary
          basis="40px"
          grow={2.6}
          logo={
            <img
              alt="Docker logo"
              className={biCss.binary__logo}
              height={49}
              src="/img/pages/getQuestdb/docker.svg"
              width={69}
            />
          }
          title="Docker"
        >
          <CodeBlock className="language-shell">
            docker run -p 9000:9000 questdb/questdb
          </CodeBlock>
          <p className={biCss.binary__docs}>
            <a href="/docs/get-started/docker">Docs</a>
          </p>
        </Binary>
        <Binary
          grow={0.6}
          logo={
            <img
              alt="Helm logo"
              className={biCss.binary__logo}
              height={49}
              src="/img/pages/getQuestdb/helm.svg"
              width={50}
            />
          }
          title="Kubernetes (via Helm)"
        >
          <CodeBlock className="language-shell">
            {`helm repo add questdb https://helm.${customFields.domain}/
helm install my-questdb questdb/questdb --version ${customFields.helmVersion}`}
          </CodeBlock>
          <p className={biCss.binary__docs}>
            <a
              href={customFields.artifactHubUrl}
              rel="noopener noreferrer"
              target="_blank"
            >
              Docs
            </a>
          </p>
        </Binary>
        {os != null ? (
          <>
            {perOs[os]}
            {os !== "linux" && perOs.linux}
            {os !== "macos" && perOs.macos}
            {os !== "windows" && perOs.windows}
          </>
        ) : (
          <>
            {perOs.linux}
            {perOs.macos}
            {perOs.windows}
          </>
        )}
        <Binary
          architecture
          detailsGrow={3.5}
          href={assets.noJre.href}
          logo={
            <img
              alt="Planet with wings"
              className={biCss.binary__logo}
              height={49}
              src="/img/pages/getQuestdb/nojre.svg"
              width={75}
            />
          }
          size={assets.noJre.size}
          title="Any (no JVM)"
        >
          <p className={biCss.binary__docs}>
            <a href="/docs/get-started/binaries#any-no-jvm-version">Docs</a>
          </p>
        </Binary>
        <Binary
          grow={0.5}
          logo={
            <img
              alt="Maven logo"
              className={biCss.binary__logo}
              height={49}
              src="/img/pages/getQuestdb/maven.svg"
              width={37}
            />
          }
          title="Maven"
        >
          <CodeBlock className="language-xml">
            {`<dependency>
  <groupId>org.questdb</groupId>
  <artifactId>questdb</artifactId>
  <version>${release.name}</version>
</dependency>`}
          </CodeBlock>
          <p className={biCss.binary__docs}>
            <a href="/docs/reference/api/java-embedded">Docs</a>
          </p>
        </Binary>
        <Binary
          grow={2}
          logo={
            <img
              alt="Gradle logo"
              className={biCss.binary__logo}
              height={48}
              src="/img/pages/getQuestdb/gradle.svg"
              width={67}
            />
          }
          title="Gradle"
        >
          <CodeBlock className="language-shell">
            {`implementation 'org.questdb:questdb:${release.name}'`}
          </CodeBlock>
          <div style={{ height: "2.75rem" }} />
          <p className={biCss.binary__docs}>
            <a href="/docs/reference/api/java-embedded">Docs</a>
          </p>
        </Binary>
      </div>

      <div className={heCss.help}>
        <img
          alt="SQL statement in a code editor with an artistic view of the query result shown as a chart and a table"
          className={heCss.help__illustration}
          height={468}
          src="/img/pages/getQuestdb/query.svg"
          width={500}
        />

        <div className={heCss.help__text}>
          <h2 className={heCss.help__title}>How does it work</h2>
          <p>
            QuestDB is distributed as a single binary. You can download either:
          </p>
          <ul className={heCss.help__list}>
            <li className={heCss.help__bullet}>
              The &quot;rt&quot; version, this includes a trimmed JVM so you do
              not need anything else (~ {assets.linux.size})
            </li>
            <li className={heCss.help__bullet}>
              The binary itself (~ {assets.noJre.size}), without the JVM. In
              this case, you need Java 11 installed locally
            </li>
          </ul>
          <p>
            To find out more about how to use the binaries, please check
            the&nbsp;
            <a href="/docs/get-started/binaries/">dedicated page</a> in our
            documentation.
          </p>
          <p>
            Check out the{" "}
            <a
              href={release.html_url}
              rel="noopener noreferrer"
              target="_blank"
            >
              v{release.name} CHANGELOG
            </a>{" "}
            for information on the latest release.
          </p>
        </div>
      </div>
    </Layout>
  )
}