small fixes

src/database/index.ts

@@ -1,6 +1,6 @@
 import * as SQLite from 'expo-sqlite';
 import NetInfo, { NetInfoState } from '@react-native-community/netinfo';
-import { StoreType, getOnlineStatus, storage } from 'src/storage';
+import { StoreType, storage } from 'src/storage';
 import { fetchLimitedRanking, fetchLpi, fetchInHistory, fetchInMemoriam } from '@api/ranking';
 import { initTilesDownload } from './tilesService';
 import { downloadFlags } from './flagsService';
@@ -35,9 +35,8 @@ export const checkInternetConnection = async (): Promise<NetInfoState> => {
 export const syncDataWithServer = async (): Promise<void> => {
   const userId = storage.get('uid', StoreType.STRING) as string;
   const { isConnected } = await checkInternetConnection();
-  const isOnline = getOnlineStatus();
 
-  if (isConnected && isOnline) {
+  if (isConnected) {
     console.log('Syncing data with server...');
     processSyncQueue();
     await updateMasterRanking();

src/screens/InAppScreens/MapScreen/index.tsx

@@ -4,7 +4,7 @@ import MapView, { Geojson, Marker, UrlTile } from 'react-native-maps';
 import * as turf from '@turf/turf';
 import * as FileSystem from 'expo-file-system';
 import * as Location from 'expo-location';
-import { getOnlineStatus, storage, StoreType } from '../../../storage';
+import { storage, StoreType } from '../../../storage';
 
 import MenuIcon from '../../../../assets/icons/menu.svg';
 import SearchIcon from '../../../../assets/icons/search.svg';
@@ -15,7 +15,6 @@ import CloseSvg from '../../../../assets/icons/close.svg';
 import regions from '../../../../assets/geojson/nm2022.json';
 import dareRegions from '../../../../assets/geojson/mqp.json';
 
-import NetInfo from '@react-native-community/netinfo';
 import { getFirstDatabase, getSecondDatabase, refreshDatabases } from '../../../db';
 import { LocationPopup, RegionPopup, WarningModal } from '../../../components';
 
@@ -43,6 +42,7 @@ import {
   Series
 } from '../../../types/map';
 import { MAP_HOST } from 'src/constants';
+import { useConnection } from 'src/contexts/ConnectionContext';
 
 const tilesBaseURL = `${MAP_HOST}/tiles_osm`;
 const localTileDir = `${FileSystem.cacheDirectory}tiles/background`;
@@ -60,7 +60,7 @@ const AnimatedMarker = Animated.createAnimatedComponent(Marker);
 const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
   const userId = storage.get('uid', StoreType.STRING);
   const token = storage.get('token', StoreType.STRING);
-  const isOnline = getOnlineStatus();
+  const netInfo = useConnection();
 
   const { mutateAsync } = fetchSeriesData();
 
@@ -87,6 +87,14 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
   const currentTokenRef = useRef(0);
   const strokeWidthAnim = useRef(new Animated.Value(2)).current;
 
+  useEffect(() => {
+    if (netInfo?.isInternetReachable) {
+      setIsConnected(true);
+    } else {
+      setIsConnected(false);
+    }
+  }, [netInfo?.isInternetReachable]);
+
   useEffect(() => {
     Animated.loop(
       Animated.sequence([
@@ -118,14 +126,6 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
     });
   }, [regionPopupVisible, navigation]);
 
-  useEffect(() => {
-    const unsubscribe = NetInfo.addEventListener((state) => {
-      setIsConnected(isOnline as boolean);
-    });
-
-    return () => unsubscribe();
-  }, [isOnline]);
-
   useEffect(() => {
     (async () => {
       let { status } = await Location.getForegroundPermissionsAsync();
@@ -154,7 +154,7 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
     latitudeDelta: any;
     longitudeDelta?: any;
   }) => {
-    if (!isOnline) return;
+    if (!isConnected) return;
     const currentZoom = Math.log2(360 / visibleMapArea.latitudeDelta);
 
     if (cancelTokenRef.current) {
@@ -188,7 +188,7 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
       (region: { properties: { id: any } }) => region.properties.id
     );
 
-    isOnline && await mutateAsync(
+    isConnected && await mutateAsync(
       { regions: JSON.stringify(regionIds), token: String(token) },
       {
         onSuccess: (data) => {

src/screens/InAppScreens/ProfileScreen/Settings/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 import { Header, PageWrapper, MenuButton } from '../../../../components';
 import { NAVIGATION_PAGES } from '../../../../types';
@@ -15,8 +15,7 @@ import ExitIcon from '../../../../../assets/icons/exit.svg';
 import UserXMark from '../../../../../assets/icons/user-xmark.svg';
 
 import type { MenuButtonType } from '../../../../types/components';
-import { Switch, Text, View } from 'react-native';
-import { getOnlineStatus, storage } from 'src/storage';
+import { storage } from 'src/storage';
 import { CommonActions } from '@react-navigation/native';
 
 const buttons: MenuButtonType[] = [
@@ -75,16 +74,6 @@ const buttons: MenuButtonType[] = [
 ];
 
 const Settings = () => {
-  const [isEnabled, setIsEnabled] = useState(Boolean(getOnlineStatus()));
-
-  useEffect(() => {
-    storage.set('online', isEnabled);
-  }, [isEnabled]);
-
-  const toggleSwitch = () => {
-    setIsEnabled(!isEnabled);
-  };
-
   return (
     <PageWrapper>
       <Header label={'Settings'} />
@@ -97,24 +86,6 @@ const Settings = () => {
           buttonFn={button.buttonFn}
         />
       ))}
-      <View
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          marginTop: 20
-        }}
-      >
-        <Text style={{ color: Colors.DARK_BLUE, fontSize: 16, fontWeight: 'bold' }}>
-          Offline mode
-        </Text>
-        <Switch
-          trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.RED }}
-          thumbColor={Colors.WHITE}
-          onValueChange={toggleSwitch}
-          value={!isEnabled}
-        />
-      </View>
     </PageWrapper>
   );
 };

src/screens/InAppScreens/ProfileScreen/index.tsx

@@ -12,7 +12,14 @@ import {
   usePostGetProfileInfoQuery
 } from '@api/user';
 
-import { BigText, Button, PageWrapper, Loading, AvatarWithInitials } from '../../../components';
+import {
+  BigText,
+  Button,
+  PageWrapper,
+  Loading,
+  AvatarWithInitials,
+  Header
+} from '../../../components';
 import { Colors } from '../../../theme';
 import { styles } from './styles';
 import { ButtonVariants } from '../../../types/components';
@@ -56,7 +63,8 @@ const ProfileScreen: FC<Props> = ({ navigation, route }) => {
 
   return (
     <PageWrapper>
-      <View style={styles.pageWrapper}>
+      {isPublicView && <Header label="Profile" />}
+      <View style={[styles.pageWrapper, isPublicView && { marginTop: 0 }]}>
         <View>
           {data.avatar ? (
             <Image

src/screens/InAppScreens/TravellersScreen/Components/FilterModal.tsx

@@ -3,8 +3,6 @@ import Modal from 'react-native-modal';
 import { Dropdown } from 'react-native-searchable-dropdown-kj';
 import { Text, TouchableOpacity, View } from 'react-native';
 
-import { getOnlineStatus } from '../../../../storage';
-
 import { ModalStyles } from './styles';
 import { Colors } from '../../../../theme';
 
@@ -22,6 +20,7 @@ import {
   ModalProps
 } from '../utils/types';
 import FilterIcon from '../../../../../assets/icons/filter.svg';
+import { useConnection } from 'src/contexts/ConnectionContext';
 
 export const FilterModal: FC<ModalProps> = ({
   isModalVisible,
@@ -29,6 +28,7 @@ export const FilterModal: FC<ModalProps> = ({
   countriesData,
   applyFilter
 }) => {
+  const netInfo = useConnection();
   const [filterAge, setFilterAge] = useState<filterAgeType>(null);
   const [filterRanking, setFilterRanking] = useState<filterRankingType>(null);
   const [filterCountry, setFilterCountry] = useState<filterCountryType>(null);
@@ -50,7 +50,7 @@ export const FilterModal: FC<ModalProps> = ({
                 placeholderStyle={ModalStyles.placeholderStyle}
                 selectedTextStyle={ModalStyles.selectedTextStyle}
                 data={dataAge}
-                disable={!getOnlineStatus()}
+                disable={!netInfo?.isInternetReachable}
                 labelField="label"
                 valueField="value"
                 value={filterAge?.value}
@@ -78,7 +78,7 @@ export const FilterModal: FC<ModalProps> = ({
               placeholderStyle={ModalStyles.placeholderStyle}
               selectedTextStyle={ModalStyles.selectedTextStyle}
               data={countriesData}
-              disable={!getOnlineStatus()}
+              disable={!netInfo?.isInternetReachable}
               labelField="name"
               valueField="two"
               value={filterCountry?.two}

src/screens/InAppScreens/TravellersScreen/Components/Profile.tsx

@@ -6,7 +6,7 @@ import * as FileSystem from 'expo-file-system';
 
 import { ProfileStyles, ScoreStyles, TBTStyles } from './styles';
 
-import { getOnlineStatus, storage, StoreType } from 'src/storage';
+import { storage, StoreType } from 'src/storage';
 import { AvatarWithInitials, WarningModal } from 'src/components';
 
 import { API_HOST } from '../../../../constants';
@@ -19,6 +19,7 @@ import NMIcon from '../../../../../assets/icons/nm_icon.svg';
 import TBTIcon from '../../../../../assets/icons/tbt.svg';
 
 import { NAVIGATION_PAGES } from '../../../../types';
+import { useConnection } from 'src/contexts/ConnectionContext';
 
 type Props = {
   avatar: string;
@@ -60,12 +61,12 @@ export const Profile: FC<Props> = ({
   const navigation = useNavigation();
 
   const scoreNames = ['NM', 'DARE', 'UN', 'UN+', 'TCC', 'DEEP', 'YES', 'SLOW', 'WHS', 'KYE'];
-  const isOnline = getOnlineStatus();
+  const netInfo = useConnection();
   const token = storage.get('token', StoreType.STRING);
   const [modalType, setModalType] = useState<string | null>(null);
 
   const handlePress = () => {
-    if (!isOnline) {
+    if (!netInfo?.isInternetReachable) {
       setModalType('offline');
     } else if (!token) {
       setModalType('unauthorized');
@@ -74,11 +75,11 @@ export const Profile: FC<Props> = ({
     }
   };
 
-  const avatarBaseUri = isOnline
+  const avatarBaseUri = netInfo?.isInternetReachable
     ? `${API_HOST}/img/avatars/`
     : `${FileSystem.documentDirectory}avatars/`;
 
-  const flagBaseUri = isOnline
+  const flagBaseUri = netInfo?.isInternetReachable
     ? `${API_HOST}/img/flags_new/`
     : `${FileSystem.documentDirectory}flags/`;
 

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

@@ -5,7 +5,7 @@ import { FlatList } from 'react-native';
 import { fetchFullRanking, usePostGetCountriesRanking } from '@api/ranking';
 
 import { Header, Loading, PageWrapper } from '../../../../components';
-import { getOnlineStatus, storage, StoreType } from '../../../../storage';
+import { storage, StoreType } from '../../../../storage';
 
 import { Profile } from '../Components/Profile';
 import { FilterModal, FilterButton } from '../Components/FilterModal';
@@ -14,10 +14,12 @@ import { applyModalSort, dataRanking } from '../utils';
 import type { RankingDropdown } from '../utils/types';
 
 import type { Ranking } from '..';
+import { useConnection } from 'src/contexts/ConnectionContext';
 
 const MasterRankingScreen = () => {
   const { mutateAsync } = fetchFullRanking();
   const { data: masterCountries } = usePostGetCountriesRanking();
+  const netInfo = useConnection();
 
   const [masterRanking, setMasterRanking] = useState<Ranking[]>([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -43,7 +45,7 @@ const MasterRankingScreen = () => {
   if (isLoading) return <Loading />;
 
   const getFullRanking = async () => {
-    if (getOnlineStatus()) {
+    if (netInfo?.isInternetReachable) {
       await mutateAsync(undefined, {
         onSuccess: (data) => {
           setMasterRanking(data.data);

src/storage/mmkv.ts

@@ -28,7 +28,3 @@ export enum StoreType {
   NUMBER = 'number',
   BOOLEAN = 'boolean'
 }
-
-export const getOnlineStatus = () => {
-  return storage.get('online', StoreType.BOOLEAN) ?? true;
-};