Fix type check errors

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next"
+}

mock-data.ts

@@ -1,77 +0,0 @@
-interface Event {
-id: string;
-title: string;
-description: string;
-imageUrl: string;
-time: string;
-}
-
-interface EventsByDate {
-[date: string]: Event[];
-}
-
-const events: EventsByDate = {
-"2024-03-11": [
-{
-id: "event-1",
-title: "Coffee with Alex",
-description:
-"Meet with Alex to brainstorm ideas for the upcoming product
-launch. We'll review market research and competitor analysis to identify
-potential opportunities and challenges.",
-imageUrl:
-"https://fastly.picsum.photos/id/312/1920/1080.jpg?hmac=OD_fP9MUQN7uJ8NBR7t
-lii78qwHPUROGgohG4w16Kjw",
-time: "09:00 AM",
-},
-{
-id: "event-2",
-title: "Team Standup",
-description:
-"Weekly standup meeting with the dev team. Discuss progress,
-blockers, and align on next week's priorities.",
-imageUrl:
-"http://fastly.picsum.photos/id/737/1920/1080.jpg?hmac=aFzER8Y4wcWTrXVx2wVK
-Sj10IqnygaF33gESj0WGDwI",
-time: "02:00 PM",
-
-},
-],
-"2024-03-12": [
-{
-id: "event-3",
-title: "Yoga Session",
-description:
-"Join for a relaxing yoga session to reduce stress and improve
-mindfulness. Suitable for all levels, focusing on gentle stretches.",
-imageUrl:
-"https://fastly.picsum.photos/id/392/1920/1080.jpg?hmac=Fvbf7C1Rcozg8EccwYP
-qsGkk_o6Bld2GQRDPZKWpd7g",
-time: "12:00 PM",
-},
-{
-id: "event-4",
-title: "Product Demo",
-description:
-"Demo of UI improvements and performance optimizations to gather
-stakeholder feedback.",
-imageUrl:
-"https://fastly.picsum.photos/id/249/1920/1080.jpg?hmac=cPMNdgGXRh6T_KhRMua
-QjRtAx5cWRraELjtL2MHTfYs",
-time: "03:30 PM",
-},
-],
-"2024-03-13": [
-{
-id: "event-5",
-title: "Client Meeting",
-description:
-"Review project progress, timeline adjustments, and outline roadmap
-for next quarter with the client.",
-imageUrl:
-"https://fastly.picsum.photos/id/908/1920/1080.jpg?hmac=MeG_oA1s75hHAL_4JzC
-ioh6--zyFTWSCTxOhe8ugvXo",
-time: "11:30 AM",
-},
-],
-};

package.json

@@ -6,7 +6,8 @@
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "type-check": "tsc --noEmit"
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.5.2",
@@ -24,6 +25,8 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "autoprefixer": "^10.0.0",
+    "eslint": "9.23.0",
+    "eslint-config-next": "15.2.3",
     "postcss": "^8.0.0",
     "tailwindcss": "^4",
     "typescript": "^5"

src/components/Calendar.tsx

@@ -19,6 +19,7 @@ import EventModal from '@/components/EventModal';
 import eventsData from '@/data/events';
 import { Event, EventsByDate } from '@/types';
 import CalendarHeader from '@/components/CalendarHeader';
