series label, new_icon fields

src/modules/api/series/queries/use-post-get-list.tsx

@@ -1,12 +1,12 @@
 import { useQuery } from '@tanstack/react-query';
 
 import { seriesQueryKeys } from '../series-query-keys';
-import { seriesApi, type PostGetSeriesList } from '../series-api';
+import { seriesApi, type PostGetSeriesListForFilters } from '../series-api';
 
 import type { BaseAxiosError } from '../../../../types';
 
 export const useGetListQuery = (enabled: boolean) => {
-  return useQuery<PostGetSeriesList, BaseAxiosError>({
+  return useQuery<PostGetSeriesListForFilters, BaseAxiosError>({
     queryKey: seriesQueryKeys.getList(),
     queryFn: async () => {
       const response = await seriesApi.getList();

src/modules/api/series/series-api.tsx

@@ -36,6 +36,18 @@ export interface PostGetSeriesList extends ResponseType {
   }[];
 }
 
+export interface PostGetSeriesListForFilters extends ResponseType {
+  data: {
+    id: number;
+    name: string;
+    icon: string;
+    count: number;
+    new: number;
+    new_icon: string;
+    label: boolean;
+  }[];
+}
+
 export interface PostGetItems extends ResponseType {
   groups: {
     name: string;
@@ -197,7 +209,7 @@ export const seriesApi = {
   getSuggestionData: () => request.postForm<PostGetSuggestionData>(API.GET_SUGGESTION_DATA),
   submitSuggestion: (data: SubmitSuggestionTypes) =>
     request.postForm<SubmitSuggestionReturn>(API.SUBMIT_SUGGESTION, data),
-  getList: () => request.postForm<PostGetSeriesList>(API.GET_SERIES_LIST),
+  getList: () => request.postForm<PostGetSeriesListForFilters>(API.GET_SERIES_LIST),
   getIcons: () => request.postForm<PostGetSeriesIcons>(API.GET_ICONS),
   getUsersWhoTickedSeries: (
     token: string,

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

@@ -141,7 +141,9 @@ const FilterModal = forwardRef<
       isLogged && isConnected ? true : false
     );
     const { data: seriesList } = useGetListQuery(isConnected ? true : false);
-    const [series, setSeries] = useState<{ label: string; value: number }[]>([]);
+    const [series, setSeries] = useState<
+      { label: string; value: number; icon: string; show_label: boolean }[]
+    >([]);
     const [selectedSeries, setSelectedSeries] = useState<number[]>([]);
     const [seriesVisible, setSeriesVisible] = useState(true);
     const [selectedSeriesFilter, setSelectedSeriesFilter] = useState(-1);
@@ -248,7 +250,8 @@ const FilterModal = forwardRef<
               visible: seriesVisible,
               groups: selectedSeries,
               applied: true,
-              status: selectedSeriesFilter
+              status: selectedSeriesFilter,
+              labelIds: series.filter((s) => (s as any).show_label).map((s) => s.value)
             },
             nomadsFilter: {
               friends: friendsVisible ? 1 : 0,
@@ -290,7 +293,8 @@ const FilterModal = forwardRef<
                 acc.push({
                   label: 'Top of the tops',
                   value: -1,
-                  icon: item.icon
+                  icon: item.new_icon,
+                  show_label: item.label
                 });
 
                 return acc;
@@ -299,12 +303,13 @@ const FilterModal = forwardRef<
               acc.push({
                 label: item.name,
                 value: item.id,
-                icon: item.icon
+                icon: item.new_icon,
+                show_label: item.label
               });
 
               return acc;
             },
-            [] as { label: string; value: number; icon: string }[]
+            [] as { label: string; value: number; icon: string; show_label: boolean }[]
           )
         );
         !savedFilterSettings && setSelectedSeries(seriesList.data.map((item) => item.id));
@@ -318,7 +323,8 @@ const FilterModal = forwardRef<
             visible: seriesVisible,
             groups: selectedSeries,
             applied: true,
-            status: selectedSeriesFilter
+            status: selectedSeriesFilter,
+            labelIds: series.filter((s) => (s as any).show_label).map((s) => s.value)
           });
         saveFilterSettings();
       }
@@ -573,9 +579,9 @@ const FilterModal = forwardRef<
                     <Image
                       source={{ uri: API_HOST + (item as any).icon }}
                       style={{
-                        width: 18,
-                        height: 18,
-                        tintColor: isSelected ? Colors.WHITE : Colors.DARK_BLUE
+                        width: 20,
+                        height: 20
+                        // tintColor: isSelected ? Colors.WHITE : Colors.DARK_BLUE
                       }}
                     />
                   ) : null}

