date-fns#formatDistanceStrict JavaScript Examples

export function formatDateDistance(date) {
  let deliveryDate = parse(date, 'MM/dd/yyyy', new Date())
  if (isToday(deliveryDate)) {
    return 'Today'
  } else if (isYesterday(deliveryDate)) {
    return 'Yesterday'
  } else {
    return formatDistanceStrict(deliveryDate, startOfToday(), {
      unit: 'day',
      addSuffix: 'true'
    })
  }
}

formatDateDistance = (endDate) => {
  const format = formatDistanceStrict(new Date(), new Date(endDate));
  const duration = format.split(' ');
  duration[1] = duration[1].substring(0, 1);
  if (duration[1] === 's') {
    return 'Just now';
  }
  return duration.join(' ');
}

formatDays = (numDays) => {
  const d = new Date();
  return formatDistanceStrict(d, addDays(d, numDays), { unit: 'day' });
}

function Queue({ match, history, location }) {
  const { pathname } = location || {};
  const [queue, getQueue] = useResource(() => ({
    url: `/queues/${match.params.queueName}`,
    method: 'GET',
  }));
  useInterval(getQueue, 4000);
  const [jobs, getJobs] = useResource(({ page, pageSize, status }) => ({
    url: `/queues/${match.params.queueName}/jobs?status=${status}&pageSize=${pageSize}&page=${page}`,
    method: 'GET',
  }));
  const [, retryAll] = useResource(() => ({
    url: `/queues/${match.params.queueName}/retries`,
    method: 'POST',
    data: {
      status: 'failed',
    },
  }));
  const [, cleanQueue] = useResource(() => ({
    url: `/queues/${match.params.queueName}/clean`,
    method: 'POST',
  }));
  const [, pauseQueue] = useResource(() => ({
    url: `/queues/${match.params.queueName}/pause`,
    method: 'POST',
  }));
  const [, resumeQueue] = useResource(() => ({
    url: `/queues/${match.params.queueName}/resume`,
    method: 'POST',
  }));
  const [, promoteAll] = useResource(() => ({
    url: `/queues/${match.params.queueName}/promotes`,
    method: 'POST',
    data: {
      status: 'delayed',
    },
  }));
  const [selected, setSelected] = useState([]);
  const query = new URLSearchParams(location.search);
  const status = query.get('status') || 'active';
  const page = parseInt(query.get('page') || 0, 10);
  const pageSize = parseInt(query.get('pageSize') || 5, 10);
  const refreshTable = () => {
    const newQuery = new URLSearchParams(location.search);
    const newStatus = newQuery.get('status') || 'active';
    const newPage = parseInt(newQuery.get('page') || 0, 10);
    const newPageSize = parseInt(newQuery.get('pageSize') || 5, 10);
    getJobs({
      page: newPage,
      pageSize: newPageSize,
      status: newStatus,
    });
  };
  useInterval(refreshTable, 4000);
  const handleStatusChange = (event, newValue) => {
    const newQuery = new URLSearchParams(location.search);
    newQuery.set('status', newValue);
    newQuery.set('page', 0);
    setSelected([]);
    getJobs({
      page,
      pageSize,
      status: newValue,
    });
    history.push(`${pathname}?${newQuery.toString()}`);
  };

  const handleChangePage = (e, newPage) => {
    const newQuery = new URLSearchParams(location.search);
    newQuery.set('page', newPage);
    getJobs({
      page: newPage,
      pageSize,
      status,
    });
    history.push(`${pathname}?${newQuery.toString()}`);
  };
  const handleChangeRowsPerPage = (e) => {
    const newQuery = new URLSearchParams(location.search);
    newQuery.set('pageSize', e.target.value);
    getJobs({
      page,
      pageSize: e.target.value,
      status,
    });
    history.push(`${pathname}?${newQuery.toString()}`);
  };

  const data = jobs.data?.data || [];

  const handleSelectAllClick = (event) => {
    if (event.target.checked) {
      const newSelecteds = data.map((n) => n.id);
      setSelected(newSelecteds);
      return;
    }
    setSelected([]);
  };

  const handleCellClick = (event, name) => {
    const selectedIndex = selected.indexOf(name);
    let newSelected = [];

    if (selectedIndex === -1) {
      newSelected = newSelected.concat(selected, name);
    } else if (selectedIndex === 0) {
      newSelected = newSelected.concat(selected.slice(1));
    } else if (selectedIndex === selected.length - 1) {
      newSelected = newSelected.concat(selected.slice(0, -1));
    } else if (selectedIndex > 0) {
      newSelected = newSelected.concat(
        selected.slice(0, selectedIndex),
        selected.slice(selectedIndex + 1),
      );
    }

    setSelected(newSelected);
  };

  const handleBulkRetry = () => {
    client({
      url: `/queues/${match.params.queueName}/retries`,
      method: 'POST',
      data: {
        jobs: selected,
      },
    })
      .then(() => setSelected([]))
      .then(refreshTable);
  };

  const handleBulkPromote = () => {
    client({
      url: `/queues/${match.params.queueName}/promotes`,
      method: 'POST',
      data: {
        jobs: selected,
      },
    })
      .then(() => setSelected([]))
      .then(refreshTable);
  };

  const handleBulkRemove = () => {
    client({
      url: `/queues/${match.params.queueName}/removes`,
      method: 'POST',
      data: {
        jobs: selected,
      },
    })
      .then(() => setSelected([]))
      .then(refreshTable);
  };

  const { name, counts } = queue.data || {};

  return (
    <Grid container spacing={3}>
      <Grid container item xs={12} justify="space-between">
        <Breadcrumbs aria-label="breadcrumb">
          <Link component={RouterLink} color="inherit" to="/">
            Dashboard
          </Link>
          <Typography color="textPrimary">{name}</Typography>
        </Breadcrumbs>
        <div>
          <Button variant="outlined" onClick={pauseQueue}>
            Pause Queue
          </Button>
          <Button onClick={resumeQueue}>Resume Queue</Button>
          <Button onClick={cleanQueue}>Clean Queue</Button>
        </div>
      </Grid>
      <Grid item xs={12}>
        <StatusTabs
          value={status}
          counts={counts}
          onChange={handleStatusChange}
        />
      </Grid>
      <Grid item xs={12}>
        <Table
          title={name}
          page={page}
          selected={selected}
          onChangePage={handleChangePage}
          onCellClick={handleCellClick}
          onSelectAllClick={handleSelectAllClick}
          columns={[
            { title: 'ID', field: 'id' },
            { title: 'Job Name', field: 'name' },
            {
              title: 'Created At',
              field: 'timestamp',
              render: (value) =>
                value && (
                  <Tooltip
                    placement="top"
                    title={`${formatDistanceStrict(value, Date.now())} ago`}
                  >
                    <span>{formatISO(value)}</span>
                  </Tooltip>
                ),
            },
            {
              title: 'Started At',
              field: 'processedOn',
              render: (value) =>
                value && (
                  <Tooltip placement="top" title={formatISO(value)}>
                    <span>{formatDistanceStrict(value, Date.now())} ago</span>
                  </Tooltip>
                ),
            },
            {
              title: 'Completed At',
              field: 'finishedOn',
              render: (value) =>
                value ? (
                  <Tooltip placement="top" title={formatISO(value)}>
                    <span>{formatDistanceStrict(value, Date.now())} ago</span>
                  </Tooltip>
                ) : (
                  'Not completed'
                ),
            },
            {
              title: 'Delayed To',
              field: 'delayedTo',
              render: (value) =>
                value && (
                  <Tooltip placement="top" title={formatISO(value)}>
                    <span>{formatDistanceStrict(value, Date.now())} later</span>
                  </Tooltip>
                ),
            },
            {
              title: 'Progress',
              field: 'progress',
              render: (value) => <CircularProgress size={48} value={value} />,
            },
            {
              title: 'Attempts',
              field: 'attempts',
              render: (val, field) =>
                `${field.attemptsMade}/${field.attemptsTotal}`,
            },
            {
              title: 'Actions',
              field: 'actions',
              render: (val, field) => (
                <Button
                  size="small"
                  component={RouterLink}
                  startIcon={<VisibilityIcon />}
                  to={`${pathname}/${field.id}`}
                >
                  Details
                </Button>
              ),
            },
          ].filter((column) => FIELDS[status].includes(column.field))}
          rowsPerPage={pageSize}
          pageSizeOptions={[5, 20, 50, 100]}
          onChangeRowsPerPage={handleChangeRowsPerPage}
          totalCount={jobs.data?.totalCount}
          bulkActions={
            <div>
              {status === 'delayed' && (
                <Fragment>
                  <Button onClick={handleBulkPromote}>Promote</Button>
                  <Button onClick={handleBulkRemove}>Remove</Button>
                </Fragment>
              )}
              {status === 'failed' && (
                <Button onClick={handleBulkRetry}>Retry</Button>
              )}
            </div>
          }
          actions={
            <div>
              {status === 'delayed' && (
                <Button onClick={promoteAll}>Promote All</Button>
              )}
              {status === 'failed' && (
                <Button onClick={retryAll}>Retry All</Button>
              )}
            </div>
          }
          data={data}
        />
      </Grid>
    </Grid>
  );
}