+import DraggableEvent from './DraggableEvent';
 
 const Calendar = () => {
   const { width } = useWindowSize();
@@ -58,10 +59,8 @@ const Calendar = () => {
       const sourceDate = source.data.date;
       const targetDate = dropTarget.date;
 
-      const updatedEvent = { ...movedEvent, date: targetDate };
-
       newEvents[sourceDate] = (newEvents[sourceDate] || []).filter((e: Event) => e.id !== movedEvent.id);
-      newEvents[targetDate] = [...(newEvents[targetDate] || []), updatedEvent];
+      newEvents[targetDate] = [...(newEvents[targetDate] || []), movedEvent];
 
       setEvents(newEvents);
     }
@@ -218,10 +217,7 @@ const Calendar = () => {
   };
 
   const handleEventClick = useCallback(({ event, date }: { event: Event; date: string }) => {
-    setSelectedEvent({
+    setSelectedEvent(event);
-      ...event,
-      date
-    });
   }, []);
 
   return (
@@ -291,6 +287,7 @@ const Calendar = () => {
         {selectedEvent && (
           <EventModal
             event={selectedEvent}
+            date={format(currentDate, 'yyyy-MM-dd')}
             onClose={() => setSelectedEvent(null)}
           />
         )}
@@ -374,7 +371,7 @@ const DayColumn = ({
   }, [date]);
 
   console.log('Date value:', date);
-  console.log('Is valid date:', date instanceof Date && !isNaN(date));
+  console.log('Is valid date:', date instanceof Date && !isNaN(date.getTime()));
 
   return (
     <motion.div
@@ -410,102 +407,6 @@ const DayColumn = ({
   );
 };
 
-const DraggableEvent = ({ 
-  event, 
-  date, 
-  onEventClick,
-  onDragStart,
-  onDragEnd,
-  onDayChange,
-  isClient
-}: { 
-  event: Event; 
-  date: string;
-  onEventClick: (eventData: { event: Event; date: string }) => void;
-  onDragStart: () => void;
-  onDragEnd: () => void;
-  onDayChange: (direction: 'left' | 'right') => void;
-  isClient: boolean;
-}) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const screenWidth = useRef(isClient ? window.innerWidth : 0);
-  const lastChangeTime = useRef(0);
-
-  if (!event || typeof event !== 'object' || !event.id) {
-    console.error('Invalid event object:', event);
-    return null;
-  }
-
-  useEffect(() => {
-    const element = ref.current;
-    if (!element) return;
-
-    const cleanup = draggable({
-      element,
-      onDragStart: () => {
-        screenWidth.current = window.innerWidth;
-        setIsDragging(true);
-        onDragStart();
-        lastChangeTime.current = Date.now();
-      },
-      onDrag: ({ location }) => {
-        const currentX = location.current.input.clientX;
-        const now = Date.now();
-        
-        if (now - lastChangeTime.current > 500) {
-          if (currentX < 50) {
-            lastChangeTime.current = now;
-            onDayChange('left');
-          } else if (currentX > screenWidth.current - 50) {
-            lastChangeTime.current = now;
-            onDayChange('right');
-          }
-        }
-      },
-      onDrop: () => {
-        setIsDragging(false);
-        onDragEnd();
-      },
-      getInitialData: () => ({ id: event.id, date }),
-      dragHandle: element
-    });
-
-    return cleanup;
-  }, [date, event.id, onDragEnd, onDragStart, onDayChange]);
-
-  return (
-    <motion.div
-      ref={ref}
-      layoutId={event.id}
-      onClick={() => !isDragging && onEventClick({ event, date })}
-      className="bg-white p-4 rounded shadow mb-2 cursor-grab active:cursor-grabbing transition-all relative select-none"
-      whileHover={{ scale: 1.01 }}
-      style={{
-        opacity: isDragging ? 0.7 : 1,
-        userSelect: 'none',
-        WebkitUserSelect: 'none',
-        touchAction: 'manipulation'
-      }}
-    >
-      <div className="relative rounded overflow-hidden mb-2">
-        {event.imageUrl && (
-          <img 
-            src={event.imageUrl} 
-            alt={event.title}
-            className="w-full h-16 md:h-12 object-cover pointer-events-none"
-            draggable="false"
-          />
-        )}
-        <div className="absolute top-1 right-1 bg-black/50 text-white text-xs px-2 py-1 rounded">
-          {event.time}
-        </div>
-      </div>
-      <h3 className="font-medium text-black">{event.title}</h3>
-    </motion.div>
-  );
-};
-
 const WeekHeader = ({ currentDate }: { currentDate: Date }) => {
   const weekDays = useMemo(() => {
     const start = startOfWeek(currentDate, { weekStartsOn: 0 }); // Start week on Sunday

src/components/DayColumn.tsx

@@ -1,16 +1,17 @@
 import React, { useRef } from 'react';
 import { motion } from 'framer-motion';
 import { format, addDays } from 'date-fns';
-import { DraggableEvent } from './DraggableEvent';
+import DraggableEvent from './DraggableEvent';
+import { Event } from '../types';
 
 interface DayColumnProps {
   date: Date;
   events: Event[];
   isMobile: boolean;
   index: number;
-  onEventClick: (event: Event) => void;
+  onEventClick: (eventData: { event: Event; date: string }) => void;
-  onDragStart: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  onDragStart: () => void;
-  onDragEnd: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  onDragEnd: () => void;
   handleEventMove: (eventId: string, newDate: Date) => void;
   onDayChange: (dir: 'left' | 'right') => void;
   isClient: boolean;
@@ -30,7 +31,15 @@ const DayColumn: React.FC<DayColumnProps> = ({
 }) => {
   const columnRef = useRef<HTMLDivElement>(null);
 
-  const sortedEvents = [...events].sort((a, b) => a.start.getTime() - b.start.getTime());
+  const sortedEvents = [...events].sort((a, b) => {
+    const timeA = new Date(a.time).getTime();
+    const timeB = new Date(b.time).getTime();
+    return timeA - timeB;
+  });
+
+  const handleMove = (dir: 'up' | 'down') => {
+    // ... existing code ...
+  };
 
   return (
     <motion.div
@@ -50,9 +59,9 @@ const DayColumn: React.FC<DayColumnProps> = ({
               key={event.id}
               event={event}
               date={format(date, 'yyyy-MM-dd')}
-              onEventClick={onEventClick}
+              onEventClick={(eventData) => onEventClick({ event: eventData.event, date: eventData.date })}
-              onDragStart={onDragStart}
+              onDragStart={() => onDragStart()}
-              onDragEnd={onDragEnd}
+              onDragEnd={() => onDragEnd()}
               onDayChange={(dir) => {
                 onDayChange(dir);
                 const newDate = addDays(date, dir === 'left' ? -1 : 1);

src/components/DraggableEvent.tsx

@@ -0,0 +1,97 @@
+import { useRef, useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { Event } from '../types';
+import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+
+interface DraggableEventProps {
+  event: Event;
+  date: string;
+  onEventClick: (eventData: { event: Event; date: string }) => void;
+  onDragStart: () => void;
+  onDragEnd: () => void;
+  onDayChange: (direction: 'left' | 'right') => void;
+  isClient: boolean;
+}
+
+export default function DraggableEvent({
+  event,
+  date,
+  onEventClick,
+  onDragStart,
+  onDragEnd,
+  onDayChange,
+  isClient
+}: DraggableEventProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const screenWidth = useRef(isClient ? window.innerWidth : 0);
+  const lastChangeTime = useRef(0);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const cleanup = draggable({
+      element,
+      onDragStart: () => {
+        screenWidth.current = window.innerWidth;
+        setIsDragging(true);
+        onDragStart();
+        lastChangeTime.current = Date.now();
+      },
+      onDrag: ({ location }) => {
+        const currentX = location.current.input.clientX;
+        const now = Date.now();
+        
+        if (now - lastChangeTime.current > 500) {
+          if (currentX < 50) {
+            lastChangeTime.current = now;
+            onDayChange('left');
+          } else if (currentX > screenWidth.current - 50) {
+            lastChangeTime.current = now;
+            onDayChange('right');
+          }
+        }
+      },
+      onDrop: () => {
+        setIsDragging(false);
+        onDragEnd();
+      },
+      getInitialData: () => ({ id: event.id, date }),
+      dragHandle: element
+    });
+
+    return cleanup;
+  }, [date, event.id, onDragEnd, onDragStart, onDayChange]);
+
+  return (
+    <motion.div
+      ref={ref}
+      layoutId={event.id}
+      onClick={() => !isDragging && onEventClick({ event, date })}
+      className="bg-white p-4 rounded shadow mb-2 cursor-grab active:cursor-grabbing transition-all relative select-none"
+      whileHover={{ scale: 1.01 }}
+      style={{
+        opacity: isDragging ? 0.7 : 1,
+        userSelect: 'none',
+        WebkitUserSelect: 'none',
+        touchAction: 'manipulation'
+      }}
+    >
+      <div className="relative rounded overflow-hidden mb-2">
+        {event.imageUrl && (
+          <img 
+            src={event.imageUrl} 
+            alt={event.title}
+            className="w-full h-16 md:h-12 object-cover pointer-events-none"
+            draggable="false"
+          />
+        )}
+        <div className="absolute top-1 right-1 bg-black/50 text-white text-xs px-2 py-1 rounded">
+          {event.time}
+        </div>
+      </div>
+      <h3 className="font-medium text-black">{event.title}</h3>
+    </motion.div>
+  );
+} 

src/components/EventModal.tsx

@@ -1,18 +1,22 @@
 import { motion, AnimatePresence } from 'framer-motion';
 import { format, parseISO, isValid } from 'date-fns';
 
-interface EventWithDate {
+interface Event {
   id: string;
   title: string;
   time: string;
-  date: string;  // Now required
   description?: string;
   imageUrl?: string;
 }
 
-const EventModal = ({ event, onClose }: { event: EventWithDate; onClose: () => void }) => {
+interface EventModalProps {
-  // Now we can safely use event.date
+  event: Event;
-  const eventDate = parseISO(event.date);
+  date: string;
+  onClose: () => void;
+}
+
+const EventModal = ({ event, date, onClose }: EventModalProps) => {
+  const eventDate = parseISO(date);
   const formattedDate = isValid(eventDate) ? format(eventDate, 'MMM d, yyyy') : 'Invalid date';
 
   return (

src/data/events.ts

@@ -415,7 +415,7 @@ const events: EventsByDate = {
   ],
   "2025-04-02": [
     {
-      id极: "event-27",
+      id: "event-27",
       title: "Code Review",
       description: "Review recent code changes and discuss improvements.",
       imageUrl: "https://picsum.photos/1920/1080?random=53",

src/types.ts

@@ -2,10 +2,8 @@ export interface Event {
   id: string;
   title: string;
   time: string;
-  date: Date;
   description?: string;
   imageUrl?: string;
-  // add other properties as needed
 }
 
 export type EventsByDate = {

src/types/index.ts

@@ -1,14 +0,0 @@
-console.log('Types module loaded');
-interface Event {
-  id: string;
-  title: string;
-  description: string;
-  imageUrl: string;
-  time: string;
-}
-
-interface EventsByDate {
-  [date: string]: Event[];
-}
-
-export default { Event, EventsByDate };

tsconfig.json

@@ -19,7 +19,7 @@
       }
     ],
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": ["./src/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],