mirror of
https://github.com/harivansh-afk/Habit-Tracker.git
synced 2026-04-19 22:01:41 +00:00
adding today feature on main habit page, show streaks feature on settings page and improved dark mode functionality
This commit is contained in:
parent
1bb06006e8
commit
6b6cba21e5
9 changed files with 705 additions and 362 deletions
|
|
@ -1,6 +1,7 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import { Trash2 } from 'lucide-react';
|
||||
import { Habit } from '../types';
|
||||
import { useThemeContext } from '../contexts/ThemeContext';
|
||||
|
||||
interface HabitListProps {
|
||||
habits: Habit[];
|
||||
|
|
@ -99,6 +100,8 @@ export function HabitList({
|
|||
onDeleteHabit,
|
||||
onUpdateStreak,
|
||||
}: HabitListProps) {
|
||||
const { showStreaks } = useThemeContext();
|
||||
|
||||
useEffect(() => {
|
||||
console.log('Current week dates:',
|
||||
currentWeek.map(date =>
|
||||
|
|
@ -108,82 +111,114 @@ export function HabitList({
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left dark:text-white">Habit</th>
|
||||
{currentWeek.map((dateStr, index) => {
|
||||
const date = new Date(dateStr);
|
||||
// Ensure date is interpreted in local timezone
|
||||
const displayDate = new Date(date.getTime() + date.getTimezoneOffset() * 60000);
|
||||
|
||||
return (
|
||||
<th key={dateStr} className="px-4 py-2 text-center dark:text-white">
|
||||
<div>{daysOfWeek[index]}</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{displayDate.getDate()}
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
})}
|
||||
<th className="px-4 py-2 text-center dark:text-white">Current Streak</th>
|
||||
<th className="px-4 py-2 text-center dark:text-white">Best Streak</th>
|
||||
<th className="px-4 py-2 text-center dark:text-white">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{habits.map((habit) => (
|
||||
<tr key={habit.id} className="border-t dark:border-gray-700">
|
||||
<td className="px-4 py-2 dark:text-white">
|
||||
<input
|
||||
type="text"
|
||||
value={habit.name}
|
||||
onChange={(e) => onUpdateHabit(habit.id, e.target.value)}
|
||||
aria-label="Habit name"
|
||||
placeholder="Enter habit name"
|
||||
className="bg-transparent border-none focus:outline-none focus:ring-2 focus:ring-gray-300 rounded px-2"
|
||||
/>
|
||||
</td>
|
||||
{currentWeek.map((date) => (
|
||||
<td key={date} className="px-4 py-2 text-center">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-left px-4 py-2 dark:text-white">Habit</th>
|
||||
{currentWeek.map((dateStr, index) => {
|
||||
const date = new Date(dateStr);
|
||||
const displayDate = new Date(date.getTime() + date.getTimezoneOffset() * 60000);
|
||||
|
||||
return (
|
||||
<th key={dateStr} className="px-4 py-2 text-center dark:text-white">
|
||||
<div>{daysOfWeek[index]}</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{displayDate.getDate()}
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
})}
|
||||
{showStreaks && (
|
||||
<>
|
||||
<th className="px-4 py-2 text-center dark:text-white">Current Streak</th>
|
||||
<th className="px-4 py-2 text-center dark:text-white">Best Streak</th>
|
||||
</>
|
||||
)}
|
||||
<th className="px-4 py-2 text-center dark:text-white">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{habits.map((habit) => (
|
||||
<tr key={habit.id} className="border-t dark:border-gray-700">
|
||||
<td className="px-4 py-2 dark:text-white">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={habit.completedDates.includes(date)}
|
||||
onChange={() => {
|
||||
onToggleHabit(habit.id, date);
|
||||
const newCompletedDates = habit.completedDates.includes(date)
|
||||
? habit.completedDates.filter(d => d !== date)
|
||||
: [...habit.completedDates, date];
|
||||
|
||||
const { bestStreak } = calculateStreak(newCompletedDates);
|
||||
onUpdateStreak(habit.id, bestStreak);
|
||||
}}
|
||||
aria-label={`Mark ${habit.name} as completed for ${date}`}
|
||||
className="w-4 h-4 rounded border-gray-300 dark:border-gray-600"
|
||||
type="text"
|
||||
value={habit.name}
|
||||
onChange={(e) => onUpdateHabit(habit.id, e.target.value)}
|
||||
aria-label="Habit name"
|
||||
placeholder="Enter habit name"
|
||||
className="bg-transparent border-none focus:outline-none focus:ring-2 focus:ring-gray-300 rounded px-2"
|
||||
/>
|
||||
</td>
|
||||
))}
|
||||
<td className="px-4 py-2 text-center">
|
||||
<span className="dark:text-white font-medium">
|
||||
{calculateStreak(habit.completedDates || []).currentStreak}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-center">
|
||||
<span className="dark:text-white font-medium">
|
||||
{calculateStreak(habit.completedDates || []).bestStreak}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-center">
|
||||
<button
|
||||
onClick={() => onDeleteHabit(habit.id)}
|
||||
className="p-2 text-red-500 hover:bg-red-100 dark:hover:bg-red-900 rounded-full"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{currentWeek.map((date) => (
|
||||
<td key={date} className="px-4 py-2 text-center">
|
||||
<label className="relative inline-block cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={habit.completedDates.includes(date)}
|
||||
onChange={() => {
|
||||
onToggleHabit(habit.id, date);
|
||||
const newCompletedDates = habit.completedDates.includes(date)
|
||||
? habit.completedDates.filter(d => d !== date)
|
||||
: [...habit.completedDates, date];
|
||||
|
||||
const { bestStreak } = calculateStreak(newCompletedDates);
|
||||
onUpdateStreak(habit.id, bestStreak);
|
||||
}}
|
||||
aria-label={`Mark ${habit.name} as completed for ${date}`}
|
||||
className="sr-only"
|
||||
/>
|
||||
<div className={`
|
||||
w-6 h-6 rounded-md border-2 transition-all duration-200
|
||||
${habit.completedDates.includes(date)
|
||||
? 'bg-green-500 border-green-500'
|
||||
: 'border-gray-300 dark:border-gray-600 hover:border-green-400 dark:hover:border-green-400'}
|
||||
flex items-center justify-center
|
||||
`}>
|
||||
{habit.completedDates.includes(date) && (
|
||||
<svg
|
||||
className="w-4 h-4 text-white"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
</td>
|
||||
))}
|
||||
{showStreaks && (
|
||||
<>
|
||||
<td className="px-4 py-2 text-center">
|
||||
<span className="text-yellow-500 dark:text-yellow-400 font-medium text-lg">
|
||||
{calculateStreak(habit.completedDates || []).currentStreak}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-center">
|
||||
<span className="text-yellow-500 dark:text-yellow-400 font-medium text-lg">
|
||||
{calculateStreak(habit.completedDates || []).bestStreak}
|
||||
</span>
|
||||
</td>
|
||||
</>
|
||||
)}
|
||||
<td className="px-4 py-2 text-center">
|
||||
<button
|
||||
onClick={() => onDeleteHabit(habit.id)}
|
||||
className="p-2 text-red-500 hover:bg-red-100 dark:hover:bg-red-900 rounded-full transition-colors duration-200"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue