crazycharge-app/component/homePage/homePage.tsx

import { View, Text, ScrollView, FlatList, Pressable, ActivityIndicator, Image } from 'react-native';
import NormalButton from '../global/normal_button';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router } from 'expo-router';
import RecentlyBookedScrollView from '../global/recentlyBookedScrollView';
import {
    BellIconSvg,
    HomeIconSvg,
    MyBookingIconSvg,
    MyVehicleIconSvg,
    QrCodeIconSvg,
    VipCodeIconSvg
} from '../global/SVG';
import { AuthContext } from '../../context/AuthProvider';
import { useContext, useEffect, useState } from 'react';
import { authenticationService } from '../../service/authService';
import { chargeStationService } from '../../service/chargeStationService';
import { walletService } from '../../service/walletService';
import useUserInfoStore from '../../providers/userinfo_store';
interface HomePageProps {}

const HomePage: React.FC<HomePageProps> = () => {
    const now = new Date();

    const { user } = useContext(AuthContext);
    const { userID, setUserID } = useUserInfoStore();

    // Effect for fetching user ID
    useEffect(() => {
        const fetchID = async () => {
            try {
                const response = await authenticationService.getUserInfo();
                if (response) {
                    setUserID(response.data.id);
                } else {
                    console.log('fail to set user ID');
                }
            } catch (error) {
                console.log(error);
            }
        };
        fetchID();
    }, []);

    return (
        <SafeAreaView edges={['top', 'left', 'right']} className="flex-1 bg-white">
            <ScrollView showsVerticalScrollIndicator={false} className="flex-1 mx-[5%] ">
                <View className=" flex-1 pt-8 ">
                    <View className="flex-row items-center pb-4">
                        <HomeIconSvg />
                        <View className="pl-2 flex-1 flex-column ">
                            <View className="flex-row justify-between">
                                <Text className="text-lg pb-1">你好！</Text>
                                <BellIconSvg />
                            </View>
                            <Text className="text-4xl font-light ">{user?.nickname}</Text>
                        </View>
                    </View>
                    <View className=" flex-1 justify-center ">
                        <Pressable onPress={() => router.push('searchPage')}>
                            <View
                                style={{
                                    borderWidth: 1,
                                    padding: 24,
                                    borderRadius: 12,
                                    borderColor: '#bbbbbb',
                                    maxWidth: '100%'
                                }}
                            >
                                <Text style={{ color: '#888888', fontSize: 16 }}>搜尋充電站或地區..</Text>
                            </View>
                        </Pressable>
                    </View>
                </View>
                <View className="flex-1">
                    <RecentlyBookedScrollView />
                </View>
                <View className="flex-1">
                    <View className=" mb-4">
                        <NormalButton
                            // onPress={() => console.log('掃瞄及充電')}
                            onPress={() => router.push('scanQrPage')}
                            title={
                                <View className="flex flex-row space-x-2 items-center">
                                    <QrCodeIconSvg />
                                    <Text className="text-white font-bold text-lg">掃描及充電</Text>
                                </View>
                            }
                            extendedStyle={{
                                alignItems: 'flex-start',
                                padding: 24
                            }}
                        />
                    </View>
                    <View className="flex-1 flex-row justify-between gap-6">
                        <View className="flex-1">
                            <NormalButton
                                onPress={() => router.push('bookingMenuPage')}
                                title={
                                    <View className="flex flex-row space-x-2 items-center ">
                                        <MyBookingIconSvg />
                                        <Text className="text-white font-bold text-lg">我的預約</Text>
                                    </View>
                                }
                                extendedStyle={{
                                    alignItems: 'flex-start',
                                    padding: 24
                                }}
                            />
                        </View>
                        <View className="flex-1">
                            <NormalButton
                                onPress={() => router.push('myVehiclePage')}
                                title={
                                    <View className="flex flex-row space-x-2 items-center">
                                        <MyVehicleIconSvg />
                                        <Text className="text-white font-bold text-lg">我的車輛</Text>
                                    </View>
                                }
                                extendedStyle={{
                                    alignItems: 'flex-start',
                                    padding: 24
                                }}
                            />
                        </View>
                    </View>
                    <View className="mt-4">
                        <NormalButton
                            // onPress={() => console.log('掃瞄及充電')}
                            onPress={() => router.push('vipQrPage')}
                            title={
                                <View className="flex flex-row items-center space-x-2">
                                    <VipCodeIconSvg />
                                    <Text className="text-white font-bold text-lg">專屬會員二維碼</Text>
                                </View>
                            }
                            extendedStyle={{
                                alignItems: 'flex-start',
                                padding: 24
                            }}
                        />
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};
export default HomePage;