src/screens/InAppScreens/MapScreen/index.tsx

@@ -400,6 +400,42 @@ const SERIES_CIRCLE_STROKE = [
   2.5
 ] as unknown as number;
 
+const SERIES_TEXT_SIZE = [
+  'interpolate',
+  ['linear'],
+  ['zoom'],
+  3,
+  6,
+  4,
+  7,
+  5,
+  8,
+  6,
+  9,
+  7,
+  10,
+  8,
+  10,
+  9,
+  11,
+  10,
+  11,
+  11,
+  12,
+  12,
+  12,
+  13,
+  13,
+  14,
+  13,
+  15,
+  14,
+  16,
+  14,
+  17,
+  15
+] as unknown as number;
+
 const MapScreen: any = ({ navigation, route }: { navigation: any; route: any }) => {
   const tabBarHeight = useBottomTabBarHeight();
   const userId = storage.get('uid', StoreType.STRING) as string;
@@ -428,7 +464,8 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
     visible: true,
     groups: [],
     applied: false,
-    status: -1
+    status: -1,
+    labelIds: []
   });
   const [regionsFilter, setRegionsFilter] = useState<any>({
     visitedLabel: 'by',
@@ -846,26 +883,38 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
     );
   }, [nomadsFilter, loading]);
 
-  const isMustModeEnabled = useMemo(
-    () => seriesFilter.visible && seriesFilter.groups?.includes(-1),
-    [seriesFilter]
-  );
-
-  const isGroupEnabled = useCallback(
-    (groupId: number) => {
-      if (!seriesFilter.visible) return false;
-      if (!seriesFilter.groups?.length) return true;
-      return seriesFilter.groups.includes(groupId);
-    },
-    [seriesFilter]
-  );
-
-  const seriesGroups = useMemo(() => {
-    if (!seriesIcons?.data) return [];
-    return seriesIcons.data.map((icon) => ({
-      id: icon.id
-    }));
-  }, [seriesIcons]);
+  // const isMustModeEnabled = useMemo(
+  //   () => seriesFilter.visible && seriesFilter.groups?.includes(-1),
+  //   [seriesFilter]
+  // );
+
+  // const isGroupEnabled = useCallback(
+  //   (groupId: number) => {
+  //     if (!seriesFilter.visible) return false;
+  //     if (!seriesFilter.groups?.length) return true;
+  //     return seriesFilter.groups.includes(groupId);
+  //   },
+  //   [seriesFilter]
+  // );
+
+  // const seriesGroups = useMemo(() => {
+  //   if (!seriesIcons?.data) return [];
+  //   return seriesIcons.data.map((icon) => ({
+  //     id: icon.id
+  //   }));
+  // }, [seriesIcons]);
+
+  const seriesTextField = useMemo(() => {
+    const ids = seriesFilter.labelIds;
+    if (!ids) return ['get', 'name'] as unknown as string;
+    if (ids.length === 0) return '';
+    return [
+      'case',
+      ['in', ['get', 'series_id'], ['literal', ids]],
+      ['get', 'name'],
+      ''
+    ] as unknown as string;
+  }, [seriesFilter.labelIds]);
 
   useEffect(() => {
     if (!seriesFilter.visible) {
@@ -1337,24 +1386,24 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
   const onMapPress = async (event: any) => {
     if (!mapRef.current) return;
 
-    const { screenPointX, screenPointY } = event.properties;
-    const seriesLayerIds = seriesGroups.flatMap((g) => [
-      `series-${g.id}-unvisited`,
-      `series-${g.id}-must-icon`,
-      `series-${g.id}-visited-normal`,
-      `series-${g.id}-visited-must`
-    ]);
-
-    const { features: seriesFeatures } = await mapRef.current.queryRenderedFeaturesAtPoint(
-      [screenPointX, screenPointY],
-      undefined,
-      seriesLayerIds
-    );
-
-    if (seriesFeatures?.length) {
-      handleMarkerPress({ features: seriesFeatures });
-      return;
-    }
+    // const { screenPointX, screenPointY } = event.properties;
+    // const seriesLayerIds = seriesGroups.flatMap((g) => [
+    //   `series-${g.id}-unvisited`,
+    //   `series-${g.id}-must-icon`,
+    //   `series-${g.id}-visited-normal`,
+    //   `series-${g.id}-visited-must`
+    // ]);
+
+    // const { features: seriesFeatures } = await mapRef.current.queryRenderedFeaturesAtPoint(
+    //   [screenPointX, screenPointY],
+    //   undefined,
+    //   seriesLayerIds
+    // );
+
+    // if (seriesFeatures?.length) {
+    //   handleMarkerPress({ features: seriesFeatures });
+    //   return;
+    // }
 
     if (selectedMarker || selectedUser) {
       closeCallout();
@@ -2287,12 +2336,12 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
                         iconHaloWidth: 1,
                         iconHaloBlur: 0.5,
                         textAnchor: 'top',
-                        textField: '{name}',
+                        textField: seriesTextField,
                         textFont: ['Noto Sans Regular'],
                         textMaxWidth: 9,
                         textOffset: [0, 1.3],
                         textPadding: 2,
-                        textSize: 12,
+                        textSize: SERIES_TEXT_SIZE,
                         textOptional: true,
                         textIgnorePlacement: false,
                         textAllowOverlap: false,
@@ -2342,12 +2391,12 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
                         iconHaloWidth: 1,
                         iconHaloBlur: 0.5,
                         textAnchor: 'top',
-                        textField: '{name}',
+                        textField: seriesTextField,
                         textFont: ['Noto Sans Regular'],
                         textMaxWidth: 9,
                         textOffset: [0, 1.3],
                         textPadding: 2,
-                        textSize: 12,
+                        textSize: SERIES_TEXT_SIZE,
                         textOptional: true,
                         textIgnorePlacement: false,
                         textAllowOverlap: false,
@@ -2391,12 +2440,12 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
                         iconHaloWidth: 1,
                         iconHaloBlur: 0.5,
                         textAnchor: 'top',
-                        textField: '{name}',
+                        textField: seriesTextField,
                         textFont: ['Noto Sans Regular'],
                         textMaxWidth: 9,
                         textOffset: [0, 1.3],
                         textPadding: 2,
-                        textSize: 12,
+                        textSize: SERIES_TEXT_SIZE,
                         textOptional: true,
                         textIgnorePlacement: false,
                         textAllowOverlap: false,
@@ -2446,12 +2495,12 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
                         iconHaloWidth: 1,
                         iconHaloBlur: 0.5,
                         textAnchor: 'top',
-                        textField: '{name}',
+                        textField: seriesTextField,
                         textFont: ['Noto Sans Regular'],
                         textMaxWidth: 9,
                         textOffset: [0, 1.3],
                         textPadding: 2,
-                        textSize: 12,
+                        textSize: SERIES_TEXT_SIZE,
                         textOptional: true,
                         textIgnorePlacement: false,
                         textAllowOverlap: false,