ManInDark/HabitTrove
1
0
Fork 0
mirror of https://github.com/ManInDark/HabitTrove.git synced 2026-03-09 20:09:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

added habit daily completion target (#26)

Browse Source
This commit is contained in:
Doh
2025-01-05 16:56:04 -05:00
committed by GitHub
parent 86a517a859
commit aaa7e384bc
19 changed files with 577 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
components/HabitItem.tsx
View File

@@ -1,7 +1,7 @@
import { Habit } from '@/lib/types'
import { useAtom } from 'jotai'
import { settingsAtom } from '@/lib/atoms'
import { getTodayInTimezone } from '@/lib/utils'
import { getTodayInTimezone, isSameDate, t2d, d2t, getNow } from '@/lib/utils'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Coins, Edit, Trash2, Check, Undo2 } from 'lucide-react'
@@ -18,7 +18,11 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
const { completeHabit, undoComplete } = useHabits()
const [settings] = useAtom(settingsAtom)
const today = getTodayInTimezone(settings.system.timezone)
const isCompletedToday = habit.completions?.includes(today)
const completionsToday = habit.completions?.filter(completion =>
isSameDate(t2d({ timestamp: completion, timezone: settings.system.timezone }), t2d({ timestamp: d2t({ dateTime: getNow({ timezone: settings.system.timezone }) }), timezone: settings.system.timezone }))
).length || 0
const target = habit.targetCompletions || 1
const isCompletedToday = completionsToday >= target
const [isHighlighted, setIsHighlighted] = useState(false)
useEffect(() => {
@@ -68,16 +72,31 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
</Button>
</div>
<div className="flex gap-2">
<Button
variant={isCompletedToday ? "secondary" : "default"}
size="sm"
onClick={async () => await completeHabit(habit)}
disabled={isCompletedToday}
>
<Check className="h-4 w-4 mr-2" />
{isCompletedToday ? "Completed" : "Complete"}
</Button>
{isCompletedToday && (
<div className="relative">
<Button
variant={isCompletedToday ? "secondary" : "default"}
size="sm"
onClick={async () => await completeHabit(habit)}
disabled={isCompletedToday && completionsToday >= target}
className="overflow-hidden"
>
<Check className="h-4 w-4 mr-2" />
{isCompletedToday ? (
target > 1 ? `Completed (${completionsToday}/${target})` : 'Completed'
) : (
target > 1 ? `Complete (${completionsToday}/${target})` : 'Complete'
)}
{habit.targetCompletions && habit.targetCompletions > 1 && (
<div
className="absolute bottom-0 left-0 h-1 bg-white/50"
style={{
width: `${(completionsToday / target) * 100}%`
}}
/>
)}
</Button>
</div>
{completionsToday > 0 && (
<Button
variant="outline"
size="sm"