[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68a1d30221808191977b2c2d4a379c87","versionInt","title","To‑do + Calendar App With Quotes (react, Tailwind)","type","code/react","content","import { useEffect, useMemo, useState } from \"react\";\n\n// ---- Utilities ----\nconst STORAGE_KEY = \"todo_calendar_app_v1\";\n\nfunction uid() {\n if (typeof crypto !== \"undefined\" && crypto.randomUUID) return crypto.randomUUID();\n return Math.random().toString(36).slice(2) + Date.now().toString(36);\n}\n\nfunction serialize(tasks) {\n try {\n localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));\n } catch {}\n}\n\nfunction deserialize() {\n try {\n const raw = localStorage.getItem(STORAGE_KEY);\n return raw ? JSON.parse(raw) : [];\n } catch {\n return [];\n }\n}\n\nfunction classNames(...xs) {\n return xs.filter(Boolean).join(\" \");\n}\n\nfunction combineDateTime(dateStr, timeStr) {\n // Build ISO string in local time\n // If either missing, return null\n if (!dateStr || !timeStr) return null;\n const [y, m, d] = dateStr.split(\"-\").map(Number);\n const [hh, mm] = timeStr.split(\":\").map(Number);\n const dt = new Date(y, (m || 1) - 1, d || 1, hh || 0, mm || 0, 0, 0);\n return dt.toISOString();\n}\n\nfunction formatDate(iso) {\n const d = new Date(iso);\n return d.toLocaleDateString(undefined, { year: \"numeric\", month: \"short\", day: \"numeric\" });\n}\n\nfunction formatTime(iso) {\n const d = new Date(iso);\n return d.toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" });\n}\n\nfunction isSameDay(a, b) {\n return (\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate()\n );\n}\n\nfunction startOfMonth(d) {\n return new Date(d.getFullYear(), d.getMonth(), 1);\n}\n\nfunction endOfMonth(d) {\n return new Date(d.getFullYear(), d.getMonth() + 1, 0);\n}\n\nfunction startOfWeek(d, weekStartsOn = 0) {\n // weekStartsOn: 0 = Sunday, 1 = Monday\n const day = d.getDay();\n const diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;\n const res = new Date(d);\n res.setDate(d.getDate() - diff);\n res.setHours(0, 0, 0, 0);\n return res;\n}\n\nfunction addDays(d, n) {\n const res = new Date(d);\n res.setDate(d.getDate() + n);\n return res;\n}\n\nfunction monthMatrix(current, weekStartsOn = 0) {\n const first = startOfMonth(current);\n const last = endOfMonth(current);\n const gridStart = startOfWeek(first, weekStartsOn);\n // 6 weeks grid to cover all months\n const weeks = [];\n let cursor = new Date(gridStart);\n for (let w = 0; w < 6; w++) {\n const days = [];\n for (let i = 0; i < 7; i++) {\n days.push(new Date(cursor));\n cursor = addDays(cursor, 1);\n }\n weeks.push(days);\n // Stop early if we've passed the end of the month and ended on the week's end\n if (weeks.length >= 4 && weeks[weeks.length - 1].some((d) => d > last) && cursor.getDate() <= 7) break;\n }\n return weeks;\n}\n\n// ---- Quotes ----\nconst QUOTES = [\n { q: \"The secret of getting ahead is getting started.\", a: \"Mark Twain\" },\n { q: \"It always seems impossible until it’s done.\", a: \"Nelson Mandela\" },\n { q: \"Don’t watch the clock; do what it does. Keep going.\", a: \"Sam Levenson\" },\n { q: \"Success is the sum of small efforts, repeated day in and day out.\", a: \"Robert Collier\" },\n { q: \"You don’t have to be great to start, but you have to start to be great.\", a: \"Zig Ziglar\" },\n { q: \"Action is the foundational key to all success.\", a: \"Pablo Picasso\" },\n { q: \"If you get tired, learn to rest, not to quit.\", a: \"Banksy\" },\n { q: \"Well done is better than well said.\", a: \"Benjamin Franklin\" },\n { q: \"What we fear of doing most is usually what we most need to do.\", a: \"Ralph Waldo Emerson\" },\n { q: \"The best time to plant a tree was 20 years ago. The second best time is now.\", a: \"Chinese Proverb\" },\n];\n\nfunction useNonRepeatingRandom(items) {\n function shuffle(arr) {\n for (let i = arr.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [arr[i], arr[j]] = [arr[j], arr[i]];\n }\n return arr;\n }\n const [order, setOrder] = useState(() => shuffle([...Array(items.length).keys()]));\n const [idx, setIdx] = useState(0);\n\n function next() {\n setIdx((i) => {\n if (i + 1 < order.length) return i + 1;\n // restart with a fresh shuffle of indices 0..n-1\n setOrder(shuffle([...Array(items.length).keys()]));\n return 0;\n });\n }\n return { index: order[idx], next };\n}\n\n// ---- Types ----\n/** @typedef {{id: string, title: string, notes?: string, dueISO: string, completed: boolean, createdISO: string}} Task */\n\n// ---- Components ----\nfunction Header({ view, setView }) {\n return (\n

🗒️ To‑Do + Calendar

\n {[\n { key: \"list\", label: \"List\" },\n { key: \"calendar\", label: \"Calendar\" },\n ].map((tab) => (\n setView(tab.key)}\n className={classNames(\n \"px-3 sm:px-4 py-2 rounded-2xl text-sm sm:text-base\",\n view === tab.key ? \"bg-white shadow\" : \"text-gray-600 hover:text-gray-900\"\n )}\n aria-pressed={view === tab.key}\n >\n {tab.label}\n \n ))}\n

\n );\n}\n\nfunction TaskForm({ onAdd, prefillDate }) {\n const [title, setTitle] = useState(\"\");\n const [notes, setNotes] = useState(\"\");\n const [date, setDate] = useState(prefillDate || \"\");\n const [time, setTime] = useState(\"\");\n\n useEffect(() => {\n if (prefillDate) setDate(prefillDate);\n }, [prefillDate]);\n\n function handleSubmit(e) {\n e.preventDefault();\n const dueISO = combineDateTime(date, time);\n if (!title || !dueISO) return;\n onAdd({\n id: uid(),\n title: title.trim(),\n notes: notes.trim() || undefined,\n dueISO,\n completed: false,\n createdISO: new Date().toISOString(),\n });\n setTitle(\"\");\n setNotes(\"\");\n setDate(\"\");\n setTime(\"\");\n }\n\n return (\n \n );\n}\n\nfunction TaskItem({ task, onToggle, onDelete }) {\n return (\n

\n onToggle(task.id)}\n className=\"mt-1 h-5 w-5 rounded\"\n aria-label=\"Mark task complete\"\n />\n

\n {task.title}\n {formatDate(task.dueISO)} • {formatTime(task.dueISO)}\n

\n {task.notes &&

{task.notes}

}\n

\n \n

\n );\n}\n\nfunction TaskList({ tasks, onToggle, onDelete }) {\n const now = new Date();\n const [query, setQuery] = useState(\"\");\n\n const filtered = useMemo(() => {\n const q = query.trim().toLowerCase();\n return tasks.filter((t) => {\n if (!q) return true;\n return (\n t.title.toLowerCase().includes(q) ||\n (t.notes || \"\").toLowerCase().includes(q)\n );\n });\n }, [tasks, query]);\n\n const upcoming = filtered.filter((t) => !t.completed && new Date(t.dueISO) >= new Date(now.getTime() - 86400000));\n const overdue = filtered.filter((t) => !t.completed && new Date(t.dueISO) < new Date(now.getTime() - 86400000));\n const completed = filtered.filter((t) => t.completed);\n\n return (\n

\n setQuery(e.target.value)}\n className=\"w-full rounded-xl border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n />\n

\n\n {overdue.length > 0 && (\n

Overdue

\n {overdue.map((t) => (\n \n ))}\n

\n )}\n\n

Upcoming

\n {upcoming.length === 0 ? (\n

No upcoming tasks. Add something above!

\n ) : (\n upcoming.map((t) => (\n \n ))\n )}\n

\n\n {completed.length > 0 && (\n

Completed

\n {completed.map((t) => (\n \n ))}\n

\n )}\n

\n );\n}\n\nfunction CalendarView({ tasks, onDayClick, weekStartsOn = 0 }) {\n const [cursor, setCursor] = useState(() => {\n const d = new Date();\n d.setDate(1);\n return d;\n });\n const weeks = useMemo(() => monthMatrix(cursor, weekStartsOn), [cursor, weekStartsOn]);\n\n const tasksByDay = useMemo(() => {\n const map = new Map();\n tasks.forEach((t) => {\n const d = new Date(t.dueISO);\n const key = d.toDateString();\n if (!map.has(key)) map.set(key, []);\n map.get(key).push(t);\n });\n // sort tasks of a day by time\n for (const arr of map.values()) arr.sort((a, b) => new Date(a.dueISO) - new Date(b.dueISO));\n return map;\n }, [tasks]);\n\n const dayNames = useMemo(() => {\n const base = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\n return [...base.slice(weekStartsOn), ...base.slice(0, weekStartsOn)];\n }, [weekStartsOn]);\n\n function prevMonth() {\n const d = new Date(cursor);\n d.setMonth(d.getMonth() - 1);\n setCursor(d);\n }\n function nextMonth() {\n const d = new Date(cursor);\n d.setMonth(d.getMonth() + 1);\n setCursor(d);\n }\n\n const monthLabel = cursor.toLocaleDateString(undefined, { month: \"long\", year: \"numeric\" });\n const month = cursor.getMonth();\n\n return (\n

\n \n \n

{monthLabel}

\n setCursor(new Date(new Date().getFullYear(), new Date().getMonth(), 1))}\n className=\"rounded-xl border px-3 py-2\"\n >\n Today\n \n

\n\n

\n {dayNames.map((d) => (\n

\n {d}\n

\n ))}\n {weeks.flat().map((d, i) => {\n const inMonth = d.getMonth() === month;\n const isToday = isSameDay(d, new Date());\n const key = d.toDateString();\n const items = tasksByDay.get(key) || [];\n return (\n \n onDayClick(d)}\n className={classNames(\n \"self-start text-xs px-2 py-0.5 rounded-full\",\n isToday ? \"bg-indigo-600 text-white\" : \"text-gray-600 hover:bg-gray-100\"\n )}\n title=\"Add task on this day\"\n >\n {d.getDate()}\n \n

\n {items.length === 0 ? (\n

—

\n ) : (\n items.slice(0, 4).map((t) => (\n

\n {formatTime(t.dueISO)} {t.title}\n

\n ))\n )}\n {items.length > 4 && (\n

+{items.length - 4} more

\n )}\n

\n );\n })}\n

\n \n );\n}\n\nfunction QuoteCard() {\n const { index, next } = useNonRepeatingRandom(QUOTES);\n const quote = QUOTES[index];\n return (\n

Daily Inspiration

“{quote.q}”

— {quote.a}

\n \n

\n );\n}\n\nexport default function App() {\n const [tasks, setTasks] = useState(() => {\n const data = deserialize();\n // Ensure dueISO is string, completed boolean\n return Array.isArray(data) ? data.map((t) => ({ ...t, completed: !!t.completed })) : [];\n });\n const [view, setView] = useState(\"list\");\n const [prefillDate, setPrefillDate] = useState(\"\");\n\n useEffect(() => {\n serialize(tasks);\n }, [tasks]);\n\n function addTask(task) {\n setTasks((ts) => [...ts, task].sort((a, b) => new Date(a.dueISO) - new Date(b.dueISO)));\n setPrefillDate(\"\");\n }\n function toggleTask(id) {\n setTasks((ts) => ts.map((t) => (t.id === id ? { ...t, completed: !t.completed } : t)));\n }\n function deleteTask(id) {\n setTasks((ts) => ts.filter((t) => t.id !== id));\n }\n function clearCompleted() {\n setTasks((ts) => ts.filter((t) => !t.completed));\n }\n\n return (\n

\n\n

\n \n\n

Your {view === \"list\" ? \"Tasks\" : \"Calendar\"}

\n \n

\n\n {view === \"list\" ? (\n \n ) : (\n {\n const yyyy = d.getFullYear();\n const mm = String(d.getMonth() + 1).padStart(2, \"0\");\n const dd = String(d.getDate()).padStart(2, \"0\");\n setPrefillDate(`${yyyy}-${mm}-${dd}`);\n // Scroll to the top where form is\n window.scrollTo({ top: 0, behavior: \"smooth\" });\n }}\n weekStartsOn={0}\n />\n )}\n

\n\n

\n \n\n

Tips

Add both a date and a time — tasks are sorted by due time.
Use the Calendar tab and click a day to pre‑fill the form.
Press Inspire me for a fresh quote anytime.
Your tasks are saved in your browser (local storage).

\n\n

Stats

\n \n

\n );\n}\n\nfunction Stats({ tasks }) {\n const total = tasks.length;\n const done = tasks.filter((t) => t.completed).length;\n const upcomingToday = tasks.filter((t) => isSameDay(new Date(t.dueISO), new Date())).length;\n const nextTask = useMemo(() => {\n const upcoming = tasks.filter((t) => !t.completed && new Date(t.dueISO) >= new Date());\n return upcoming.sort((a, b) => new Date(a.dueISO) - new Date(b.dueISO))[0];\n }, [tasks]);\n\n return (\n

Total tasks: {total}

Completed: {done}

Due today: {upcomingToday}

\n {nextTask ? (\n

Next up

{nextTask.title}

{formatDate(nextTask.dueISO)} • {formatTime(nextTask.dueISO)}

\n ) : (\n

No upcoming tasks.

\n )}\n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","11967616301254492247","traceTime",1776418337604]