date-fns#roundToNearestMinutes TypeScript Examples

The following examples show how to use date-fns#roundToNearestMinutes. 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: sleep-data-helper.ts    From nyxo-app with GNU General Public License v3.0 5 votes vote down vote up 
export function calculateBedtimeWindow(
  lastSevenDays: Day[]
): {
  goToSleepWindowStart: string
  goToSleepWindowCenter: string
  goToSleepWindowEnd: string
} {
  let averageBedTime = 0
  let divideBy = 0
  lastSevenDays.forEach((day) => {
    const dayStarted = new Date(day.date) // Beginning of the day
    if (day.bedStart) {
      const bedTimeStart = new Date(day.bedStart)

      const totalDifference = differenceInMinutes(bedTimeStart, dayStarted)
      // Add difference to the average time
      averageBedTime += totalDifference
      // increment divider
      divideBy += 1
    }
  })

  if (divideBy !== 0) {
    averageBedTime /= divideBy
  }

  // Remove the extra 24 hours
  if (averageBedTime > 1440) {
    averageBedTime = -1440
  }

  const bedTimeWindowCenter = roundToNearestMinutes(
    setMinutes(startOfDay(new Date()), averageBedTime),
    {
      nearestTo: 15
    }
  ).toISOString()

  const bedTimeWindowStart = subMinutes(
    new Date(bedTimeWindowCenter),
    45
  ).toISOString()

  const bedTimeWindowEnd = addMinutes(
    new Date(bedTimeWindowCenter),
    45
  ).toISOString()

  const insights = {
    goToSleepWindowStart: bedTimeWindowStart,
    goToSleepWindowCenter: bedTimeWindowCenter,
    goToSleepWindowEnd: bedTimeWindowEnd
  }

  return insights
}
Example #2
Source File: AuctionDatePicker.tsx    From atlas with GNU General Public License v3.0 4 votes vote down vote up 
AuctionDatePicker: React.FC<AuctionDatePickerProps> = ({
  items,
  value,
  onChange,
  label,
  minDate,
  maxDate,
  ...rest
}) => {
  const selectRef = useRef(null)
  const popOverRef = useRef<PopoverImperativeHandle>(null)
  const [startDate, setStartDate] = useState<Date | null>(null)
  const [open, setOpen] = useState(false)
  const pickDateItem: SelectItem<AuctionDatePickerValueWithPickDate> = React.useMemo(
    () => ({
      value: { type: 'pick-date' },
      name: 'Pick specific date',
      menuName: 'Pick specific date',
      onClick: () => popOverRef.current?.show(),
    }),
    []
  )

  const msTimestamp = useMsTimestamp()

  const convertedItems = items.map((item) => {
    if (item.value === null) {
      return { value: { type: 'default' as const }, name: item.name }
    }
    return item
  })

  const [pickedValue, setPickedValue] = useState<AuctionDatePickerValueWithPickDate>(value)

  useEffect(() => {
    if (value === null) {
      setPickedValue({ type: 'default' })
    }
  }, [value])

  const isPickDate = pickedValue?.type === 'pick-date' || pickedValue?.type === 'date'

  const mappedItems: SelectItem<AuctionDatePickerValueWithPickDate>[] = useMemo(() => {
    return isPickDate && pickedValue.type === 'date'
      ? [
          ...convertedItems,
          {
            value,
            name: format(new Date(pickedValue.date), 'd MMM yyyy, HH:mm'),
            hideInMenu: true,
            pickDateItem,
          },
          pickDateItem,
        ]
      : [...convertedItems, pickDateItem]
  }, [isPickDate, convertedItems, pickDateItem, pickedValue, value])

  const handleSelect = (value?: AuctionDatePickerValueWithPickDate) => {
    if (!value) {
      return
    }
    if (value.type !== 'default' && value.type !== 'pick-date') {
      onChange(value)
    } else {
      onChange(null)
    }
    setPickedValue(value)
  }

  const handlePickDate = (date: Date | null) => {
    if (!date) {
      return
    }
    setPickedValue({ type: 'date', date })
    onChange({ type: 'date', date })
    setStartDate(date)
  }

  const fromDate = minDate || new Date(msTimestamp)

  // set the initial date and round the time to the nearest 30 minutes
  const selectedDate =
    startDate ||
    (fromDate.getMinutes() > 30 ? roundToNearestMinutes(fromDate, { nearestTo: 30 }) : setMinutes(fromDate, 30))

  return (
    <Container>
      <Select<AuctionDatePickerValueWithPickDate>
        size="small"
        label={label}
        labelTextProps={{ variant: 'h100', color: cVar('colorTextMuted'), secondary: true }}
        iconLeft={isPickDate ? <SvgControlsCalendar /> : undefined}
        value={pickedValue || { type: 'default' }}
        items={mappedItems}
        onChange={handleSelect}
        ref={selectRef}
        {...rest}
      />
      <Popover
        offset={[0, 8]}
        ref={popOverRef}
        triggerMode="manual"
        triggerTarget={selectRef.current}
        trigger={null}
        onShow={() => {
          setOpen(true)
        }}
        onHide={() => {
          setOpen(false)
          if (pickedValue?.type === 'pick-date') {
            setPickedValue(null)
            onChange(null)
          }
        }}
      >
        {open && (
          <DatePicker
            inline
            selected={selectedDate}
            timeFormat="HH:mm"
            onChange={handlePickDate}
            openToDate={minDate ?? undefined}
            minDate={fromDate}
            maxDate={maxDate}
            showDisabledMonthNavigation
            showTimeSelect
          />
        )}
      </Popover>
    </Container>
  )
}