Merge branch 'map-filter-fixes' of Viktoriia/nomadmania-app into dev

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, TouchableOpacity, Image, Switch } from 'react-native';
+import { View, Text, TouchableOpacity, Image, Switch, Dimensions } from 'react-native';
 import ReactModal from 'react-native-modal';
 import { Colors } from 'src/theme';
 import { ModalStyles } from '../../TravellersScreen/Components/styles';
@@ -25,7 +25,8 @@ const FilterModal = ({
   userId,
   setVisitedTiles,
   setSeriesFilter,
-  isPublicView
+  isPublicView,
+  isLogged = true
 }: {
   isFilterVisible: boolean;
   setIsFilterVisible: (isVisible: boolean) => void;
@@ -38,6 +39,7 @@ const FilterModal = ({
   setVisitedTiles: (tiles: string) => void;
   setSeriesFilter?: (filter: any) => void;
   isPublicView: boolean;
+  isLogged: boolean;
 }) => {
   const [index, setIndex] = useState(0);
   const [selectedYear, setSelectedYear] = useState<{ label: string; value: number } | null>(null);
@@ -51,7 +53,7 @@ const FilterModal = ({
     { key: 'regions', title: 'NM / UN / DARE' },
     { key: 'series', title: 'Series' }
   ]);
-  const { data } = usePostGetMapYearsQuery(userId, true);
+  const { data } = usePostGetMapYearsQuery(userId, isLogged ? true : false);
   const { data: seriesList } = useGetListQuery(true);
   const [series, setSeries] = useState<{ label: string; value: number }[]>([]);
   const [selectedSeries, setSelectedSeries] = useState<number[]>([]);
@@ -82,10 +84,14 @@ const FilterModal = ({
     }
   }, [seriesList]);
 
-  if (!data) return;
+  if (!data && isLogged) return;
 
   const handleApplyFilter = () => {
     let tileUrl = `${FASTEST_MAP_HOST}/tiles_nm/`;
+    if (!isLogged) {
+      return;
+    }
+
     if (!selectedYear) {
       if (tilesType.value === 0) {
         tileUrl += 'user_visited/' + userId;
@@ -139,7 +145,7 @@ const FilterModal = ({
             </View>
           </View>
 
-          {tilesType.value !== 2 && allYears.length ? (
+          {tilesType.value !== 2 && allYears.length && isLogged ? (
             <View style={styles.rowWrapper}>
               <View style={styles.dropdownWrapper}>
                 <Dropdown
@@ -215,53 +221,73 @@ const FilterModal = ({
             <Text style={styles.textBold}>Visible / Not visible</Text>
           </View>
 
-          <View style={[styles.row, { justifyContent: 'space-between' }]}>
-            <TouchableOpacity style={styles.row} onPress={() => setSelectedSeriesFilter(-1)}>
-              <RadioButton.Android
-                value="all"
-                status={selectedSeriesFilter === -1 ? 'checked' : 'unchecked'}
-                onPress={() => setSelectedSeriesFilter(-1)}
-                color={Colors.DARK_BLUE}
-              />
-              <Text style={styles.textBold}>All items</Text>
-            </TouchableOpacity>
+          {isLogged ? (
+            <View style={[styles.row, { justifyContent: 'space-between' }]}>
+              <TouchableOpacity style={styles.row} onPress={() => setSelectedSeriesFilter(-1)}>
+                <RadioButton.Android
+                  value="all"
+                  status={selectedSeriesFilter === -1 ? 'checked' : 'unchecked'}
+                  onPress={() => setSelectedSeriesFilter(-1)}
+                  color={Colors.DARK_BLUE}
+                />
+                <Text style={styles.textBold}>All items</Text>
+              </TouchableOpacity>
 
-            <TouchableOpacity style={styles.row} onPress={() => setSelectedSeriesFilter(1)}>
-              <RadioButton.Android
-                value="visited"
-                status={selectedSeriesFilter === 1 ? 'checked' : 'unchecked'}
-                onPress={() => setSelectedSeriesFilter(1)}
-                color={Colors.DARK_BLUE}
-              />
-              <Text style={styles.textBold}>Visited</Text>
-            </TouchableOpacity>
+              <TouchableOpacity style={styles.row} onPress={() => setSelectedSeriesFilter(1)}>
+                <RadioButton.Android
+                  value="visited"
+                  status={selectedSeriesFilter === 1 ? 'checked' : 'unchecked'}
+                  onPress={() => setSelectedSeriesFilter(1)}
+                  color={Colors.DARK_BLUE}
+                />
+                <Text style={styles.textBold}>Visited</Text>
+              </TouchableOpacity>
 
-            <TouchableOpacity style={styles.row} onPress={() => setSelectedSeriesFilter(0)}>
-              <RadioButton.Android
-                value="not-visited"
-                status={selectedSeriesFilter === 0 ? 'checked' : 'unchecked'}
-                onPress={() => setSelectedSeriesFilter(0)}
-                color={Colors.DARK_BLUE}
-              />
-              <Text style={styles.textBold}>Not visited</Text>
-            </TouchableOpacity>
-          </View>
+              <TouchableOpacity style={styles.row} onPress={() => setSelectedSeriesFilter(0)}>
+                <RadioButton.Android
+                  value="not-visited"
+                  status={selectedSeriesFilter === 0 ? 'checked' : 'unchecked'}
+                  onPress={() => setSelectedSeriesFilter(0)}
+                  color={Colors.DARK_BLUE}
+                />
+                <Text style={styles.textBold}>Not visited</Text>
+              </TouchableOpacity>
+            </View>
+          ) : null}
 
           <MultiSelect
             style={[ModalStyles.dropdown, { width: '100%' }]}
             placeholderStyle={[ModalStyles.placeholderStyle]}
             selectedTextStyle={ModalStyles.selectedTextStyle}
             containerStyle={[ModalStyles.dropdownContent, {}]}
-            data={series}
+            data={[
+              { label: 'Select all', value: 'all' },
+              { label: 'Select none', value: 'none' },
+              ...series
+            ]}
             labelField="label"
             valueField="value"
             value={selectedSeries}
             placeholder="Select series"
             dropdownPosition="top"
             activeColor="#E7E7E7"
+            search={true}
+            searchPlaceholder="Search"
+            inputSearchStyle={ModalStyles.search}
+            searchQuery={(keyword, item) =>
+              item.toLowerCase().includes(keyword.toLowerCase()) &&
+              item !== 'Select all' &&
+              item !== 'Select none'
+            }
             flatListProps={{ initialNumToRender: 30, maxToRenderPerBatch: 10 }}
             onChange={(item) => {
-              setSelectedSeries(item);
+              if (item.includes('all')) {
+                setSelectedSeries(series.map((item) => item.value));
+              } else if (item.includes('none')) {
+                setSelectedSeries([]);
+              } else {
+                setSelectedSeries(item);
+              }
             }}
             renderItem={(item) => (
               <View style={styles.multiOption}>
@@ -312,6 +338,8 @@ const FilterModal = ({
     );
   };
 
+  const isSmallScreen = Dimensions.get('window').width < 383;
+
   return (
     <ReactModal
       isVisible={isFilterVisible}
@@ -340,7 +368,11 @@ const FilterModal = ({
                   <Text
                     style={[
                       styles.tabLabel,
-                      { color: Colors.DARK_BLUE, opacity: focused ? 1 : 0.4 }
+                      {
+                        color: Colors.DARK_BLUE,
+                        opacity: focused ? 1 : 0.4,
+                        fontSize: isSmallScreen ? 13 : 14
+                      }
                     ]}
                   >
                     {route.title}

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

@@ -15,7 +15,7 @@ export const styles = StyleSheet.create({
     fontSize: getFontSize(14),
     fontWeight: '700',
     padding: 8,
-    width: Dimensions.get('window').width / 3,
+    width: Dimensions.get('window').width / 2,
     textAlign: 'center'
   },
   tabStyle: {

src/screens/InAppScreens/MapScreen/index.tsx

@@ -79,9 +79,9 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation, route }) => {
   const [dareData, setDareData] = useState(jsonData);
   const tilesBaseURL = `${FASTEST_MAP_HOST}/tiles_osm`;
   const gridUrl = `${FASTEST_MAP_HOST}/tiles_nm/grid`;
-  const dareTiles = `${FASTEST_MAP_HOST}/tiles_nm/regions_mqp`;
 
   const userId = storage.get('uid', StoreType.STRING);
+  const dareTiles = `${FASTEST_MAP_HOST}/tiles_nm/dare`;
   const token = storage.get('token', StoreType.STRING) as string;
   const netInfo = useConnection();
 
@@ -765,9 +765,9 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation, route }) => {
       >
         {renderedGeoJSON}
         {renderMapTiles(tilesBaseURL, localTileDir, 1)}
-        {type !== 1 && renderMapTiles(gridUrl, localGridDir, 2)}
+        {type === 0 && renderMapTiles(gridUrl, localGridDir, 2)}
         {userId && renderMapTiles(visitedTiles, localVisitedDir, 3, 0.5)}
-        {renderMapTiles(dareTiles, localDareDir, 2, 0.5)}
+        {type === 2 && renderMapTiles(dareTiles, localDareDir, 2, 0.5)}
         {location && (
           <AnimatedMarker coordinate={location} anchor={{ x: 0.5, y: 0.5 }}>
             <Animation.View style={[styles.location, { borderWidth: strokeWidthAnim }]} />
@@ -895,7 +895,7 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation, route }) => {
           <TouchableOpacity
             style={[styles.cornerButton, styles.bottomButton, styles.bottomLeftButton]}
             onPress={() => {
-              token ? setIsFilterVisible(true) : setIsWarningModalVisible(true);
+              setIsFilterVisible(true);
             }}
           >
             <FilterIcon />
@@ -942,6 +942,7 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation, route }) => {
         setVisitedTiles={setVisitedTiles}
         setSeriesFilter={setSeriesFilter}
         isPublicView={false}
+        isLogged={!!token}
       />
       <EditModal
         isVisible={isEditSlowModalVisible}