crazycharge-app/component/global/couponTabView.tsx

//the size of the TabView will follow its parent-container's size.

import * as React from 'react';
import {
    View,
    Text,
    useWindowDimensions,
    StyleSheet,
    ImageSourcePropType,
    ScrollView,
    ActivityIndicator
} from 'react-native';
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';

import { IndividualCouponComponent } from '../accountPages/walletPageComponent';
import { formatCouponDate } from '../../util/lib';
import { useEffect, useState } from 'react';
import { walletService } from '../../service/walletService';

export interface TabItem {
    imgURL: ImageSourcePropType;
    date: string;
    time: string;
    chargeStationName: string;
    chargeStationAddress: string;
    distance: string;
}

interface TabViewComponentProps {
    titles: string[];
}

const CouponTabViewComponent: React.FC<TabViewComponentProps> = ({ titles }) => {
    const layout = useWindowDimensions();
    const [loading, setLoading] = useState(false);
    const [coupons, setCoupons] = useState([]);
    const [userID, setUserID] = useState('');

    useEffect(() => {
        const fetchData = async () => {
            try {
                setLoading(true);
                const info = await walletService.getCustomerInfo();
                const coupon = await walletService.getCouponForSpecificUser(userID);
                setUserID(info.id);
                setCoupons(coupon);
            } catch (error) {
                console.log(error);
            } finally {
                setLoading(false);
            }
        };
        fetchData();
    }, []);

    //tab 1
    const FirstRoute = () => (
        <ScrollView style={{ flex: 1, backgroundColor: 'white', marginTop: 14 }}>
            <View className="flex-1 flex-col">
                {loading ? (
                    <View className="items-center justify-center">
                        <ActivityIndicator />
                    </View>
                ) : (
                    <View>
                        {coupons.filter(
                            (coupon) => coupon.is_consumed === false && new Date(coupon.expire_date) > new Date()
                        ).length === 0 ? (
                            <Text className='pl-4'>暫時戶口沒有優惠券。</Text>
                        ) : (
                            coupons
                                .filter(
                                    (coupon) =>
                                        coupon.is_consumed === false && new Date(coupon.expire_date) > new Date()
                                )
                                .slice(0, 2)
                                .map((coupon, index) => (
                                    <IndividualCouponComponent
                                        key={index}
                                        title={coupon.name}
                                        price={coupon.amount}
                                        detail={coupon.description}
                                        date={formatCouponDate(coupon.expire_date)}
                                    />
                                )) 
                        )}
                    </View>
                )}
            </View>
        </ScrollView>
    );

    //tab 2
    const SecondRoute = () => (
        <ScrollView style={{ flex: 1, backgroundColor: 'white', marginTop: 14 }}>
            <View className="flex-1 flex-col">
                {coupons
                    .filter((coupon) => coupon.is_consumed === true && new Date(coupon.expire_date) < new Date())
                    .slice(0, 2)
                    .map((coupon, index) => (
                        <IndividualCouponComponent
                            key={index}
                            title={coupon.name}
                            price={coupon.amount}
                            detail={coupon.description}
                            date={formatCouponDate(coupon.expire_date)}
                        />
                    ))}
            </View>
        </ScrollView>
    );

    const renderScene = SceneMap({
        firstRoute: FirstRoute,
        secondRoute: SecondRoute
    });
    const [routes] = React.useState([
        { key: 'firstRoute', title: titles[0] },
        { key: 'secondRoute', title: titles[1] }
    ]);
    const [index, setIndex] = React.useState(0);

    const renderTabBar = (props: any) => (
        <TabBar
            {...props}
            renderLabel={({ route, focused }) => (
                <Text
                    style={{
                        color: focused ? '#025c72' : '#888888',
                        fontWeight: focused ? '900' : 'thin',
                        fontSize: 20
                    }}
                >
                    {route.title}
                </Text>
            )}
            indicatorStyle={{
                backgroundColor: '#025c72'
            }}
            style={{
                backgroundColor: 'white',
                borderColor: '#DBE4E8',
                elevation: 0,
                marginHorizontal: 15,
                borderBottomWidth: 0.5
            }}
        />
    );
    return (
        <TabView
            navigationState={{ index, routes }}
            renderScene={renderScene}
            onIndexChange={setIndex}
            initialLayout={{ width: layout.width }}
            renderTabBar={renderTabBar}
        />
    );
};
export default CouponTabViewComponent;

const styles = StyleSheet.create({
    container: { flexDirection: 'row' },
    image: { width: 100, height: 100, margin: 15, borderRadius: 10 },
    textContainer: { flexDirection: 'column', gap: 8, marginTop: 20 }
});