fixed completion tracking over changing date

roboslone · roboslone · commit 5067464a8b8b · 2025-12-21T11:22:14.000Z
diff --git a/.devcontainer/compose.yml b/.devcontainer/compose.yml
@@ -1,10 +1,9 @@
 services:
     app:
         hostname: dc
-        network_mode: host
-        build:
-            context: .
-            dockerfile: devcontainer.Dockerfile
+        ports:
+            - 5173:5173
+        image: node:24-trixie-slim
         command: sleep infinity
         env_file:
             - .env
diff --git a/.devcontainer/devcontainer.Dockerfile b/.devcontainer/devcontainer.Dockerfile
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "version": "0.0.0",
     "type": "module",
     "scripts": {
-        "dev": "vite",
+        "dev": "vite --host",
         "build": "tsc -b && vite build",
         "lint": "eslint . && tsc -b",
         "preview": "vite preview"
diff --git a/src/components/date/context.ts b/src/components/date/context.ts
@@ -0,0 +1,3 @@
+import React from "react"
+
+export const DateContext = React.createContext<Date>(new Date())
diff --git a/src/components/date/provider.tsx b/src/components/date/provider.tsx
@@ -0,0 +1,22 @@
+import { formatDate } from "@/lib/dates"
+import React from "react"
+
+import { DateContext } from "./context"
+
+export const CurrentDateProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
+    const [date, setDate] = React.useState(new Date())
+    const dateStr = formatDate(date)
+
+    React.useEffect(() => {
+        const interval = setInterval(() => {
+            const next = new Date()
+            const nextStr = formatDate(next)
+            if (nextStr !== dateStr) {
+                setDate(next)
+            }
+        }, 60 * 1000)
+        return () => clearInterval(interval)
+    }, [])
+
+    return <DateContext.Provider value={date}>{children}</DateContext.Provider>
+}
diff --git a/src/components/habit/button.tsx b/src/components/habit/button.tsx
@@ -1,3 +1,4 @@
+import { DateContext } from "@/components/date/context"
 import { useHabitContext } from "@/components/habit/context"
 import { Button } from "@/components/ui/button"
 import { formatDate } from "@/lib/dates"
