mirror of
https://github.com/harivansh-afk/Habit-Tracker.git
synced 2026-04-18 05:01:57 +00:00
UI updates and bug fixes
This commit is contained in:
parent
20e91dae4c
commit
94c26c6b50
5 changed files with 274 additions and 244 deletions
|
|
@ -3,15 +3,15 @@ import { Trash2 } from 'lucide-react';
|
|||
import { Habit } from '../types';
|
||||
import { useThemeContext } from '../contexts/ThemeContext';
|
||||
import { calculateStreak } from '../utils/streakCalculator';
|
||||
import { getDayIndex } from '../utils/dateUtils';
|
||||
|
||||
interface HabitListProps {
|
||||
habits: Habit[];
|
||||
currentWeek: string[];
|
||||
daysOfWeek: string[];
|
||||
onToggleHabit: (id: number, date: string) => void;
|
||||
onUpdateHabit: (id: number, name: string) => void;
|
||||
onDeleteHabit: (id: number) => void;
|
||||
onUpdateStreak?: (id: number, newStreak: number) => Promise<void>;
|
||||
onToggleHabit: (id: number, date: string) => Promise<void>;
|
||||
onUpdateHabit: (id: number, name: string) => Promise<void>;
|
||||
onDeleteHabit: (id: number) => Promise<void>;
|
||||
}
|
||||
|
||||
export function HabitList({
|
||||
|
|
@ -22,21 +22,18 @@ export function HabitList({
|
|||
onUpdateHabit,
|
||||
onDeleteHabit,
|
||||
}: HabitListProps) {
|
||||
const { habitSort, showStreaks } = useThemeContext();
|
||||
const { theme, habitSort, showStreaks } = useThemeContext();
|
||||
|
||||
const sortedHabits = useMemo(() => {
|
||||
if (habitSort === 'alphabetical') {
|
||||
return [...habits].sort((a, b) => a.name.localeCompare(b.name));
|
||||
}
|
||||
// Default to dateCreated sort
|
||||
return habits;
|
||||
}, [habits, habitSort]);
|
||||
|
||||
// Helper function to get day name
|
||||
const getDayName = (dateStr: string) => {
|
||||
const date = new Date(dateStr);
|
||||
const dayIndex = date.getDay() === 0 ? 6 : date.getDay() - 1;
|
||||
return daysOfWeek[dayIndex];
|
||||
return daysOfWeek[getDayIndex(date)];
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -45,84 +42,88 @@ export function HabitList({
|
|||
<thead>
|
||||
<tr>
|
||||
<th className="text-left px-4 py-2 dark:text-white">Habit</th>
|
||||
{currentWeek.map((dateStr) => {
|
||||
const date = new Date(dateStr);
|
||||
return (
|
||||
<th key={dateStr} className="px-4 py-2 text-center dark:text-white">
|
||||
<div className="hidden md:block">{getDayName(dateStr)}</div>
|
||||
<div className="md:hidden">{getDayName(dateStr).slice(0, 1)}</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{date.getDate()}
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
})}
|
||||
{currentWeek.map((dateStr) => (
|
||||
<th key={dateStr} className="px-4 py-2 text-center dark:text-white">
|
||||
<div className="hidden md:block">{getDayName(dateStr)}</div>
|
||||
<div className="md:hidden">{getDayName(dateStr).slice(0, 1)}</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{new Date(dateStr).getDate()}
|
||||
</div>
|
||||
</th>
|
||||
))}
|
||||
{showStreaks && (
|
||||
<th className="px-4 py-2 text-center dark:text-white">Streak</th>
|
||||
)}
|
||||
<th className="px-4 py-2 text-center dark:text-white">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sortedHabits.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)}
|
||||
className="bg-transparent border-none focus:outline-none focus:ring-2 focus:ring-gray-300 rounded px-2 w-full"
|
||||
/>
|
||||
</td>
|
||||
{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)}
|
||||
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>
|
||||
{sortedHabits.map((habit) => {
|
||||
const { currentStreak } = calculateStreak(habit.completedDates);
|
||||
|
||||
return (
|
||||
<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)}
|
||||
className="bg-transparent border-none focus:outline-none focus:ring-2 focus:ring-gray-300 rounded px-2 w-full"
|
||||
/>
|
||||
</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>
|
||||
{showStreaks && (
|
||||
<>
|
||||
<td className="px-4 py-2 text-center">
|
||||
{/* ... streak content ... */}
|
||||
{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)}
|
||||
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>
|
||||
</>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
))}
|
||||
{showStreaks && (
|
||||
<td className="px-4 py-2 text-center dark:text-white">
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
|
||||
{currentStreak} days
|
||||
</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