Skip to content

Commit

Permalink
fix completion badge
Browse files Browse the repository at this point in the history
  • Loading branch information
dohsimpson committed Feb 21, 2025
1 parent ea0203d commit dea2b30
Show file tree
Hide file tree
Showing 12 changed files with 231 additions and 135 deletions.
11 changes: 11 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
# Changelog

## Version 0.2.2

### Changed

* persist "show all" settings in browser (#72)

### Fixed

* nav bar spacing
* completion count badge

## Version 0.2.1

### Changed
Expand Down
1 change: 1 addition & 0 deletions app/calendar/page.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Layout from '@/components/Layout'
import HabitCalendar from '@/components/HabitCalendar'
import { ViewToggle } from '@/components/ViewToggle'
import CompletionCountBadge from '@/components/CompletionCountBadge'

export default function CalendarPage() {
return (
Expand Down
70 changes: 70 additions & 0 deletions app/debug/habits/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
'use client'

import { useHabits } from "@/hooks/useHabits";
import { habitsAtom, settingsAtom } from "@/lib/atoms";
import { Habit } from "@/lib/types";
import { useAtom } from "jotai";
import { DateTime } from "luxon";



type CompletionCache = {
[dateKey: string]: { // dateKey format: "YYYY-MM-DD"
[habitId: string]: number // number of completions on that date
}
}


export default function DebugPage() {
const [habits] = useAtom(habitsAtom);
const [settings] = useAtom(settingsAtom);

function buildCompletionCache(habits: Habit[], timezone: string): CompletionCache {
const cache: CompletionCache = {};

habits.forEach(habit => {
habit.completions.forEach(utcTimestamp => {
// Convert UTC timestamp to local date string in specified timezone
const localDate = DateTime
.fromISO(utcTimestamp)
.setZone(timezone)
.toFormat('yyyy-MM-dd');

if (!cache[localDate]) {
cache[localDate] = {};
}

// Increment completion count for this habit on this date
cache[localDate][habit.id] = (cache[localDate][habit.id] || 0) + 1;
});
});

return cache;
}

function getCompletedHabitsForDate(
habits: Habit[],
date: DateTime,
timezone: string,
completionCache: CompletionCache
): Habit[] {
const dateKey = date.setZone(timezone).toFormat('yyyy-MM-dd');
const dateCompletions = completionCache[dateKey] || {};

return habits.filter(habit => {
const completionsNeeded = habit.targetCompletions || 1;
const completionsAchieved = dateCompletions[habit.id] || 0;
return completionsAchieved >= completionsNeeded;
});
}

const habitCache = buildCompletionCache(habits.habits, settings.system.timezone);

return (
<div className="p-4">
<h1 className="text-xl font-bold mb-4">Debug Page</h1>
<div className="bg-gray-100 p-4 rounded break-all">
</div>
</div>
);
}
51 changes: 23 additions & 28 deletions components/CompletionCountBadge.tsx
Original file line number Diff line number Diff line change
@@ -1,40 +1,35 @@
import { Badge } from '@/components/ui/badge'
import { Habit } from '@/lib/types'
import { isHabitDue, getCompletionsForDate } from '@/lib/utils'
import { Badge } from "@/components/ui/badge"
import { useAtom } from 'jotai'
import { completedHabitsMapAtom, habitsAtom, habitsByDateFamily } from '@/lib/atoms'
import { getTodayInTimezone } from '@/lib/utils'
import { useHabits } from '@/hooks/useHabits'
import { settingsAtom } from '@/lib/atoms'

interface CompletionCountBadgeProps {
habits: Habit[]
selectedDate: luxon.DateTime
timezone: string
type: 'tasks' | 'habits'
type: 'habits' | 'tasks'
date?: string
}

export function CompletionCountBadge({ habits, selectedDate, timezone, type }: CompletionCountBadgeProps) {
const filteredHabits = habits.filter(habit => {
const isTask = type === 'tasks'
if ((habit.isTask === isTask) && isHabitDue({
habit,
timezone,
date: selectedDate
})) {
const completions = getCompletionsForDate({ habit, date: selectedDate, timezone })
return completions >= (habit.targetCompletions || 1)
}
return false
}).length
export default function CompletionCountBadge({
type,
date
}: CompletionCountBadgeProps) {
const [settings] = useAtom(settingsAtom)
const [completedHabitsMap] = useAtom(completedHabitsMapAtom)
const targetDate = date || getTodayInTimezone(settings.system.timezone)
const [dueHabits] = useAtom(habitsByDateFamily(targetDate))

const totalHabits = habits.filter(habit =>
(habit.isTask === (type === 'tasks')) &&
isHabitDue({
habit,
timezone,
date: selectedDate
})
const completedCount = completedHabitsMap.get(targetDate)?.filter(h =>
type === 'tasks' ? h.isTask : !h.isTask
).length || 0

const totalCount = dueHabits.filter(h =>
type === 'tasks' ? h.isTask : !h.isTask
).length

return (
<Badge variant="secondary">
{`${filteredHabits}/${totalHabits} Completed`}
{`${completedCount}/${totalCount} Completed`}
</Badge>
)
}
66 changes: 19 additions & 47 deletions components/DailyOverview.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Circle, Coins, ArrowRight, CircleCheck, ChevronDown, ChevronUp, Timer, Plus } from 'lucide-react'
import CompletionCountBadge from './CompletionCountBadge'
import {
ContextMenu,
ContextMenuContent,
Expand All @@ -9,7 +10,7 @@ import { cn, isHabitDueToday, getHabitFreq } from '@/lib/utils'
import Link from 'next/link'
import { useState, useEffect } from 'react'
import { useAtom } from 'jotai'
import { pomodoroAtom, settingsAtom, completedHabitsMapAtom, browserSettingsAtom, BrowserSettings, hasTasksAtom } from '@/lib/atoms'
import { pomodoroAtom, settingsAtom, completedHabitsMapAtom, browserSettingsAtom, BrowserSettings, hasTasksAtom, dailyHabitsAtom } from '@/lib/atoms'
import { getTodayInTimezone, isSameDate, t2d, d2t, getNow } from '@/lib/utils'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
Expand All @@ -34,29 +35,15 @@ export default function DailyOverview({
}: UpcomingItemsProps) {
const { completeHabit, undoComplete } = useHabits()
const [settings] = useAtom(settingsAtom)
const [dailyHabits, setDailyHabits] = useState<Habit[]>([])
const [dailyTasks, setDailyTasks] = useState<Habit[]>([])
const [completedHabitsMap] = useAtom(completedHabitsMapAtom)
const [dailyItems] = useAtom(dailyHabitsAtom)
const dailyTasks = dailyItems.filter(habit => habit.isTask)
const dailyHabits = dailyItems.filter(habit => !habit.isTask)
const today = getTodayInTimezone(settings.system.timezone)
const todayCompletions = completedHabitsMap.get(today) || []
const { saveHabit } = useHabits()
const [browserSettings, setBrowserSettings] = useAtom(browserSettingsAtom)

useEffect(() => {
// Filter habits and tasks that are due today and not archived
const filteredHabits = habits.filter(habit =>
!habit.isTask &&
!habit.archived &&
isHabitDueToday({ habit, timezone: settings.system.timezone })
)
const filteredTasks = habits.filter(habit =>
habit.isTask &&
isHabitDueToday({ habit, timezone: settings.system.timezone })
)
setDailyHabits(filteredHabits)
setDailyTasks(filteredTasks)
}, [habits])

// Get all wishlist items sorted by redeemable status (non-redeemable first) then by coin cost
// Filter out archived wishlist items
const sortedWishlistItems = wishlistItems
Expand All @@ -74,9 +61,6 @@ export default function DailyOverview({
return a.coinCost - b.coinCost
})

const [expandedHabits, setExpandedHabits] = useState(false)
const [expandedTasks, setExpandedTasks] = useState(false)
const [expandedWishlist, setExpandedWishlist] = useState(false)
const [hasTasks] = useAtom(hasTasksAtom)
const [_, setPomo] = useAtom(pomodoroAtom)
const [modalConfig, setModalConfig] = useState<{
Expand Down Expand Up @@ -126,13 +110,7 @@ export default function DailyOverview({
<h3 className="font-semibold">Daily Tasks</h3>
</div>
<div className="flex items-center gap-2">
<Badge variant="secondary">
{`${dailyTasks.filter(task => {
const completions = (completedHabitsMap.get(today) || [])
.filter(h => h.id === task.id).length;
return completions >= (task.targetCompletions || 1);
}).length}/${dailyTasks.length} Completed`}
</Badge>
<CompletionCountBadge type="tasks" />
<Button
variant="ghost"
size="sm"
Expand All @@ -149,7 +127,7 @@ export default function DailyOverview({
</Button>
</div>
</div>
<ul className={`grid gap-2 transition-all duration-300 ease-in-out ${expandedTasks ? 'max-h-none' : 'max-h-[200px]'} overflow-hidden`}>
<ul className={`grid gap-2 transition-all duration-300 ease-in-out ${browserSettings.expandedTasks ? 'max-h-none' : 'max-h-[200px]'} overflow-hidden`}>
{dailyTasks
.sort((a, b) => {
// First by completion status
Expand Down Expand Up @@ -177,7 +155,7 @@ export default function DailyOverview({
const bTarget = b.targetCompletions || 1;
return bTarget - aTarget;
})
.slice(0, expandedTasks ? undefined : 5)
.slice(0, browserSettings.expandedTasks ? undefined : 5)
.map((habit) => {
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 }))
Expand Down Expand Up @@ -279,10 +257,10 @@ export default function DailyOverview({
</ul>
<div className="flex items-center justify-between">
<button
onClick={() => setExpandedTasks(!expandedTasks)}
onClick={() => setBrowserSettings(prev => ({ ...prev, expandedTasks: !prev.expandedTasks }))}
className="text-sm text-muted-foreground hover:text-primary flex items-center gap-1"
>
{expandedTasks ? (
{browserSettings.expandedTasks ? (
<>
Show less
<ChevronUp className="h-3 w-3" />
Expand Down Expand Up @@ -337,13 +315,7 @@ export default function DailyOverview({
<h3 className="font-semibold">Daily Habits</h3>
</div>
<div className="flex items-center gap-2">
<Badge variant="secondary">
{`${dailyHabits.filter(habit => {
const completions = (completedHabitsMap.get(today) || [])
.filter(h => h.id === habit.id).length;
return completions >= (habit.targetCompletions || 1);
}).length}/${dailyHabits.length} Completed`}
</Badge>
<CompletionCountBadge type="habits" />
<Button
variant="ghost"
size="sm"
Expand All @@ -360,7 +332,7 @@ export default function DailyOverview({
</Button>
</div>
</div>
<ul className={`grid gap-2 transition-all duration-300 ease-in-out ${expandedHabits ? 'max-h-none' : 'max-h-[200px]'} overflow-hidden`}>
<ul className={`grid gap-2 transition-all duration-300 ease-in-out ${browserSettings.expandedHabits ? 'max-h-none' : 'max-h-[200px]'} overflow-hidden`}>
{dailyHabits
.sort((a, b) => {
// First by completion status
Expand Down Expand Up @@ -388,7 +360,7 @@ export default function DailyOverview({
const bTarget = b.targetCompletions || 1;
return bTarget - aTarget;
})
.slice(0, expandedHabits ? undefined : 5)
.slice(0, browserSettings.expandedHabits ? undefined : 5)
.map((habit) => {
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 }))
Expand Down Expand Up @@ -490,10 +462,10 @@ export default function DailyOverview({
</ul>
<div className="flex items-center justify-between">
<button
onClick={() => setExpandedHabits(!expandedHabits)}
onClick={() => setBrowserSettings(prev => ({ ...prev, expandedHabits: !prev.expandedHabits }))}
className="text-sm text-muted-foreground hover:text-primary flex items-center gap-1"
>
{expandedHabits ? (
{browserSettings.expandedHabits ? (
<>
Show less
<ChevronUp className="h-3 w-3" />
Expand Down Expand Up @@ -525,15 +497,15 @@ export default function DailyOverview({
</Badge>
</div>
<div>
<div className={`space-y-3 transition-all duration-300 ease-in-out ${expandedWishlist ? 'max-h-none' : 'max-h-[200px]'} overflow-hidden`}>
<div className={`space-y-3 transition-all duration-300 ease-in-out ${browserSettings.expandedWishlist ? 'max-h-none' : 'max-h-[200px]'} overflow-hidden`}>
{sortedWishlistItems.length === 0 ? (
<div className="text-center text-muted-foreground text-sm py-4">
No wishlist items yet. Add some goals to work towards!
</div>
) : (
<>
{sortedWishlistItems
.slice(0, expandedWishlist ? undefined : 5)
.slice(0, browserSettings.expandedWishlist ? undefined : 5)
.map((item) => {
const isRedeemable = item.coinCost <= coinBalance
return (
Expand Down Expand Up @@ -587,10 +559,10 @@ export default function DailyOverview({
</div>
<div className="flex items-center justify-between">
<button
onClick={() => setExpandedWishlist(!expandedWishlist)}
onClick={() => setBrowserSettings(prev => ({ ...prev, expandedWishlist: !prev.expandedWishlist }))}
className="text-sm text-muted-foreground hover:text-primary flex items-center gap-1"
>
{expandedWishlist ? (
{browserSettings.expandedWishlist ? (
<>
Show less
<ChevronUp className="h-3 w-3" />
Expand Down
Loading

0 comments on commit dea2b30

Please sign in to comment.