crazycharge-app/component/global/displayedOnlyCouponTabView.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,
    Pressable,
    Alert
} from 'react-native';
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';

import { IndividualCouponComponent } from '../accountPages/walletPageComponent';
import { formatCouponDate } from '../../util/lib';
import { useCallback, useEffect, useRef, useState } from 'react';
import { walletService } from '../../service/walletService';
import { useChargingStore } from '../../providers/scan_qr_payload_store';
import { chargeStationService } from '../../service/chargeStationService';
import { router } from 'expo-router';
import axios from 'axios';

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

interface TabViewComponentProps {
    titles: string[];
}

const FirstRoute = ({
    coupons,
    loading,
    handleCouponClick
}: {
    coupons: any;
    loading: boolean;
    handleCouponClick: (couponName: string, couponDescription: string) => void;
}) => {
    return (
        <View className="flex-1">
            <ScrollView
                style={{ flex: 1, backgroundColor: 'white', marginTop: 14 }}
                contentContainerStyle={{ paddingBottom: 120 }}
            >
                <View className="flex-1 flex-col">
                    {loading ? (
                        <View className="items-center justify-center">
                            <ActivityIndicator />
                        </View>
                    ) : (
                        <View className="">
                            <View>
                                {coupons.filter(
                                    (coupon: any) =>
                                        coupon.is_consumed === false && new Date(coupon.expire_date) > new Date()
                                ).length === 0 ? (
                                    <Text className="pl-4">暫時戶口沒有優惠券。</Text>
                                ) : (
                                    coupons
                                        .filter(
                                            (coupon: any) =>
                                                coupon.is_consumed === false &&
                                                new Date(coupon.expire_date) > new Date()
                                        )
                                        .sort(
                                            (a: any, b: any) =>
                                                new Date(a.expire_date).getTime() - new Date(b.expire_date).getTime()
                                        )
                                        .slice(0, 30)
                                        .map((coupon: any, index: any) => (
                                            <IndividualCouponComponent
                                                onCouponClick={() =>
                                                    handleCouponClick(coupon.coupon.name, coupon.coupon.description)
                                                }
                                                // key={coupon.redeem_code}
                                                key={`${coupon.id}-${index}`}
                                                title={coupon.coupon.name}
                                                price={coupon.coupon.amount}
                                                detail={coupon.coupon.description}
                                                date={formatCouponDate(coupon.expire_date)}
                                                setOpacity={false}
                                                noCircle={true}
                                                redeem_code={coupon.id}
                                            />
                                        ))
                                )}
                            </View>
                        </View>
                    )}
                </View>
            </ScrollView>
        </View>
    );
};

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

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

    useEffect(() => {
        const fetchData = async () => {
            try {
                setLoading(true);
                const info = await walletService.getCustomerInfo();
                const coupon = await walletService.getCouponForSpecificUser(info.id);
                const useableConpon = coupon.filter((couponObj: any) => {
                    const today = new Date();
                    if (couponObj.expire_date === null) {
                        return couponObj.is_consumed === false;
                    }
                    const expireDate = new Date(couponObj.expire_date);
                    return expireDate > today && couponObj.is_consumed === false;
                });
                setUserID(info.id);
                setCoupons(coupon);
                setUseableCoupons(useableConpon);
            } catch (error) {
                console.log(error);
            } finally {
                setLoading(false);
            }
        };
        fetchData();
    }, []);

    const handleCouponClick = async (clickedCoupon: string, clickedCouponDescription: string) => {
        router.push({
            pathname: '/couponDetailPage',
            params: {
                couponName: clickedCoupon,
                couponDescription: clickedCouponDescription
            }
        });
    };

    const renderScene = useCallback(
        ({ route }: { route: any }) => {
            switch (route.key) {
                case 'firstRoute':
                    return (
                        <FirstRoute coupons={useableCoupons} loading={loading} handleCouponClick={handleCouponClick} />
                    );
                case 'secondRoute':
                    return <SecondRoute coupons={coupons} />;
                default:
                    return null;
            }
        },
        [coupons, loading, handleCouponClick]
    );

    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 DisplayedOnlyCouponTabView;

const styles = StyleSheet.create({
    container: { flexDirection: 'row' },
    image: { width: 100, height: 100, margin: 15, borderRadius: 10 },
    textContainer: { flexDirection: 'column', gap: 8, marginTop: 20 },
    floatingButton: {
        elevation: 5,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.25,
        shadowRadius: 3.84
    }
});