fix: pages fixes

src/components/Loading/index.tsx

@@ -3,12 +3,10 @@ import { View } from 'react-native';
 
 import Logo from '../../../assets/images/logo.svg';
 
-const Loading = () => {
+export const Loading = () => {
   return (
     <View style={{ width: '100%', height: '100%', justifyContent: 'center', alignItems: 'center' }}>
       <Logo width={96} height={96} />
     </View>
   );
 };
-
-export default Loading;

src/components/index.ts

@@ -12,3 +12,4 @@ export * from './LocationPopup';
 export * from './Loading';
 export * from './MenuButton';
 export * from './AvatarWithInitials';
+export * from './Loading';

src/screens/InAppScreens/TravellersScreen/InHistoryScreen/index.tsx

@@ -1,32 +1,32 @@
-import React, { useEffect, useState } from 'react';
-import { Header, PageWrapper } from '../../../../components';
+import React, { useCallback, useState } from 'react';
+import { FlatList } from 'react-native';
+import { useFocusEffect } from '@react-navigation/native';
+
+import { Header, PageWrapper, Loading } from '../../../../components';
 import { storage, StoreType } from '../../../../storage';
 
 import { Profile } from '../Components/Profile';
 
-import { Ranking } from '../Ranking';
-import { FlatList } from 'react-native';
-import { fetchFullRanking } from '@api/ranking';
-
+import type { Ranking } from '..';
 const InHistoryScreen = () => {
   const [historyRanking, setHistoryRanking] = useState<Ranking[]>([]);
-  const { mutateAsync } = fetchFullRanking();
+  const [isLoading, setIsLoading] = useState(true);
 
-  const inHistory: string = storage.get('inHistoryRanking', StoreType.STRING) as string;
+  useFocusEffect(
+    useCallback(() => {
+      const fetchRanking = async () => {
+        const inHistory: string = storage.get('inHistoryRanking', StoreType.STRING) as string;
+        setHistoryRanking(
+          JSON.parse(inHistory).sort((a: Ranking, b: Ranking) => b.score_nm - a.score_nm)
+        );
+        setIsLoading(false);
+      };
 
-  useEffect(() => {
-    setHistoryRanking(
-      JSON.parse(inHistory).sort((a: Ranking, b: Ranking) => b.score_nm - a.score_nm)
-    );
-  }, []);
+      fetchRanking();
+    }, [])
+  );
 
-  const getFullRanking = async () => {
-    await mutateAsync(undefined, {
-      onSuccess: (data) => {
-        setHistoryRanking(data.data);
-      }
-    });
-  };
+  if (isLoading) return <Loading />;
 
   return (
     <PageWrapper>
@@ -62,7 +62,6 @@ const InHistoryScreen = () => {
             badge_un={item.badge_un}
           />
         )}
-        onEndReached={() => getFullRanking()}
         onEndReachedThreshold={0.1}
       />
     </PageWrapper>

src/screens/InAppScreens/TravellersScreen/InMemoriamScreen/index.tsx

@@ -1,32 +1,33 @@
-import React, { useEffect, useState } from 'react';
-import { Header, PageWrapper } from '../../../../components';
+import React, { useCallback, useState } from 'react';
+import { FlatList } from 'react-native';
+import { useFocusEffect } from '@react-navigation/native';
+
+import { Header, Loading, PageWrapper } from '../../../../components';
 import { storage, StoreType } from '../../../../storage';
 
 import { Profile } from '../Components/Profile';
 
-import { Ranking } from '../Ranking';
-import { FlatList } from 'react-native';
-import { fetchFullRanking } from '@api/ranking';
+import type { Ranking } from '..';
 
 const InMemoriamScreen = () => {
   const [memoriamRanking, setMemoriamRanking] = useState<Ranking[]>([]);
-  const { mutateAsync } = fetchFullRanking();
+  const [isLoading, setIsLoading] = useState(true);
 
-  const inMemoriam: string = storage.get('inMemoriamRanking', StoreType.STRING) as string;
+  useFocusEffect(
+    useCallback(() => {
+      const fetchRanking = async () => {
+        const inMemoriam: string = storage.get('inMemoriamRanking', StoreType.STRING) as string;
+        setMemoriamRanking(
+          JSON.parse(inMemoriam).sort((a: Ranking, b: Ranking) => b.score_nm - a.score_nm)
+        );
+        setIsLoading(false);
+      };
 
-  useEffect(() => {
-    setMemoriamRanking(
-      JSON.parse(inMemoriam).sort((a: Ranking, b: Ranking) => b.score_nm - a.score_nm)
-    );
-  }, []);
+      fetchRanking();
+    }, [])
+  );
 
-  const getFullRanking = async () => {
-    await mutateAsync(undefined, {
-      onSuccess: (data) => {
-        setMemoriamRanking(data.data);
-      }
-    });
-  };
+  if (isLoading) return <Loading />;
 
   return (
     <PageWrapper>
@@ -64,7 +65,6 @@ const InMemoriamScreen = () => {
             auth={item.auth}
           />
         )}
-        onEndReached={() => getFullRanking()}
         onEndReachedThreshold={0.1}
       />
     </PageWrapper>

src/screens/InAppScreens/TravellersScreen/LPIRankingScreen/index.tsx

@@ -1,30 +1,31 @@
-import React, { useEffect, useState } from 'react';
-import { Header, PageWrapper } from '../../../../components';
+import React, { useCallback, useState } from 'react';
+import { FlatList } from 'react-native';
+import { useFocusEffect } from '@react-navigation/native';
+
+import { Header, Loading, PageWrapper } from '../../../../components';
 import { storage, StoreType } from '../../../../storage';
 
 import { Profile } from '../Components/Profile';
 
-import { Ranking } from '../Ranking';
-import { FlatList } from 'react-native';
-import { fetchFullRanking } from '@api/ranking';
+import type { Ranking } from '..';
 
 const LPIRankingScreen = () => {
   const [LPIRanking, setLPIRanking] = useState<Ranking[]>([]);
-  const { mutateAsync } = fetchFullRanking();
+  const [isLoading, setIsLoading] = useState(true);
 
-  const lpi: string = storage.get('lpiRanking', StoreType.STRING) as string;
+  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);
+      };
 
-  useEffect(() => {
-    setLPIRanking(JSON.parse(lpi).sort((a: Ranking, b: Ranking) => b.score_nm - a.score_nm));
-  }, []);
+      fetchRanking();
+    }, [])
+  );
 
