src/components/rules/RuleProviderItem.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

import { formatDistance } from 'date-fns';
import * as React from 'react';

import Button from '~/components/Button';
import { useUpdateRuleProviderItem } from '~/components/rules/rules.hooks';
import { SectionNameType } from '~/components/shared/Basic';
import { RotateIcon } from '~/components/shared/RotateIcon';

import s from './RuleProviderItem.module.scss';

export function RuleProviderItem({
  idx,
  name,
  vehicleType,
  behavior,
  updatedAt,
  ruleCount,
  apiConfig,
}) {
  const [onClickRefreshButton, isRefreshing] = useUpdateRuleProviderItem(name, apiConfig);
  const timeAgo = formatDistance(new Date(updatedAt), new Date());
  return (
    <div className={s.RuleProviderItem}>
      <span className={s.left}>{idx}</span>
      <div className={s.middle}>
        <SectionNameType name={name} type={`${vehicleType} / ${behavior}`} />
        <div className={s.gray}>{ruleCount < 2 ? `${ruleCount} rule` : `${ruleCount} rules`}</div>
        <small className={s.gray}>Updated {timeAgo} ago</small>
      </div>
      <span className={s.refreshButtonWrapper}>
        <Button onClick={onClickRefreshButton} disabled={isRefreshing}>
          <RotateIcon isRotating={isRefreshing} />
        </Button>
      </span>
    </div>
  );
}