regions filter

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

@@ -2,3 +2,6 @@ export * from './use-post-get-megaregions';
 export * from './use-post-get-regions-qe';
 export * from './use-post-set-update-nm';
 export * from './use-post-set-update-tcc';
+export * from './use-post-get-regions';
+export * from './use-post-get-visits-to-region';
+export * from './use-post-add-visit';

src/modules/api/myRegions/queries/use-post-add-visit.tsx

@@ -0,0 +1,17 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { regionsQueryKeys } from '../regions-query-keys';
+import { type PostAddVisit, regionsApi } from '../regions-api';
+
+import type { BaseAxiosError } from '../../../../types';
+import { ResponseType } from '@api/response-type';
+
+export const usePostAddVisitMutation = () => {
+  return useMutation<ResponseType, BaseAxiosError, PostAddVisit, ResponseType>({
+    mutationKey: regionsQueryKeys.addVisit(),
+    mutationFn: async (data) => {
+      const response = await regionsApi.addVisit(data);
+      return response.data;
+    }
+  });
+};

src/modules/api/myRegions/queries/use-post-get-regions.tsx

@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { regionsQueryKeys } from '../regions-query-keys';
+import { regionsApi, type PostGetRegionsReturn } from '../regions-api';
+
+import type { BaseAxiosError } from '../../../../types';
+
+export const useGetRegionsQuery = (
+  megaregion: number | 'all' | undefined,
+  country: number | 'all' | undefined,
+  token: string,
+  enabled: boolean
+) => {
+  return useQuery<PostGetRegionsReturn, BaseAxiosError>({
+    queryKey: regionsQueryKeys.getRegions(token, megaregion, country),
+    queryFn: async () => {
+      const response = await regionsApi.getRegions(token, megaregion, country);
+      return response.data;
+    },
+    enabled
+  });
+};

src/modules/api/myRegions/queries/use-post-get-visits-to-region.tsx

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { regionsQueryKeys } from '../regions-query-keys';
+import { regionsApi, type PostGetVisitsReturn } from '../regions-api';
+
+import type { BaseAxiosError } from '../../../../types';
+
+export const useGetVisitsQuery = (region: number, token: string, enabled: boolean) => {
+  return useQuery<PostGetVisitsReturn, BaseAxiosError>({
+    queryKey: regionsQueryKeys.getVisits(token, region),
+    queryFn: async () => {
+      const response = await regionsApi.getVisits(token, region);
+      return response.data;
+    },
+    enabled
+  });
+};

src/modules/api/myRegions/regions-api.tsx

@@ -60,11 +60,80 @@ export interface PostSetTCCRegion {
   visits: 0 | 1;
 }
 
