crazycharge-app/component/chargingPage/noChargingOngoingPageComponent.tsx

import { View, Text, ScrollView, StyleSheet, ActivityIndicator, Pressable, Image } from 'react-native';

import { SafeAreaView } from 'react-native-safe-area-context';
import NormalButton from '../global/normal_button';
import { router, useFocusEffect } from 'expo-router';
import { useCallback, useEffect, useState } from 'react';
import { chargeStationService } from '../../service/chargeStationService';

// const RETRY_DELAY = 2000; // 2 seconds
// const MAX_RETRIES = 3; // Maximum number of retry attempts

const NoChargingOngoingPageComponent = () => {
    //fetch charge station info
    // const [chargeStationInfo, setChargeStationInfo] = useState([]);
    // const [availableConnectors, setAvailableConnectors] = useState({});

    // useEffect(() => {
    //     const fetchChargeStationInfo = async () => {
    //         try {
    //             const chargeStationInfo = await chargeStationService.fetchAllChargeStations();
    //             console.log('chargeStationInfo in noChargingOngoingPageComponent', chargeStationInfo);
    //             const onlyWaiYipStreetStation = chargeStationInfo.filter(
    //                 (station) => station.id == '2405311022116801000'
    //             );
    //             setChargeStationInfo(onlyWaiYipStreetStation);

    //             // setChargeStationInfo(chargeStationInfo);
    //         } catch (error) {
    //             console.error('Error fetching charge station info:', error);
    //         }
    //     };
    //     fetchChargeStationInfo();
    // }, []);

    // useEffect(() => {
    //     const fetchChargeStationInfo = async () => {
    //         try {
    //             const chargeStationInfo = await chargeStationService.fetchAllChargeStations();
    //             setChargeStationInfo(chargeStationInfo);
    //         } catch (error) {
    //             console.error('Error fetching charge station info:', error);
    //         }
    //     };
    //     fetchChargeStationInfo();
    // }, []);

    // const fetchConnectorWithRetry = async (stationId, retryCount = 0) => {
    //     try {
    //         const response = await chargeStationService.fetchAvailableConnectors(stationId);
    //         if (response === 500 || !response) {
    //             throw new Error('Server error');
    //         }
    //         return response;
    //     } catch (error) {
    //         if (retryCount < MAX_RETRIES) {
    //             // console.log(`Retrying fetch for station ${stationId}, attempt ${retryCount + 1}`);
    //             await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY));
    //             return fetchConnectorWithRetry(stationId, retryCount + 1);
    //         }
    //         // console.error(`Failed to fetch connectors for station ${stationId} after ${MAX_RETRIES} attempts:`, error);
    //         return null;
    //     }
    // };

    // useEffect(() => {
    //     const fetchAllConnectors = async () => {
    //         try {
    //             const connectorData = {};
    //             for (const station of chargeStationInfo) {
    //                 const stationConnectors = await fetchConnectorWithRetry(station.id);
    //                 if (stationConnectors !== null) {
    //                     connectorData[station.id] = stationConnectors;
    //                     // Update state immediately for each successful fetch
    //                     setAvailableConnectors((prev) => ({
    //                         ...prev,
    //                         [station.id]: stationConnectors
    //                     }));
    //                 }
    //             }
    //         } catch (error) {
    //             console.error('Error fetching connectors:', error);
    //         }
    //     };

    //     if (chargeStationInfo.length > 0) {
    //         fetchAllConnectors();
    //     }
    // }, [chargeStationInfo]);
    const [newAvailableConnectors, setNewAvailableConnectors] = useState([]);
    useFocusEffect(
        useCallback(() => {
            let isMounted = true; // Simple cleanup flag
            const fetchAllConnectors = async () => {
                try {
                    const newAvailableConnectors = await chargeStationService.NewfetchAvailableConnectors();
                    console.log('Fetched connectors:', newAvailableConnectors);

                    // Only update state if component is still mounted
                    if (isMounted) {
                        // Sort the connectors based on stationID
                        const sortedConnectors = [...newAvailableConnectors].sort((a, b) => {
                            // Custom sorting order
                            const order = {
                                '2405311022116801000': 1, // 觀塘偉業街
                                '2411291610329331000': 2, // 黃竹坑
                                '2501161430118231000': 3 // 沙頭角
                            };
                            return (order[a.stationID] || 999) - (order[b.stationID] || 999);
                        });

                        console.log('newAvailableConnectors', sortedConnectors);
                        setNewAvailableConnectors(sortedConnectors);
                    }
                } catch (error) {
                    console.error('Fetch error:', error);
                }
            };

            fetchAllConnectors();

            // Simple cleanup - prevents state updates if component unmounts
            return () => {
                isMounted = false;
            };
        }, []) // Add any missing dependencies here if needed
    );

    const StationRow = ({ item }: { item: any }) => {
        //use different image for different station based on station id, if not found, use default image.
        const stationID = item.stationID;

        const stationImages = {
            //沙頭角
            '2501161430118231000': require('../../assets/dummyStationPicture5.jpeg'),
            //黃竹坑
            '2411291610329331000': require('../../assets/dummyStationPicture4.jpeg'),
            //觀塘
            '2405311022116801000': require('../../assets/dummyStationPicture.png')
        };
        // const imageSource = stationImages[stationID] || require('../../assets/dummyStationPicture.png');
        return (
            <Pressable
                onPress={() => {
                    router.push({
                        pathname: '/resultDetailPage',
                        params: {
                            chargeStationAddress: item.address,
                            chargeStationID: item.stationID,
                            chargeStationName: item.stationName,
                            availableConnectors: item.availableConnectors,
                            // imageSource: imageSource
                            imageSource: item.image,
                            stationLng: item.stationLng,
                            stationLat: item.stationLat
                        }
                    });
                }}
            >
                <View className="flex flex-1 flex-row w-full ">
                    <Image style={styles.image} source={{ uri: item.image }} />
                    <View className="flex flex-col gap-2 mt-5 mr-2">
                        <Text
                            style={{
                                fontWeight: '700',
                                color: '#02677D',
                                fontSize: 20
                            }}
                        >
                            {item.stationName}
                        </Text>
                        <View className="flex flex-row justify-between space-x-2">
                            <Text
                                style={{
                                    fontWeight: '400',
                                    fontSize: 16,
                                    color: '#222222'
                                }}
                            >
                                {item.address}
                            </Text>
                        </View>

                        <Text
                            style={{
                                fontWeight: '400',
                                fontSize: 16,
                                color: '#888888'
                            }}
                        >
                            現時可用充電槍數目: {item.availableConnectors}
                        </Text>
                    </View>
                </View>
            </Pressable>
        );
    };

    return (
        <SafeAreaView edges={['top', 'left', 'right']} className="flex-1 bg-white">
            <ScrollView className="flex-1 mt-8 " nestedScrollEnabled={true} showsVerticalScrollIndicator={false}>
                <View className="">
                    <View className="">
                        <Text className="text-5xl pt-1 pb-6 mx-[5%]">暫無正在進行的充電</Text>
                        <View>
                            <Text className="text-lg mx-[5%] mb-6">立刻前往Crazy Charge 充電站充電吧！</Text>

                            <View className="">
                                {newAvailableConnectors?.map((item, index) => (
                                    <View key={index}>
                                        <View className=" border-b border-gray-200" />
                                        <StationRow item={item} key={index} />
                                    </View>
                                ))}
                            </View>
                        </View>
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};
const styles = StyleSheet.create({
    grayColor: {
        color: '#888888'
    },
    greenColor: {
        color: '#02677D'
    },
    image: {
        width: 100,
        height: 100,
        margin: 15,
        borderRadius: 10
    }
});

export default NoChargingOngoingPageComponent;
// const styles = StyleSheet.create({
//     container: {
//         flexDirection: 'row',
//         width: '100%',
//         flex: 1
//     },

//     textContainer: {
//         flex: 1,
//         flexDirection: 'column',
//         gap: 8,
//         marginTop: 20,
//         marginRight: 8 // Add right margin to prevent text from touching the edge
//     }
// });