{habit.icon}

{habit.name}

\n {habit.description && (\n

{habit.description}

\n )}\n

\n onToggle(habit.id, today, isCompletedToday)}\n className={`w-8 h-8 rounded-full border-2 border-white flex items-center justify-center transition-all ${\n isCompletedToday ? 'bg-white' : 'bg-transparent'\n }`}\n >\n {isCompletedToday && ✓}\n \n

\n\n

\n {generateGrid()}\n

\n\n

\n {completions.length} completions\n

\n \n );\n}\n\nfunction NewHabitModal({ isOpen, onClose, onSubmit }: {\n isOpen: boolean;\n onClose: () => void;\n onSubmit: (habit: Partial) => void;\n}) {\n const [name, setName] = React.useState(\"\");\n const [description, setDescription] = React.useState(\"\");\n const [color, setColor] = React.useState(\"#FF6B35\");\n const [icon, setIcon] = React.useState(\"🏃\");\n\n const colors = [\n \"#FF6B35\", \"#F7931E\", \"#FDC830\", \"#4ECDC4\",\n \"#45B7D1\", \"#5B5EA6\", \"#9B59B6\", \"#E91E63\"\n ];\n\n const icons = [\n \"🏃\", \"🧘\", \"📚\", \"💧\", \"🎸\", \"🎨\", \"✍️\", \"🏋️\",\n \"🥗\", \"😴\", \"🎯\", \"📝\", \"💻\", \"🎵\", \"🚶\", \"🧩\"\n ];\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (!name.trim()) return;\n\n onSubmit({ name, description, color, icon });\n setName(\"\");\n setDescription(\"\");\n setColor(\"#FF6B35\");\n setIcon(\"🏃\");\n onClose();\n };\n\n if (!isOpen) return null;\n\n return (\n

e.stopPropagation()}>\n

Create New Habit

\n Habit Name\n setName(e.target.value)}\n className=\"w-full px-4 py-2 rounded-lg bg-gray-700 border border-gray-600 focus:border-blue-500 focus:outline-none\"\n placeholder=\"Morning Exercise\"\n required\n />\n

\n\n

\n Description (optional)\n setDescription(e.target.value)}\n className=\"w-full px-4 py-2 rounded-lg bg-gray-700 border border-gray-600 focus:border-blue-500 focus:outline-none\"\n placeholder=\"Daily mindfulness practice\"\n />\n

\n\n

\n Choose Icon\n

\n {icons.map((i) => (\n setIcon(i)}\n className={`text-2xl p-2 rounded-lg transition-all ${\n icon === i ? 'bg-gray-600 scale-110' : 'bg-gray-700 hover:bg-gray-600'\n }`}\n >\n {i}\n \n ))}\n

\n\n

\n Choose Color\n

\n {colors.map((c) => (\n setColor(c)}\n className={`w-10 h-10 rounded-lg transition-all ${\n color === c ? 'ring-2 ring-white ring-offset-2 ring-offset-gray-800' : ''\n }`}\n style={{ backgroundColor: c }}\n />\n ))}\n

\n\n

\n \n Cancel\n \n \n Create Habit\n \n

\n );\n}\n\nfunction Home() {\n const data = useLoaderData() as { habits: Habit[], completions: Record };\n const revalidator = useRevalidator();\n const [isModalOpen, setIsModalOpen] = React.useState(false);\n const [habits, setHabits] = React.useState(data.habits);\n const [completions, setCompletions] = React.useState(data.completions);\n\n React.useEffect(() => {\n setHabits(data.habits);\n setCompletions(data.completions);\n }, [data]);\n\n const handleToggleHabit = async (habitId: number, date: string, isCompleted: boolean) => {\n try {\n const apiUrl = getApiUrl();\n\n if (isCompleted) {\n await fetch(`${apiUrl}/api/habits/${habitId}/complete?date=${date}`, {\n method: \"DELETE\",\n });\n } else {\n await fetch(`${apiUrl}/api/habits/${habitId}/complete`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ date }),\n });\n }\n\n revalidator.revalidate();\n } catch (error) {\n console.error(\"Failed to toggle habit:\", error);\n }\n };\n\n const handleCreateHabit = async (habit: Partial) => {\n try {\n const apiUrl = getApiUrl();\n await fetch(`${apiUrl}/api/habits`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(habit),\n });\n\n revalidator.revalidate();\n } catch (error) {\n console.error(\"Failed to create habit:\", error);\n }\n };\n\n return (\n \n

\n HabitBox\n

\n \n \n

\n\n

\n {habits.map((habit) => (\n \n ))}\n

\n\n setIsModalOpen(true)}\n className=\"fixed bottom-6 right-6 w-14 h-14 bg-blue-600 hover:bg-blue-700 rounded-full flex items-center justify-center text-3xl shadow-lg transition-all hover:scale-110\"\n >\n +\n \n

\n\n setIsModalOpen(false)}\n onSubmit={handleCreateHabit}\n />\n

\n \n );\n}\n\nasync function habitsLoader({ request }: { request: Request }) {\n try {\n const url = new URL(request.url);\n const apiUrl = url.origin;\n\n const habits = await fetch(`${apiUrl}/api/habits`).then((res) => res.json()) as Habit[];\n\n const completions: Record = {};\n\n await Promise.all(\n habits.map(async (habit) => {\n const habitCompletions = await fetch(`${apiUrl}/api/habits/${habit.id}/completions`)\n .then((res) => res.json());\n completions[habit.id] = habitCompletions;\n })\n );\n\n return { habits, completions };\n } catch (error) {\n console.error(\"Failed to load habits:\", error);\n return { habits: [], completions: {} };\n }\n}\n\nexport const routes = [\n {\n Component: Home,\n index: true,\n loader: habitsLoader,\n },\n];\n\nexport default routes;","deleted","label",[98],"permalink","https://www.val.town/x/willemhelmet/habit-tracker/code/routes.tsx","extension","actionData","errors"]