\n \n \n \n",[],[167,209],"059ba911-447d-4e41-bc77-33b6e88970a3","favicon.svg","019f1a31-47ec-77ed-aa3c-753b1d70a98b",["D",1782850865039],"\n",[],[167,216],"bcbfd0db-d8bd-42e1-a7b4-cd12f3bd4823","App.tsx","019f1a31-47eb-7498-94e8-c3dbce9d9f2f","019f1a31-47ec-77ed-aa3c-7308eaa9cee5",["D",1782850893256],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { Line } from \"npm:react-chartjs-2\";\n\ninterface Habit {\n id: number;\n name: string;\n}\n\ninterface HabitEntry {\n date: string;\n}\n\nexport function App() {\n const [habits, setHabits] = useState([]);\n const [newHabitName, setNewHabitName] = useState(\"\");\n const [selectedHabitId, setSelectedHabitId] = useState(null);\n const [habitEntries, setHabitEntries] = useState([]);\n const [chartData, setChartData] = useState(null);\n\n useEffect(() => {\n fetchHabits();\n }, []);\n\n useEffect(() => {\n if (selectedHabitId !== null) {\n fetchHabitEntries(selectedHabitId);\n }\n }, [selectedHabitId]);\n\n useEffect(() => {\n if (habitEntries.length > 0) {\n generateChartData();\n }\n }, [habitEntries]);\n\n const fetchHabits = async () => {\n const response = await fetch(\"/api/habits\");\n const data = await response.json();\n setHabits(data);\n if (data.length > 0) {\n setSelectedHabitId(data[0].id);\n }\n };\n\n const fetchHabitEntries = async (habitId: number) => {\n const response = await fetch(`/api/habit-entries/${habitId}`);\n const data = await response.json();\n setHabitEntries(data);\n };\n\n const addHabit = async () => {\n if (newHabitName.trim() === \"\") return;\n const response = await fetch(\"/api/habit\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ name: newHabitName }),\n });\n const data = await response.json();\n if (data.success) {\n setNewHabitName(\"\");\n fetchHabits();\n } else {\n alert(data.error);\n }\n };\n\n const logHabitEntry = async () => {\n if (selectedHabitId === null) return;\n const today = new Date().toISOString().split(\"T\")[0];\n const response = await fetch(\"/api/habit-entry\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ habitId: selectedHabitId, date: today }),\n });\n const data = await response.json();\n if (data.success) {\n alert(\"Habit logged for today!\");\n fetchHabitEntries(selectedHabitId);\n } else {\n alert(data.error);\n }\n };\n\n const calculateStreaks = () => {\n if (habitEntries.length === 0) return { dates: [], streaks: [] };\n\n const sortedEntries = [...habitEntries]\n .map((entry) => new Date(entry.date))\n .sort((a, b) => a.getTime() - b.getTime());\n\n const dates = [];\n const streaks = [];\n let currentStreak = 0;\n let lastDate: Date | null = null;\n\n for (const entryDate of sortedEntries) {\n const dateStr = entryDate.toISOString().split(\"T\")[0];\n if (!dates.includes(dateStr)) {\n dates.push(dateStr);\n }\n\n if (lastDate === null || (entryDate.getDate() === lastDate.getDate() + 1 && entryDate.getMonth() === lastDate.getMonth() && entryDate.getFullYear() === lastDate.getFullYear())) {\n currentStreak++;\n } else if (entryDate.getTime() !== lastDate.getTime()) {\n currentStreak = 1;\n }\n streaks[dates.indexOf(dateStr)] = currentStreak;\n lastDate = entryDate;\n }\n // Fill in missing dates and reset streak for gaps\n const allDates: string[] = [];\n if (sortedEntries.length > 0) {\n let currentDate = new Date(sortedEntries[0]);\n const endDate = new Date(sortedEntries[sortedEntries.length - 1]);\n while (currentDate <= endDate) {\n allDates.push(currentDate.toISOString().split(\"T\")[0]);\n currentDate.setDate(currentDate.getDate() + 1);\n }\n }\n \n const streakMap = new Map();\n for (let i = 0; i < dates.length; i++) {\n streakMap.set(dates[i], streaks[i]);\n }\n \n let finalStreaks: number[] = [];\n let currentDailyStreak = 0;\n \n for (const date of allDates) {\n if (streakMap.has(date)) {\n currentDailyStreak++;\n } else {\n currentDailyStreak = 0;\n }\n finalStreaks.push(currentDailyStreak);\n }\n return { dates: allDates, streaks: finalStreaks};\n };\n\n const generateChartData = () => {\n const { dates, streaks } = calculateStreaks();\n setChartData({\n labels: dates,\n datasets: [\n {\n label: \"Habit Streak\",\n data: streaks,\n fill: false,\n borderColor: \"rgb(75, 192, 192)\",\n tension: 0.1,\n },\n ],\n });\n };\n\n return (\n

Daily Habit Tracker

\n\n

Add New Habit

\n setNewHabitName(e.target.value)}\n placeholder=\"e.g., Drink 8 glasses of water\"\n />\n \n Add Habit\n \n

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

Log Daily Habit

\n setSelectedHabitId(Number(e.target.value))}\n >\n {habits.map((habit) => (\n \n ))}\n \n \n Log Today's Habit\n \n

\n )}\n\n {selectedHabitId !== null && chartData && (\n

Habit Streak: {habits.find(h => h.id === selectedHabitId)?.name}

\n \n

\n )}\n\n

\n View source\n

\n );\n}\n",[],[167,230,223],"components","a4be4b54-ab3d-483a-b1b0-4c9847c5f268",["D",1782850865039],[183],[167,230],["D",1782850865039],[182,184,185,186],[167],["D",1782850865039],["D",1789699879369],{"_11":12,"_96":91},{"_11":12,"_90":91,"_92":91,"_48":49,"_93":94,"_95":40},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":32,"_33":34,"_83":42,"_84":85,"_86":87,"_88":14,"_89":12},"ctx",{"_76":-5,"_119":276,"_277":278,"_279":280,"_281":40,"_282":40,"_283":40,"_284":53,"_285":-5,"_286":-7,"_287":-7,"_288":57,"_289":40,"_290":40,"_291":-5,"_292":40,"_293":40,"_294":40,"_295":-5},"ENV",{"_247":248,"_249":250,"_251":26,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Branches1

Branches
1