import React, {useState, useEffect} from 'react'; import { View, Text, StyleSheet, SafeAreaView, StatusBar, FlatList, TouchableOpacity, Image, Platform, ScrollView, } from 'react-native'; import {COLORS} from '../styles/colors'; import {useUser} from '../context/UserContext'; import ApiManager from '../services/ApiManager'; import uiStyle from '../styles/uiStyle'; import {align, border_radius, fontSize, fontWeight} from '../styles/fontstyle'; import {MINUS, PLUS} from '../assets'; import AddItemModal from '../services/AddItemModal'; import HomeScreenStyles from '../styles/HomeScreenStyles'; import moment from 'moment'; const AmenityDetailsScreen = ({route, navigation}) => { const {userDetails} = useUser(); const {amenity_image, amenity_id} = route.params; console.log(amenity_id); const [membersCount, setMembersCount] = useState(0); const [nonMembersCount, setNonMembersCount] = useState(0); const [selectedDate, setSelectedDate] = useState(''); const [pressedItem, setPressedItem] = useState(null); const [selectedSlots, setSelectedSlots] = useState([]); const [onSelect, setSelect] = useState(false); const [onSuccess, setSuccess] = useState(false); const [slotList, setSlotList] = useState([]); useEffect(() => { getAmenitySlotDetails(); }, []); const getAmenitySlotDetails = async (isManualRefresh = false) => { if (!userDetails?.profileDetails.customer_id) { console.log('User details not available yet or missing customer_id.'); return; } console.log(`Fetching list... Manual Refresh: ${isManualRefresh}`); const society_id = userDetails.profileDetails.society_id; try { const amenityResponse = await ApiManager.getamenitySlot( society_id, amenity_id.toString(), ); if (amenityResponse) { console.log('amenityResponse', amenityResponse.Data.slotsList); setSlotList(amenityResponse.Data.slotsList); } else { console.error( 'API did not return expected data structure:', amenityResponse, ); if (isManualRefresh) { Alert.alert( 'Error', 'Failed to fetch items. Invalid data format received.', ); } } } catch (error) { console.error('Fetch List Error in AmenitytyScreen:', error); if (isManualRefresh) { Alert.alert( 'Fetch Failed', error.message || 'An unexpected error occurred while fetching items.', ); } } finally { } }; const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const generateDates = (daysCount = 30) => { const today = new Date(); const dates = []; for (let i = 0; i < daysCount; i++) { const nextDate = new Date(); nextDate.setDate(today.getDate() + i); dates.push({ key: i.toString(), day: dayNames[nextDate.getDay()], date: nextDate.getDate(), }); } return dates; }; const dates = generateDates(); const increment = type => { if (type === 'member') { setMembersCount(membersCount + 1); } else { setNonMembersCount(nonMembersCount + 1); } }; const decrement = type => { if (type === 'member' && membersCount > 0) { setMembersCount(membersCount - 1); } else if (type === 'nonMember' && nonMembersCount > 0) { setNonMembersCount(nonMembersCount - 1); } }; const handleSuccessClose = () => { setSuccess(false); }; const renderItem = ({item}) => { const isPressed = pressedItem === item.key; const isSelected = selectedDate === item.key; return ( { if (selectedDate === item.key) { setSelectedDate(null); } else { setSelectedDate(item.key); } }} onPressIn={() => setPressedItem(item.key)} onPressOut={() => setPressedItem(null)}> {item.day} {item.date} ); }; const toggleSlot = item => { setSelectedSlots(prevSelected => prevSelected.includes(item.id) ? prevSelected.filter(slotId => slotId !== item.id) : [...prevSelected, item.id], ); if (selectedSlots.length > 0) { setSelect(true); } }; const slot_item = ({item}) => { const isSelected = selectedSlots.includes(item.id); const isPressed = pressedItem === item.id; console.log('item',item); return ( toggleSlot(item)} onPressIn={() => setPressedItem(item.id)} onPressOut={() => setPressedItem(null)}> {moment(item.slotStartTime).format('HH:mm a')} ); }; return ( Members decrement('member')} style={{ backgroundColor: COLORS.white_color, height: 20, width: 20, justifyContent: 'center', padding: 15, borderRadius: border_radius.small, alignItems: 'center', elevation: Platform.OS === 'android' ? 5 : 1, shadowColor: '#000', shadowOffset: {width: 0, height: 1}, shadowOpacity: Platform.OS === 'android' ? 0.15 : 0.1, }}> {membersCount} increment('member')} style={{ backgroundColor: COLORS.white_color, height: 20, width: 20, justifyContent: 'center', padding: 15, borderRadius: border_radius.small, alignItems: 'center', elevation: Platform.OS === 'android' ? 5 : 1, shadowColor: '#000', shadowOffset: {width: 0, height: 1}, shadowOpacity: Platform.OS === 'android' ? 0.15 : 0.1, }}> Non-Members decrement('nonMember')} style={{ backgroundColor: COLORS.white_color, height: 20, width: 20, justifyContent: 'center', padding: 15, borderRadius: border_radius.small, alignItems: 'center', elevation: Platform.OS === 'android' ? 5 : 1, shadowColor: '#000', shadowOffset: {width: 0, height: 1}, shadowOpacity: Platform.OS === 'android' ? 0.15 : 0.1, }}> {nonMembersCount} increment('nonMember')} style={{ backgroundColor: COLORS.white_color, height: 20, width: 20, justifyContent: 'center', padding: 15, borderRadius: border_radius.small, alignItems: 'center', elevation: Platform.OS === 'android' ? 5 : 1, shadowColor: '#000', shadowOffset: {width: 0, height: 1}, shadowOpacity: Platform.OS === 'android' ? 0.15 : 0.1, }}> Select the date you want to book? Select the slot you want to book? {onSelect && ( Rs.100.00 {}} style={{ backgroundColor: COLORS.white_color, height: 30, paddingHorizontal: 20, borderRadius: border_radius.small, alignItems: 'center', elevation: Platform.OS === 'android' ? 5 : 1, shadowColor: '#000', shadowOffset: {width: 0, height: 1}, shadowOpacity: Platform.OS === 'android' ? 0.15 : 0.1, }}> Cancel { setSuccess(true); }} style={{ backgroundColor: uiStyle.blue_color, height: 30, paddingHorizontal: 20, borderRadius: border_radius.small, alignItems: 'center', elevation: Platform.OS === 'android' ? 5 : 1, shadowColor: '#000', shadowOffset: {width: 0, height: 1}, shadowOpacity: Platform.OS === 'android' ? 0.15 : 0.1, }}> Proceed )} {onSuccess && ( {}}> )} ); }; const styles = StyleSheet.create({ safeArea: {flex: 1, backgroundColor: '#e0e0e0'}, title: {fontSize: 22, fontWeight: 'bold', marginBottom: 20}, placeholderText: { fontSize: 16, color: '#555', marginBottom: 30, textAlign: 'center', }, container: { paddingVertical: 10, }, dateBox: { backgroundColor: COLORS.white_color, paddingVertical: 10, paddingHorizontal: 15, alignItems: 'center', marginRight: 10, width: 65, borderRadius: border_radius.small, alignItems: 'center', elevation: Platform.OS === 'android' ? 5 : 1, shadowColor: '#000', shadowOffset: {width: 0, height: 1}, shadowOpacity: Platform.OS === 'android' ? 0.15 : 0.1, }, timeBox: { backgroundColor: COLORS.white_color, paddingVertical: 15, paddingHorizontal: 15, alignItems: 'center', marginRight: 20, marginVertical: 10, width: 100, borderRadius: border_radius.small, alignItems: 'center', elevation: Platform.OS === 'android' ? 5 : 1, shadowColor: '#000', shadowOffset: {width: 0, height: 1}, shadowOpacity: Platform.OS === 'android' ? 0.15 : 0.1, }, dayText: { fontSize: fontSize.sub_heading, color: COLORS.header_color, }, dateText: { fontSize: fontSize.sub_heading, fontWeight: fontWeight.sub_heading_weight, color: COLORS.header_color, }, }); export default AmenityDetailsScreen; i have {"slotDate": "2025-05-01", "slotMaxMembers": 10, "slotMaxNonMembers": 0, "slots": [{"amenitySlotTimingId": 76, "amenity_id": 132, "date": "2025-05-01", "memberSlotsAvailable": 10, "nonmemberSlotsAvailable": 0, "numberOfSlots": 10, "slotDetailId": 72023, "slotEndTime": "07:00:00", "slotMaxMembers": 10, "slotMaxNonMembers": 0, "slotMemberPrice": 10, "slotNonMemberPrice": 0, "slotStartTime": "06:00:00"}, {"amenitySlotTimingId": 76, "amenity_id": 132, "date": "2025-05-01", "memberSlotsAvailable": 10, "nonmemberSlotsAvailable": 0, "numberOfSlots": 10, "slotDetailId": 72026, "slotEndTime": "08:00:00", "slotMaxMembers": 10, "slotMaxNonMembers": 0, "slotMemberPrice": 10, "slotNonMemberPrice": 0, "slotStartTime": "07:00:00"}, {"amenitySlotTimingId": 76, "amenity_id": 132, "date": "2025-05-01", "memberSlotsAvailable": 10, "nonmemberSlotsAvailable": 0, "numberOfSlots": 10, "slotDetailId": 72029, "slotEndTime": "09:00:00", "slotMaxMembers": 10, "slotMaxNonMembers": 0, "slotMemberPrice": 10, "slotNonMemberPrice": 0, "slotStartTime": "08:00:00"}, {"amenitySlotTimingId": 76, "amenity_id": 132, "date": "2025-05-01", "memberSlotsAvailable": 10, "nonmemberSlotsAvailable": 0, "numberOfSlots": 10, "slotDetailId": 72032, "slotEndTime": "10:00:00", "slotMaxMembers": 10, "slotMaxNonMembers": 0, "slotMemberPrice": 10, "slotNonMemberPrice": 0, "slotStartTime": "09:00:00"}, {"amenitySlotTimingId": 76, "amenity_id": 132, "date": "2025-05-01", "memberSlotsAvailable": 10, "nonmemberSlotsAvailable": 0, "numberOfSlots": 10, "slotDetailId": 72035, "slotEndTime": "11:00:00", "slotMaxMembers": 10, "slotMaxNonMembers": 0, "slotMemberPrice": 10, "slotNonMemberPrice": 0, "slotStartTime": "10:00:00"}, {"amenitySlotTimingId": 76, "amenity_id": 132, "date": "2025-05-01", "memberSlotsAvailable": 10, "nonmemberSlotsAvailable": 0, "numberOfSlots": 10, "slotDetailId": 72038, "slotEndTime": "12:00:00", "slotMaxMembers": 10, "slotMaxNonMembers": 0, "slotMemberPrice": 10, "slotNonMemberPrice": 0, "slotStartTime": "11:00:00"}, {"amenitySlotTimingId": 76, "amenity_id": 132, "date": "2025-05-01", "memberSlotsAvailable": 10, "nonmemberSlotsAvailable": 0, "numberOfSlots": 10, "slotDetailId": 72041, "slotEndTime": "13:00:00", "slotMaxMembers": 10, "slotMaxNonMembers": 0, "slotMemberPrice": 10, "slotNonMemberPrice": 0, "slotStartTime": "12:00:00"}, {"amenitySlotTimingId": 76, "amenity_id": 132, "date": "2025-05-01", "memberSlotsAvailable": 10, "nonmemberSlotsAvailable": 0, "numberOfSlots": 10, "slotDetailId": 72044, "slotEndTime": "14:00:00", "slotMaxMembers": 10, "slotMaxNonMembers": 0, "slotMemberPrice": 10, "slotNonMemberPrice": 0, "slotStartTime": "13:00:00"}, {"amenitySlotTimingId": 76, "amenity_id": 132, "date": "2025-05-01", "memberSlotsAvailable": 10, "nonmemberSlotsAvailable": 0, "numberOfSlots": 10, "slotDetailId": 72047, "slotEndTime": "15:00:00", "slotMaxMembers": 10, "slotMaxNonMembers": 0, "slotMemberPrice": 10, "slotNonMemberPrice": 0, "slotStartTime": "14:00:00"}, {"amenitySlotTimingId": 76, "amenity_id": 132, "date": "2025-05-01", "memberSlotsAvailable": 10, "nonmemberSlotsAvailable": 0, "numberOfSlots": 10, "slotDetailId": 72050, "slotEndTime": "16:00:00", "slotMaxMembers": 10, "slotMaxNonMembers": 0, "slotMemberPrice": 10, "slotNonMemberPrice": 0, "slotStartTime": "15:00:00"}, {"amenitySlotTimingId": 76, "amenity_id": 132, "date": "2025-05-01", "memberSlotsAvailable": 10, "nonmemberSlotsAvailable": 0, "numberOfSlots": 10, "slotDetailId": 72053, "slotEndTime": "17:00:00", "slotMaxMembers": 10, "slotMaxNonMembers": 0, "slotMemberPrice": 10, "slotNonMemberPrice": 0, "slotStartTime": "16:00:00"}, {"amenitySlotTimingId": 76, "amenity_id": 132, "date": "2025-05-01", "memberSlotsAvailable": 10, "nonmemberSlotsAvailable": 0, "numberOfSlots": 10, "slotDetailId": 72056, "slotEndTime": "18:00:00", "slotMaxMembers": 10, "slotMaxNonMembers": 0, "slotMemberPrice": 10, "slotNonMemberPrice": 0, "slotStartTime": "17:00:00"}, {"amenitySlotTimingId": 76, "amenity_id": 132, "date": "2025-05-01", "memberSlotsAvailable": 10, "nonmemberSlotsAvailable": 0, "numberOfSlots": 10, "slotDetailId": 72059, "slotEndTime": "19:00:00", "slotMaxMembers": 10, "slotMaxNonMembers": 0, "slotMemberPrice": 10, "slotNonMemberPrice": 0, "slotStartTime": "18:00:00"}, {"amenitySlotTimingId": 76, "amenity_id": 132, "date": "2025-05-01", "memberSlotsAvailable": 10, "nonmemberSlotsAvailable": 0, "numberOfSlots": 10, "slotDetailId": 72062, "slotEndTime": "20:00:00", "slotMaxMembers": 10, "slotMaxNonMembers": 0, "slotMemberPrice": 10, "slotNonMemberPrice": 0, "slotStartTime": "19:00:00"}, {"amenitySlotTimingId": 76, "amenity_id": 132, "date": "2025-05-01", "memberSlotsAvailable": 10, "nonmemberSlotsAvailable": 0, "numberOfSlots": 10, "slotDetailId": 72065, "slotEndTime": "21:00:00", "slotMaxMembers": 10, "slotMaxNonMembers": 0, "slotMemberPrice": 10, "slotNonMemberPrice": 0, "slotStartTime": "20:00:00"}, {"amenitySlotTimingId": 76, "amenity_id": 132, "date": "2025-05-01", "memberSlotsAvailable": 10, "nonmemberSlotsAvailable": 0, "numberOfSlots": 10, "slotDetailId": 72068, "slotEndTime": "22:00:00", "slotMaxMembers": 10, "slotMaxNonMembers": 0, "slotMemberPrice": 10, "slotNonMemberPrice": 0, "slotStartTime": "21:00:00"}, {"amenitySlotTimingId": 76, "amenity_id": 132, "date": "2025-05-01", "memberSlotsAvailable": 10, "nonmemberSlotsAvailable": 0, "numberOfSlots": 10, "slotDetailId": 72071, "slotEndTime": "23:00:00", "slotMaxMembers": 10, "slotMaxNonMembers": 0, "slotMemberPrice": 10, "slotNonMemberPrice": 0, "slotStartTime": "22:00:00"}]} for const dates = generateDates(); use slotDate from after that use slots array from below to show list in slot_item and on date change slots hould be change make changes and provide updated src folder