feat: refactor map screen | series API

src/modules/api/series/index.ts

@@ -0,0 +1,3 @@
+export * from './queries';
+export * from './series-api';
+export * from './series-query-keys';

src/modules/api/series/queries/index.ts

@@ -0,0 +1 @@
+export * from './use-post-get-series';

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

@@ -0,0 +1,19 @@
+import { useMutation } from '@tanstack/react-query';
+import { PostGetSeries, seriesQueryKeys, seriesApi } from '@api/series';
+
+import type { BaseAxiosError } from '../../../../types';
+
+export const fetchSeriesData = () => {
+  return useMutation<
+    PostGetSeries,
+    BaseAxiosError,
+    { token: string | null; regions: string },
+    PostGetSeries
+  >({
+    mutationKey: seriesQueryKeys.fetchSeriesData(),
+    mutationFn: async (variables) => {
+      const response = await seriesApi.getSeries(variables.token, variables.regions);
+      return response.data;
+    }
+  });
+};

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

@@ -1,9 +1,8 @@
 import { request } from '../../../utils';
 import { API } from '../../../types';
+import { ResponseType } from '../response-type';
 
-export interface SeriesResponse  {
-  result: 'OK' | 'ERROR';
-  result_description?: string;
+export interface PostGetSeries extends ResponseType {
   series: { id: number; name: string; icon: string }[];
   items: {
     id: number;
@@ -17,7 +16,6 @@ export interface SeriesResponse  {
 }
 
 export const seriesApi = {
-  getSeries: (token: string | null, regions: string) => 
-  request.postForm<SeriesResponse>(API.SERIES, { token, regions })
+  getSeries: (token: string | null, regions: string) =>
+    request.postForm<PostGetSeries>(API.SERIES, { token, regions })
 };
-

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

@@ -0,0 +1,3 @@
+export const seriesQueryKeys = {
+  fetchSeriesData: () => ['fetchSeriesData'] as const,
+};

src/modules/map/series/queries/use-post-get-series.tsx

@@ -1,11 +0,0 @@
-import { seriesApi } from '../series-api';
-
-export const fetchSeriesData = async (token: string | null, regions: string) => {
-  try {
-    const response = await seriesApi.getSeries(token, regions);
-    return response.data;
-  } catch (error) {
-    throw error;
-  }
-};
-

src/screens/InAppScreens/MapScreen/index.tsx

@@ -30,7 +30,7 @@ import {
   processMarkerData
 } from '../../../utils/mapHelpers';
 import { getData } from '../../../modules/map/regionData';
-import { fetchSeriesData } from '../../../modules/map/series/queries/use-post-get-series';
+import { fetchSeriesData } from '@api/series';
 import MarkerItem from './MarkerItem';
 import ClusterItem from './ClusterItem';
 import {
@@ -61,6 +61,9 @@ 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 { mutateAsync } = fetchSeriesData();
+
   const visitedTiles = `${MAP_HOST}/tiles_nm/user_visited/${userId}`;
 
   const mapRef = useRef<MapView>(null);
@@ -182,17 +185,23 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
     const regionIds = regionsFound.map(
       (region: { properties: { id: any } }) => region.properties.id
     );
-    const candidatesMarkers = await fetchSeriesData(String(token), JSON.stringify(regionIds));
 
-    if (thisToken !== currentTokenRef.current) return;
+    await mutateAsync(
+      { regions: JSON.stringify(regionIds), token: String(token) },
+      {
+        onSuccess: (data) => {
+          if (thisToken !== currentTokenRef.current) return;
 
-    setSeries(candidatesMarkers.series);
+          setSeries(data.series);
 
-    const markersVisible = filterCandidatesMarkers(candidatesMarkers.items, visibleAreaPolygon);
-    const allMarkers = markersVisible.map(processMarkerData);
-    const clusteredMarkers = clusterMarkers(allMarkers, currentZoom, setClusters);
+          const markersVisible = filterCandidatesMarkers(data.items, visibleAreaPolygon);
+          const allMarkers = markersVisible.map(processMarkerData);
+          const clusteredMarkers = clusterMarkers(allMarkers, currentZoom, setClusters);
 
-    setMarkers(clusteredMarkers as MarkerData[]);
+          setMarkers(clusteredMarkers as MarkerData[]);
+        }
+      }
+    );
   };
 
   const renderMarkers = () => {
@@ -314,10 +323,17 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
       mapRef.current?.animateToRegion(region, 1000);
 
       if (tableName === 'regions') {
-        const seriesData = await fetchSeriesData(String(token), JSON.stringify([id]));
-        setSeries(seriesData.series);
-        const allMarkers = seriesData.items.map(processMarkerData);
-        setProcessedMarkers(allMarkers);
+        await mutateAsync(
+          { regions: JSON.stringify(id), token: String(token) },
+          {
+            onSuccess: (data) => {
+              setSeries(data.series);
+
+              const allMarkers = data.items.map(processMarkerData);
+              setProcessedMarkers(allMarkers);
+            }
+          }
+        );
       } else {
         setProcessedMarkers([]);
       }