mirror of
https://github.com/nagaoo0/HabbitGrid.git
synced 2026-04-19 15:23:16 +00:00
231 lines
8.8 KiB
JavaScript
231 lines
8.8 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { useParams, useNavigate } from 'react-router-dom';
|
|
import { motion } from 'framer-motion';
|
|
import { ArrowLeft, Edit2, Trash2, TrendingUp, Target, Calendar } from 'lucide-react';
|
|
import { Button } from '../components/ui/button';
|
|
import { useToast } from '../components/ui/use-toast';
|
|
import HabitGrid from '../components/HabitGrid';
|
|
import DeleteHabitDialog from '../components/DeleteHabitDialog';
|
|
import { getHabits, deleteHabit } from '../lib/datastore';
|
|
|
|
// Local helper to get habit by id from localStorage
|
|
function getHabit(id) {
|
|
const habits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
|
|
return habits.find(h => h.id === id);
|
|
}
|
|
import AnimatedCounter from '../components/AnimatedCounter';
|
|
|
|
const HabitDetailPage = () => {
|
|
const { id } = useParams();
|
|
const navigate = useNavigate();
|
|
const { toast } = useToast();
|
|
const [habit, setHabit] = useState(null);
|
|
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Load and apply saved theme on mount
|
|
const savedTheme = localStorage.getItem('theme');
|
|
if (savedTheme) {
|
|
document.documentElement.classList.remove('light', 'dark');
|
|
document.documentElement.classList.add(savedTheme);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
loadHabit();
|
|
}, [id]);
|
|
|
|
const loadHabit = () => {
|
|
const loadedHabit = getHabit(id);
|
|
if (!loadedHabit) {
|
|
toast({
|
|
title: "Habit not found",
|
|
description: "This habit doesn't exist or was deleted.",
|
|
variant: "destructive",
|
|
});
|
|
navigate('/');
|
|
return;
|
|
}
|
|
setHabit(loadedHabit);
|
|
};
|
|
|
|
const handleDelete = () => {
|
|
// Optimistic local delete
|
|
const habits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
|
|
const filtered = habits.filter(h => h.id !== id);
|
|
localStorage.setItem('habitgrid_data', JSON.stringify(filtered));
|
|
deleteHabit(id); // background sync
|
|
toast({
|
|
title: "✅ Habit deleted",
|
|
description: "Your habit has been removed successfully.",
|
|
});
|
|
navigate('/');
|
|
};
|
|
|
|
if (!habit) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center">
|
|
<div className="animate-pulse text-muted-foreground">Loading...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Find the oldest completion date
|
|
let oldestDate = new Date();
|
|
if (habit.completions.length > 0) {
|
|
oldestDate = new Date(habit.completions.reduce((min, d) => d < min ? d : min, habit.completions[0]));
|
|
}
|
|
|
|
// Calculate streaks of consecutive days
|
|
function getFullOpacityStreaks(completions) {
|
|
if (!completions || completions.length === 0) return [];
|
|
const sorted = [...completions].sort();
|
|
let streaks = [];
|
|
let currentStreak = [sorted[0]];
|
|
for (let i = 1; i < sorted.length; i++) {
|
|
const prev = new Date(sorted[i - 1]);
|
|
const curr = new Date(sorted[i]);
|
|
const diff = (curr - prev) / (1000 * 60 * 60 * 24);
|
|
if (diff === 1) {
|
|
currentStreak.push(sorted[i]);
|
|
} else {
|
|
if (currentStreak.length > 1) streaks.push([...currentStreak]);
|
|
currentStreak = [sorted[i]];
|
|
}
|
|
}
|
|
if (currentStreak.length > 1) streaks.push([...currentStreak]);
|
|
return streaks;
|
|
}
|
|
|
|
// Bonus: +2% per streak of 3+ full opacity days (capped at +10%)
|
|
const streaks = getFullOpacityStreaks(habit.completions);
|
|
const bonus = Math.min(streaks.filter(s => s.length >= 3).length * 2, 10);
|
|
|
|
const completionRate = habit.completions.length > 0
|
|
? (() => {
|
|
// Overall rate
|
|
const totalDays = Math.max(1, Math.ceil((Date.now() - oldestDate.getTime()) / (1000 * 60 * 60 * 24)));
|
|
const overallRate = habit.completions.length / totalDays;
|
|
|
|
// Last 30 days rate
|
|
const today = new Date();
|
|
const lastMonthStart = new Date(today);
|
|
lastMonthStart.setDate(today.getDate() - 29);
|
|
const lastMonthDates = [];
|
|
for (let d = new Date(lastMonthStart); d <= today; d.setDate(d.getDate() + 1)) {
|
|
lastMonthDates.push(d.toISOString().slice(0, 10));
|
|
}
|
|
const lastMonthCompletions = habit.completions.filter(dateStr => lastMonthDates.includes(dateStr));
|
|
const lastMonthRate = lastMonthCompletions.length / 30;
|
|
|
|
// Weighted blend: 70% last month, 30% overall
|
|
const blendedRate = (lastMonthRate * 0.7) + (overallRate * 0.3);
|
|
return Math.round(blendedRate * 100 + bonus);
|
|
})()
|
|
: 0;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-50 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950">
|
|
<div className="max-w-6xl mx-auto px-4 py-6 sm:px-6 lg:px-8">
|
|
{/* Header */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="flex items-center justify-between mb-6"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => navigate('/')}
|
|
className="rounded-full"
|
|
>
|
|
<ArrowLeft className="w-5 h-5" />
|
|
</Button>
|
|
<div>
|
|
<h1 className="text-2xl font-bold">{habit.name}</h1>
|
|
<p className="text-sm text-muted-foreground">Track your daily progress</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => navigate(`/edit/${id}`)}
|
|
className="rounded-full"
|
|
>
|
|
<Edit2 className="w-5 h-5" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setShowDeleteDialog(true)}
|
|
className="rounded-full text-destructive hover:text-destructive"
|
|
>
|
|
<Trash2 className="w-5 h-5" />
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Stats Cards */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.1 }}
|
|
className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8"
|
|
>
|
|
<div className="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-sm border border-slate-200 dark:border-slate-700">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-orange-400 to-red-500 flex items-center justify-center">
|
|
<TrendingUp className="w-5 h-5 text-white" />
|
|
</div>
|
|
<span className="text-sm font-medium text-muted-foreground">Current Streak</span>
|
|
</div>
|
|
<p className="text-3xl font-bold"><AnimatedCounter value={habit.currentStreak || 0} duration={900} /></p>
|
|
<p className="text-xs text-muted-foreground mt-1">days in a row</p>
|
|
</div>
|
|
|
|
<div className="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-sm border border-slate-200 dark:border-slate-700">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-400 to-pink-500 flex items-center justify-center">
|
|
<Target className="w-5 h-5 text-white" />
|
|
</div>
|
|
<span className="text-sm font-medium text-muted-foreground">Longest Streak</span>
|
|
</div>
|
|
<p className="text-3xl font-bold"><AnimatedCounter value={habit.longestStreak || 0} duration={900} /></p>
|
|
<p className="text-xs text-muted-foreground mt-1">personal best</p>
|
|
</div>
|
|
|
|
<div className="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-sm border border-slate-200 dark:border-slate-700">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-400 to-cyan-500 flex items-center justify-center">
|
|
<Calendar className="w-5 h-5 text-white" />
|
|
</div>
|
|
<span className="text-sm font-medium text-muted-foreground">Consistency Score!</span>
|
|
</div>
|
|
<p className="text-3xl font-bold"><AnimatedCounter value={completionRate} duration={900} format={v => `${v}%`} /></p>
|
|
<p className="text-xs text-muted-foreground mt-1">overall progress</p>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Habit Grid */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.2 }}
|
|
>
|
|
<HabitGrid habit={habit} onUpdate={loadHabit} fullView />
|
|
</motion.div>
|
|
</div>
|
|
|
|
<DeleteHabitDialog
|
|
open={showDeleteDialog}
|
|
onOpenChange={setShowDeleteDialog}
|
|
onConfirm={handleDelete}
|
|
habitName={habit.name}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HabitDetailPage; |