date-fns#formatRelative TypeScript Examples

The following examples show how to use date-fns#formatRelative. 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: date.ts    From multisig-react with MIT License 6 votes vote down vote up 
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())
}
Example #2
Source File: notify-item.component.ts    From App with MIT License 5 votes vote down vote up 
getTimestamp(): Observable<string> {
		return (this.notification as NotificationStructure).getTimestamp().pipe(
			map(date => formatRelative(date, new Date()))
		);
	}
Example #3
Source File: date.ts    From frontend with MIT License 5 votes vote down vote up 
dateFormatter = (value: Date | string | number) => {
  const date = new Date(value)
  const exact = format(date, formatDatetime)
  const relative = formatRelative(date, new Date())
  return `${exact} (${relative})`
}
Example #4
Source File: date.ts    From frontend with MIT License 5 votes vote down vote up 
getRelativeDate = (value: Date | string) => {
  const date = new Date(value)
  return formatRelative(date, new Date())
}
Example #5
Source File: DonorsAndDonations.tsx    From frontend with MIT License 5 votes vote down vote up 
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>
  )
}
Example #6
Source File: NoteCard.tsx    From vscode-crossnote with GNU Affero General Public License v3.0 4 votes vote down vote up 
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>
  );
}