packages/hooks/useDateCountdown.ts

   1 import { useState } from 'react';
   2
   3 import { differenceInMilliseconds } from 'date-fns';
   4
   5 import { DAY, HOUR, MINUTE, SECOND } from '@proton/shared/lib/constants';
   6
   7 import useInterval from './useInterval';
   8
   9 const EVERY_SECOND = SECOND;
  10
  11 export interface DateCountdown {
  12     /**
  13      * Difference between the two dates in milliseconds.
  14      */
  15     diff: number;
  16     /**
  17      * Number of days remaining.
  18      */
  19     days: number;
  20     /**
  21      * Number of hours remaining.
  22      */
  23     hours: number;
  24     /**
  25      * Number of minutes remaining.
  26      */
  27     minutes: number;
  28     /**
  29      * Number of seconds remaining.
  30      */
  31     seconds: number;
  32     /**
  33      * Whether the countdown is expired.
  34      * `true` if the `end` date is in the past.
  35      */
  36     expired: boolean;
  37 }
  38
  39 export interface DateCountdownOptions {
  40     interval?: number;
  41 }
  42
  43 const useDateCountdown = (
  44     /**
  45      * The date the countdown counts down to.
  46      */
  47     expiry: Date,
  48     {
  49         /**
  50          * Number of milliseconds between updates
  51          */
  52         interval = EVERY_SECOND,
  53     }: DateCountdownOptions = {}
  54 ): DateCountdown => {
  55     const [now, setNow] = useState(() => new Date());
  56
  57     useInterval(() => setNow(new Date()), interval);
  58
  59     const diff = differenceInMilliseconds(expiry, now);
  60     const expired = diff < 0;
  61     const absoluteDiff = Math.abs(diff);
  62     const days = Math.floor(absoluteDiff / DAY);
  63     const hours = Math.floor((absoluteDiff % DAY) / HOUR);
  64     const minutes = Math.floor((absoluteDiff % HOUR) / MINUTE);
  65     const seconds = Math.floor((absoluteDiff % MINUTE) / SECOND);
  66
  67     return { expired, diff, days, hours, minutes, seconds };
  68 };
  69
  70 export default useDateCountdown;