+export interface PostGetVisitsReturn extends ResponseType {
+  data: {
+    completed: 0 | 1;
+    date_from: string;
+    date_to: string;
+    day_from: number | null;
+    day_to: number | null;
+    hidden: 0 | 1;
+    id: number;
+    month_from: number | null;
+    month_to: number | null;
+    quality: number;
+    year_from: number;
+    year_to: number;
+  }[];
+}
+
+export interface PostGetRegionsReturn extends ResponseType {
+  data: {
+    dare: {
+      flag1: string;
+      flag2: string | null;
+      id: number;
+      name: string;
+      visited: 0 | 1;
+    }[];
+    regions: {
+      best_visit_quality: number | null;
+      first_visited_in_year: number | null;
+      flag1: string;
+      flag2: string | null;
+      id: number;
+      last_visited_in_year: number | null;
+      name: string;
+      no_of_visits: number | null;
+    }[];
+    tcc: {
+      flag1: string;
+      flag2: string | null;
+      id: number;
+      name: string;
+      visited: 0 | 1;
+    }[];
+  };
+}
+
+export interface PostAddVisit {
+  token: string;
+  region: number;
+  quality: number;
+  year_from: number;
+  month_from: number;
+  day_from: number;
+  year_to: number;
+  month_to: number;
+  day_to: number;
+  completed: 0 | 1;
+  hidden: 0 | 1;
+}
+
 export const regionsApi = {
   getMegaregions: (token: string) =>
     request.postForm<PostGetMegaReturn>(API.GET_MEGAREGIONS, { token }),
   getRegionsQe: (token: string, megaregion?: number, country?: number) =>
     request.postForm<PostGetRegionsQeReturn>(API.GET_REGIONS_QE, { megaregion, country, token }),
   setNmRegion: (data: PostSetNmRegion) => request.postForm<ResponseType>(API.SET_NM_REGION, data),
-  setTCCRegion: (data: PostSetTCCRegion) => request.postForm<ResponseType>(API.SET_TCC_REGION, data)
+  setTCCRegion: (data: PostSetTCCRegion) =>
+    request.postForm<ResponseType>(API.SET_TCC_REGION, data),
+  getVisits: (token: string, region: number) =>
+    request.postForm<PostGetVisitsReturn>(API.GET_VISITS_TO_REGION, { token, region }),
+  getRegions: (
+    token: string,
+    megaregion: number | 'all' | undefined,
+    country: number | 'all' | undefined
+  ) => request.postForm<PostGetRegionsReturn>(API.GET_REGIONS, { megaregion, country, token }),
+  addVisit: (data: PostAddVisit) => request.postForm<ResponseType>(API.ADD_VISIT, data)
 };

src/modules/api/myRegions/regions-query-keys.tsx

@@ -3,5 +3,12 @@ export const regionsQueryKeys = {
   getRegionsQe: (token: string, megaregion: number | undefined, country: number | undefined) =>
     ['getRegionsQe', { megaregion, country, token }] as const,
   setNmRegion: () => ['setNmRegion'] as const,
-  setTCCRegion: () => ['setTCCRegion'] as const
+  setTCCRegion: () => ['setTCCRegion'] as const,
+  getVisits: (token: string, region: number) => ['getVisits', { region, token }] as const,
+  getRegions: (
+    token: string,
+    megaregion: number | 'all' | undefined,
+    country: number | 'all' | undefined
+  ) => ['getRegions', { megaregion, country, token }] as const,
+  addVisit: () => ['addVisit'] as const
 };

src/screens/InAppScreens/TravelsScreen/Components/MegaregionsModal/index.tsx