-  const getFullRanking = async () => {
-    await mutateAsync(undefined, {
-      onSuccess: (data) => {
-        setLPIRanking(data.data);
-      }
-    });
-  };
+  if (isLoading) return <Loading />;
 
   return (
     <PageWrapper>
@@ -33,6 +34,7 @@ const LPIRankingScreen = () => {
         showsVerticalScrollIndicator={false}
         ListHeaderComponent={<Header label="LPI Ranking" />}
         keyExtractor={(item) => item.user_id.toString()}
+        onEndReachedThreshold={0.1}
         renderItem={({ item, index }) => (
           <Profile
             key={index}
@@ -62,8 +64,6 @@ const LPIRankingScreen = () => {
             auth={item.auth}
           />
         )}
-        onEndReached={() => getFullRanking()}
-        onEndReachedThreshold={0.1}
       />
     </PageWrapper>
   );

src/screens/InAppScreens/TravellersScreen/MasterRankingScreen/index.tsx

@@ -1,13 +1,14 @@
 import React, { useCallback, useState } from 'react';
 import { useFocusEffect } from '@react-navigation/native';
-import { Header, PageWrapper } from '../../../../components';
+import { FlatList } from 'react-native';
+import { fetchFullRanking } from '@api/ranking';
+
+import { Header, Loading, PageWrapper } from '../../../../components';
 import { getOnlineStatus, storage, StoreType } from '../../../../storage';
 
 import { Profile } from '../Components/Profile';
 
-import { Ranking } from '../Ranking';
-import { FlatList } from 'react-native';
-import { fetchFullRanking } from '@api/ranking';
+import type { Ranking } from '..';
 
 const MasterRankingScreen = () => {
   const [masterRanking, setMasterRanking] = useState<Ranking[]>([]);
@@ -18,7 +19,9 @@ const MasterRankingScreen = () => {
     useCallback(() => {
       const fetchRanking = async () => {
         const ranking = storage.get('masterRanking', StoreType.STRING) as string;
-        setMasterRanking(JSON.parse(ranking).sort((a: Ranking, b: Ranking) => b.score_nm - a.score_nm));
+        setMasterRanking(
+          JSON.parse(ranking).sort((a: Ranking, b: Ranking) => b.score_nm - a.score_nm)
+        );
         setIsLoading(false);
       };
 
@@ -26,9 +29,7 @@ const MasterRankingScreen = () => {
     }, [])
   );
 
-  if (isLoading) {
-    return null;
-  }
+  if (isLoading) return <Loading />;
 
   const getFullRanking = async () => {
     if (getOnlineStatus()) {

src/screens/InAppScreens/TravellersScreen/Ranking/index.tsx

@@ -1,90 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { View, Text, FlatList } from 'react-native';
-import { StoreType, storage } from 'src/storage';
-import { fetchFullRanking } from '@api/ranking';
-
-export interface Ranking {
-  user_id: number,
-  score_dare: number,
-  score_nm: number,
-  score_un: number,
-  score_unp: number,
-  score_tcc: number,
-  score_deep: number,
-  score_whs: number,
-  score_kye: number,
-  score_tbt: number,
-  score_yes: number,
-  score_slow: number,
-  rank_tbt: number,
-  avatar: string,
-  first_name: string,
-  last_name: string,
-  age: number,
-  flag1: string,
-  flag2: string,
-  badge_1281: number,
-  badge_un: number,
-  badge_supreme: number,
-  badge_tbt: number,
-  badge_offline: number,
-  patreon: number,
-  country: string,
-  auth: number,
-  rank: number,
-  country_rank: number,
-  dod: number,
-  ukr: number,
-  badges: number,
-  arrow_nm: number,
-  arrow_un: number,
-  arrow_unp: number,
-  arrow_dare: number,
-  arrow_yes: number,
-  arrow_whs: number,
-  arrow_tcc: number,
-  arrow_tbt: number,
-  arrow_slow: number,
-  arrow_kye: number,
-}
-
-const RankingScreen = () => {
-  const [masterRanking, setMasterRanking] = useState<Ranking[]>([]);
-  const { mutateAsync } = fetchFullRanking();
-
-  const ranking: string = storage.get('masterRanking', StoreType.STRING) as string;
-  const lpi: string = storage.get('lpiRanking', StoreType.STRING) as string;
-  const inHistory: string = storage.get('inHistoryRanking', StoreType.STRING) as string;
-  const inMemoriam: string = storage.get('inMemoriamRanking', StoreType.STRING) as string;
-
-  useEffect(() => {
-    setMasterRanking(
-      JSON.parse(ranking).sort((a: Ranking, b: Ranking) => b.score_nm - a.score_nm)
-    );
-  }, [ranking]);
-
-  const getFullRanking = async () => {
-    await mutateAsync(undefined, {
-      onSuccess: (data) => {
-        setMasterRanking(data.data);
-      }
-    });
-  }
-
-  return (
-    <FlatList
-      data={masterRanking}
-      keyExtractor={(item) => item.user_id.toString()}
-      renderItem={({ item }) => (
-        <View style={{ display: 'flex', flexDirection: 'row' }}>
-          <Text>{item.score_nm}</Text>
-          <Text>{item.last_name}</Text>
-        </View>
-      )}
-      onEndReached={() => getFullRanking()}
-      onEndReachedThreshold={0.1}
-    />
-  );
-};
-
-export default RankingScreen;

src/screens/InAppScreens/TravellersScreen/UNMasters/index.tsx

@@ -1,20 +1,31 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { FlatList, View, Text } from 'react-native';
+import { useFocusEffect } from '@react-navigation/native';
 
 import HorizontalSelect from '../Components/HorizontalSelect';
 
-import { Header, PageWrapper } from '../../../../components';
-import { getMastersByType, Master, TypeData } from '../../../../database/unMastersService';
+import { Header, Loading, PageWrapper } from '../../../../components';
+import { getMastersByType } from '../../../../database/unMastersService';
+import type { Master, TypeData } from '../../../../database/unMastersService';
 
 const UNMastersScreen = () => {
   const [selectedType, setSelectedType] = useState<TypeData | null>(null);
   const [masters, setMasters] = useState<Master[] | null>([]);
+  const [isLoading, setIsLoading] = useState(true);
 
-  useEffect(() => {
-    const data = getMastersByType(selectedType?.type || 1);
+  useFocusEffect(
+    useCallback(() => {
+      const fetchType = async () => {
+        const data = getMastersByType(selectedType?.type || 1);
+        setMasters(data);
+        setIsLoading(false);
+      };
 
-    setMasters(data);
-  }, [selectedType]);
+      fetchType();
+    }, [])
+  );
+
+  if (isLoading) return <Loading />;
 
   return (
     <PageWrapper>

src/screens/InAppScreens/TravellersScreen/index.tsx

@@ -81,4 +81,49 @@ const TravellersScreen = () => {
   );
 };
 
+export interface Ranking {
+  user_id: number;
+  score_dare: number;
+  score_nm: number;
+  score_un: number;
+  score_unp: number;
+  score_tcc: number;
+  score_deep: number;
+  score_whs: number;
+  score_kye: number;
+  score_tbt: number;
+  score_yes: number;
+  score_slow: number;
+  rank_tbt: number;
+  avatar: string;
+  first_name: string;
+  last_name: string;
+  age: number;
+  flag1: string;
+  flag2: string;
+  badge_1281: number;
+  badge_un: number;
+  badge_supreme: number;
+  badge_tbt: number;
+  badge_offline: number;
+  patreon: number;
+  country: string;
+  auth: number;
+  rank: number;
+  country_rank: number;
+  dod: number;
+  ukr: number;
+  badges: number;
+  arrow_nm: number;
+  arrow_un: number;
+  arrow_unp: number;
+  arrow_dare: number;
+  arrow_yes: number;
+  arrow_whs: number;
+  arrow_tcc: number;
+  arrow_tbt: number;
+  arrow_slow: number;
+  arrow_kye: number;
+}
+
 export default TravellersScreen;