cally/contexts/CalendarContext.tsx

// CalendarContext.tsx
import React, { createContext, useContext, useState, ReactNode } from "react";

// Define the CalendarEvent interface
export interface CalendarEvent {
  id?: number; // Unique identifier for the event
  user?: string;
  title: string; // Event title or name
  description?: string; // Optional description for the event
  start: Date; // Start date and time of the event
  end: Date; // End date and time of the event
  location?: string; // Optional event location
  allDay?: boolean; // Specifies if the event lasts all day
  color?: string; // Optional color to represent the event
  participants?: string[]; // Optional list of participants or attendees
  private?: boolean;
}

// Define the context type
interface CalendarContextType {
  events: CalendarEvent[];
  familyEvents: CalendarEvent[];
  addEvent: (event: CalendarEvent) => void; // Function to add an event
  removeEvent: (id: number) => void; // Function to remove an event by ID
  updateEvent: (changes: Partial<CalendarEvent>, id?: number) => void;
}

// Create the CalendarContext
const CalendarContext = createContext<CalendarContextType | undefined>(
  undefined
);

// Create a provider component
export const CalendarProvider: React.FC<{ children: ReactNode }> = ({
  children,
}) => {
  const [events, setEvents] = useState<CalendarEvent[]>([
    {
      id: 1,
      title: "Team Meeting",
      description: "Discuss project milestones and deadlines.",
      start: new Date("2024-09-15T10:00:00"),
      end: new Date("2024-09-15T11:00:00"),
      location: "Office Conference Room",
      allDay: false,
      color: "#FF5733",
      participants: ["Alice", "Bob", "Charlie"],
    },
    {
      id: 2,
      title: "Doctor's Appointment",
      description: "Annual check-up with Dr. Smith.",
      start: new Date("2024-09-20T14:30:00"),
      end: new Date("2024-09-20T15:30:00"),
      location: "Health Clinic",
      allDay: false,
      color: "#33FF57",
      participants: ["You"],
    },
    {
      id: 3,
      title: "Birthday Party",
      description: "Celebrating Sarah's 30th birthday.",
      start: new Date("2024-09-25T18:00:00"),
      end: new Date("2024-09-25T21:00:00"),
      location: "Sarah's House",
      allDay: false,
      color: "#3357FF",
      participants: ["You", "Sarah", "Tom", "Lily"],
    },
    {
      id: 4,
      title: "Project Deadline",
      description: "Final submission for the project.",
      start: new Date("2024-10-01T00:00:00"),
      end: new Date("2024-10-01T23:59:00"),
      location: "Online",
      allDay: false,
      color: "#FF33A1",
      participants: ["You"],
    },
    {
      id: 5,
      title: "Halloween Costume Party",
      description: "Join us for a spooky night of fun!",
      start: new Date("2024-10-31T19:00:00"),
      end: new Date("2024-10-31T23:00:00"),
      location: "Downtown Club",
      allDay: false,
      color: "#FFB733",
      participants: ["You", "Friends"],
    },
  ]);

  const [familyEvents, setFamilyEvents] = useState<CalendarEvent[]>([
    {
      id: 1,
      user: "jakesId",
      title: "Team Meeting",
      description: "Discuss project milestones and deadlines.",
      start: new Date("2024-09-10T10:00:00"),
      end: new Date("2024-09-10T11:00:00"),
      location: "Office Conference Room",
      allDay: false,
      color: "#FF5733",
      participants: ["Alice", "Bob", "Charlie"],
    },
    {
      id: 2,
      user: "mikesId",
      title: "Doctor's Appointment",
      description: "Annual check-up with Dr. Smith.",
      start: new Date("2024-09-21T14:30:00"),
      end: new Date("2024-09-21T15:30:00"),
      location: "Health Clinic",
      allDay: false,
      color: "#33FF57",
      participants: ["You"],
    },
    {
      id: 3,
      user: "jakesId",
      title: "Birthday Party",
      description: "Celebrating Sarah's 30th birthday.",
      start: new Date("2024-09-5T18:00:00"),
      end: new Date("2024-09-5T21:00:00"),
      location: "Sarah's House",
      allDay: false,
      color: "#3357FF",
      participants: ["You", "Sarah", "Tom", "Lily"],
    },
    {
      id: 4,
      user: "davidsId",
      title: "Project Deadline",
      description: "Final submission for the project.",
      start: new Date("2024-10-03T00:00:00"),
      end: new Date("2024-10-03T23:59:00"),
      location: "Online",
      allDay: false,
      color: "#FF33A1",
      participants: ["You"],
    },
    {
      id: 5,
      user: "jakesId",
      title: "Halloween Costume Party",
      description: "Join us for a spooky night of fun!",
      start: new Date("2024-10-02T19:00:00"),
      end: new Date("2024-10-02T23:00:00"),
      location: "Downtown Club",
      allDay: false,
      color: "#FFB733",
      participants: ["You", "Friends"],
    },
  ]);

  // Function to add an event
  const addEvent = (event: CalendarEvent) => {
    event.id = events.length + 1;
    setEvents((prevEvents) => [...prevEvents, event]);
  };

  // Function to remove an event by ID
  const removeEvent = (id: number) => {
    setEvents((prevEvents) => prevEvents.filter((event) => event.id !== id));
  };

  // Function to update an event
  const updateEvent = ( changes: Partial<CalendarEvent>, id?: number) => {
    setEvents((prevEvents) =>
      prevEvents.map((event) =>
        event.id === id ? { ...event, ...changes } : event
      )
    );
  };

  return (
    <CalendarContext.Provider
      value={{ events, addEvent, removeEvent, updateEvent, familyEvents }}
    >
      {children}
    </CalendarContext.Provider>
  );
};

// Custom hook to use the CalendarContext
export const useCalendarContext = () => {
  const context = useContext(CalendarContext);
  if (!context) {
    throw new Error("useCalendar must be used within a CalendarProvider");
  }
  return context;
};