@@ -28,7 +28,7 @@ const MegaregionsModal = ({
         <ScrollView style={{ paddingBottom: 16 }} showsVerticalScrollIndicator={false}>
           {data?.map((item) => (
             <TouchableOpacity key={item.id} style={styles.btnOption} onPress={() => onSelect(item)}>
-              {isCountry ? (
+              {isCountry && item.flag ? (
                 <Image source={{ uri: `${API_HOST}${item.flag}` }} style={styles.flag} />
               ) : null}
               <Text style={styles.btnOptionText}>{item.name}</Text>

src/screens/InAppScreens/TravelsScreen/Components/MyRegionsItems/NmRegionItem.tsx

@@ -56,13 +56,10 @@ export const NmRegionItem = React.memo(
           </View>
           {!hideCountry && (
             <View style={{ flexDirection: 'row', alignSelf: 'flex-start' }}>
-              <Image
-                source={{ uri: `${API_HOST}/img/flags_new/${item.flag_1}` }}
-                style={styles.flag}
-              />
+              <Image source={{ uri: `${API_HOST}${item.flag_1}` }} style={styles.flag} />
               {item.flag_2 && (
                 <Image
-                  source={{ uri: `${API_HOST}/img/flags_new/${item.flag_2}` }}
+                  source={{ uri: `${API_HOST}${item.flag_2}` }}
                   style={[styles.flag, { marginLeft: -5 }]}
                 />
               )}

src/screens/InAppScreens/TravelsScreen/Components/MyRegionsItems/RegionItem.tsx

@@ -39,13 +39,10 @@ export const RegionItem = React.memo(
             <Text style={styles.regionItemSubname}>{subname}</Text>
           </View>
           <View style={{ flexDirection: 'row', alignSelf: 'flex-start' }}>
-            <Image
-              source={{ uri: `${API_HOST}/img/flags_new/${dare ? item.flag1 : item.flag}` }}
-              style={styles.flag}
-            />
+            <Image source={{ uri: `${API_HOST}${item.flag1}` }} style={styles.flag} />
             {item.flag2 && (
               <Image
-                source={{ uri: `${API_HOST}/img/flags_new/${item.flag2}` }}
+                source={{ uri: `${API_HOST}${item.flag2}` }}
                 style={[styles.flag, { marginLeft: -5 }]}
               />
             )}

src/screens/InAppScreens/TravelsScreen/RegionsScreen/index.tsx

@@ -17,6 +17,7 @@ import { styles } from './styles';
 import {
   useGetMegaregionsQuery,
   useGetRegionQeQuery,
+  useGetRegionsQuery,
   usePostSetTCCRegionMutation
 } from '@api/myRegions';
 import { qualityOptions } from '../utils/constants';
@@ -33,12 +34,22 @@ const RegionsScreen = () => {
   const { data: countriesList } = useGetListCountriesQuery(true);
   const [megaSelectorVisible, setMegaSelectorVisible] = useState(false);
   const [countrySelectorVisible, setCountrySelectorVisible] = useState(false);
-  const [selectedMega, setSelectedMega] = useState<{ name: string; id: number }>({
-    id: 1,
-    name: 'SOUTHERN EUROPE'
+  // const [selectedMega, setSelectedMega] = useState<{ name: string; id: number }>({
+  //   id: 1,
+  //   name: 'SOUTHERN EUROPE'
+  // });
+  const [selectedMega, setSelectedMega] = useState<{ name: string; id: number | 'all' }>({
+    id: 'all',
+    name: 'ALL MEGAREGIONS'
   });
   const [selectedCountry, setSelectedCountry] = useState<{ name: string; id: number } | null>(null);
-  const { data: regionsQe } = useGetRegionQeQuery(
+  // const { data: regionsQe } = useGetRegionQeQuery(
+  //   selectedCountry ? undefined : selectedMega.id,
+  //   selectedCountry ? selectedCountry.id : undefined,
+  //   String(token),
+  //   true
+  // );
+  const { data: regionsQe } = useGetRegionsQuery(
     selectedCountry ? undefined : selectedMega.id,
     selectedCountry ? selectedCountry.id : undefined,
     String(token),
@@ -121,7 +132,7 @@ const RegionsScreen = () => {
 
   const handleCountrySelect = (country: { name: string; id: number }) => {
     setSelectedCountry(country);
-    setSelectedMega({ id: -1, name: '-' });
+    setSelectedMega({ id: 'all', name: 'ALL MEGAREGIONS' });
     setCountrySelectorVisible(false);
   };
 
@@ -133,8 +144,20 @@ const RegionsScreen = () => {
 
   useEffect(() => {
     if (regionsQe && regionsQe.result === 'OK') {
-      setNmRegions(regionsQe.data.out_regs);
-      setTccRegions(regionsQe.data.out_tcc);
+      setNmRegions(
+        regionsQe.data.regions.map((region) => ({
+          id: region.id,
+          flag_1: region.flag1,
+          flag_2: region.flag2,
+          region_name: region.name,
+          essential: 0,
+          quality: region.best_visit_quality || null,
+          year: region.first_visited_in_year || null,
+          last: region.last_visited_in_year || null,
+          visits: region.no_of_visits || 0
+        }))
+      );
+      setTccRegions(regionsQe.data.tcc);
     }
   }, [regionsQe]);
 
@@ -184,7 +207,7 @@ const RegionsScreen = () => {
 
   useEffect(() => {
     if (megaregions && megaregions.result === 'OK') {
-      setSelectedMega(megaregions.data[1]);
+      setSelectedMega({ id: 'all', name: 'ALL MEGAREGIONS' });
     }
   }, [megaregions]);
 
@@ -242,7 +265,7 @@ const RegionsScreen = () => {
       </TouchableOpacity>
 
       <TouchableOpacity style={styles.megaSelector} onPress={() => setCountrySelectorVisible(true)}>
-        <Text style={styles.megaButtonText}>{selectedCountry?.name || '-'}</Text>
+        <Text style={styles.megaButtonText}>{selectedCountry?.name || 'ALL COUNTRIES'}</Text>
         <ChevronIcon width={18} height={18} />
       </TouchableOpacity>
 
@@ -325,14 +348,25 @@ const RegionsScreen = () => {
         isVisible={megaSelectorVisible}
         onClose={() => setMegaSelectorVisible(false)}
         onSelect={handleMegaSelect}
-        data={megaregions?.data ?? []}
+        data={
+          megaregions?.data
+            ? [{ id: 'all' as never, name: 'ALL MEGAREGIONS' }, ...megaregions?.data]
+            : []
+        }
       />
 
       <MegaregionsModal
         isVisible={countrySelectorVisible}
         onClose={() => setCountrySelectorVisible(false)}
         onSelect={handleCountrySelect}
-        data={countriesList?.data ?? []}
+        data={
+          countriesList?.data
+            ? [
+                { id: 'all' as never, name: 'ALL COUNTRIES', flag: null as never },
+                ...countriesList?.data
+              ]
+            : []
+        }
         isCountry={true}
       />
 

src/screens/InAppScreens/TravelsScreen/utils/types.ts

@@ -106,12 +106,11 @@ export interface NmRegion {
 }
 
 export interface TCCRegion {
+  flag1: string;
+  flag2: string | null;
   id: number;
-  flag: string;
-  flag2: string;
   name: string;
-  visited: number;
-  flag1?: string;
+  visited: 0 | 1;
 }
 
 export interface DbRegion {

src/types/api.ts

@@ -215,7 +215,9 @@ export enum API_ENDPOINT {
   SHARED_TRIP_ADD_PARTICIPANT = 'add-participant',
   SET_FULL = 'set-event-full',
   GET_COUNTRIES_FOR_LOCATION_DATA = 'get-list-of-countries-for-location-data',
-  GET_USERS_LOCATION_FILTERED = 'get-users-location-filtered'
+  GET_USERS_LOCATION_FILTERED = 'get-users-location-filtered',
+  GET_VISITS_TO_REGION = 'get-visits-to-region',
+  ADD_VISIT = 'add-visit'
 }
 
 export enum API {
@@ -403,7 +405,10 @@ export enum API {
   SHARED_TRIP_ADD_PARTICIPANT = `${API_ROUTE.EVENTS}/${API_ENDPOINT.SHARED_TRIP_ADD_PARTICIPANT}`,
   SET_FULL = `${API_ROUTE.EVENTS}/${API_ENDPOINT.SET_FULL}`,
   GET_COUNTRIES_FOR_LOCATION_DATA = `${API_ROUTE.LOCATION}/${API_ENDPOINT.GET_COUNTRIES_FOR_LOCATION_DATA}`,
-  GET_USERS_LOCATION_FILTERED = `${API_ROUTE.LOCATION}/${API_ENDPOINT.GET_USERS_LOCATION_FILTERED}`
+  GET_USERS_LOCATION_FILTERED = `${API_ROUTE.LOCATION}/${API_ENDPOINT.GET_USERS_LOCATION_FILTERED}`,
+  GET_VISITS_TO_REGION = `${API_ROUTE.QUICK_ENTER}/${API_ENDPOINT.GET_VISITS_TO_REGION}`,
+  GET_REGIONS = `${API_ROUTE.QUICK_ENTER}/${API_ENDPOINT.GET_REGIONS}`,
+  ADD_VISIT = `${API_ROUTE.QUICK_ENTER}/${API_ENDPOINT.ADD_VISIT}`
 }
 
 export type BaseAxiosError = AxiosError;