add recurrence editor component

2025-08-15 22:46:44 -04:00
parent 2d5db29f27
commit 836feb2e11
3 changed files with 149 additions and 18 deletions
--- a/src/components/recurrence-picker.tsx
+++ b/src/components/recurrence-picker.tsx
@@ -0,0 +1,129 @@
+'use client'
+
+import { useState } from 'react'
+import { Input } from '@/components/ui/input'
+
+type Recurrence = {
+  freq: 'NONE' | 'DAILY' | 'WEEKLY' | 'MONTHLY'
+  interval: number
+  byDay?: string[]
+  count?: number
+  until?: string
+}
+
+interface Props {
+  value?: string
+  onChange: (rrule: string | undefined) => void
+}
+
+export function RecurrencePicker({ value, onChange }: Props) {
+  const [rec, setRec] = useState<Recurrence>(() => {
+    // If existing rrule, parse minimally (for simplicity we only rehydrate FREQ and INTERVAL)
+    if (value) {
+      const parts = Object.fromEntries(
+        value.split(';').map(p => p.split('='))
+      )
+      return {
+        freq: (parts.FREQ as any) || 'NONE',
+        interval: parts.INTERVAL ? parseInt(parts.INTERVAL, 10) : 1,
+        byDay: parts.BYDAY ? parts.BYDAY.split(',') : [],
+        count: parts.COUNT ? parseInt(parts.COUNT, 10) : undefined,
+        until: parts.UNTIL
+      }
+    }
+    return { freq: 'NONE', interval: 1 }
+  })
+
+  const update = (updates: Partial<Recurrence>) => {
+    const newRec = { ...rec, ...updates }
+    setRec(newRec)
+
+    if (newRec.freq === 'NONE') {
+      onChange(undefined)
+      return
+    }
+
+    // Build RRULE string
+    let rrule = `FREQ=${newRec.freq};INTERVAL=${newRec.interval}`
+    if (newRec.freq === 'WEEKLY' && newRec.byDay?.length) {
+      rrule += `;BYDAY=${newRec.byDay.join(',')}`
+    }
+    if (newRec.count) rrule += `;COUNT=${newRec.count}`
+    if (newRec.until) rrule += `;UNTIL=${newRec.until.replace(/-/g, '')}T000000Z`
+
+    onChange(rrule)
+  }
+
+  const toggleDay = (day: string) => {
+    const byDay = rec.byDay || []
+    const newByDay = byDay.includes(day)
+      ? byDay.filter(d => d !== day)
+      : [...byDay, day]
+    update({ byDay: newByDay })
+  }
+
+  return (
+    <div className="space-y-2 border rounded p-2 mt-2 bg-gray-50">
+      <label className="block font-semibold text-sm">Repeats</label>
+      <select
+        className="border p-1 rounded w-full"
+        value={rec.freq}
+        onChange={e => update({ freq: e.target.value as any })}
+      >
+        <option value="NONE">Does not repeat</option>
+        <option value="DAILY">Daily</option>
+        <option value="WEEKLY">Weekly</option>
+        <option value="MONTHLY">Monthly</option>
+      </select>
+
+      {rec.freq !== 'NONE' && (
+        <>
+          <label className="block text-sm">
+            Interval (every N {rec.freq === 'DAILY' ? 'days' : rec.freq === 'WEEKLY' ? 'weeks' : 'months'})
+          </label>
+          <Input
+            type="number"
+            min={1}
+            value={rec.interval}
+            onChange={e => update({ interval: parseInt(e.target.value, 10) || 1 })}
+          />
+
+          {rec.freq === 'WEEKLY' && (
+            <div className="flex gap-2 mt-2">
+              {['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU'].map(day => (
+                <label key={day} className="flex items-center gap-1">
+                  <input
+                    type="checkbox"
+                    checked={rec.byDay?.includes(day)}
+                    onChange={() => toggleDay(day)}
+                  />
+                  {day}
+                </label>
+              ))}
+            </div>
+          )}
+
+          <div className="flex gap-2 mt-2">
+            <div>
+              <label className="text-sm">End after count</label>
+              <Input
+                type="number"
+                placeholder="e.g. 10"
+                value={rec.count || ''}
+                onChange={e => update({ count: e.target.value ? parseInt(e.target.value, 10) : undefined })}
+              />
+            </div>
+            <div>
+              <label className="text-sm">End by date</label>
+              <Input
+                type="date"
+                value={rec.until || ''}
+                onChange={e => update({ until: e.target.value || undefined })}
+              />
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}