TODO: Bổ sung commit

src/screens/class_schedule/index.js

@@ -2,16 +2,24 @@ import React, {useState, useMemo, useRef} from 'react';
 import {Animated, PanResponder, Dimensions} from 'react-native';
 import ClassScheduleView from './view';
 
+// ==================== HẰNG SỐ ====================
 const {height: screenHeight} = Dimensions.get('window');
 const BOTTOM_SHEET_HEIGHT = screenHeight * 0.6;
 
 const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
-  const [currentDate, setCurrentDate] = useState(new Date(2025, 7, 1));
+  // ==================== QUẢN LÝ STATE ====================
+  // B1: State ngày tháng và lịch
+  const [currentDate, setCurrentDate] = useState(new Date());
   const [selectedDate, setSelectedDate] = useState(null);
+  
+  // B2: State bottom sheet
   const [showBottomSheet, setShowBottomSheet] = useState(false);
   
+  // B3: Tham chiếu animation
   const bottomSheetTranslateY = useRef(new Animated.Value(BOTTOM_SHEET_HEIGHT)).current;
 
+  // ==================== HÀM TIỆN ÍCH ====================
+  // T1: Định dạng ngày thành chuỗi
   const formatDateToString = (date) => {
     const year = date.getFullYear();
     const month = (date.getMonth() + 1).toString().padStart(2, '0');
@@ -19,6 +27,22 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
     return `${year}-${month}-${day}`;
   };
 
+  // T2: Định dạng ngày để hiển thị
+  const formatDateToDisplay = (date) => {
+    const day = date.getDate().toString().padStart(2, '0');
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const year = date.getFullYear();
+    return `Lịch ngày ${day}/${month}/${year}`;
+  };
+
+  // T3: Chuyển đổi chuỗi thành ngày
+  const parseLocalDate = (dateString) => {
+    const [year, month, day] = dateString.split('-').map(Number);
+    return new Date(year, month - 1, day);
+  };
+
+  // ==================== QUẢN LÝ DỮ LIỆU ====================
+  // D1: Tạo dữ liệu sự kiện mẫu
   const createMockEvents = () => {
     const today = new Date();
     const todayStr = formatDateToString(today);
@@ -147,32 +171,25 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
     ];
   };
 
+  // D2: Xử lý dữ liệu sự kiện
   const mockEvents = createMockEvents();
   const allEvents = [...events, ...mockEvents];
 
-  const panResponder = useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: (evt, gestureState) => {
-        return Math.abs(gestureState.dy) > 10;
-      },
-      onPanResponderMove: (evt, gestureState) => {
-        if (gestureState.dy > 0) {
-          bottomSheetTranslateY.setValue(gestureState.dy);
-        }
-      },
-      onPanResponderRelease: (evt, gestureState) => {
-        if (gestureState.dy > 100) {
-          hideBottomSheetModal();
-        } else {
-          Animated.spring(bottomSheetTranslateY, {
-            toValue: 0,
-            useNativeDriver: true,
-          }).start();
-        }
-      },
-    })
-  ).current;
+  // D3: Hàm truy vấn sự kiện
+  const getEventsForDate = (date) => {
+    const dateStr = formatDateToString(date);
+    return allEvents.filter(event => event.date === dateStr);
+  };
+
+  const getSelectedEvents = () => {
+    if (!selectedDate) return [];
+    return allEvents
+      .filter(event => event.date === selectedDate)
+      .sort((a, b) => a.time.localeCompare(b.time));
+  };
 
+  // ==================== LOGIC LỊCH ====================
+  // L1: Tạo dữ liệu tháng
   const getMonthData = useMemo(() => {
     const year = currentDate.getFullYear();
     const month = currentDate.getMonth();
@@ -198,23 +215,7 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
     };
   }, [currentDate]);
 
-  const getEventsForDate = (date) => {
-    const dateStr = formatDateToString(date);
-    return allEvents.filter(event => event.date === dateStr);
-  };
-
-  const parseLocalDate = (dateString) => {
-    const [year, month, day] = dateString.split('-').map(Number);
-    return new Date(year, month - 1, day);
-  };
-
-  const formatDateToDisplay = (date) => {
-    const day = date.getDate().toString().padStart(2, '0');
-    const month = (date.getMonth() + 1).toString().padStart(2, '0');
-    const year = date.getFullYear();
-    return `Lịch ngày ${day}/${month}/${year}`;
-  };
-
+  // L2: Hàm kiểm tra ngày tháng
   const isCurrentMonth = (date) => {
     return date.getMonth() === currentDate.getMonth();
   };
@@ -228,20 +229,32 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
     );
   };
 
-  const navigateMonth = (direction) => {
-    const newDate = new Date(currentDate);
-    if (direction === 'prev') {
-      newDate.setMonth(newDate.getMonth() - 1);
-    } else {
-      newDate.setMonth(newDate.getMonth() + 1);
+  // ==================== HỆ THỐNG ANIMATION ====================
+  // A1: Thiết lập PanResponder
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (evt, gestureState) => {
+        return Math.abs(gestureState.dy) > 10;
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        if (gestureState.dy > 0) {
+          bottomSheetTranslateY.setValue(gestureState.dy);
         }
-    setCurrentDate(newDate);
-    setSelectedDate(null);
-    if (showBottomSheet) {
+      },
+      onPanResponderRelease: (evt, gestureState) => {
+        if (gestureState.dy > 100) {
           hideBottomSheetModal();
+        } else {
+          Animated.spring(bottomSheetTranslateY, {
+            toValue: 0,
+            useNativeDriver: true,
+          }).start();
         }
-  };
+      },
+    })
+  ).current;
 
+  // A2: Hàm animation Bottom Sheet
   const showBottomSheetModal = () => {
     setShowBottomSheet(true);
     Animated.spring(bottomSheetTranslateY, {
@@ -262,6 +275,23 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
     });
   };
 
+  // ==================== XỬ LÝ SỰ KIỆN ====================
+  // X1: Xử lý điều hướng
+  const navigateMonth = (direction) => {
+    const newDate = new Date(currentDate);
+    if (direction === 'prev') {
+      newDate.setMonth(newDate.getMonth() - 1);
+    } else {
+      newDate.setMonth(newDate.getMonth() + 1);
+    }
+    setCurrentDate(newDate);
+    setSelectedDate(null);
+    if (showBottomSheet) {
+      hideBottomSheetModal();
+    }
+  };
+
+  // X2: Xử lý chọn ngày
   const handleDatePress = (date) => {
     const dateStr = formatDateToString(date);
     const dayEvents = getEventsForDate(date);
@@ -274,6 +304,7 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
     }
   };
 
+  // X3: Xử lý tương tác sự kiện
   const handleEventPress = (event) => {
     onEventPress?.(event);
   };
@@ -282,13 +313,6 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
     hideBottomSheetModal();
   };
 
-  const getSelectedEvents = () => {
-    if (!selectedDate) return [];
-    return allEvents
-      .filter(event => event.date === selectedDate)
-      .sort((a, b) => a.time.localeCompare(b.time));
-  };
-
   return (
     <ClassScheduleView
       currentDate={currentDate}