import React, { useCallback, useState } from 'react'; import { FlatList } from 'react-native'; import { useFocusEffect } from '@react-navigation/native'; import { usePostGetCountriesRankingLPI } from '@api/ranking'; import { Header, Loading, PageWrapper } from '../../../../components'; import { storage, StoreType } from '../../../../storage'; import { Profile } from '../Components/Profile'; import { FilterButton, FilterModal } from '../Components/FilterModal'; import { applyModalSort, dataRanking } from '../utils'; import { RankingDropdown } from '../utils/types'; import type { Ranking } from '..'; const LPIRankingScreen = () => { const [LPIRanking, setLPIRanking] = useState<Ranking[]>([]); const [isLoading, setIsLoading] = useState(true); const [filteredData, setFilteredData] = useState<Ranking[]>([]); const [isModalActive, setIsModalActive] = useState(false); const [confirmedValueRanking, setConfirmedValueRanking] = useState<RankingDropdown | null>(); const { data: lpiCountries } = usePostGetCountriesRankingLPI(); useFocusEffect( useCallback(() => { const fetchRanking = async () => { const lpi: string = storage.get('lpiRanking', StoreType.STRING) as string; setLPIRanking(JSON.parse(lpi).sort((a: Ranking, b: Ranking) => b.score_nm - a.score_nm)); setIsLoading(false); }; fetchRanking(); }, []) ); if (isLoading) return <Loading />; return ( <PageWrapper> <FilterModal isModalVisible={isModalActive} setModalVisible={(value) => setIsModalActive(value)} applyFilter={(filterAge, filterRanking, filterCountry) => { setConfirmedValueRanking(filterRanking); setFilteredData(applyModalSort(LPIRanking, filterAge, filterRanking, filterCountry)); setIsModalActive(false); }} countriesData={lpiCountries ? lpiCountries.data : []} /> <Header label="LPI Ranking" rightElement={<FilterButton onPress={() => setIsModalActive(!isModalActive)} />} /> <FlatList data={filteredData.length > 0 ? filteredData : LPIRanking} showsVerticalScrollIndicator={false} keyExtractor={(item) => item.user_id.toString()} onEndReachedThreshold={0.1} renderItem={({ item, index }) => ( <Profile userId={item.user_id} key={index} index={index} first_name={item.first_name} last_name={item.last_name} avatar={item.avatar} date_of_birth={item.age} homebase_flag={item.flag1} homebase2_flag={item.flag2} score={[ item.score_nm, item.score_un, item.score_unp, item.score_dare, item.score_tcc, item.score_deep, item.score_slow, item.score_yes, item.score_kye, item.score_whs ]} active_score={ confirmedValueRanking ? confirmedValueRanking.value - 1 : dataRanking[0].value - 1 } tbt_score={item.score_tbt} tbt_rank={item.rank_tbt} badge_tbt={item.badge_tbt} badge_1281={item.badge_1281} badge_un={item.badge_un} badge_un_50={item.badge_un_50} badge_un_100={item.badge_un_100} badge_un_150={item.badge_un_150} auth={item.auth} /> )} /> </PageWrapper> ); }; export default LPIRankingScreen;