active filter/request url in error/small screen fix

src/components/MapButton/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TouchableOpacity, Text } from 'react-native';
+import { TouchableOpacity, Text, Dimensions } from 'react-native';
 import { SvgProps } from 'react-native-svg';
 import { Colors } from 'src/theme';
 
@@ -7,17 +7,21 @@ interface MapButtonProps {
   onPress: () => void;
   icon: React.ComponentType<SvgProps> | null;
   text: string;
+  active?: boolean;
 }
 
-const MapButton: React.FC<MapButtonProps> = ({ onPress, icon: Icon, text }) => {
+const MapButton: React.FC<MapButtonProps> = ({ onPress, icon: Icon, text, active = false }) => {
+  const isSmallScreen = Dimensions.get('window').width < 383;
+  const iconSize = isSmallScreen ? 14 : 16;
+
   return (
     <TouchableOpacity
       style={{
         flexDirection: 'row',
         alignItems: 'center',
-        backgroundColor: Colors.WHITE,
+        backgroundColor: active ? Colors.ORANGE : Colors.WHITE,
         borderRadius: 17,
-        paddingHorizontal: 10,
+        paddingHorizontal: isSmallScreen ? 7 : 10,
         paddingVertical: 6,
         gap: 4,
         shadowColor: '#000',
@@ -32,11 +36,11 @@ const MapButton: React.FC<MapButtonProps> = ({ onPress, icon: Icon, text }) => {
       }}
       onPress={onPress}
     >
-      {Icon && <Icon fill={Colors.DARK_BLUE} width={16} height={16} />}
+      {Icon && <Icon fill={active ? Colors.WHITE : Colors.DARK_BLUE} width={iconSize} height={iconSize} />}
       <Text
         style={{
-          color: Colors.DARK_BLUE,
-          fontSize: 12,
+          color: active ? Colors.WHITE : Colors.DARK_BLUE,
+          fontSize: isSmallScreen ? 11 : 12,
           fontWeight: '600'
         }}
       >

src/screens/InAppScreens/MapScreen/FilterModal/index.tsx

@@ -104,7 +104,7 @@ const FilterModal = ({
   useEffect(() => {
     const loadFilterSettings = () => {
       try {
-        if (savedFilterSettings) {
+        if (savedFilterSettings && isFilterVisible) {
           const filterSettings = JSON.parse(savedFilterSettings);
           setTilesType(filterSettings.tilesType);
           setSelectedYear(filterSettings.selectedYear);
@@ -121,7 +121,7 @@ const FilterModal = ({
     if (!isPublicView && isLogged) {
       loadFilterSettings();
     }
-  }, [savedFilterSettings]);
+  }, [savedFilterSettings, isFilterVisible]);
 
   const saveFilterSettings = async () => {
     if (isLogged && !isPublicView) {
@@ -638,8 +638,6 @@ const FilterModal = ({
     }
   };
 
-  const isSmallScreen = Dimensions.get('window').width < 383;
-
   return (
     <ReactModal
       isVisible={!!isFilterVisible}
@@ -649,9 +647,7 @@ const FilterModal = ({
       statusBarTranslucent={true}
       presentationStyle="overFullScreen"
     >
-      <View style={[styles.modalContainer, { height: 360 }]}>
-        {renderScene(isFilterVisible)}
-      </View>
+      <View style={[styles.modalContainer, { height: 360 }]}>{renderScene(isFilterVisible)}</View>
     </ReactModal>
   );
 };

src/screens/InAppScreens/MapScreen/index.tsx

@@ -389,6 +389,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
   );
   const [selectedUser, setSelectedUser] = useState<any>(null);
 
+  const isSmallScreen = Dimensions.get('window').width < 383;
   const processedImages = useRef(new Set<string>());
 
   useEffect(() => {
@@ -1582,7 +1583,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
             <ScrollView
               horizontal
               showsHorizontalScrollIndicator={false}
-              contentContainerStyle={{ paddingHorizontal: 12, gap: 12, flexDirection: 'row' }}
+              contentContainerStyle={{ paddingHorizontal: 12, gap: isSmallScreen ? 8 : 12, flexDirection: 'row' }}
             >
               <MapButton
                 onPress={() => {
@@ -1599,6 +1600,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
                 }}
                 icon={SeriesIcon}
                 text="Series"
+                active={seriesFilter.visible}
               />
               {isFeatureActive && isFeatureActive.active ? (
                 <MapButton
@@ -1608,6 +1610,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
                   }}
                   icon={NomadsIcon}
                   text="Nomads"
+                  active={showNomads}
                 />
               ) : null}
             </ScrollView>

src/utils/request.ts

@@ -45,13 +45,17 @@ export const setupInterceptors = ({
       if (error.code === 'ECONNABORTED') {
         error.isTimeout = true;
         showBanner('Slow internet connection!');
-        
+
         return Promise.reject(error);
       } else if (error.message === 'Network Error') {
         return Promise.reject(error);
       }
 
-      showError(error.message, false);
+      const shortUrl = error.config.url
+        ? error.config.url?.split('/')?.filter(Boolean)?.pop()
+        : 'Unknown URL';
+
+      showError(`${error.message} (${shortUrl})`, false);
 
       return Promise.reject(error);
     }