date-fns#formatRelative TypeScript Examples

relativeTime = (baseTimeMin: string, resetTimeMin: string): string => {
  if (resetTimeMin === '0') {
    return 'One-time'
  }

  const baseTimeSeconds = +baseTimeMin * 60
  const resetTimeSeconds = +resetTimeMin * 60
  const nextResetTimeMilliseconds = (baseTimeSeconds + resetTimeSeconds) * 1000

  return formatRelative(nextResetTimeMilliseconds, Date.now())
}

getTimestamp(): Observable<string> {
		return (this.notification as NotificationStructure).getTimestamp().pipe(
			map(date => formatRelative(date, new Date()))
		);
	}

dateFormatter = (value: Date | string | number) => {
  const date = new Date(value)
  const exact = format(date, formatDatetime)
  const relative = formatRelative(date, new Date())
  return `${exact} (${relative})`
}

getRelativeDate = (value: Date | string) => {
  const date = new Date(value)
  return formatRelative(date, new Date())
}

export default function DonorsAndDonations({
  donations,
}: {
  donations: CampaignDonation[] | undefined
}) {
  const { t, i18n } = useTranslation()
  const [all, setAll] = useState<boolean>(false)
  const shownDonationsNumber = 5
  const donationsToShow = useMemo(() => {
    if (all) {
      return donations
    }
    return donations?.slice(0, shownDonationsNumber)
  }, [donations, all])
  return (
    <Root>
      <Grid item className={classes.donationsWrapper}>
        {donationsToShow && donationsToShow.length !== 0 ? (
          donationsToShow.map(({ person, amount, createdAt }, key) => (
            <Grid key={key} className={classes.donationItemWrapper}>
              <AccountCircleIcon fontSize="large" color="disabled" />
              <Grid>
                <Typography>
                  {t('campaigns:cta.donor')} {key + 1}.{' '}
                  {person
                    ? person.firstName + ' ' + person.lastName
                    : t('campaigns:donations.anonymous')}
                </Typography>
                <Grid className={classes.donationQuantityAndTimeWrapper}>
                  <Typography>
                    {(amount / 100).toFixed(2) + ' ' + t('campaigns:donations.lv')}
                  </Typography>
                  <FiberManualRecordIcon className={classes.separatorIcon} />
                  <Typography>
                    {formatRelative(parseISO(createdAt), new Date(), {
                      locale: i18n.language == 'bg' ? bg : enUS,
                    })}
                  </Typography>
                </Grid>
              </Grid>
            </Grid>
          ))
        ) : (
          <Typography sx={{ textAlign: 'center', marginBottom: theme.spacing(4) }}>
            {t('campaigns:donations.none')}
          </Typography>
        )}
      </Grid>
      <Grid>
        {donations && donations.length > shownDonationsNumber && (
          <Button onClick={() => setAll((prev) => !prev)} variant="outlined">
            {all ? t('campaigns:cta.see-less') : t('campaigns:cta.see-all')}
          </Button>
        )}
      </Grid>
    </Root>
  )
}

export default function NoteCard(props: Props) {
  const classes = useStyles(props);
  const note = props.note;
  const [header, setHeader] = useState<string>("");
  const [summary, setSummary] = useState<Summary>(null);
  const [images, setImages] = useState<string[]>([]);
  const { t } = useTranslation();
  const duration = formatDistanceStrict(note.config.modifiedAt, Date.now())
    .replace(/\sseconds?/, "s")
    .replace(/\sminutes?/, "m")
    .replace(/\shours?/, "h")
    .replace(/\sdays?/, "d")
    .replace(/\sweeks?/, "w")
    .replace(/\smonths?/, "mo")
    .replace(/\syears?/, "y");

  const openNote = useCallback(() => {
    if (!note) {
      return;
    }
    const message: Message = {
      action: MessageAction.OpenNote,
      data: note,
    };
    vscode.postMessage(message);
    props.setSelectedNote(note);
  }, [note, props.setSelectedNote]);

  useEffect(() => {
    setHeader(
      (note.config.encryption && note.config.encryption.title) ||
        getHeaderFromMarkdown(note.markdown)
    );
    generateSummaryFromMarkdown(
      note.config.encryption
        ? `? ${t("general/encrypted")}`
        : note.markdown.trim() || t("general/this-note-is-empty")
    )
      .then((summary) => {
        setSummary(summary);

        // render images
        const images = summary.images
          .map((image) => {
            return resolveNoteImageSrc(note, image);
          })
          .filter((x) => x)
          .slice(0, 3); // TODO: Support local image
        setImages(images);
      })
      .catch((error) => {});
  }, [note.markdown, note.config.encryption, t]);

  /*
  useEffect(() => {
    crossnoteContainer.crossnote.getStatus(note).then((status) => {
      setGitStatus(status);
    });
  }, [
    note.markdown,
    note.config.modifiedAt,
    note,
    crossnoteContainer.crossnote,
  ]);
  */

  return (
    <ButtonBase
      className={clsx(
        classes.noteCard,
        props.selectedNote &&
          props.selectedNote.filePath === note.filePath &&
          props.selectedNote.notebookPath === note.notebookPath
          ? classes.selected
          : classes.unselected
      )}
      onClick={openNote}
    >
      <Box className={clsx(classes.leftPanel)}>
        <Tooltip
          title={
            <>
              <p>
                {t("general/created-at") +
                  " " +
                  formatRelative(new Date(note.config.createdAt), new Date())}
              </p>
              <p>
                {t("general/modified-at") +
                  " " +
                  formatRelative(new Date(note.config.modifiedAt), new Date())}
              </p>
            </>
          }
          arrow
        >
          <Typography className={clsx(classes.duration)}>{duration}</Typography>
        </Tooltip>

        {note.config.pinned && <Pin className={clsx(classes.pin)}></Pin>}
      </Box>
      <Box className={clsx(classes.rightPanel)}>
        {header && (
          <Typography
            style={{ fontWeight: "bold" }}
            variant={"body1"}
            className={clsx(classes.header)}
          >
            {header}
          </Typography>
        )}
        {summary && summary.summary.trim().length > 0 && (
          <Typography className={clsx(classes.summary)}>
            {summary && summary.summary}
          </Typography>
        )}
        {images.length > 0 && (
          <Box className={clsx(classes.images)}>
            <Box className={clsx(classes.imagesWrapper)}>
              {images.map((image, offset) => (
                <div
                  key={`${image}-${offset}`}
                  className={clsx(classes.image)}
                  style={{
                    backgroundImage: `url(${image})`,
                  }}
                ></div>
              ))}
            </Box>
          </Box>
        )}
        <Typography variant={"caption"} className={clsx(classes.filePath)}>
          {basename(note.filePath).startsWith("unnamed_") ? "" : note.filePath}
        </Typography>
      </Box>
    </ButtonBase>
  );
}