feat: use EventState at Calendar

Author: jane1107

src/components/common/Calendar.tsx

@@ -2,13 +2,7 @@ import FullCalendar from '@fullcalendar/react';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import { useRef, useState, useEffect } from 'react';
-
-const events = [
-  { title: 'Meeting', start: new Date() },
-  { title: 'Meeting2', start: '2024-05-08', end: '2024-05-12', backgroundColor: 'red', borderColor: 'red' },
-  { title: 'Meeting3', start: '2024-05-08', end: '2024-05-10', backgroundColor: 'green', borderColor: 'green' },
-  { title: 'Meeting4', start: '2024-05-08', end: '2024-05-11' },
-];
+import { useEventState } from '@/stores/myEventsStore';
 
 const Calendar: React.FC = () => {
   const [calendarHeight, setCalendarHeight] = useState<string | number>('auto');
@@ -43,6 +37,7 @@ const Calendar: React.FC = () => {
     return () => window.removeEventListener('resize', updateSize);
   }, []);
 
+  const events = useEventState();
   return (
     <div>
       <FullCalendar

src/stores/myEventsStore.ts

@@ -0,0 +1,22 @@
+import { create } from 'zustand';
+import { Events } from '../utils/index.ts';
+
+const initialEventsState: Events[] = [
+  { title: 'Meeting', start: new Date(), end: new Date() },
+  { title: 'Meeting2', start: '2024-05-08', end: '2024-05-12', backgroundColor: 'red', borderColor: 'red' },
+  { title: 'Meeting3', start: '2024-05-08', end: '2024-05-10', backgroundColor: 'green', borderColor: 'green' },
+  { title: 'Meeting4', start: '2024-05-08', end: '2024-05-11' },
+];
+
+interface EventsState {
+  events: Events[];
+  addEvents: (event: Events) => void;
+  initEvents: () => void;
+}
+
+export const useEventState = create<EventsState>()((set) => ({
+  events: [...initialEventsState],
+
+  addEvents: (newEvent: Events) => set((state) => ({ events: [...state.events, newEvent] })),
+  initEvents: () => set(() => ({ events: [] })),
+}));

src/utils/index.ts

@@ -0,0 +1,9 @@
+export interface Events {
+  id?: string;
+  title: string;
+  start: Date | string;
+  end: Date | string;
+  backgroundColor?: string;
+  borderColor?: string;
+  textColor?: string;
+}