date-fns#setMinutes TypeScript Examples

export function calculateSocialJetlag(
  lastSevenDays: Day[]
): {
  weekDayAverage: string
  weekendDayAverage: string
} {
  const weekdays = lastSevenDays.filter(
    (day: Day) => !isWeekend(new Date(day.date))
  )
  const weekendDays = lastSevenDays.filter((day: Day) =>
    isWeekend(new Date(day.date))
  )

  const weekDayAverage = setMinutes(
    startOfDay(new Date()),
    getAverageOfTimes(weekdays)
  ).toISOString()
  const weekendDayAverage = setMinutes(
    startOfDay(new Date()),
    getAverageOfTimes(weekendDays)
  ).toISOString()

  const insights = {
    weekDayAverage,
    weekendDayAverage
  }

  return insights
}

export function minutesToHoursString(
  minutes: number | undefined,
  longFormat?: boolean
): string {
  if (!minutes) {
    return '-'
  }

  const time = setMinutes(setHours(new Date(), 0), minutes)

  if (longFormat) {
    return `${format(time, 'h')} ${translate('Hours')} ${format(
      time,
      'mm'
    )}min `
  }
  return `${format(time, 'h')} h ${format(time, 'mm')} min`
}

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
}

export function getTimeInString(minutes: number): string {
  if (!minutes) {
    return '-'
  }
  const time = setMinutes(setHours(new Date(), 0), minutes)

  return `${format(time, 'h')} h ${format(time, 'mm')}`
}

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>
  )
}

SleepTime: FC<Props> = ({
  hasData,
  x,
  y,
  timeAsleep = 0,
  timeInBed = 0,
  sleepEnd,
  sleepStart,
  bedStart,
  bedEnd
}) => {
  if (!hasData) {
    return (
      <G>
        <ThemedText
          x={x}
          y={y - 15}
          textAnchor="middle"
          fontFamily="Montserrat-Bold"
          fontWeight="bold"
          alignmentBaseline="central"
          fontSize="28">
          {translate('CLOCK_NO_DATA_TITLE')}
        </ThemedText>
        <ThemedText
          x={x}
          y={y + 15}
          textAnchor="middle"
          fontFamily="Montserrat-Medium"
          fontWeight="bold"
          textLength="30"
          alignmentBaseline="central"
          fontSize="13">
          {translate('CLOCK_NO_DATA_SUBTITLE')}
        </ThemedText>
      </G>
    )
  }

  const inBed = setMinutes(setHours(new Date(), 0), timeInBed ?? 0)
  const asleep = setMinutes(setHours(new Date(), 0), timeAsleep ?? 0)

  const timeToUseStart = sleepStart || bedStart
  const timeToUseEnd = sleepEnd || bedEnd

  const formattedStart = timeToUseStart
    ? format(new Date(timeToUseStart), 'HH:mm')
    : ''

  const formattedEnd = timeToUseEnd
    ? format(new Date(timeToUseEnd), 'HH:mm')
    : ''

  const hourValueBed = format(inBed, 'H')
  const minuteValueBed = format(inBed, 'mm')

  const hourValueSleep = format(asleep, 'H')
  const minuteValueSleep = format(asleep, 'mm')

  const valueToShow = timeAsleep
    ? `${hourValueSleep}:${minuteValueSleep}`
    : `${hourValueBed}:${minuteValueBed}`

  const string = `${formattedStart} - ${formattedEnd}`
  return (
    <G>
      <SVGText
        id="inbed"
        x={x}
        y={y + 30}
        textAnchor="middle"
        fontFamily="Montserrat-Medium"
        fontWeight="bold"
        textLength={100}
        alignmentBaseline="central"
        fontSize="13"
        fill={colors.darkBlue}>
        {string}
      </SVGText>

      <StartText
        id="asleep"
        x={x}
        y={y}
        fontFamily="Montserrat-Bold"
        textAnchor="middle"
        alignmentBaseline="central"
        fontSize="42"
        fontWeight="bold">
        {valueToShow}
      </StartText>
    </G>
  )
}