Building a Task Reminder App with Next.js

// index.js

import React, { useState, useEffect } from 'react';
import TaskList from '../components/TaskList';
import styles from '../styles/Home.module.css';

export default function Home() {
  const [tasks, setTasks] = useState([]);
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [dueDate, setDueDate] = useState('');
  const [dueTime, setDueTime] = useState('');
  const [completedTasks, setCompletedTasks] = useState(new Set());

  const addTask = () => {
    if (!title || !description || !dueDate || !dueTime) return;

    const dueDateTime = new Date(`${dueDate}T${dueTime}:00`);

    setTasks([...tasks, { id: tasks.length, title, description, dueDateTime }]);
    setTitle('');
    setDescription('');
    setDueDate('');
    setDueTime('');
  };

  useEffect(() => {
    const reminders = tasks.map(task => {
      const timeDiff = task.dueDateTime - Date.now();
      if (timeDiff > 0 && !completedTasks.has(task.id)) {
        return setTimeout(() => {
          alert(`Reminder: ${task.title} is due in 1 minute.`);
          setCompletedTasks(prevCompletedTasks => new Set(prevCompletedTasks).add(task.id));
        }, timeDiff - 60000);
      }
      return null;
    });

    return () => {
      reminders.forEach(reminder => {
        if (reminder) clearTimeout(reminder);
      });
    };
  }, [tasks, completedTasks]);

  const removeTask = (index) => {
    const newTasks = tasks.filter(task => task.id !== index);
    setTasks(newTasks);
  };

  return (
    <div className={styles.container}>
      <span className={styles.header}>
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20240320180346/gfg(1).png" alt="GeeksforGeeks logo" className={styles.logo} />
        <h1 className={styles.title}>Task Reminder App</h1>
      </span>
      <input type="text" className={styles.input} placeholder="Title" value={title} onChange={(e) => setTitle(e.target.value)} />
      <input type="text" className={styles.input} placeholder="Description" value={description} onChange={(e) => setDescription(e.target.value)} />
      <input type="date" className={styles.input} value={dueDate} onChange={(e) => setDueDate(e.target.value)} />
      <input type="time" className={styles.input} value={dueTime} onChange={(e) => setDueTime(e.target.value)} />
      <button onClick={addTask} className={styles.button}>Add Task</button>
      <TaskList tasks={tasks.sort((a, b) => a.dueDateTime - b.dueDateTime)} removeTask={removeTask} />
    </div>
  );
}

// Task.js

import React from 'react';
import styles from '../styles/Home.module.css';

const Task = ({ task }) => {
  const { title, description, dueDateTime } = task;

  return (
    <div className={styles.task}>
      <h2 className={styles.taskTitle}>{title}</h2>
      <p className={styles.taskDescription}>{description}</p>
      <p className={styles.taskDue}>Due Date: {dueDateTime.toLocaleString()}</p>
    </div>
  );
};

export default Task;

// TaskList.js

import React from 'react';
import Task from './Task';

const TaskList = ({ tasks }) => {
  return (
    <div>
      <h2>Tasks</h2>
      {tasks.map((task, index) => (
        <Task key={index} task={task} />
      ))}
    </div>
  );
};

export default TaskList;