cally/contexts/RemindersContext.tsx

import React, { createContext, useContext, useState } from "react";
export interface IReminder {
  id: number;
  title: string;
  date: Date;
  done: boolean;
  isAutoRepeat: boolean;
  remindIn: string;
}
interface IRemindersContext {
  reminders: IReminder[];
  updateReminder: (id: number, changes: Partial<IReminder>) => void;
  addReminder: (changes: Omit<IReminder, "id">) => void;
}
const RemindersContext = createContext<IRemindersContext | undefined>(
  undefined
);
export const RemindersProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const [reminders, setReminders] = useState<IReminder[]>([
    {
      id: 0,
      title: "Shaving Time",
      date: new Date(2023, 1, 30, 9, 30),
      done: true,
      isAutoRepeat: true,
      remindIn: "just-in-time",
    },
    {
      id: 1,
      title: "Gonna get a food order",
      date: new Date(2023, 1, 27),
      done: false,
      isAutoRepeat: true,
      remindIn: "just-in-time",
    },
  ]);
  const updateReminder = (id: number, changes: Partial<IReminder>) => {
    setReminders((prevReminder) =>
      prevReminder.map((reminder) =>
        reminder.id === id ? { ...reminder, ...changes } : reminder
      )
    );
  };
  const addReminder = (newReminder: Omit<IReminder, "id">) => {
    const newId =
      reminders.length > 0 ? reminders[reminders.length - 1].id + 1 : 1;

    const reminderWithId: IReminder = {
      ...newReminder,
      id: newId,
    };

    setReminders([...reminders, reminderWithId]);
  };
  return (
    <RemindersContext.Provider
      value={{ reminders, updateReminder, addReminder }}
    >
      {children}
    </RemindersContext.Provider>
  );
};

export const useRemindersContext = () => useContext(RemindersContext)!;