|
| 1 | +import { addWeeks, format, isSameDay, nextDay, parseISO, startOfDay, subDays } from 'date-fns' |
| 2 | +import { useEffect, useMemo, useState } from 'react' |
| 3 | +import type { BinDaysConfig, CollectionType, HolidayException } from './types' |
| 4 | +import { id } from 'date-fns/locale' |
| 5 | + |
| 6 | +type BinDaysProps = { |
| 7 | + config: BinDaysConfig |
| 8 | + className?: string |
| 9 | +} |
| 10 | + |
| 11 | +const applyHolidayException = (date: Date, exceptions: HolidayException[] = []): Date => { |
| 12 | + const dateStr = format(date, 'yyyy-MM-dd') |
| 13 | + const exception = exceptions.find((ex) => ex.originalDate === dateStr) |
| 14 | + return exception ? startOfDay(parseISO(exception.revisedDate)) : date |
| 15 | +} |
| 16 | + |
| 17 | +const calculateNextCollection = ( |
| 18 | + collection: CollectionType, |
| 19 | + now: Date, |
| 20 | + holidayExceptions: HolidayException[] = [] |
| 21 | +): Date => { |
| 22 | + const reference = startOfDay(parseISO(collection.referenceDate)) |
| 23 | + const today = startOfDay(now) |
| 24 | + |
| 25 | + // Find next occurrence of the day of week |
| 26 | + let candidate = |
| 27 | + isSameDay(today, reference) || today < reference |
| 28 | + ? reference |
| 29 | + : today.getDay() === collection.dayOfWeek |
| 30 | + ? today |
| 31 | + : nextDay(today, collection.dayOfWeek as 0 | 1 | 2 | 3 | 4 | 5 | 6) |
| 32 | + |
| 33 | + if (collection.frequency === 'weekly') { |
| 34 | + return applyHolidayException(candidate, holidayExceptions) |
| 35 | + } |
| 36 | + |
| 37 | + // For biweekly, need to check if we're in the right week |
| 38 | + const weeksSinceReference = Math.floor( |
| 39 | + (candidate.getTime() - reference.getTime()) / (7 * 24 * 60 * 60 * 1000) |
| 40 | + ) |
| 41 | + |
| 42 | + const isCorrectWeek = weeksSinceReference % 2 === collection.weekOffset |
| 43 | + |
| 44 | + if (!isCorrectWeek) { |
| 45 | + candidate = addWeeks(candidate, 1) |
| 46 | + } |
| 47 | + |
| 48 | + return applyHolidayException(candidate, holidayExceptions) |
| 49 | +} |
| 50 | + |
| 51 | +export const BinDays = ({ config: widgetConfig, className = '' }: BinDaysProps) => { |
| 52 | + const { collections, holidayExceptions, refreshIntervalSeconds = 60 * 60 } = widgetConfig |
| 53 | + const [now, setNow] = useState(new Date()) |
| 54 | + |
| 55 | + useEffect(() => { |
| 56 | + const interval = setInterval(() => { |
| 57 | + setNow(new Date()) |
| 58 | + }, refreshIntervalSeconds * 1000) |
| 59 | + |
| 60 | + return () => clearInterval(interval) |
| 61 | + }, [refreshIntervalSeconds]) |
| 62 | + |
| 63 | + const nextCollections = useMemo(() => { |
| 64 | + // Calculate collection dates (subtract 1 day for Tuesday night pickup) |
| 65 | + const collectionsWithDates = collections |
| 66 | + .map((collection) => { |
| 67 | + const actualCollectionDate = calculateNextCollection(collection, now, holidayExceptions) |
| 68 | + const displayDate = subDays(actualCollectionDate, 1) // Show as Tuesday night |
| 69 | + const daysUntil = Math.ceil( |
| 70 | + (displayDate.getTime() - now.getTime()) / (24 * 60 * 60 * 1000) |
| 71 | + ) |
| 72 | + |
| 73 | + return { |
| 74 | + ...collection, |
| 75 | + displayDate, |
| 76 | + daysUntil |
| 77 | + } |
| 78 | + }) |
| 79 | + .sort((a, b) => a.displayDate.getTime() - b.displayDate.getTime()) |
| 80 | + |
| 81 | + // Get the earliest date |
| 82 | + if (collectionsWithDates.length === 0) return [] |
| 83 | + |
| 84 | + const earliestDate = collectionsWithDates[0].displayDate.getTime() |
| 85 | + |
| 86 | + // Return all collections that share the earliest date |
| 87 | + return collectionsWithDates.filter((c) => c.displayDate.getTime() === earliestDate) |
| 88 | + }, [collections, now, holidayExceptions]) |
| 89 | + |
| 90 | + if (nextCollections.length === 0) { |
| 91 | + return null |
| 92 | + } |
| 93 | + |
| 94 | + const daysUntil = nextCollections[0].daysUntil |
| 95 | + const displayDate = nextCollections[0].displayDate |
| 96 | + |
| 97 | + return ( |
| 98 | + <div className={`flex flex-col items-center justify-center gap-4 p-4 ${className}`} id="bin-days"> |
| 99 | + {/* Header */} |
| 100 | + <div className="font-light text-white/60 text-lg uppercase tracking-wide"> |
| 101 | + Next bin day |
| 102 | + </div> |
| 103 | + |
| 104 | + {/* Date info */} |
| 105 | + <div className="flex flex-col items-center gap-1"> |
| 106 | + <div className="font-light text-white text-2xl"> |
| 107 | + {format(displayDate, 'EEEE MMM dd')} |
| 108 | + </div> |
| 109 | + <div className="font-light text-white/60 text-xl"> |
| 110 | + {daysUntil === 0 |
| 111 | + ? 'Tonight' |
| 112 | + : daysUntil === 1 |
| 113 | + ? 'Tomorrow' |
| 114 | + : `in ${daysUntil} days`} |
| 115 | + </div> |
| 116 | + </div> |
| 117 | + |
| 118 | + {/* Icons row */} |
| 119 | + <div className="flex items-center gap-6"> |
| 120 | + {nextCollections.map((collection) => ( |
| 121 | + <div key={collection.name} className="flex flex-col items-center gap-2"> |
| 122 | + <svg |
| 123 | + xmlns="http://www.w3.org/2000/svg" |
| 124 | + width="48" |
| 125 | + height="48" |
| 126 | + viewBox="0 0 24 24" |
| 127 | + fill="none" |
| 128 | + stroke={collection.accent} |
| 129 | + strokeWidth="2" |
| 130 | + strokeLinecap="round" |
| 131 | + strokeLinejoin="round" |
| 132 | + > |
| 133 | + <path d="M10 11v6" /> |
| 134 | + <path d="M14 11v6" /> |
| 135 | + <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" /> |
| 136 | + <path d="M3 6h18" /> |
| 137 | + <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /> |
| 138 | + </svg> |
| 139 | + <div className="font-light text-white/80 text-sm text-center"> |
| 140 | + {collection.name} |
| 141 | + </div> |
| 142 | + </div> |
| 143 | + ))} |
| 144 | + </div> |
| 145 | + </div> |
| 146 | + ) |
| 147 | +} |
0 commit comments