date-fns#subMinutes JavaScript Examples

isSpent = async ({ ins }, artwork_id) => {
  try {
    let { transactions } = await q(getLastTransaction, { artwork_id });

    if (
      !transactions.length ||
      compareAsc(
        parseISO(transactions[0].created_at),
        subMinutes(new Date(), 2)
      ) > 0
    )
      return false;

    for (let i = 0; i < ins.length; i++) {
      let { index, hash } = ins[i];
      let txid = reverse(hash).toString("hex");

      let { spent } = await electrs
        .url(`/tx/${txid}/outspend/${index}`)
        .get()
        .json();

      if (spent) return true;
    }

    return false;
  } catch (e) {
    console.log("problem checking spent status", e);
    return false;
  }
}

export default function RealtimeChart({ data, unit, ...props }) {
  const endDate = startOfMinute(new Date());
  const startDate = subMinutes(endDate, REALTIME_RANGE);
  const prevEndDate = useRef(endDate);

  const chartData = useMemo(() => {
    if (data) {
      return {
        pageviews: getDateArray(mapData(data.pageviews), startDate, endDate, unit),
        sessions: getDateArray(mapData(data.sessions), startDate, endDate, unit),
      };
    }
    return { pageviews: [], sessions: [] };
  }, [data]);

  // Don't animate the bars shifting over because it looks weird
  const animationDuration = useMemo(() => {
    if (isBefore(prevEndDate.current, endDate)) {
      prevEndDate.current = endDate;
      return 0;
    }
    return DEFAULT_ANIMATION_DURATION;
  }, [data]);

  return (
    <PageviewsChart
      {...props}
      height={200}
      unit={unit}
      data={chartData}
      animationDuration={animationDuration}
    />
  );
}

export function getActiveVisitors(website_id) {
  const date = subMinutes(new Date(), 5);
  const params = [website_id, date];

  return rawQuery(
    `
    select count(distinct session_id) x
    from pageview
    where website_id=$1
    and created_at >= $2
    `,
    params,
  );
}

export default function RealtimeDashboard() {
  const { locale } = useLocale();
  const countryNames = useCountryNames(locale);
  const [data, setData] = useState();
  const [websiteId, setWebsiteId] = useState(0);
  const { data: init, loading } = useFetch('/realtime/init');
  const { data: updates } = useFetch('/realtime/update', {
    params: { start_at: data?.timestamp },
    disabled: !init?.websites?.length || !data,
    interval: REALTIME_INTERVAL,
    headers: { [SHARE_TOKEN_HEADER]: init?.token },
  });

  const renderCountryName = useCallback(
    ({ x }) => <span className={locale}>{countryNames[x]}</span>,
    [countryNames],
  );

  const realtimeData = useMemo(() => {
    if (data) {
      const { pageviews, sessions, events } = data;

      if (websiteId) {
        return {
          pageviews: filterWebsite(pageviews, websiteId),
          sessions: filterWebsite(sessions, websiteId),
          events: filterWebsite(events, websiteId),
        };
      }
    }

    return data;
  }, [data, websiteId]);

  const countries = useMemo(() => {
    if (realtimeData?.sessions) {
      return percentFilter(
        realtimeData.sessions
          .reduce((arr, { country }) => {
            if (country) {
              const row = arr.find(({ x }) => x === country);

              if (!row) {
                arr.push({ x: country, y: 1 });
              } else {
                row.y += 1;
              }
            }
            return arr;
          }, [])
          .sort(firstBy('y', -1)),
      );
    }
    return [];
  }, [realtimeData?.sessions]);

  useEffect(() => {
    if (init && !data) {
      const { websites, data } = init;

      setData({ websites, ...data });
    }
  }, [init]);

  useEffect(() => {
    if (updates) {
      const { pageviews, sessions, events, timestamp } = updates;
      const time = subMinutes(startOfMinute(new Date()), REALTIME_RANGE).getTime();

      setData(state => ({
        ...state,
        pageviews: mergeData(state.pageviews, pageviews, time),
        sessions: mergeData(state.sessions, sessions, time),
        events: mergeData(state.events, events, time),
        timestamp,
      }));
    }
  }, [updates]);

  if (!init || !data || loading) {
    return null;
  }

  const { websites } = data;

  return (
    <Page>
      <RealtimeHeader
        websites={websites}
        websiteId={websiteId}
        data={{ ...realtimeData, countries }}
        onSelect={setWebsiteId}
      />
      <div className={styles.chart}>
        <RealtimeChart
          websiteId={websiteId}
          data={realtimeData}
          unit="minute"
          records={REALTIME_RANGE}
        />
      </div>
      <GridLayout>
        <GridRow>
          <GridColumn xs={12} lg={4}>
            <RealtimeViews websiteId={websiteId} data={realtimeData} websites={websites} />
          </GridColumn>
          <GridColumn xs={12} lg={8}>
            <RealtimeLog websiteId={websiteId} data={realtimeData} websites={websites} />
          </GridColumn>
        </GridRow>
        <GridRow>
          <GridColumn xs={12} lg={4}>
            <DataTable
              title={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
              metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
              data={countries}
              renderLabel={renderCountryName}
            />
          </GridColumn>
          <GridColumn xs={12} lg={8}>
            <WorldMap data={countries} />
          </GridColumn>
        </GridRow>
      </GridLayout>
    </Page>
  );
}