location sharing + search fixes

src/components/MapButton/index.tsx

@@ -8,9 +8,16 @@ interface MapButtonProps {
   icon: React.ComponentType<SvgProps> | null;
   text: string;
   active?: boolean;
+  children?: React.ReactNode;
 }
 
-const MapButton: React.FC<MapButtonProps> = ({ onPress, icon: Icon, text, active = false }) => {
+const MapButton: React.FC<MapButtonProps> = ({
+  onPress,
+  icon: Icon,
+  text,
+  active = false,
+  children
+}) => {
   const isSmallScreen = Dimensions.get('window').width < 383;
   const iconSize = isSmallScreen ? 14 : 16;
 
@@ -36,7 +43,9 @@ const MapButton: React.FC<MapButtonProps> = ({ onPress, icon: Icon, text, active
       }}
       onPress={onPress}
     >
-      {Icon && <Icon fill={active ? Colors.WHITE : Colors.DARK_BLUE} width={iconSize} height={iconSize} />}
+      {Icon && (
+        <Icon fill={active ? Colors.WHITE : Colors.DARK_BLUE} width={iconSize} height={iconSize} />
+      )}
       <Text
         style={{
           color: active ? Colors.WHITE : Colors.DARK_BLUE,
@@ -46,6 +55,7 @@ const MapButton: React.FC<MapButtonProps> = ({ onPress, icon: Icon, text, active
       >
         {text}
       </Text>
+      {children}
     </TouchableOpacity>
   );
 };

src/components/MessagesDot/index.tsx

@@ -5,11 +5,13 @@ import { Colors } from 'src/theme';
 const MessagesDot = ({
   messagesCount,
   right = 0,
-  top = -2
+  top = -2,
+  fullNumber = false
 }: {
   messagesCount: number;
   right?: DimensionValue;
   top?: DimensionValue;
+  fullNumber?: boolean;
 }) => {
   return (
     <View
@@ -36,7 +38,7 @@ const MessagesDot = ({
       >
         {messagesCount > 0 && (
           <Text style={{ fontFamily: 'montserrat-700', fontSize: 10, color: Colors.WHITE }}>
-            {messagesCount > 99 ? '99+' : messagesCount}
+            {messagesCount > 99 && !fullNumber ? '99+' : messagesCount}
           </Text>
         )}
       </View>

src/modules/api/location/location-api.ts

@@ -15,6 +15,10 @@ export interface PostIsFeatureActiveReturn extends ResponseType {
   active: boolean;
 }
 
+export interface PostGetUserCountReturn extends ResponseType {
+  count: number;
+}
+
 export const locationApi = {
   getSettings: (token: string) =>
     request.postForm<PostGetSettingsReturn>(API.GET_LOCATION_SETTINGS, { token }),
@@ -25,5 +29,7 @@ export const locationApi = {
   getUsersLocation: (token: string) =>
     request.postForm<PostGetUsersLocationReturn>(API.GET_USERS_LOCATION, { token }),
   isFeatureActive: (token: string) =>
-    request.postForm<PostIsFeatureActiveReturn>(API.IS_FEATURE_ACTIVE, { token })
+    request.postForm<PostIsFeatureActiveReturn>(API.IS_FEATURE_ACTIVE, { token }),
+  getUsersCount: (token: string) =>
+    request.postForm<PostGetUserCountReturn>(API.GET_USERS_COUNT, { token })
 };

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

@@ -3,5 +3,6 @@ export const locationQueryKeys = {
   setSettings: () => ['location', 'setSettings'],
   updateLocation: () => ['location', 'updateLocation'],
   getUsersLocation: (token: string) => ['location', 'getUsersLocation', token],
-  isFeatureActive: (token: string) => ['location', 'isFeatureActive', token]
+  isFeatureActive: (token: string) => ['location', 'isFeatureActive', token],
+  getUsersCount: (token: string) => ['location', 'getUsersCount', token]
 };

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

@@ -3,3 +3,4 @@ export * from './use-post-set-settings';
 export * from './use-post-update-location';
 export * from './use-post-get-users-location';
 export * from './use-post-is-feature-active';
+export * from './use-post-get-users-on-map-count';

src/modules/api/location/queries/use-post-get-users-on-map-count.tsx

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { locationQueryKeys } from '../location-query-keys';
+import { locationApi, type PostGetUserCountReturn } from '../location-api';
+
+import type { BaseAxiosError } from '../../../../types';
+
+export const usePostGetUsersCountQuery = (token: string, enabled: boolean) => {
+  return useQuery<PostGetUserCountReturn, BaseAxiosError>({
+    queryKey: locationQueryKeys.getUsersCount(token),
+    queryFn: async () => {
+      const response = await locationApi.getUsersCount(token);
+      return response.data;
+    },
+    enabled
+  });
+};

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

@@ -47,7 +47,8 @@ const FilterModal = ({
   isPublicView,
   isLogged = true,
   showNomads,
-  setShowNomads
+  setShowNomads,
+  usersOnMapCount
 }: {
   isFilterVisible: string | null;
   setIsFilterVisible: (filterType: string | null) => void;
@@ -62,6 +63,7 @@ const FilterModal = ({
   isLogged: boolean;
   showNomads?: boolean;
   setShowNomads?: (showNomads: boolean) => void;
+  usersOnMapCount?: number | null;
 }) => {
   const token = storage.get('token', StoreType.STRING) as string;
   const { data: locationSettings } = usePostGetSettingsQuery(token, isLogged && !isPublicView);
@@ -467,15 +469,7 @@ const FilterModal = ({
     return (
       <View style={[styles.sceneContainer, { flex: 0 }]}>
         <View style={styles.textContainer}>
-          <Text style={styles.textWithIcon}>
-            Your location is shared each time you launch the app and whenever you press the{'  '}
-            <View style={styles.icon}>
-              <LocationIcon width={12} height={12} />
-            </View>
-            {'  '}
-            button.
-          </Text>
-          <Text style={styles.text}>Your location is shared with ~250m radius precision.</Text>
+          <Text style={styles.text}>The location is shared with 1 km radius precision.</Text>
         </View>
         <TouchableOpacity
           style={[
@@ -495,7 +489,7 @@ const FilterModal = ({
               height={20}
             />
             <Text style={[styles.buttonLabel, !isSharing ? { color: Colors.LIGHT_GRAY } : {}]}>
-              Show nomads
+              Show Nomads - {usersOnMapCount} online
             </Text>
           </View>
           <View>
@@ -522,7 +516,7 @@ const FilterModal = ({
         >
           <View style={styles.alignStyle}>
             <SharingIcon fill={Colors.DARK_BLUE} width={20} height={20} />
-            <Text style={styles.buttonLabel}>Share location</Text>
+            <Text style={styles.buttonLabel}>Share location to see others</Text>
           </View>
           <View>
             <Switch

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { View, Text, TouchableOpacity, Image } from 'react-native';
 import { TabView, TabBar } from 'react-native-tab-view';
 import ReactModal from 'react-native-modal';
@@ -11,6 +11,7 @@ import { NAVIGATION_PAGES } from 'src/types';
 import { API_HOST } from 'src/constants';
 import { Loading, WarningModal } from 'src/components';
 import { StoreType, storage } from 'src/storage';
+import MessagesDot from 'src/components/MessagesDot';
 
 const SearchModal = ({
   searchVisible,
@@ -41,6 +42,20 @@ const SearchModal = ({
   } | null>(null);
   const [warningVisible, setWarningVisible] = useState(false);
 
+  useEffect(() => {
+    if (!searchData) return;
+
+    if (searchData['users'] && searchData['users'].length > 0) {
+      setIndex(0);
+    } else if (searchData['regions'] && searchData['regions'].length > 0) {
+      setIndex(1);
+    } else if (searchData['dare'] && searchData['dare'].length > 0) {
+      setIndex(2);
+    } else {
+      setIndex(0);
+    }
+  }, [searchData]);
+
   const renderItem = ({ item }: { item: any }) => {
     const [name, ...rest] = item.name?.split(/ – | - /);
     const subname = rest?.join(' - ');
@@ -186,6 +201,11 @@ const SearchModal = ({
                   {route.title}
                 </Text>
               )}
+              renderBadge={({ route }) =>
+                searchData?.[route.key] && searchData?.[route.key].length > 0 ? (
+                  <MessagesDot messagesCount={searchData?.[route.key].length} top={4} />
+                ) : null
+              }
             />
           )}
         />

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

@@ -55,7 +55,7 @@ export const styles = StyleSheet.create({
   modalContainer: {
     backgroundColor: 'white',
     borderRadius: 15,
-    paddingHorizontal: 16,
+    paddingHorizontal: '4%',
     gap: 12,
     paddingVertical: 16,
     height: '80%'

src/screens/InAppScreens/MapScreen/index.tsx

@@ -68,8 +68,8 @@ import { useGetIconsQuery, usePostSetToggleItem } from '@api/series';
 import MarkerItem from './MarkerItem';
 import {
   usePostGetSettingsQuery,
+  usePostGetUsersCountQuery,
   usePostGetUsersLocationQuery,
-  usePostIsFeatureActiveQuery,
   usePostUpdateLocationMutation
 } from '@api/location';
 import UserItem from './UserItem';
@@ -83,6 +83,7 @@ import MapButton from 'src/components/MapButton';
 import { useAvatarStore } from 'src/stores/avatarVersionStore';
 import _ from 'lodash';
 import ScaleBar from 'src/components/ScaleBar';
+import MessagesDot from 'src/components/MessagesDot';
 
 const defaultUserAvatar = require('assets/icon-user-share-location-solid.png');
 const logo = require('assets/logo-ua.png');
@@ -271,7 +272,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
   const netInfo = useConnection();
   const { avatarVersion } = useAvatarStore();
 
-  const { data: isFeatureActive } = usePostIsFeatureActiveQuery(token, !!token && isConnected);
+  const { data: usersOnMapCount } = usePostGetUsersCountQuery(token, !!token && isConnected);
   const { data: regionsList } = useGetListRegionsQuery(isConnected);
   const { data: countriesList } = useGetListCountriesQuery(isConnected);
   const { data: dareList } = useGetListDareQuery(isConnected);
@@ -1644,6 +1645,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
               showsHorizontalScrollIndicator={false}
               contentContainerStyle={{
                 paddingHorizontal: 12,
+                paddingTop: 6,
                 gap: isSmallScreen ? 8 : 12,
                 flexDirection: 'row'
               }}
@@ -1666,7 +1668,6 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
                 text="Series"
                 active={seriesFilter.visible}
               />
-              {/* {isFeatureActive && isFeatureActive.active ? ( */}
               {token ? (
                 <MapButton
                   onPress={() => {
@@ -1676,7 +1677,16 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
                   icon={NomadsIcon}
                   text="Nomads"
                   active={showNomads}
-                />
+                >
+                  {usersOnMapCount && usersOnMapCount?.count > 0 ? (
+                    <MessagesDot
+                      messagesCount={usersOnMapCount.count}
+                      fullNumber={true}
+                      right={-10}
+                      top={-8}
+                    />
+                  ) : null}
+                </MapButton>
               ) : null}
             </ScrollView>
           </View>
@@ -1734,6 +1744,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
         showNomads={showNomads}
         isPublicView={false}
         isLogged={token ? true : false}
+        usersOnMapCount={token && usersOnMapCount?.count ? usersOnMapCount.count : null}
       />
       <EditModal
         isVisible={isEditSlowModalVisible}

src/screens/LocationSharingScreen/index.tsx

@@ -165,7 +165,7 @@ const LocationSharingScreen = ({ navigation }: { navigation: any }) => {
           {'  '}
           button.
         </Text>
-        <Text style={textStyles.text}>Your location is shared with ~250m radius precision.</Text>
+        <Text style={textStyles.text}>The location is shared with 1 km radius precision.</Text>
       </View>
       <TouchableOpacity
         style={[
@@ -179,7 +179,7 @@ const LocationSharingScreen = ({ navigation }: { navigation: any }) => {
       >
         <View style={styles.alignStyle}>
           <UsersIcon fill={Colors.DARK_BLUE} width={20} height={20} />
-          <Text style={styles.buttonLabel}>Share with everyone</Text>
+          <Text style={styles.buttonLabel}>Share location to see others</Text>
         </View>
         <View>
           <Switch

src/types/api.ts

@@ -160,6 +160,7 @@ export enum API_ENDPOINT {
   IS_FEATURE_ACTIVE = 'is-feature-active',
   AUTHENTICATE = 'authenticate',
   REPORT_CONVERSATION = 'report-conversation',
+  GET_USERS_COUNT = 'get-users-on-map-count',
 }
 
 export enum API {
@@ -293,6 +294,7 @@ export enum API {
   IS_FEATURE_ACTIVE = `${API_ROUTE.LOCATION}/${API_ENDPOINT.IS_FEATURE_ACTIVE}`,
   AUTHENTICATE = `${API_ROUTE.USER}/${API_ENDPOINT.AUTHENTICATE}`,
   REPORT_CONVERSATION = `${API_ROUTE.CHAT}/${API_ENDPOINT.REPORT_CONVERSATION}`,
+  GET_USERS_COUNT = `${API_ROUTE.LOCATION}/${API_ENDPOINT.GET_USERS_COUNT}`,
 }
 
 export type BaseAxiosError = AxiosError;