App.js

import "./App.css";
import "react-clock/dist/Clock.css";
import { useQuery, QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";
import TimeAgo from "react-timeago";
import L10nsStrings from "react-timeago/lib/language-strings/en-fuzzy-short";
import buildFormatter from "react-timeago/lib/formatters/buildFormatter";
import { useEffect, useState } from "react";
import Clock from "react-clock";

const queryClient = new QueryClient();
const formatter = buildFormatter(L10nsStrings);

function App() {
  const [value, setValue] = useState(new Date());

  useEffect(() => {
    const interval = setInterval(() => setValue(new Date()), 1000);

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <QueryClientProvider client={queryClient}>
      <div id="display">
        <Clock
          value={value}
          renderSecondHand={false}
          renderMinuteMarks={false}
        />
        <SubwayDisplay />
      </div>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

function SubwayDisplay() {
  const { isLoading, isError, data, error } = useQuery(
    ["departures"],
    async () => {
      const response = await fetch(
        "https://v6.bvg.transport.rest/stops/900068302/departures?direction=900086102"
      );

      if (!response.ok) {
        throw new Error("Network response was not ok");
      }
      return response.json();
    },
    {
      refetchInterval: 25000,
    }
  );

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div id="departures">
      {data.departures
        .filter((departure) => new Date(departure.when) > new Date())
        .map((departure) => (
          <div key={departure.tripId}>
            <span>{departure.line.name}</span>
            <span>{departure.direction}</span>
            <span>
              <TimeAgo date={departure.when} formatter={formatter}></TimeAgo>
            </span>
          </div>
        ))}
    </div>
  );
}

export default App;