Commit 10a23b76 by tungnq

TODO: Đã refactor xong tháng

parent 03cfc11f
import React, {useState, useMemo, useRef} from 'react';
import {Animated, PanResponder, Dimensions} from 'react-native';
import React, {useState, useMemo, useRef, useEffect} from 'react';
import {Animated, PanResponder, Dimensions, DeviceEventEmitter} from 'react-native';
import {useFocusEffect} from '@react-navigation/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);
// ==================== EFFECTS ====================
// Reset về ngày hiện tại khi chuyển màn hình
useFocusEffect(
React.useCallback(() => {
const today = new Date();
setCurrentDate(today);
setSelectedDate(null);
DeviceEventEmitter.emit('onDateChange', today);
// Cập nhật header drawer với tháng hiện tại
DeviceEventEmitter.emit('updateHeaderMonth', today.getMonth());
}, [])
);
// B2: State bottom sheet
const [showBottomSheet, setShowBottomSheet] = useState(false);
const bottomSheetTranslateY = useRef(new Animated.Value(BOTTOM_SHEET_HEIGHT)).current;
const formatDateToString = (date) => {
// 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');
const day = date.getDate().toString().padStart(2, '0');
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 +187,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,28 +231,12 @@ 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}`;
};
const isCurrentMonth = (date) => {
// L2: Hàm kiểm tra ngày tháng
const isCurrentMonth = date => {
return date.getMonth() === currentDate.getMonth();
};
const isToday = (date) => {
const isToday = date => {
const today = new Date();
return (
date.getDate() === today.getDate() &&
......@@ -228,20 +245,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);
}
setCurrentDate(newDate);
setSelectedDate(null);
if (showBottomSheet) {
hideBottomSheetModal();
}
};
// ==================== 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);
}
},
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,10 +291,33 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
});
};
const handleDatePress = (date) => {
// ==================== 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);
// Phát sự kiện để cập nhật header title
DeviceEventEmitter.emit('onDateChange', newDate.toISOString());
// Cập nhật header drawer với tháng mới
DeviceEventEmitter.emit('updateHeaderMonth', newDate.getMonth());
if (showBottomSheet) {
hideBottomSheetModal();
}
};
// X2: Xử lý chọn ngày
const handleDatePress = date => {
const dateStr = formatDateToString(date);
const dayEvents = getEventsForDate(date);
setSelectedDate(dateStr);
onDateSelect?.(dateStr);
......@@ -274,7 +326,8 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
}
};
const handleEventPress = (event) => {
// X3: Xử lý tương tác sự kiện
const handleEventPress = event => {
onEventPress?.(event);
};
......@@ -282,13 +335,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}
......@@ -300,6 +346,7 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
getEventsForDate={getEventsForDate}
parseLocalDate={parseLocalDate}
formatDateToDisplay={formatDateToDisplay}
formatDateToString={formatDateToString}
isCurrentMonth={isCurrentMonth}
isToday={isToday}
navigateMonth={navigateMonth}
......@@ -311,4 +358,4 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
);
};
export default ClassSchedule;
\ No newline at end of file
export default ClassSchedule;
......@@ -3,18 +3,19 @@ import {
Text,
View,
TouchableOpacity,
StyleSheet,
ScrollView,
Dimensions,
Modal,
Animated,
SafeAreaView,
LogBox,
} from 'react-native';
import R from '../../assets/R';
import { styles, CELL_WIDTH, BOTTOM_SHEET_HEIGHT } from './style';
import { useNavigation } from '@react-navigation/native';
import * as SCREENNAME from '../../routers/ScreenNames';
LogBox.ignoreAllLogs(
true
);
const ClassScheduleView = ({
currentDate,
selectedDate,
......@@ -150,7 +151,7 @@ const ClassScheduleView = ({
};
const renderBottomSheetContent = () => {
if (!selectedDate) return null;
if (!selectedDate || typeof selectedDate !== 'string') return null;
const selectedDateObj = parseLocalDate(selectedDate);
const selectedEvents = getSelectedEvents();
......
......@@ -20,7 +20,6 @@ import ItemGrid from './item';
import styles from './style';
import {useNavigation} from '@react-navigation/native';
import * as SCREENNAME from '../../routers/ScreenNames';
import TextSearchView from '../../components/Input/TextSearch/TextSearch';
const HomeView = props => {
const {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment