Source: pages/index.js

/**
 * Home Page Component
 * 
 * This component represents the home page of the application.
 * It fetches tasks from the backend API and renders either the TodoList or LocalTodoList component based on the user's authentication status.
 * Also renders the Sidebar, Navbar, and InsightsGraph components.
 * 
 * @module HomePage
 */

'use client'
import React,{useState,useEffect} from 'react';

import TodoList from '../componenets/TodoList';
import Sidebar from '../componenets/layouts/Sidebar';
import Navbar from '../componenets/layouts/Navbar';
import InsightsGraph from '../componenets/layouts/InsightsGraph';
import { todoApi } from '../api/api';

/**
 * Renders the Home Page Component.
 * 
 * @returns {JSX.Element} The JSX element representing the Home Page Component.
 */
export default function HomePage() {
    const userId = JSON.parse(localStorage.getItem('user'));
    const [tasks, setTasks] = useState([]);
    const storedUserId = JSON.parse(localStorage.getItem('user'));

  // Fetch tasks from the backend API
  const fetchTasks = async () => {
    try {
      const response = await todoApi('GET', `gettasks/${userId}`);
      setTasks(response.data.tasks);
    } catch (error) {
      console.error('Error fetching tasks:', error);
    }
  };

  useEffect(() => {
        // Fetch tasks when the component mounts

    if (storedUserId) {
      fetchTasks();
    }
          // If user is not authenticated, retrieve tasks from local storage

    if(!storedUserId){  const storedTasks = JSON.parse(localStorage.getItem('tasks'));
      setTasks(storedTasks);}
  }, []);

  return (
    <div className="flex h-screen w-full">
      <Sidebar />

      <div className="flex flex-col flex-1 h-full">
        <Navbar />
        <main className="flex flex-col flex-1 p-8 bg-gray-100">
          <div className="App">
              <TodoList/>
          </div>
          {/* Insights Graph */}
          <div className="mt-8">
            <h2 className="text-2xl font-semibold mb-4">Insights</h2>
            <InsightsGraph tasks={tasks} />
          </div>
        </main>
      </div>
    </div>
  );
}