@@ -51,13 +52,14 @@ const applyButton = (
 }
 
 export const CompletionButton: React.FC<P> = ({ options = defaultOptions, preview, ...rest }) => {
-    const { habit, color, update, date } = useHabitContext()
+    const today = React.useContext(DateContext)
+    const { habit, color, update, selectedDate } = useHabitContext()
 
     const handleClick = (manualValue?: number) => {
         if (preview) return
 
         const next = clone(HabitSchema, habit)
-        const dateStr = formatDate(date)
+        const dateStr = formatDate(selectedDate ?? today)
 
         if (options.kind.case === undefined) {
             delete next.completions[dateStr]
diff --git a/src/components/habit/chart.tsx b/src/components/habit/chart.tsx
@@ -1,8 +1,9 @@
+import { DateContext } from "@/components/date/context"
 import { useHabitContext } from "@/components/habit/context"
 import { formatDate } from "@/lib/dates"
 import { cn } from "@/lib/utils"
 import { type Completion } from "@/proto/models/v1/models_pb"
-import type React from "react"
+import React from "react"
 
 import { HabitDatePicker } from "./date-picker"
 
@@ -27,7 +28,7 @@ interface CellProps {
 }
 
 const Cell: React.FC<CellProps> = ({ date, background, completion, selected, interactive }) => {
-    const { setDate } = useHabitContext()
+    const { setSelectedDate } = useHabitContext()
 
     let progress = 0
     if (completion !== undefined) {
@@ -44,7 +45,7 @@ const Cell: React.FC<CellProps> = ({ date, background, completion, selected, int
             style={{
                 opacity: progress === 0 ? 1 : progress,
             }}
-            onClick={interactive ? () => setDate(date) : undefined}
+            onClick={interactive ? () => setSelectedDate(date) : undefined}
         >
             {interactive && selected && <div className="h-2 w-2 rounded-xs bg-secondary" />}
         </div>
@@ -56,9 +57,10 @@ interface P {
 }
 
 export const HabitChart: React.FC<P> = ({ interactive }) => {
-    const { habit, color, date } = useHabitContext()
+    const today = React.useContext(DateContext)
+    const { habit, color, selectedDate } = useHabitContext()
     const now = new Date()
-    const selectedDateStr = formatDate(date)
+    const selectedDateStr = formatDate(selectedDate ?? today)
 
     return (
         <div className="flex flex-col gap-2">
diff --git a/src/components/habit/context.tsx b/src/components/habit/context.tsx
@@ -10,8 +10,8 @@ interface S {
     isFetching: boolean
     color: colors.Options
 
-    date: Date
-    setDate: React.Dispatch<React.SetStateAction<Date>>
+    selectedDate: Date | undefined
+    setSelectedDate: React.Dispatch<React.SetStateAction<Date | undefined>>
     completion: Completion
     isCompleted: boolean
     progress: number
diff --git a/src/components/habit/date-picker.tsx b/src/components/habit/date-picker.tsx
@@ -1,3 +1,4 @@
+import { DateContext } from "@/components/date/context"
 import { Button } from "@/components/ui/button"
 import { Calendar } from "@/components/ui/calendar"
 import {
@@ -15,14 +16,15 @@ import React from "react"
 import { useHabitContext } from "./context"
 
 export const HabitDatePicker: React.FC = () => {
-    const { date, setDate } = useHabitContext()
+    const today = React.useContext(DateContext)
+    const { selectedDate, setSelectedDate } = useHabitContext()
     const [open, setOpen] = React.useState(false)
 
-    const dateStr = formatDate(date)
+    const dateStr = formatDate(selectedDate ?? today)
     const todayStr = formatDate(new Date())
 
     const handleSelect = (d: Date | undefined) => {
-        setDate(d || new Date())
+        setSelectedDate(d || new Date())
         setOpen(false)
     }
 
@@ -33,7 +35,7 @@ export const HabitDatePicker: React.FC = () => {
                 size="sm"
                 className="w-fit"
                 disabled={dateStr === todayStr}
-                onClick={() => setDate(new Date())}
+                onClick={() => setSelectedDate(undefined)}
             >
                 <Undo2 />
             </Button>
@@ -43,7 +45,7 @@ export const HabitDatePicker: React.FC = () => {
                     <div className="flex items-center gap-2">
                         <Button variant="ghost" size="sm" className="w-fit">
                             <CalendarIcon />
-                            {date?.toLocaleDateString()}
+                            {selectedDate?.toLocaleDateString()}
                         </Button>
                     </div>
                 </DialogTrigger>
@@ -56,7 +58,7 @@ export const HabitDatePicker: React.FC = () => {
 
                     <Calendar
                         mode="single"
-                        selected={date}
+                        selected={selectedDate}
                         onSelect={handleSelect}
                         weekStartsOn={1}
                         className="min-h-85"
@@ -71,7 +73,7 @@ export const HabitDatePicker: React.FC = () => {
                         <Button
                             variant="outline"
                             onClick={() => {
-                                setDate(new Date())
+                                setSelectedDate(new Date())
                                 setOpen(false)
                             }}
                         >
diff --git a/src/components/habit/list.tsx b/src/components/habit/list.tsx
@@ -1,6 +1,6 @@
 import { useCollectionContext } from "@/components/collection/context"
 import { HabitCard } from "@/components/habit/card"
-import { HabitFetcher } from "@/components/habit/fetcher"
+import { HabitProvider } from "@/components/habit/provider"
 import { useOrderingContext } from "@/components/ordering/context"
 import { RefreshButton } from "@/components/refresh-button"
 import { TagContext } from "@/components/tag/context"
@@ -40,9 +40,9 @@ export const HabitList: React.FC = () => {
 
                 <div className="flex flex-col items-center gap-2 w-full">
                     {orderedNames.map((name) => (
-                        <HabitFetcher key={name} name={name}>
+                        <HabitProvider key={name} name={name}>
                             <HabitCard />
-                        </HabitFetcher>
+                        </HabitProvider>
                     ))}
                 </div>
 
diff --git a/src/components/habit/page.tsx b/src/components/habit/page.tsx
@@ -1,4 +1,4 @@
-import { HabitFetcher } from "@/components/habit/fetcher"
+import { HabitProvider } from "@/components/habit/provider"
 import { PageHeader } from "@/components/page-header"
 import { useRepoContext } from "@/components/repo/context"
 import { RepoSelector } from "@/components/repo/selector"
@@ -23,9 +23,9 @@ export const HabitPage: React.FC = () => {
     }
 
     return (
-        <HabitFetcher name={name}>
+        <HabitProvider name={name}>
             <HabitView />
-        </HabitFetcher>
+        </HabitProvider>
     )
 }
 
diff --git a/src/components/habit/provider.tsx b/src/components/habit/provider.tsx
@@ -1,3 +1,4 @@
+import { DateContext } from "@/components/date/context"
 import { useOrderingContext } from "@/components/ordering/context"
 import { Button } from "@/components/ui/button"
 import { ErrorView } from "@/components/util/error-view"
@@ -17,13 +18,15 @@ interface P extends React.PropsWithChildren {
     name: string
 }
 
-export const HabitFetcher: React.FC<P> = ({ name, children }) => {
+export const HabitProvider: React.FC<P> = ({ name, children }) => {
+    const today = React.useContext(DateContext)
+
     const habit = useHabit(name)
     const update = useUpdateHabit(name)
     const [displayOptions] = useStoredDisplayOptions()
     const { completed } = useOrderingContext()
 
-    const [date, setDate] = React.useState<Date>(new Date())
+    const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(undefined)
 
     if (habit.isLoading) {
         return (
@@ -38,7 +41,7 @@ export const HabitFetcher: React.FC<P> = ({ name, children }) => {
     }
 
     if (habit.data) {
-        const { completion, progress } = getProgress(habit.data, date)
+        const { completion, progress } = getProgress(habit.data, selectedDate ?? today)
         const isCompleted = completed.has(habit.data.name)
 
         return (
@@ -50,8 +53,8 @@ export const HabitFetcher: React.FC<P> = ({ name, children }) => {
                     isFetching: habit.isFetching,
                     progress,
 
-                    date,
-                    setDate,
+                    selectedDate,
+                    setSelectedDate,
                     completion,
                     isCompleted,
                     color: colors.forHabit(habit.data),
diff --git a/src/components/ordering/provider.tsx b/src/components/ordering/provider.tsx
@@ -1,4 +1,5 @@
 import { useCollectionContext } from "@/components/collection/context"
+import { DateContext } from "@/components/date/context"
 import { getProgress } from "@/lib/progress"
 import { useUpdateOrder } from "@/lib/queries"
 import type { Habit } from "@/proto/models/v1/models_pb"
@@ -54,11 +55,13 @@ const orderChanged = (a: string[], b: string[]): boolean => {
 }
 
 export const OrderingProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
+    const date = React.useContext(DateContext)
+
     const { habits, collection } = useCollectionContext()
 
     const [completed, setCompleted] = React.useState<Set<string>>(new Set())
     const recordCompletion = (h: Habit) => {
-        const { completion } = getProgress(h, new Date())
+        const { completion } = getProgress(h, date)
         const isCompleted = completion.count >= completion.target
 
         setCompleted((prev) => {
@@ -77,6 +80,10 @@ export const OrderingProvider: React.FC<React.PropsWithChildren> = ({ children }
         reorder(habits, completed, collection.order, isReordering),
     )
 
+    React.useEffect(() => {
+        setCompleted(new Set())
+    }, [date])
+
     React.useEffect(() => {
         setOrderedNames(reorder(habits, completed, collection.order, isReordering))
     }, [completed, habits])
diff --git a/src/layout.tsx b/src/layout.tsx
@@ -1,6 +1,7 @@
 import { AccountWall } from "@/components/auth/account-wall"
 import AuthWall from "@/components/auth/auth-wall"
 import { RepoWall } from "@/components/auth/repo-wall"
+import { CurrentDateProvider } from "@/components/date/provider"
 import { Toaster } from "@/components/ui/sonner"
 import { Suspense } from "@/components/util/suspense"
 import { ThemeProvider } from "@/components/util/theme-provider"
@@ -11,20 +12,22 @@ import React from "react"
 
 export const Layout: React.FC = () => {
     return (
-        <ThemeProvider>
-            <Suspense>
-                <QueryClientProvider client={client}>
-                    <AuthWall>
-                        <AccountWall>
-                            <RepoWall>
-                                <Outlet />
-                            </RepoWall>
-                        </AccountWall>
-                    </AuthWall>
-                </QueryClientProvider>
-                <Toaster />
-            </Suspense>
-        </ThemeProvider>
+        <Suspense>
+            <ThemeProvider>
+                <CurrentDateProvider>
+                    <QueryClientProvider client={client}>
+                        <AuthWall>
+                            <AccountWall>
+                                <RepoWall>
+                                    <Outlet />
+                                </RepoWall>
+                            </AccountWall>
+                        </AuthWall>
+                    </QueryClientProvider>
+                    <Toaster />
+                </CurrentDateProvider>
+            </ThemeProvider>
+        </Suspense>
     )
 }
 

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import React from "react"`
	`2`	`+`
	`3`	`+export const DateContext = React.createContext<Date>(new Date())`