Added 7days calender in habit tracker

Author: alk211001

package-lock.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "date-fns": "^4.1.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-scripts": "5.0.1",

package.json

@@ -1,10 +1,15 @@
 import logo from './logo.svg';
 import './App.css';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import eachDayOfInterval from 'date-fns/eachDayOfInterval';
+import startOfWeek from 'date-fns/startOfWeek';
+import endOfWeek from 'date-fns/endOfWeek';
+import format from 'date-fns/format';
+import isToday from 'date-fns/isToday';
 
 const initialHabits = [
-  { id: 1, name: 'Code daily', category: 'General' },
-  { id: 2, name: 'Read tech articles', category: 'General' },
+  { id: 1, name: 'Code daily', category: 'General', completions: [new Date()] },
+  { id: 2, name: 'Read tech articles', category: 'General', completions: [] },
 ];
 
 function App() {
@@ -17,45 +22,64 @@ function App() {
       console.error('Category cannot be empty');
       return;
     }
-    const habitToAdd = { ...newHabit, id: Date.now() };
+    const habitToAdd = { ...newHabit, id: Date.now(), completions: [] };
     setHabits([...habits, habitToAdd]);
     setNewHabit({ name: '', category: 'General' });
     console.log('Habits:', habits);
   };
 
   const [selectedCategory, setSelectedCategory] = useState('All');
+  const [calendarMode, setCalendarMode] = useState('90day'); // '90day' | 'weekly' | 'monthly'
 
   const filteredHabits = selectedCategory === 'All'
     ? habits
     : habits.filter(habit => habit.category === selectedCategory);
 
+  // Calculate current week days
+  const [currentWeekDays, setCurrentWeekDays] = useState([]);
+
+  useEffect(() => {
+    if (calendarMode === 'weekly') {
+      const start = startOfWeek(new Date(), { weekStartsOn: 0 }); // Sunday
+      const end = endOfWeek(new Date(), { weekStartsOn: 0 });
+      setCurrentWeekDays(eachDayOfInterval({ start, end }));
+    }
+  }, [calendarMode]);
+
+  // Toggle calendar mode handler
+  const toggleCalendarMode = () => {
+    setCalendarMode(prev => (prev === '90day' ? 'weekly' : '90day'));
+  };
+
+  // Check if habit is completed on a given day
+  const isCompletedOn = (habit, day) => {
+    return habit.completions.some(date => format(date, 'yyyy-MM-dd') === format(day, 'yyyy-MM-dd'));
+  };
+
   return (
     <div className="App">
       <header className="App-header">
-        {/* <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p> */}
-
-        {/* Input for new habit name */}
+        {/* Habit input and category select */}
         <input
           type="text"
           placeholder="Habit name"
           value={newHabit.name}
           onChange={(e) => setNewHabit({ ...newHabit, name: e.target.value })}
+          className="mb-2 p-2 border border-gray-300 rounded-md w-full max-w-sm"
         />
-
-        {/* Select for new habit category */}
         <select
           value={newHabit.category}
           onChange={(e) => setNewHabit({ ...newHabit, category: e.target.value })}
-          className="w-full max-w-sm p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          className="mb-2 p-2 border border-gray-300 rounded-md w-full max-w-sm"
         >
           {categories.map(cat => <option key={cat} value={cat}>{cat}</option>)}
         </select>
-
-        {/* Button to add habit */}
-        <button onClick={addHabit}>Add Habit</button>
+        <button
+          onClick={addHabit}
+          className="mb-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+        >
+          Add Habit
+        </button>
 
         {/* Filter buttons */}
         <div className="flex flex-wrap gap-2 mb-4">
@@ -72,19 +96,61 @@ function App() {
           ))}
         </div>
 
+        {/* Calendar mode toggle */}
+        <div className="mb-4">
+          <button
+            onClick={toggleCalendarMode}
+            className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700"
+          >
+            Toggle to {calendarMode === '90day' ? 'Weekly' : '90-day'} View
+          </button>
+        </div>
+
         {/* Display current habits */}
         <div style={{ marginTop: '20px', textAlign: 'left' }}>
           <h3>Current Habits:</h3>
           {filteredHabits.length === 0 ? (
             <p>No habits in this category</p>
           ) : (
-            <ul>
-              {filteredHabits.map((habit) => (
-                <li key={habit.id}>
-                  {habit.name} - Category: {habit.category}
-                </li>
-              ))}
-            </ul>
+            <>
+              {calendarMode === 'weekly' ? (
+                <div>
+                  <div className="grid grid-cols-7 gap-2 text-center font-semibold mb-2">
+                    {currentWeekDays.map(day => (
+                      <div key={day.toISOString()}>{format(day, 'EEE')}</div>
+                    ))}
+                  </div>
+                  {filteredHabits.map(habit => (
+                    <div key={habit.id} className="mb-4">
+                      <div className="font-bold">{habit.name}</div>
+                      <div className="grid grid-cols-7 gap-2 text-center">
+                        {currentWeekDays.map(day => {
+                          const done = isCompletedOn(habit, day);
+                          const today = isToday(day);
+                          return (
+                            <div
+                              key={day.toISOString()}
+                              className={`h-8 w-8 rounded ${
+                                done ? 'bg-green-500' : today ? 'bg-blue-500' : 'bg-gray-200'
+                              }`}
+                              title={format(day, 'yyyy-MM-dd')}
+                            />
+                          );
+                        })}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <ul>
+                  {filteredHabits.map((habit) => (
+                    <li key={habit.id}>
+                      {habit.name} - Category: {habit.category}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </>
           )}
         </div>