|
|
@@ -1,4 +1,12 @@
|
|
|
-import React, { useEffect, useState } from 'react';
|
|
|
+import React, {
|
|
|
+ useCallback,
|
|
|
+ useEffect,
|
|
|
+ useMemo,
|
|
|
+ useRef,
|
|
|
+ useState,
|
|
|
+ forwardRef,
|
|
|
+ useImperativeHandle
|
|
|
+} from 'react';
|
|
|
import {
|
|
|
View,
|
|
|
Text,
|
|
|
@@ -7,13 +15,14 @@ import {
|
|
|
Switch,
|
|
|
Dimensions,
|
|
|
Platform,
|
|
|
- Linking
|
|
|
+ Linking,
|
|
|
+ ScrollView
|
|
|
} from 'react-native';
|
|
|
-import ReactModal from 'react-native-modal';
|
|
|
+import ActionSheet, { ActionSheetRef } from 'react-native-actions-sheet';
|
|
|
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
|
import { Colors } from 'src/theme';
|
|
|
import { ModalStyles } from '../../TravellersScreen/Components/styles';
|
|
|
-import { Dropdown, MultiSelect } from 'react-native-searchable-dropdown-kj';
|
|
|
-import { Button, WarningModal } from 'src/components';
|
|
|
+import { Button, WarningModal, SelectSheet } from 'src/components';
|
|
|
import { ButtonVariants } from 'src/types/components';
|
|
|
import { styles } from './styles';
|
|
|
import { usePostGetMapYearsQuery } from '@api/user';
|
|
|
@@ -46,989 +55,993 @@ import InfoIcon from 'assets/icons/info-solid.svg';
|
|
|
import Tooltip from 'react-native-walkthrough-tooltip';
|
|
|
import FriendsIcon from 'assets/icons/friend.svg';
|
|
|
|
|
|
-const FilterModal = ({
|
|
|
- isFilterVisible,
|
|
|
- setIsFilterVisible,
|
|
|
- tilesTypes,
|
|
|
- tilesType,
|
|
|
- setTilesType,
|
|
|
- setType,
|
|
|
- userId,
|
|
|
- setRegionsFilter,
|
|
|
- setSeriesFilter,
|
|
|
- setNomadsFilter,
|
|
|
- isPublicView,
|
|
|
- isLogged = true,
|
|
|
- showNomads,
|
|
|
- setShowNomads,
|
|
|
- usersOnMapCount,
|
|
|
- friendsOnTheMapCount,
|
|
|
- isConnected = true,
|
|
|
- isPremium
|
|
|
-}: {
|
|
|
- isFilterVisible: string | null;
|
|
|
- setIsFilterVisible: (filterType: string | null) => void;
|
|
|
- tilesTypes: any[];
|
|
|
- tilesType: any;
|
|
|
- setTilesType: (item: any) => void;
|
|
|
- setType: (type: any) => void;
|
|
|
- userId: number;
|
|
|
- setRegionsFilter: (data: { visitedLabel: 'in' | 'by'; year: number }) => void;
|
|
|
- setSeriesFilter?: (filter: any) => void;
|
|
|
- setNomadsFilter?: (filter: any) => void;
|
|
|
- isPublicView: boolean;
|
|
|
- isLogged: boolean;
|
|
|
- showNomads?: boolean;
|
|
|
- setShowNomads?: (showNomads: boolean) => void;
|
|
|
- usersOnMapCount?: number | null;
|
|
|
- friendsOnTheMapCount?: number | null;
|
|
|
- isConnected?: boolean;
|
|
|
- isPremium?: boolean;
|
|
|
-}) => {
|
|
|
- const token = storage.get('token', StoreType.STRING) as string;
|
|
|
- const { data: locationSettings } = usePostGetSettingsQuery(
|
|
|
- token,
|
|
|
- isLogged && !isPublicView && isConnected
|
|
|
- );
|
|
|
- const { data: countriesData } = usePostGetListOfCountriesForLocationDataQuery(
|
|
|
- token,
|
|
|
- isLogged && !isPublicView && isConnected
|
|
|
- );
|
|
|
- const { mutateAsync: setSettings } = usePostSetSettingsMutation();
|
|
|
- const { mutateAsync: updateLocation } = usePostUpdateLocationMutation();
|
|
|
- const [selectedYear, setSelectedYear] = useState<{ label: string; value: number } | null>(null);
|
|
|
- const [allYears, setAllYears] = useState<{ label: string; value: number }[]>([]);
|
|
|
- const [selectedVisible, setSelectedVisible] = useState({ label: 'visited by', value: 0 });
|
|
|
- const visibleTypes = [
|
|
|
- { label: 'visited by', value: 0 },
|
|
|
- { label: 'visited in', value: 1 }
|
|
|
- ];
|
|
|
- const { data } = usePostGetMapYearsQuery(
|
|
|
- token as string,
|
|
|
- userId,
|
|
|
- isLogged && isConnected ? true : false
|
|
|
- );
|
|
|
- const { data: seriesList } = useGetListQuery(isConnected ? true : false);
|
|
|
- const [series, setSeries] = useState<{ label: string; value: number }[]>([]);
|
|
|
- const [selectedSeries, setSelectedSeries] = useState<number[]>([]);
|
|
|
- const [seriesVisible, setSeriesVisible] = useState(true);
|
|
|
- const [selectedSeriesFilter, setSelectedSeriesFilter] = useState(-1);
|
|
|
- const [selectedCountries, setSelectedCountries] = useState<any[]>([]);
|
|
|
- const [friendsVisible, setFriendsVisible] = useState(false);
|
|
|
- const [trustedVisible, setTrustedVisible] = useState(false);
|
|
|
- const savedFilterSettings = !isPublicView
|
|
|
- ? (storage.get('filterSettings', StoreType.STRING) as string)
|
|
|
- : null;
|
|
|
-
|
|
|
- const [isSharing, setIsSharing] = useState(false);
|
|
|
- const [askLocationVisible, setAskLocationVisible] = useState<boolean>(false);
|
|
|
- const [openSettingsVisible, setOpenSettingsVisible] = useState<boolean>(false);
|
|
|
- const [openSettingsBackgroundVisible, setOpenSettingsBackgroundVisible] =
|
|
|
- useState<boolean>(false);
|
|
|
- const [countrySelectorVisible, setCountrySelectorVisible] = useState(false);
|
|
|
- const [countriesForSelector, setCountriesForSelector] = useState<
|
|
|
- { country: number; name: string; count: number; flag: string | null }[]
|
|
|
- >([]);
|
|
|
- const [premiumModalVisible, setPremiumModalVisible] = useState(false);
|
|
|
- const [toolTipVisible, setToolTipVisible] = useState<boolean>(false);
|
|
|
- const [defaultYear, setDefaultYear] = useState({
|
|
|
- label: moment().year().toString(),
|
|
|
- value: moment().year()
|
|
|
- });
|
|
|
-
|
|
|
- useEffect(() => {
|
|
|
- const syncSettings = async () => {
|
|
|
- if (locationSettings) {
|
|
|
- let { status } = await Location.getForegroundPermissionsAsync();
|
|
|
- const isServicesEnabled = await Location.hasServicesEnabledAsync();
|
|
|
-
|
|
|
- setIsSharing(locationSettings.sharing !== 0 && status === 'granted' && isServicesEnabled);
|
|
|
+export interface FilterModalRef {
|
|
|
+ openFilter: (type: string) => void;
|
|
|
+ closeFilter: () => void;
|
|
|
+}
|
|
|
+
|
|
|
+const FilterModal = forwardRef<
|
|
|
+ FilterModalRef,
|
|
|
+ {
|
|
|
+ tilesTypes: any[];
|
|
|
+ tilesType: any;
|
|
|
+ setTilesType: (item: any) => void;
|
|
|
+ setType: (type: any) => void;
|
|
|
+ userId: number;
|
|
|
+ setRegionsFilter: (data: { visitedLabel: 'in' | 'by'; year: number }) => void;
|
|
|
+ setSeriesFilter?: (filter: any) => void;
|
|
|
+ setNomadsFilter?: (filter: any) => void;
|
|
|
+ isPublicView: boolean;
|
|
|
+ isLogged: boolean;
|
|
|
+ showNomads?: boolean;
|
|
|
+ setShowNomads?: (showNomads: boolean) => void;
|
|
|
+ usersOnMapCount?: number | null;
|
|
|
+ friendsOnTheMapCount?: number | null;
|
|
|
+ isConnected?: boolean;
|
|
|
+ isPremium?: boolean;
|
|
|
+ }
|
|
|
+>(
|
|
|
+ (
|
|
|
+ {
|
|
|
+ tilesTypes,
|
|
|
+ tilesType,
|
|
|
+ setTilesType,
|
|
|
+ setType,
|
|
|
+ userId,
|
|
|
+ setRegionsFilter,
|
|
|
+ setSeriesFilter,
|
|
|
+ setNomadsFilter,
|
|
|
+ isPublicView,
|
|
|
+ isLogged = true,
|
|
|
+ showNomads,
|
|
|
+ setShowNomads,
|
|
|
+ usersOnMapCount,
|
|
|
+ friendsOnTheMapCount,
|
|
|
+ isConnected = true,
|
|
|
+ isPremium
|
|
|
+ },
|
|
|
+ ref
|
|
|
+ ) => {
|
|
|
+ const [isFilterVisible, setIsFilterVisible] = useState<string | null>(null);
|
|
|
+
|
|
|
+ useImperativeHandle(ref, () => ({
|
|
|
+ openFilter: (type: string) => {
|
|
|
+ setIsFilterVisible(type);
|
|
|
+ setTimeout(() => {
|
|
|
+ bottomSheetRef.current?.show();
|
|
|
+ }, 0);
|
|
|
+ },
|
|
|
+ closeFilter: () => {
|
|
|
+ bottomSheetRef.current?.hide();
|
|
|
}
|
|
|
- };
|
|
|
+ }));
|
|
|
+
|
|
|
+ const token = storage.get('token', StoreType.STRING) as string;
|
|
|
+ const { data: locationSettings } = usePostGetSettingsQuery(
|
|
|
+ token,
|
|
|
+ isLogged && !isPublicView && isConnected
|
|
|
+ );
|
|
|
+ const { data: countriesData } = usePostGetListOfCountriesForLocationDataQuery(
|
|
|
+ token,
|
|
|
+ isLogged && !isPublicView && isConnected
|
|
|
+ );
|
|
|
+ const { mutateAsync: setSettings } = usePostSetSettingsMutation();
|
|
|
+ const { mutateAsync: updateLocation } = usePostUpdateLocationMutation();
|
|
|
+ const [selectedYear, setSelectedYear] = useState<{ label: string; value: number } | null>(null);
|
|
|
+ const [allYears, setAllYears] = useState<{ label: string; value: number }[]>([]);
|
|
|
+ const [selectedVisible, setSelectedVisible] = useState({ label: 'visited by', value: 0 });
|
|
|
+ const visibleTypes = [
|
|
|
+ { label: 'visited by', value: 0 },
|
|
|
+ { label: 'visited in', value: 1 }
|
|
|
+ ];
|
|
|
+ const { data } = usePostGetMapYearsQuery(
|
|
|
+ token as string,
|
|
|
+ userId,
|
|
|
+ isLogged && isConnected ? true : false
|
|
|
+ );
|
|
|
+ const { data: seriesList } = useGetListQuery(isConnected ? true : false);
|
|
|
+ const [series, setSeries] = useState<{ label: string; value: number }[]>([]);
|
|
|
+ const [selectedSeries, setSelectedSeries] = useState<number[]>([]);
|
|
|
+ const [seriesVisible, setSeriesVisible] = useState(true);
|
|
|
+ const [selectedSeriesFilter, setSelectedSeriesFilter] = useState(-1);
|
|
|
+ const [selectedCountries, setSelectedCountries] = useState<any[]>([]);
|
|
|
+ const [friendsVisible, setFriendsVisible] = useState(false);
|
|
|
+ const [trustedVisible, setTrustedVisible] = useState(false);
|
|
|
+ const savedFilterSettings = !isPublicView
|
|
|
+ ? (storage.get('filterSettings', StoreType.STRING) as string)
|
|
|
+ : null;
|
|
|
+
|
|
|
+ const [isSharing, setIsSharing] = useState(false);
|
|
|
+ const [askLocationVisible, setAskLocationVisible] = useState<boolean>(false);
|
|
|
+ const [openSettingsVisible, setOpenSettingsVisible] = useState<boolean>(false);
|
|
|
+ const [openSettingsBackgroundVisible, setOpenSettingsBackgroundVisible] =
|
|
|
+ useState<boolean>(false);
|
|
|
+ const [countrySelectorVisible, setCountrySelectorVisible] = useState(false);
|
|
|
+ const [countriesForSelector, setCountriesForSelector] = useState<
|
|
|
+ { country: number; name: string; count: number; flag: string | null }[]
|
|
|
+ >([]);
|
|
|
+ const [premiumModalVisible, setPremiumModalVisible] = useState(false);
|
|
|
+ const [toolTipVisible, setToolTipVisible] = useState<boolean>(false);
|
|
|
+ const [defaultYear, setDefaultYear] = useState({
|
|
|
+ label: moment().year().toString(),
|
|
|
+ value: moment().year()
|
|
|
+ });
|
|
|
+
|
|
|
+ const bottomSheetRef = useRef<ActionSheetRef>(null);
|
|
|
+ const insets = useSafeAreaInsets();
|
|
|
+ const windowHeight = Dimensions.get('window').height;
|
|
|
|
|
|
- syncSettings();
|
|
|
- }, [locationSettings]);
|
|
|
-
|
|
|
- useEffect(() => {
|
|
|
- if (countriesData && countriesData.countries) {
|
|
|
- setCountriesForSelector(countriesData.countries.filter((country: any) => country.count > 0));
|
|
|
- }
|
|
|
- }, [countriesData]);
|
|
|
-
|
|
|
- useEffect(() => {
|
|
|
- const loadFilterSettings = () => {
|
|
|
- try {
|
|
|
- if (savedFilterSettings && isFilterVisible) {
|
|
|
- const filterSettings = JSON.parse(savedFilterSettings);
|
|
|
- setTilesType(filterSettings.tilesType);
|
|
|
- setSelectedYear(filterSettings.selectedYear);
|
|
|
- setSelectedVisible(filterSettings.selectedVisible);
|
|
|
- setSelectedSeries(filterSettings.seriesFilter.groups);
|
|
|
- setSeriesVisible(filterSettings.seriesFilter.visible);
|
|
|
- setSelectedSeriesFilter(filterSettings.seriesFilter.status);
|
|
|
- setSelectedCountries(filterSettings.nomadsFilter.countries || []);
|
|
|
- setFriendsVisible(filterSettings.nomadsFilter.friends === 1);
|
|
|
- setTrustedVisible(filterSettings.nomadsFilter.trusted === 1);
|
|
|
+ useEffect(() => {
|
|
|
+ const syncSettings = async () => {
|
|
|
+ if (locationSettings) {
|
|
|
+ let { status } = await Location.getForegroundPermissionsAsync();
|
|
|
+ const isServicesEnabled = await Location.hasServicesEnabledAsync();
|
|
|
+
|
|
|
+ setIsSharing(locationSettings.sharing !== 0 && status === 'granted' && isServicesEnabled);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ syncSettings();
|
|
|
+ }, [locationSettings]);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (countriesData && countriesData.countries) {
|
|
|
+ setCountriesForSelector(
|
|
|
+ countriesData.countries.filter((country: any) => country.count > 0)
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }, [countriesData]);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ const loadFilterSettings = () => {
|
|
|
+ try {
|
|
|
+ if (savedFilterSettings && isFilterVisible) {
|
|
|
+ const filterSettings = JSON.parse(savedFilterSettings);
|
|
|
+ setTilesType(filterSettings.tilesType);
|
|
|
+ setSelectedYear(filterSettings.selectedYear);
|
|
|
+ setSelectedVisible(filterSettings.selectedVisible);
|
|
|
+ setSelectedSeries(filterSettings.seriesFilter.groups);
|
|
|
+ setSeriesVisible(filterSettings.seriesFilter.visible);
|
|
|
+ setSelectedSeriesFilter(filterSettings.seriesFilter.status);
|
|
|
+ setSelectedCountries(filterSettings.nomadsFilter.countries || []);
|
|
|
+ setFriendsVisible(filterSettings.nomadsFilter.friends === 1);
|
|
|
+ setTrustedVisible(filterSettings.nomadsFilter.trusted === 1);
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Failed to load filter settings', error);
|
|
|
}
|
|
|
- } catch (error) {
|
|
|
- console.error('Failed to load filter settings', error);
|
|
|
+ };
|
|
|
+
|
|
|
+ if (!isPublicView && isLogged) {
|
|
|
+ loadFilterSettings();
|
|
|
}
|
|
|
+ }, [savedFilterSettings, isFilterVisible]);
|
|
|
+
|
|
|
+ const handleCountrySelect = (
|
|
|
+ selectedItems: { country: number; name: string; count: number; flag: string | null }[]
|
|
|
+ ) => {
|
|
|
+ if (selectedItems.length > 0) {
|
|
|
+ setShowNomads && setShowNomads(false);
|
|
|
+ storage.set('showNomads', false);
|
|
|
+ }
|
|
|
+ setSelectedCountries(selectedItems);
|
|
|
+ setCountrySelectorVisible(false);
|
|
|
};
|
|
|
|
|
|
- if (!isPublicView && isLogged) {
|
|
|
- loadFilterSettings();
|
|
|
- }
|
|
|
- }, [savedFilterSettings, isFilterVisible]);
|
|
|
+ const saveFilterSettings = async () => {
|
|
|
+ if (isLogged && !isPublicView) {
|
|
|
+ try {
|
|
|
+ const filterSettings = {
|
|
|
+ type:
|
|
|
+ tilesType.value === 2
|
|
|
+ ? 'dare'
|
|
|
+ : tilesType.value === 1
|
|
|
+ ? 'countries'
|
|
|
+ : tilesType.value === -1
|
|
|
+ ? 'blank'
|
|
|
+ : 'regions',
|
|
|
+ tilesType,
|
|
|
+ selectedYear,
|
|
|
+ selectedVisible,
|
|
|
+ seriesFilter: {
|
|
|
+ visible: seriesVisible,
|
|
|
+ groups: selectedSeries,
|
|
|
+ applied: true,
|
|
|
+ status: selectedSeriesFilter
|
|
|
+ },
|
|
|
+ nomadsFilter: {
|
|
|
+ friends: friendsVisible ? 1 : 0,
|
|
|
+ trusted: trustedVisible ? 1 : 0,
|
|
|
+ countries: selectedCountries
|
|
|
+ },
|
|
|
+ showNomads: showNomads
|
|
|
+ };
|
|
|
+ storage.set('filterSettings', JSON.stringify(filterSettings));
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Failed to save filter settings', error);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- const handleCountrySelect = (
|
|
|
- selectedItems: { country: number; name: string; count: number; flag: string | null }[]
|
|
|
- ) => {
|
|
|
- if (selectedItems.length > 0) {
|
|
|
- setShowNomads && setShowNomads(false);
|
|
|
- storage.set('showNomads', false);
|
|
|
- }
|
|
|
- setSelectedCountries(selectedItems);
|
|
|
- setCountrySelectorVisible(false);
|
|
|
- };
|
|
|
-
|
|
|
- const saveFilterSettings = async () => {
|
|
|
- if (isLogged && !isPublicView) {
|
|
|
- try {
|
|
|
- const filterSettings = {
|
|
|
- type:
|
|
|
- tilesType.value === 2
|
|
|
- ? 'dare'
|
|
|
- : tilesType.value === 1
|
|
|
- ? 'countries'
|
|
|
- : tilesType.value === -1
|
|
|
- ? 'blank'
|
|
|
- : 'regions',
|
|
|
- tilesType,
|
|
|
- selectedYear,
|
|
|
- selectedVisible,
|
|
|
- seriesFilter: {
|
|
|
- visible: seriesVisible,
|
|
|
- groups: selectedSeries,
|
|
|
- applied: true,
|
|
|
- status: selectedSeriesFilter
|
|
|
- },
|
|
|
- nomadsFilter: {
|
|
|
- friends: friendsVisible ? 1 : 0,
|
|
|
- trusted: trustedVisible ? 1 : 0,
|
|
|
- countries: selectedCountries
|
|
|
- },
|
|
|
- showNomads: showNomads
|
|
|
- };
|
|
|
- storage.set('filterSettings', JSON.stringify(filterSettings));
|
|
|
- } catch (error) {
|
|
|
- console.error('Failed to save filter settings', error);
|
|
|
+ useEffect(() => {
|
|
|
+ if (data && data.data && data.data.map_years) {
|
|
|
+ const years = data.data.map_years.filter((year) => year > 1900);
|
|
|
+ const formattedYears = years
|
|
|
+ .map((year) => ({ label: year.toString(), value: year }))
|
|
|
+ .reverse();
|
|
|
+ setAllYears(formattedYears);
|
|
|
+ formattedYears.length && !savedFilterSettings && setSelectedYear(formattedYears[0]);
|
|
|
+ formattedYears.length && setDefaultYear(formattedYears[0]);
|
|
|
}
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- useEffect(() => {
|
|
|
- if (data && data.data && data.data.map_years) {
|
|
|
- const years = data.data.map_years.filter((year) => year > 1900);
|
|
|
- const formattedYears = years
|
|
|
- .map((year) => ({ label: year.toString(), value: year }))
|
|
|
- .reverse();
|
|
|
- setAllYears(formattedYears);
|
|
|
- formattedYears.length && !savedFilterSettings && setSelectedYear(formattedYears[0]);
|
|
|
- formattedYears.length && setDefaultYear(formattedYears[0]);
|
|
|
- }
|
|
|
- }, [data, savedFilterSettings]);
|
|
|
-
|
|
|
- useEffect(() => {
|
|
|
- if (seriesList?.data) {
|
|
|
- setSeries(
|
|
|
- seriesList.data.reduce(
|
|
|
- (acc, item) => {
|
|
|
- if (item.id < 0) {
|
|
|
- const alreadyExists = acc.some((i) => i.value === -1);
|
|
|
- if (alreadyExists) {
|
|
|
+ }, [data, savedFilterSettings]);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (seriesList?.data) {
|
|
|
+ setSeries(
|
|
|
+ seriesList.data.reduce(
|
|
|
+ (acc, item) => {
|
|
|
+ if (item.id < 0) {
|
|
|
+ const alreadyExists = acc.some((i) => i.value === -1);
|
|
|
+ if (alreadyExists) {
|
|
|
+ return acc;
|
|
|
+ }
|
|
|
+
|
|
|
+ acc.push({
|
|
|
+ label: 'Top of the tops',
|
|
|
+ value: -1,
|
|
|
+ icon: item.icon
|
|
|
+ });
|
|
|
+
|
|
|
return acc;
|
|
|
}
|
|
|
|
|
|
acc.push({
|
|
|
- label: 'Top of the tops',
|
|
|
- value: -1,
|
|
|
+ label: item.name,
|
|
|
+ value: item.id,
|
|
|
icon: item.icon
|
|
|
});
|
|
|
|
|
|
return acc;
|
|
|
- }
|
|
|
+ },
|
|
|
+ [] as { label: string; value: number; icon: string }[]
|
|
|
+ )
|
|
|
+ );
|
|
|
+ !savedFilterSettings && setSelectedSeries(seriesList.data.map((item) => item.id));
|
|
|
+ }
|
|
|
+ }, [seriesList]);
|
|
|
|
|
|
- acc.push({
|
|
|
- label: item.name,
|
|
|
- value: item.id,
|
|
|
- icon: item.icon
|
|
|
- });
|
|
|
+ useEffect(() => {
|
|
|
+ if (isFilterVisible && isFilterVisible === 'series') {
|
|
|
+ setSeriesFilter &&
|
|
|
+ setSeriesFilter({
|
|
|
+ visible: seriesVisible,
|
|
|
+ groups: selectedSeries,
|
|
|
+ applied: true,
|
|
|
+ status: selectedSeriesFilter
|
|
|
+ });
|
|
|
+ saveFilterSettings();
|
|
|
+ }
|
|
|
+ }, [selectedSeries, seriesVisible, selectedSeriesFilter]);
|
|
|
|
|
|
- return acc;
|
|
|
- },
|
|
|
- [] as { label: string; value: number; icon: string }[]
|
|
|
- )
|
|
|
- );
|
|
|
- !savedFilterSettings && setSelectedSeries(seriesList.data.map((item) => item.id));
|
|
|
- }
|
|
|
- }, [seriesList]);
|
|
|
-
|
|
|
- useEffect(() => {
|
|
|
- if (isFilterVisible && isFilterVisible === 'series') {
|
|
|
- setSeriesFilter &&
|
|
|
- setSeriesFilter({
|
|
|
- visible: seriesVisible,
|
|
|
- groups: selectedSeries,
|
|
|
- applied: true,
|
|
|
- status: selectedSeriesFilter
|
|
|
- });
|
|
|
- saveFilterSettings();
|
|
|
- }
|
|
|
- }, [selectedSeries, seriesVisible, selectedSeriesFilter]);
|
|
|
-
|
|
|
- useEffect(() => {
|
|
|
- if (isFilterVisible && isFilterVisible === 'nomads') {
|
|
|
- setNomadsFilter &&
|
|
|
- setNomadsFilter({
|
|
|
- friends: friendsVisible ? 1 : 0,
|
|
|
- trusted: trustedVisible ? 1 : 0,
|
|
|
- countries: selectedCountries
|
|
|
- });
|
|
|
- saveFilterSettings();
|
|
|
- }
|
|
|
- }, [friendsVisible, trustedVisible, selectedCountries]);
|
|
|
-
|
|
|
- useEffect(() => {
|
|
|
- if (isFilterVisible && isFilterVisible === 'regions') {
|
|
|
- try {
|
|
|
+ useEffect(() => {
|
|
|
+ if (isFilterVisible && isFilterVisible === 'nomads') {
|
|
|
+ setNomadsFilter &&
|
|
|
+ setNomadsFilter({
|
|
|
+ friends: friendsVisible ? 1 : 0,
|
|
|
+ trusted: trustedVisible ? 1 : 0,
|
|
|
+ countries: selectedCountries
|
|
|
+ });
|
|
|
saveFilterSettings();
|
|
|
- handleApplyFilter();
|
|
|
- setType(
|
|
|
- tilesType.value === 2
|
|
|
- ? 'dare'
|
|
|
- : tilesType.value === 1
|
|
|
- ? 'countries'
|
|
|
- : tilesType.value === -1
|
|
|
- ? 'blank'
|
|
|
- : 'regions'
|
|
|
- );
|
|
|
- } catch (error) {
|
|
|
- console.error('Error applying filter:', error);
|
|
|
}
|
|
|
- }
|
|
|
- }, [selectedYear, selectedVisible, tilesType]);
|
|
|
-
|
|
|
- const handleApplyFilter = () => {
|
|
|
- if (!isLogged) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- if (selectedVisible.value === 0) {
|
|
|
- if (tilesType.value === 0 || tilesType.value === 1) {
|
|
|
- setRegionsFilter({
|
|
|
- visitedLabel: 'by',
|
|
|
- year: selectedYear && selectedYear.value ? selectedYear.value : moment().year()
|
|
|
- });
|
|
|
+ }, [friendsVisible, trustedVisible, selectedCountries]);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (isFilterVisible && isFilterVisible === 'regions') {
|
|
|
+ try {
|
|
|
+ saveFilterSettings();
|
|
|
+ handleApplyFilter();
|
|
|
+ setType(
|
|
|
+ tilesType.value === 2
|
|
|
+ ? 'dare'
|
|
|
+ : tilesType.value === 1
|
|
|
+ ? 'countries'
|
|
|
+ : tilesType.value === -1
|
|
|
+ ? 'blank'
|
|
|
+ : 'regions'
|
|
|
+ );
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Error applying filter:', error);
|
|
|
+ }
|
|
|
}
|
|
|
- } else {
|
|
|
- if (tilesType.value === 0 || tilesType.value === 1) {
|
|
|
- setRegionsFilter({
|
|
|
- visitedLabel: 'in',
|
|
|
- year: selectedYear && selectedYear.value ? selectedYear.value : moment().year()
|
|
|
- });
|
|
|
+ }, [selectedYear, selectedVisible, tilesType]);
|
|
|
+
|
|
|
+ const handleApplyFilter = () => {
|
|
|
+ if (!isLogged) {
|
|
|
+ return;
|
|
|
}
|
|
|
- }
|
|
|
- };
|
|
|
|
|
|
- const handleCloseFilter = () => {
|
|
|
- setIsFilterVisible(null);
|
|
|
- };
|
|
|
+ if (selectedVisible.value === 0) {
|
|
|
+ if (tilesType.value === 0 || tilesType.value === 1) {
|
|
|
+ setRegionsFilter({
|
|
|
+ visitedLabel: 'by',
|
|
|
+ year: selectedYear && selectedYear.value ? selectedYear.value : moment().year()
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (tilesType.value === 0 || tilesType.value === 1) {
|
|
|
+ setRegionsFilter({
|
|
|
+ visitedLabel: 'in',
|
|
|
+ year: selectedYear && selectedYear.value ? selectedYear.value : moment().year()
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- const renderRegions = () => {
|
|
|
- return (
|
|
|
- <View style={styles.sceneContainer}>
|
|
|
- <View style={styles.optionsContainer}>
|
|
|
- <View style={styles.rowWrapper}>
|
|
|
- <View style={[styles.dropdownWrapper, {}]}>
|
|
|
- <Dropdown
|
|
|
- style={[ModalStyles.dropdown, { width: '100%' }]}
|
|
|
- placeholderStyle={ModalStyles.placeholderStyle}
|
|
|
- selectedTextStyle={ModalStyles.selectedTextStyle}
|
|
|
- containerStyle={ModalStyles.dropdownContent}
|
|
|
- data={tilesTypes}
|
|
|
- labelField="label"
|
|
|
- valueField="value"
|
|
|
- value={tilesType?.label}
|
|
|
- placeholder={tilesType?.label}
|
|
|
- onChange={(item) => {
|
|
|
- setTilesType(item);
|
|
|
- }}
|
|
|
- />
|
|
|
- </View>
|
|
|
- </View>
|
|
|
+ const handleCloseFilter = () => { };
|
|
|
|
|
|
- {tilesType.value !== 2 && tilesType.value !== -1 && allYears.length && isLogged ? (
|
|
|
- <View style={styles.rowWrapper}>
|
|
|
- <View style={styles.dropdownWrapper}>
|
|
|
- <Dropdown
|
|
|
- style={[ModalStyles.dropdown, { width: '100%' }]}
|
|
|
- placeholderStyle={ModalStyles.placeholderStyle}
|
|
|
- selectedTextStyle={ModalStyles.selectedTextStyle}
|
|
|
- containerStyle={ModalStyles.dropdownContent}
|
|
|
- data={visibleTypes}
|
|
|
- labelField="label"
|
|
|
- valueField="value"
|
|
|
- value={selectedVisible?.label}
|
|
|
- placeholder={selectedVisible?.label}
|
|
|
- onChange={(item) => {
|
|
|
- setSelectedVisible(item);
|
|
|
- }}
|
|
|
- />
|
|
|
- </View>
|
|
|
- <View style={styles.dropdownWrapper}>
|
|
|
- <Dropdown
|
|
|
- style={[ModalStyles.dropdown, { width: '100%' }]}
|
|
|
- placeholderStyle={ModalStyles.placeholderStyle}
|
|
|
- selectedTextStyle={ModalStyles.selectedTextStyle}
|
|
|
- containerStyle={ModalStyles.dropdownContent}
|
|
|
- data={allYears}
|
|
|
+ const renderRegions = () => {
|
|
|
+ return (
|
|
|
+ <View style={{ minHeight: 200, justifyContent: 'space-between' }}>
|
|
|
+ <View style={styles.optionsContainer}>
|
|
|
+ <View style={[styles.rowWrapper, {}]}>
|
|
|
+ <View style={[styles.dropdownWrapper, {}]}>
|
|
|
+ <SelectSheet
|
|
|
+ style={[ModalStyles.dropdown, { width: '100%' }] as any}
|
|
|
+ data={tilesTypes}
|
|
|
labelField="label"
|
|
|
valueField="value"
|
|
|
- value={selectedYear?.label}
|
|
|
- placeholder={selectedYear?.label}
|
|
|
- dropdownPosition="top"
|
|
|
+ value={tilesType?.value}
|
|
|
+ placeholder={tilesType?.label || 'NM regions'}
|
|
|
onChange={(item) => {
|
|
|
- setSelectedYear(item);
|
|
|
+ setTilesType(item);
|
|
|
}}
|
|
|
+ hideTitle={true}
|
|
|
+ initialSnapPoint={45}
|
|
|
/>
|
|
|
</View>
|
|
|
</View>
|
|
|
- ) : null}
|
|
|
- </View>
|
|
|
|
|
|
- <Button
|
|
|
- children="Reset"
|
|
|
- onPress={() => {
|
|
|
- setTilesType({ label: 'NM regions', value: 0 });
|
|
|
- setSelectedVisible({
|
|
|
- label: 'visited by',
|
|
|
- value: 0
|
|
|
- });
|
|
|
- setSelectedYear(defaultYear);
|
|
|
- }}
|
|
|
- variant={ButtonVariants.OPACITY}
|
|
|
- containerStyles={{
|
|
|
- backgroundColor: Colors.WHITE,
|
|
|
- borderWidth: 1,
|
|
|
- borderColor: Colors.DARK_BLUE
|
|
|
- }}
|
|
|
- textStyles={{ color: Colors.DARK_BLUE }}
|
|
|
- />
|
|
|
- </View>
|
|
|
- );
|
|
|
- };
|
|
|
+ {tilesType.value !== 2 && tilesType.value !== -1 && allYears.length && isLogged ? (
|
|
|
+ <View style={styles.rowWrapper}>
|
|
|
+ <View style={styles.dropdownWrapper}>
|
|
|
+ <SelectSheet
|
|
|
+ style={[ModalStyles.dropdown, { width: '100%' }] as any}
|
|
|
+ data={visibleTypes}
|
|
|
+ labelField="label"
|
|
|
+ valueField="value"
|
|
|
+ value={selectedVisible?.value}
|
|
|
+ placeholder={selectedVisible?.label || 'visited by'}
|
|
|
+ onChange={(item) => {
|
|
|
+ setSelectedVisible(item);
|
|
|
+ }}
|
|
|
+ hideTitle={true}
|
|
|
+ initialSnapPoint={35}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ <View style={styles.dropdownWrapper}>
|
|
|
+ <SelectSheet
|
|
|
+ style={[ModalStyles.dropdown, { width: '100%' }] as any}
|
|
|
+ data={allYears}
|
|
|
+ labelField="label"
|
|
|
+ valueField="value"
|
|
|
+ value={selectedYear?.value}
|
|
|
+ placeholder={selectedYear?.label || 'Year'}
|
|
|
+ onChange={(item) => {
|
|
|
+ setSelectedYear(item);
|
|
|
+ }}
|
|
|
+ hideTitle={true}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ ) : null}
|
|
|
+ </View>
|
|
|
|
|
|
- const renderSeries = () => {
|
|
|
- return (
|
|
|
- <View style={styles.sceneContainer}>
|
|
|
- <View style={styles.optionsContainer}>
|
|
|
- <View style={[styles.row, { gap: 8 }]}>
|
|
|
- <Switch
|
|
|
- trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.DARK_BLUE }}
|
|
|
- thumbColor={Colors.WHITE}
|
|
|
- onValueChange={setSeriesVisible}
|
|
|
- value={seriesVisible}
|
|
|
- style={{ transform: 'scale(0.8)' }}
|
|
|
+ <View style={{ marginTop: 'auto', marginBottom: 24 }}>
|
|
|
+ <Button
|
|
|
+ children="Reset"
|
|
|
+ onPress={() => {
|
|
|
+ setTilesType({ label: 'NM regions', value: 0 });
|
|
|
+ setSelectedVisible({
|
|
|
+ label: 'visited by',
|
|
|
+ value: 0
|
|
|
+ });
|
|
|
+ setSelectedYear(defaultYear);
|
|
|
+ }}
|
|
|
+ variant={ButtonVariants.OPACITY}
|
|
|
+ containerStyles={{
|
|
|
+ backgroundColor: Colors.WHITE,
|
|
|
+ borderWidth: 1,
|
|
|
+ borderColor: Colors.DARK_BLUE
|
|
|
+ }}
|
|
|
+ textStyles={{ color: Colors.DARK_BLUE }}
|
|
|
/>
|
|
|
- <Text style={styles.textBold}>Show series</Text>
|
|
|
</View>
|
|
|
+ </View>
|
|
|
+ );
|
|
|
+ };
|
|
|
|
|
|
- {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>
|
|
|
+ const renderSeries = () => {
|
|
|
+ const selectedCount = selectedSeries.length;
|
|
|
|
|
|
- <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>
|
|
|
+ return (
|
|
|
+ <View style={[styles.seriesSheetContainer]}>
|
|
|
+ <View style={[styles.optionsContainer, { paddingHorizontal: 16 }]}>
|
|
|
+ <View style={[styles.row, { gap: 8 }]}>
|
|
|
+ <Switch
|
|
|
+ trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.DARK_BLUE }}
|
|
|
+ thumbColor={Colors.WHITE}
|
|
|
+ onValueChange={setSeriesVisible}
|
|
|
+ value={seriesVisible}
|
|
|
+ style={{ transform: 'scale(0.8)' }}
|
|
|
+ />
|
|
|
+ <Text style={styles.textBold}>Show series</Text>
|
|
|
+ </View>
|
|
|
+
|
|
|
+ {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(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}
|
|
|
+
|
|
|
+ <View style={styles.seriesHeader}>
|
|
|
+ <Text style={styles.textBold}>Select series ({selectedCount} selected)</Text>
|
|
|
+ </View>
|
|
|
+
|
|
|
+ <View style={styles.seriesActions}>
|
|
|
+ <TouchableOpacity
|
|
|
+ style={styles.seriesActionBtn}
|
|
|
+ onPress={() => setSelectedSeries(series.map((item) => item.value))}
|
|
|
+ >
|
|
|
+ {/* <CheckSvg fill={Colors.DARK_BLUE} height={8} width={10} /> */}
|
|
|
+ <Text style={styles.seriesActionBtnText}>Select all</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
|
|
|
+ style={styles.seriesActionBtn}
|
|
|
+ onPress={() => setSelectedSeries([])}
|
|
|
+ >
|
|
|
+ {/* <CheckSvg fill={Colors.DARK_BLUE} height={8} width={10} /> */}
|
|
|
+ <Text style={styles.seriesActionBtnText}>Select none</Text>
|
|
|
</TouchableOpacity>
|
|
|
</View>
|
|
|
- ) : null}
|
|
|
-
|
|
|
- <MultiSelect
|
|
|
- style={[ModalStyles.dropdown, { width: '100%' }]}
|
|
|
- placeholderStyle={[ModalStyles.placeholderStyle]}
|
|
|
- selectedTextStyle={ModalStyles.selectedTextStyle}
|
|
|
- containerStyle={[ModalStyles.dropdownContent, {}]}
|
|
|
- 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) => {
|
|
|
- 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}>
|
|
|
- <View style={[styles.row, { gap: 8, flex: 1 }]}>
|
|
|
- <Image source={{ uri: API_HOST + item.icon }} width={20} height={20} />
|
|
|
- <Text style={styles.optionText}>{item.label}</Text>
|
|
|
- </View>
|
|
|
+ </View>
|
|
|
|
|
|
- {selectedSeries.includes(item.value) && (
|
|
|
- <CheckSvg fill={Colors.DARK_BLUE} height={8} />
|
|
|
- )}
|
|
|
- </View>
|
|
|
- )}
|
|
|
- renderSelectedItem={(item, unSelect) => {
|
|
|
- return null;
|
|
|
- }}
|
|
|
- />
|
|
|
+ <ScrollView style={{ flex: 1 }} contentContainerStyle={styles.seriesPillsContainer}>
|
|
|
+ {series.map((item) => {
|
|
|
+ const isSelected = selectedSeries.includes(item.value);
|
|
|
+ return (
|
|
|
+ <TouchableOpacity
|
|
|
+ key={item.value}
|
|
|
+ style={[
|
|
|
+ styles.seriesPill,
|
|
|
+ isSelected ? styles.seriesPillSelected : styles.seriesPillUnselected
|
|
|
+ ]}
|
|
|
+ onPress={() => {
|
|
|
+ if (isSelected) {
|
|
|
+ setSelectedSeries(selectedSeries.filter((v) => v !== item.value));
|
|
|
+ } else {
|
|
|
+ setSelectedSeries([...selectedSeries, item.value]);
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ activeOpacity={0.75}
|
|
|
+ >
|
|
|
+ {(item as any).icon ? (
|
|
|
+ <Image
|
|
|
+ source={{ uri: API_HOST + (item as any).icon }}
|
|
|
+ style={{
|
|
|
+ width: 18,
|
|
|
+ height: 18,
|
|
|
+ tintColor: isSelected ? Colors.WHITE : Colors.DARK_BLUE
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ ) : null}
|
|
|
+ <Text
|
|
|
+ style={[
|
|
|
+ styles.seriesPillText,
|
|
|
+ isSelected ? styles.seriesPillTextSelected : styles.seriesPillTextUnselected
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ {item.label}
|
|
|
+ </Text>
|
|
|
+ </TouchableOpacity>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </ScrollView>
|
|
|
+
|
|
|
+ <View
|
|
|
+ style={{ marginTop: 'auto', marginBottom: insets.bottom || 24, paddingHorizontal: 16 }}
|
|
|
+ >
|
|
|
+ <Button
|
|
|
+ children="Reset"
|
|
|
+ onPress={() => {
|
|
|
+ setSeriesVisible(true);
|
|
|
+ setSelectedSeries(series.map((item) => item.value));
|
|
|
+ setSelectedSeriesFilter(-1);
|
|
|
+ }}
|
|
|
+ variant={ButtonVariants.OPACITY}
|
|
|
+ containerStyles={{
|
|
|
+ backgroundColor: Colors.WHITE,
|
|
|
+ borderWidth: 1,
|
|
|
+ borderColor: Colors.DARK_BLUE,
|
|
|
+ marginTop: 8
|
|
|
+ }}
|
|
|
+ textStyles={{ color: Colors.DARK_BLUE }}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
</View>
|
|
|
+ );
|
|
|
+ };
|
|
|
|
|
|
- <Button
|
|
|
- children="Reset"
|
|
|
- onPress={() => {
|
|
|
- setSeriesVisible(true);
|
|
|
- setSelectedSeries(series.map((item) => item.value));
|
|
|
- setSelectedSeriesFilter(-1);
|
|
|
- }}
|
|
|
- variant={ButtonVariants.OPACITY}
|
|
|
- containerStyles={{
|
|
|
- backgroundColor: Colors.WHITE,
|
|
|
- borderWidth: 1,
|
|
|
- borderColor: Colors.DARK_BLUE
|
|
|
- }}
|
|
|
- textStyles={{ color: Colors.DARK_BLUE }}
|
|
|
- />
|
|
|
- </View>
|
|
|
- );
|
|
|
- };
|
|
|
-
|
|
|
- const toggleSettingsSwitch = async () => {
|
|
|
- if (!isSharing) {
|
|
|
- handleGetLocation();
|
|
|
- } else {
|
|
|
- setIsSharing(false);
|
|
|
- setSettings({ token, sharing: 0 });
|
|
|
+ const toggleSettingsSwitch = async () => {
|
|
|
+ if (!isSharing) {
|
|
|
+ handleGetLocation();
|
|
|
+ } else {
|
|
|
+ setIsSharing(false);
|
|
|
+ setSettings({ token, sharing: 0 });
|
|
|
+ setShowNomads && setShowNomads(false);
|
|
|
+ storage.set('showNomads', false);
|
|
|
+ setTrustedVisible(false);
|
|
|
+ setFriendsVisible(false);
|
|
|
+ setSelectedCountries([]);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const toggleTrustedSwitch = async () => {
|
|
|
+ if (!isPremium) {
|
|
|
+ setPremiumModalVisible(true);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ setShowNomads && setShowNomads(false);
|
|
|
+ storage.set('showNomads', false);
|
|
|
+ setTrustedVisible(!trustedVisible);
|
|
|
+ };
|
|
|
+
|
|
|
+ const toggleFriendsSwitch = async () => {
|
|
|
+ if (!isPremium) {
|
|
|
+ setPremiumModalVisible(true);
|
|
|
+ return;
|
|
|
+ }
|
|
|
setShowNomads && setShowNomads(false);
|
|
|
storage.set('showNomads', false);
|
|
|
- setTrustedVisible(false);
|
|
|
- setFriendsVisible(false);
|
|
|
- setSelectedCountries([]);
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- const toggleTrustedSwitch = async () => {
|
|
|
- if (!isPremium) {
|
|
|
- setPremiumModalVisible(true);
|
|
|
- return;
|
|
|
- }
|
|
|
- setShowNomads && setShowNomads(false);
|
|
|
- storage.set('showNomads', false);
|
|
|
- setTrustedVisible(!trustedVisible);
|
|
|
- };
|
|
|
-
|
|
|
- const toggleFriendsSwitch = async () => {
|
|
|
- if (!isPremium) {
|
|
|
- setPremiumModalVisible(true);
|
|
|
- return;
|
|
|
- }
|
|
|
- setShowNomads && setShowNomads(false);
|
|
|
- storage.set('showNomads', false);
|
|
|
- setFriendsVisible(!friendsVisible);
|
|
|
- };
|
|
|
-
|
|
|
- const requestBackgroundPermissionSafe = async () => {
|
|
|
- await new Promise((resolve) => setTimeout(resolve, 300));
|
|
|
- return await Location.requestBackgroundPermissionsAsync();
|
|
|
- };
|
|
|
-
|
|
|
- const handleGetLocation = async () => {
|
|
|
- let { status, canAskAgain } = await Location.getForegroundPermissionsAsync();
|
|
|
- const isServicesEnabled = await Location.hasServicesEnabledAsync();
|
|
|
-
|
|
|
- if (status === 'granted' && isServicesEnabled) {
|
|
|
- const bgStatus = await Location.getBackgroundPermissionsAsync();
|
|
|
- if (bgStatus.status !== 'granted') {
|
|
|
- // const { status } = await requestBackgroundPermissionSafe();
|
|
|
- // if (status === Location.PermissionStatus.GRANTED) {
|
|
|
- // await startBackgroundLocationUpdates();
|
|
|
- // } else {
|
|
|
- await stopBackgroundLocationUpdates();
|
|
|
- // setOpenSettingsBackgroundVisible(true);
|
|
|
- // }
|
|
|
+ setFriendsVisible(!friendsVisible);
|
|
|
+ };
|
|
|
+
|
|
|
+ const requestBackgroundPermissionSafe = async () => {
|
|
|
+ await new Promise((resolve) => setTimeout(resolve, 300));
|
|
|
+ return await Location.requestBackgroundPermissionsAsync();
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleGetLocation = async () => {
|
|
|
+ let { status, canAskAgain } = await Location.getForegroundPermissionsAsync();
|
|
|
+ const isServicesEnabled = await Location.hasServicesEnabledAsync();
|
|
|
+
|
|
|
+ if (status === 'granted' && isServicesEnabled) {
|
|
|
+ const bgStatus = await Location.getBackgroundPermissionsAsync();
|
|
|
+ if (bgStatus.status !== 'granted') {
|
|
|
+ // const { status } = await requestBackgroundPermissionSafe();
|
|
|
+ // if (status === Location.PermissionStatus.GRANTED) {
|
|
|
+ // await startBackgroundLocationUpdates();
|
|
|
+ // } else {
|
|
|
+ await stopBackgroundLocationUpdates();
|
|
|
+ // setOpenSettingsBackgroundVisible(true);
|
|
|
+ // }
|
|
|
+ } else {
|
|
|
+ // await startBackgroundLocationUpdates();
|
|
|
+ }
|
|
|
+
|
|
|
+ getLocation();
|
|
|
+ } else if (!canAskAgain || !isServicesEnabled) {
|
|
|
+ setOpenSettingsVisible(true);
|
|
|
} else {
|
|
|
- // await startBackgroundLocationUpdates();
|
|
|
+ setAskLocationVisible(true);
|
|
|
}
|
|
|
+ };
|
|
|
|
|
|
- getLocation();
|
|
|
- } else if (!canAskAgain || !isServicesEnabled) {
|
|
|
- setOpenSettingsVisible(true);
|
|
|
- } else {
|
|
|
- setAskLocationVisible(true);
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- const getLocation = async () => {
|
|
|
- setIsSharing(true);
|
|
|
- setSettings(
|
|
|
- { token, sharing: 1 },
|
|
|
- {
|
|
|
- onSuccess: async () => {
|
|
|
- let currentLocation = await Location.getCurrentPositionAsync({
|
|
|
- accuracy: Location.Accuracy.Balanced
|
|
|
- });
|
|
|
+ const getLocation = async () => {
|
|
|
+ setIsSharing(true);
|
|
|
+ setSettings(
|
|
|
+ { token, sharing: 1 },
|
|
|
+ {
|
|
|
+ onSuccess: async () => {
|
|
|
+ let currentLocation = await Location.getCurrentPositionAsync({
|
|
|
+ accuracy: Location.Accuracy.Balanced
|
|
|
+ });
|
|
|
|
|
|
- updateLocation({
|
|
|
- token,
|
|
|
- lat: currentLocation.coords.latitude,
|
|
|
- lng: currentLocation.coords.longitude
|
|
|
- });
|
|
|
+ updateLocation({
|
|
|
+ token,
|
|
|
+ lat: currentLocation.coords.latitude,
|
|
|
+ lng: currentLocation.coords.longitude
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
+ );
|
|
|
+ setShowNomads && setShowNomads(true);
|
|
|
+ storage.set('showNomads', true);
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleAcceptPermission = async () => {
|
|
|
+ setAskLocationVisible(false);
|
|
|
+ let { status, canAskAgain } = await Location.requestForegroundPermissionsAsync();
|
|
|
+ const isServicesEnabled = await Location.hasServicesEnabledAsync();
|
|
|
+
|
|
|
+ if (status === 'granted' && isServicesEnabled) {
|
|
|
+ const bgStatus = await Location.getBackgroundPermissionsAsync();
|
|
|
+
|
|
|
+ if (bgStatus.status !== 'granted') {
|
|
|
+ // const { status } = await requestBackgroundPermissionSafe();
|
|
|
+ // if (status === Location.PermissionStatus.GRANTED) {
|
|
|
+ // await startBackgroundLocationUpdates();
|
|
|
+ // } else {
|
|
|
+ await stopBackgroundLocationUpdates();
|
|
|
+ // setOpenSettingsBackgroundVisible(true);
|
|
|
+ // }
|
|
|
+ } else {
|
|
|
+ // await startBackgroundLocationUpdates();
|
|
|
+ }
|
|
|
+ getLocation();
|
|
|
+ } else if (!canAskAgain || !isServicesEnabled) {
|
|
|
+ setOpenSettingsVisible(true);
|
|
|
}
|
|
|
- );
|
|
|
- setShowNomads && setShowNomads(true);
|
|
|
- storage.set('showNomads', true);
|
|
|
- };
|
|
|
-
|
|
|
- const handleAcceptPermission = async () => {
|
|
|
- setAskLocationVisible(false);
|
|
|
- let { status, canAskAgain } = await Location.requestForegroundPermissionsAsync();
|
|
|
- const isServicesEnabled = await Location.hasServicesEnabledAsync();
|
|
|
-
|
|
|
- if (status === 'granted' && isServicesEnabled) {
|
|
|
- const bgStatus = await Location.getBackgroundPermissionsAsync();
|
|
|
-
|
|
|
- if (bgStatus.status !== 'granted') {
|
|
|
- // const { status } = await requestBackgroundPermissionSafe();
|
|
|
- // if (status === Location.PermissionStatus.GRANTED) {
|
|
|
- // await startBackgroundLocationUpdates();
|
|
|
- // } else {
|
|
|
- await stopBackgroundLocationUpdates();
|
|
|
- // setOpenSettingsBackgroundVisible(true);
|
|
|
- // }
|
|
|
- } else {
|
|
|
- // await startBackgroundLocationUpdates();
|
|
|
+ };
|
|
|
+
|
|
|
+ const toggleNomadsSwitch = () => {
|
|
|
+ if (!showNomads) {
|
|
|
+ setFriendsVisible(false);
|
|
|
+ setSelectedCountries([]);
|
|
|
}
|
|
|
- getLocation();
|
|
|
- } else if (!canAskAgain || !isServicesEnabled) {
|
|
|
- setOpenSettingsVisible(true);
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- const toggleNomadsSwitch = () => {
|
|
|
- if (!showNomads) {
|
|
|
- setFriendsVisible(false);
|
|
|
- setSelectedCountries([]);
|
|
|
- }
|
|
|
- setShowNomads && setShowNomads(!showNomads);
|
|
|
- storage.set('showNomads', !showNomads);
|
|
|
- };
|
|
|
-
|
|
|
- const renderNomads = () => {
|
|
|
- return (
|
|
|
- <View style={[styles.sceneContainer]}>
|
|
|
- <View style={{ marginBottom: 16 }}>
|
|
|
- <View style={styles.textContainer}>
|
|
|
- <Text style={styles.text}>The location is shared with 1 km radius precision.</Text>
|
|
|
- <Tooltip
|
|
|
- isVisible={toolTipVisible}
|
|
|
- content={
|
|
|
- <View style={{ gap: 6 }}>
|
|
|
- <Text style={[styles.text, styles.boldText]}>
|
|
|
- At NomadMania, we respect your privacy.
|
|
|
- </Text>
|
|
|
- <Text style={[styles.text]}>
|
|
|
- If you choose to share your location, it will be used to show your current
|
|
|
- location to other users who also share theirs.
|
|
|
- </Text>
|
|
|
- <Text style={[styles.text]}>
|
|
|
- You can choose how you want to share your location:
|
|
|
- </Text>
|
|
|
- <View style={[styles.bulletItem]}>
|
|
|
- <Text style={styles.bulletIcon}>{'\u2022'}</Text>
|
|
|
- <Text style={[styles.text, { flex: 1 }]}>
|
|
|
- <Text style={styles.boldText}>Only when the app is open</Text> – Your location
|
|
|
- updates only when you open the app. This uses less battery but may be less
|
|
|
- accurate.
|
|
|
+ setShowNomads && setShowNomads(!showNomads);
|
|
|
+ storage.set('showNomads', !showNomads);
|
|
|
+ };
|
|
|
+
|
|
|
+ const renderNomads = () => {
|
|
|
+ return (
|
|
|
+ <View style={[styles.sceneContainer, { justifyContent: 'space-between' }]}>
|
|
|
+ <View style={{ marginBottom: 16 }}>
|
|
|
+ <View style={styles.textContainer}>
|
|
|
+ <Text style={styles.text}>The location is shared with 1 km radius precision.</Text>
|
|
|
+ <Tooltip
|
|
|
+ isVisible={toolTipVisible}
|
|
|
+ content={
|
|
|
+ <View style={{ gap: 6 }}>
|
|
|
+ <Text style={[styles.text, styles.boldText]}>
|
|
|
+ At NomadMania, we respect your privacy.
|
|
|
</Text>
|
|
|
- </View>
|
|
|
- {/* <View style={styles.bulletItem}>
|
|
|
- <Text style={styles.bulletIcon}>{'\u2022'}</Text>
|
|
|
- <Text style={[styles.text, { flex: 1 }]}>
|
|
|
- <Text style={styles.boldText}>In the background</Text> – Your location stays
|
|
|
- up to date even when the app is closed. Other users see your latest location.
|
|
|
+ <Text style={[styles.text]}>
|
|
|
+ If you choose to share your location, it will be used to show your current
|
|
|
+ location to other users who also share theirs.
|
|
|
</Text>
|
|
|
- </View> */}
|
|
|
- <Text style={[styles.text]}>
|
|
|
- You’re always in control, and you can change these settings anytime in the app{' '}
|
|
|
- <Text
|
|
|
- style={{ color: Colors.ORANGE }}
|
|
|
- onPress={() =>
|
|
|
- Platform.OS === 'ios'
|
|
|
- ? Linking.openURL('app-settings:')
|
|
|
- : Linking.openSettings()
|
|
|
- }
|
|
|
- >
|
|
|
- Settings
|
|
|
- </Text>{' '}
|
|
|
- section.
|
|
|
- </Text>
|
|
|
- </View>
|
|
|
- }
|
|
|
- contentStyle={{ backgroundColor: Colors.WHITE }}
|
|
|
- placement="top"
|
|
|
- onClose={() => setToolTipVisible(false)}
|
|
|
- backgroundColor="transparent"
|
|
|
- allowChildInteraction={false}
|
|
|
+ <Text style={[styles.text]}>
|
|
|
+ You can choose how you want to share your location:
|
|
|
+ </Text>
|
|
|
+ <View style={[styles.bulletItem]}>
|
|
|
+ <Text style={styles.bulletIcon}>{'\u2022'}</Text>
|
|
|
+ <Text style={[styles.text, { flex: 1 }]}>
|
|
|
+ <Text style={styles.boldText}>Only when the app is open</Text> – Your
|
|
|
+ location updates only when you open the app. This uses less battery but may
|
|
|
+ be less accurate.
|
|
|
+ </Text>
|
|
|
+ </View>
|
|
|
+ <Text style={[styles.text]}>
|
|
|
+ You're always in control, and you can change these settings anytime in the app{' '}
|
|
|
+ <Text
|
|
|
+ style={{ color: Colors.ORANGE }}
|
|
|
+ onPress={() =>
|
|
|
+ Platform.OS === 'ios'
|
|
|
+ ? Linking.openURL('app-settings:')
|
|
|
+ : Linking.sendIntent('android.settings.LOCATION_SOURCE_SETTINGS')
|
|
|
+ }
|
|
|
+ >
|
|
|
+ Settings
|
|
|
+ </Text>{' '}
|
|
|
+ section.
|
|
|
+ </Text>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ contentStyle={{ backgroundColor: Colors.WHITE }}
|
|
|
+ placement="top"
|
|
|
+ onClose={() => setToolTipVisible(false)}
|
|
|
+ backgroundColor="transparent"
|
|
|
+ allowChildInteraction={false}
|
|
|
+ >
|
|
|
+ <TouchableOpacity
|
|
|
+ style={{ paddingHorizontal: 5 }}
|
|
|
+ onPress={() => setToolTipVisible(true)}
|
|
|
+ hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
|
|
+ >
|
|
|
+ <InfoIcon fill={Colors.DARK_BLUE} width={20} height={20} />
|
|
|
+ </TouchableOpacity>
|
|
|
+ </Tooltip>
|
|
|
+ </View>
|
|
|
+
|
|
|
+ <TouchableOpacity
|
|
|
+ style={[
|
|
|
+ styles.alignStyle,
|
|
|
+ styles.buttonWrapper,
|
|
|
+ {
|
|
|
+ justifyContent: 'space-between'
|
|
|
+ }
|
|
|
+ ]}
|
|
|
+ onPress={toggleSettingsSwitch}
|
|
|
>
|
|
|
- <TouchableOpacity
|
|
|
- style={{ paddingHorizontal: 5 }}
|
|
|
- onPress={() => setToolTipVisible(true)}
|
|
|
- hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
|
|
+ <View style={styles.alignStyle}>
|
|
|
+ <SharingIcon fill={Colors.DARK_BLUE} width={20} height={20} />
|
|
|
+ <Text style={styles.buttonLabel}>Share my location to see others</Text>
|
|
|
+ </View>
|
|
|
+ <View>
|
|
|
+ <Switch
|
|
|
+ trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.DARK_BLUE }}
|
|
|
+ thumbColor={Colors.WHITE}
|
|
|
+ onValueChange={toggleSettingsSwitch}
|
|
|
+ value={isSharing}
|
|
|
+ style={{ transform: 'scale(0.8)' }}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ </TouchableOpacity>
|
|
|
+
|
|
|
+ <TouchableOpacity
|
|
|
+ style={[
|
|
|
+ styles.alignStyle,
|
|
|
+ styles.buttonWrapper,
|
|
|
+ {
|
|
|
+ justifyContent: 'space-between'
|
|
|
+ }
|
|
|
+ ]}
|
|
|
+ onPress={toggleNomadsSwitch}
|
|
|
+ disabled={!isSharing}
|
|
|
+ >
|
|
|
+ <View style={styles.alignStyle}>
|
|
|
+ <UsersIcon
|
|
|
+ fill={isSharing ? Colors.DARK_BLUE : Colors.LIGHT_GRAY}
|
|
|
+ width={20}
|
|
|
+ height={20}
|
|
|
+ />
|
|
|
+ <Text style={[styles.buttonLabel, !isSharing ? { color: Colors.LIGHT_GRAY } : {}]}>
|
|
|
+ Show all Nomads - {usersOnMapCount ? formatNumber(usersOnMapCount) : null} online
|
|
|
+ </Text>
|
|
|
+ </View>
|
|
|
+ <View>
|
|
|
+ <Switch
|
|
|
+ trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.DARK_BLUE }}
|
|
|
+ thumbColor={Colors.WHITE}
|
|
|
+ onValueChange={toggleNomadsSwitch}
|
|
|
+ value={showNomads}
|
|
|
+ style={{ transform: 'scale(0.8)' }}
|
|
|
+ disabled={!isSharing}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ </TouchableOpacity>
|
|
|
+
|
|
|
+ <View style={styles.divider} />
|
|
|
+
|
|
|
+ <TouchableOpacity
|
|
|
+ style={[
|
|
|
+ styles.alignStyle,
|
|
|
+ styles.buttonWrapper,
|
|
|
+ {
|
|
|
+ justifyContent: 'space-between'
|
|
|
+ }
|
|
|
+ ]}
|
|
|
+ onPress={toggleFriendsSwitch}
|
|
|
+ disabled={!isSharing}
|
|
|
+ >
|
|
|
+ <View style={styles.alignStyle}>
|
|
|
+ <FriendsIcon
|
|
|
+ fill={isSharing ? Colors.DARK_BLUE : Colors.LIGHT_GRAY}
|
|
|
+ width={20}
|
|
|
+ height={18}
|
|
|
+ />
|
|
|
+ <Text style={[styles.buttonLabel, !isSharing ? { color: Colors.LIGHT_GRAY } : {}]}>
|
|
|
+ Show my friends -{' '}
|
|
|
+ {friendsOnTheMapCount ? formatNumber(friendsOnTheMapCount) : null} online
|
|
|
+ </Text>
|
|
|
+ </View>
|
|
|
+ <View>
|
|
|
+ <Switch
|
|
|
+ trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.DARK_BLUE }}
|
|
|
+ thumbColor={Colors.WHITE}
|
|
|
+ onValueChange={toggleFriendsSwitch}
|
|
|
+ value={friendsVisible}
|
|
|
+ style={{ transform: 'scale(0.8)' }}
|
|
|
+ disabled={!isSharing}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ </TouchableOpacity>
|
|
|
+
|
|
|
+ <TouchableOpacity
|
|
|
+ style={styles.megaSelector}
|
|
|
+ onPress={() => {
|
|
|
+ if (!isPremium) {
|
|
|
+ setPremiumModalVisible(true);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ setCountrySelectorVisible(true);
|
|
|
+ }}
|
|
|
+ disabled={!isSharing}
|
|
|
+ >
|
|
|
+ <Text style={styles.megaButtonText}>Show Nomads from (select a country)</Text>
|
|
|
+ <ChevronIcon width={18} height={18} />
|
|
|
+ </TouchableOpacity>
|
|
|
+
|
|
|
+ {selectedCountries.length > 0 && (
|
|
|
+ <View
|
|
|
+ style={{
|
|
|
+ flexDirection: 'row',
|
|
|
+ alignItems: 'center',
|
|
|
+ flexWrap: 'wrap',
|
|
|
+ marginLeft: 12,
|
|
|
+ gap: 6,
|
|
|
+ marginVertical: 8
|
|
|
+ }}
|
|
|
>
|
|
|
- <InfoIcon fill={Colors.DARK_BLUE} width={20} height={20} />
|
|
|
- </TouchableOpacity>
|
|
|
- </Tooltip>
|
|
|
+ {selectedCountries.map((item) => (
|
|
|
+ <View
|
|
|
+ key={item.country}
|
|
|
+ style={{
|
|
|
+ marginLeft: -12
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Image
|
|
|
+ source={{ uri: API_HOST + item.flag }}
|
|
|
+ style={{
|
|
|
+ width: 28,
|
|
|
+ height: 28,
|
|
|
+ borderRadius: 14,
|
|
|
+ borderWidth: 0.5,
|
|
|
+ borderColor: Colors.BORDER_LIGHT
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ ))}
|
|
|
+ </View>
|
|
|
+ )}
|
|
|
</View>
|
|
|
|
|
|
- <TouchableOpacity
|
|
|
- style={[
|
|
|
- styles.alignStyle,
|
|
|
- styles.buttonWrapper,
|
|
|
- {
|
|
|
- justifyContent: 'space-between'
|
|
|
- }
|
|
|
- ]}
|
|
|
- onPress={toggleSettingsSwitch}
|
|
|
- >
|
|
|
- <View style={styles.alignStyle}>
|
|
|
- <SharingIcon fill={Colors.DARK_BLUE} width={20} height={20} />
|
|
|
- <Text style={styles.buttonLabel}>Share my location to see others</Text>
|
|
|
- </View>
|
|
|
- <View>
|
|
|
- <Switch
|
|
|
- trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.DARK_BLUE }}
|
|
|
- thumbColor={Colors.WHITE}
|
|
|
- onValueChange={toggleSettingsSwitch}
|
|
|
- value={isSharing}
|
|
|
- style={{ transform: 'scale(0.8)' }}
|
|
|
- />
|
|
|
- </View>
|
|
|
- </TouchableOpacity>
|
|
|
-
|
|
|
- <TouchableOpacity
|
|
|
- style={[
|
|
|
- styles.alignStyle,
|
|
|
- styles.buttonWrapper,
|
|
|
- {
|
|
|
- justifyContent: 'space-between'
|
|
|
+ <View style={{ marginTop: 'auto', marginBottom: 24 }}>
|
|
|
+ <Button
|
|
|
+ children="Reset"
|
|
|
+ onPress={() => {
|
|
|
+ if (isSharing) {
|
|
|
+ setFriendsVisible(false);
|
|
|
+ setShowNomads && setShowNomads(true);
|
|
|
+ storage.set('showNomads', true);
|
|
|
+ setSelectedCountries([]);
|
|
|
+ } else {
|
|
|
+ handleGetLocation();
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ variant={ButtonVariants.OPACITY}
|
|
|
+ containerStyles={{
|
|
|
+ backgroundColor: Colors.WHITE,
|
|
|
+ borderWidth: 1,
|
|
|
+ borderColor: Colors.DARK_BLUE
|
|
|
+ }}
|
|
|
+ textStyles={{ color: Colors.DARK_BLUE }}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+
|
|
|
+ <MultiSelectorCountries
|
|
|
+ isVisible={countrySelectorVisible}
|
|
|
+ onClose={() => setCountrySelectorVisible(false)}
|
|
|
+ onSelect={handleCountrySelect}
|
|
|
+ data={countriesForSelector ?? []}
|
|
|
+ initialSelectedIds={selectedCountries.map((item) => parseInt(item.country))}
|
|
|
+ />
|
|
|
+
|
|
|
+ <WarningModal
|
|
|
+ type={'success'}
|
|
|
+ isVisible={premiumModalVisible}
|
|
|
+ message={
|
|
|
+ 'This feature is available to Premium users. Premium account settings can be managed on our website.'
|
|
|
+ }
|
|
|
+ action={() => { }}
|
|
|
+ onClose={() => setPremiumModalVisible(false)}
|
|
|
+ title={'Premium Feature'}
|
|
|
+ />
|
|
|
+
|
|
|
+ <WarningModal
|
|
|
+ type={'success'}
|
|
|
+ isVisible={askLocationVisible}
|
|
|
+ onClose={() => setAskLocationVisible(false)}
|
|
|
+ action={handleAcceptPermission}
|
|
|
+ message="To use this feature we need your permission to access your location. If you press OK your system will ask you to approve location sharing with NomadMania app."
|
|
|
+ />
|
|
|
+ <WarningModal
|
|
|
+ type={'success'}
|
|
|
+ isVisible={openSettingsVisible || openSettingsBackgroundVisible}
|
|
|
+ onClose={() => {
|
|
|
+ setOpenSettingsVisible(false);
|
|
|
+ setOpenSettingsBackgroundVisible(false);
|
|
|
+ }}
|
|
|
+ action={async () => {
|
|
|
+ const isServicesEnabled = await Location.hasServicesEnabledAsync();
|
|
|
+
|
|
|
+ if (!isServicesEnabled) {
|
|
|
+ Platform.OS === 'ios'
|
|
|
+ ? Linking.openURL('app-settings:')
|
|
|
+ : Linking.sendIntent('android.settings.LOCATION_SOURCE_SETTINGS');
|
|
|
+ } else {
|
|
|
+ Platform.OS === 'ios' ? Linking.openURL('app-settings:') : Linking.openSettings();
|
|
|
}
|
|
|
- ]}
|
|
|
- onPress={toggleNomadsSwitch}
|
|
|
- disabled={!isSharing}
|
|
|
- >
|
|
|
- <View style={styles.alignStyle}>
|
|
|
- <UsersIcon
|
|
|
- fill={isSharing ? Colors.DARK_BLUE : Colors.LIGHT_GRAY}
|
|
|
- width={20}
|
|
|
- height={20}
|
|
|
- />
|
|
|
- <Text style={[styles.buttonLabel, !isSharing ? { color: Colors.LIGHT_GRAY } : {}]}>
|
|
|
- Show all Nomads - {usersOnMapCount ? formatNumber(usersOnMapCount) : null} online
|
|
|
- </Text>
|
|
|
- </View>
|
|
|
- <View>
|
|
|
- <Switch
|
|
|
- trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.DARK_BLUE }}
|
|
|
- thumbColor={Colors.WHITE}
|
|
|
- onValueChange={toggleNomadsSwitch}
|
|
|
- value={showNomads}
|
|
|
- style={{ transform: 'scale(0.8)' }}
|
|
|
- disabled={!isSharing}
|
|
|
- />
|
|
|
- </View>
|
|
|
- </TouchableOpacity>
|
|
|
-
|
|
|
- <View style={styles.divider} />
|
|
|
-
|
|
|
- {/* <View style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 12 }}>
|
|
|
- <View style={styles.divider} />
|
|
|
- <Text
|
|
|
- style={{
|
|
|
- color: Colors.DARK_BLUE,
|
|
|
- fontSize: getFontSize(12),
|
|
|
- fontWeight: '500',
|
|
|
- paddingHorizontal: 4
|
|
|
}}
|
|
|
- >
|
|
|
- Premium Features
|
|
|
- </Text>
|
|
|
- <View style={styles.divider} />
|
|
|
- </View> */}
|
|
|
+ message={
|
|
|
+ openSettingsBackgroundVisible
|
|
|
+ ? "NomadMania app needs background location access to update your location automatically. Please select 'Always' in location permissions. Open settings?"
|
|
|
+ : 'NomadMania app needs location permissions to function properly. Open settings?'
|
|
|
+ }
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ );
|
|
|
+ };
|
|
|
|
|
|
- {/* <TouchableOpacity
|
|
|
+ const renderScene = (filterKey: string | null) => {
|
|
|
+ switch (filterKey) {
|
|
|
+ case 'regions':
|
|
|
+ return renderRegions();
|
|
|
+ case 'series':
|
|
|
+ return renderSeries();
|
|
|
+ case 'nomads':
|
|
|
+ return renderNomads();
|
|
|
+ default:
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const isSeriesFilter = isFilterVisible === 'series';
|
|
|
+ const sheetSnapPoints = useMemo(() => [100], []);
|
|
|
+
|
|
|
+ return (
|
|
|
+ <ActionSheet
|
|
|
+ key={isSeriesFilter ? 'series-sheet' : 'default-sheet'}
|
|
|
+ ref={bottomSheetRef}
|
|
|
+ snapPoints={sheetSnapPoints}
|
|
|
+ gestureEnabled
|
|
|
+ closeOnTouchBackdrop
|
|
|
+ defaultOverlayOpacity={0.2}
|
|
|
+ onClose={handleCloseFilter}
|
|
|
+ containerStyle={[styles.sheetBackground, isSeriesFilter ? { height: '100%' } : {}]}
|
|
|
+ >
|
|
|
+ <View
|
|
|
style={[
|
|
|
- styles.alignStyle,
|
|
|
- styles.buttonWrapper,
|
|
|
{
|
|
|
- justifyContent: 'space-between'
|
|
|
- }
|
|
|
+ paddingTop: 12,
|
|
|
+ height: isSeriesFilter ? windowHeight - insets.top : undefined
|
|
|
+ },
|
|
|
+ isFilterVisible === 'series' ? {} : { paddingHorizontal: 16 }
|
|
|
]}
|
|
|
- onPress={toggleTrustedSwitch}
|
|
|
- disabled={!isSharing}
|
|
|
>
|
|
|
- <View style={styles.alignStyle}>
|
|
|
- <UsersIcon
|
|
|
- fill={isSharing ? Colors.DARK_BLUE : Colors.LIGHT_GRAY}
|
|
|
- width={20}
|
|
|
- height={20}
|
|
|
- />
|
|
|
- <Text style={[styles.buttonLabel, !isSharing ? { color: Colors.LIGHT_GRAY } : {}]}>
|
|
|
- Show trusted Nomads
|
|
|
- </Text>
|
|
|
- </View>
|
|
|
- <View>
|
|
|
- <Switch
|
|
|
- trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.DARK_BLUE }}
|
|
|
- thumbColor={Colors.WHITE}
|
|
|
- onValueChange={toggleTrustedSwitch}
|
|
|
- value={trustedVisible}
|
|
|
- style={{ transform: 'scale(0.8)' }}
|
|
|
- disabled={!isSharing}
|
|
|
- />
|
|
|
- </View>
|
|
|
- </TouchableOpacity> */}
|
|
|
-
|
|
|
- <TouchableOpacity
|
|
|
- style={[
|
|
|
- styles.alignStyle,
|
|
|
- styles.buttonWrapper,
|
|
|
- {
|
|
|
- justifyContent: 'space-between'
|
|
|
- }
|
|
|
- ]}
|
|
|
- onPress={toggleFriendsSwitch}
|
|
|
- disabled={!isSharing}
|
|
|
- >
|
|
|
- <View style={styles.alignStyle}>
|
|
|
- <FriendsIcon
|
|
|
- fill={isSharing ? Colors.DARK_BLUE : Colors.LIGHT_GRAY}
|
|
|
- width={20}
|
|
|
- height={18}
|
|
|
- />
|
|
|
- <Text style={[styles.buttonLabel, !isSharing ? { color: Colors.LIGHT_GRAY } : {}]}>
|
|
|
- Show my friends - {friendsOnTheMapCount ? formatNumber(friendsOnTheMapCount) : null}{' '}
|
|
|
- online
|
|
|
- </Text>
|
|
|
- </View>
|
|
|
- <View>
|
|
|
- <Switch
|
|
|
- trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.DARK_BLUE }}
|
|
|
- thumbColor={Colors.WHITE}
|
|
|
- onValueChange={toggleFriendsSwitch}
|
|
|
- value={friendsVisible}
|
|
|
- style={{ transform: 'scale(0.8)' }}
|
|
|
- disabled={!isSharing}
|
|
|
- />
|
|
|
- </View>
|
|
|
- </TouchableOpacity>
|
|
|
-
|
|
|
- <TouchableOpacity
|
|
|
- style={styles.megaSelector}
|
|
|
- onPress={() => {
|
|
|
- if (!isPremium) {
|
|
|
- setPremiumModalVisible(true);
|
|
|
- return;
|
|
|
- }
|
|
|
- setCountrySelectorVisible(true);
|
|
|
- }}
|
|
|
- disabled={!isSharing}
|
|
|
- >
|
|
|
- <Text style={styles.megaButtonText}>Show Nomads from (select a country)</Text>
|
|
|
- <ChevronIcon width={18} height={18} />
|
|
|
- </TouchableOpacity>
|
|
|
-
|
|
|
- {selectedCountries.length > 0 && (
|
|
|
- <View
|
|
|
- style={{
|
|
|
- flexDirection: 'row',
|
|
|
- alignItems: 'center',
|
|
|
- flexWrap: 'wrap',
|
|
|
- marginLeft: 12,
|
|
|
- gap: 6,
|
|
|
- marginVertical: 8
|
|
|
- }}
|
|
|
- >
|
|
|
- {selectedCountries.map((item) => (
|
|
|
- <View
|
|
|
- key={item.country}
|
|
|
- style={{
|
|
|
- marginLeft: -12
|
|
|
- }}
|
|
|
- >
|
|
|
- <Image
|
|
|
- source={{ uri: API_HOST + item.flag }}
|
|
|
- style={{
|
|
|
- width: 28,
|
|
|
- height: 28,
|
|
|
- borderRadius: 14,
|
|
|
- borderWidth: 0.5,
|
|
|
- borderColor: Colors.BORDER_LIGHT
|
|
|
- }}
|
|
|
- />
|
|
|
- </View>
|
|
|
- ))}
|
|
|
- </View>
|
|
|
- )}
|
|
|
+ {renderScene(isFilterVisible)}
|
|
|
</View>
|
|
|
-
|
|
|
- <Button
|
|
|
- children="Reset"
|
|
|
- onPress={() => {
|
|
|
- if (isSharing) {
|
|
|
- setFriendsVisible(false);
|
|
|
- setShowNomads && setShowNomads(true);
|
|
|
- storage.set('showNomads', true);
|
|
|
- setSelectedCountries([]);
|
|
|
- } else {
|
|
|
- handleGetLocation();
|
|
|
- }
|
|
|
- }}
|
|
|
- variant={ButtonVariants.OPACITY}
|
|
|
- containerStyles={{
|
|
|
- backgroundColor: Colors.WHITE,
|
|
|
- borderWidth: 1,
|
|
|
- borderColor: Colors.DARK_BLUE
|
|
|
- }}
|
|
|
- textStyles={{ color: Colors.DARK_BLUE }}
|
|
|
- />
|
|
|
-
|
|
|
- <MultiSelectorCountries
|
|
|
- isVisible={countrySelectorVisible}
|
|
|
- onClose={() => setCountrySelectorVisible(false)}
|
|
|
- onSelect={handleCountrySelect}
|
|
|
- data={countriesForSelector ?? []}
|
|
|
- initialSelectedIds={selectedCountries.map((item) => parseInt(item.country))}
|
|
|
- />
|
|
|
-
|
|
|
- <WarningModal
|
|
|
- type={'success'}
|
|
|
- isVisible={premiumModalVisible}
|
|
|
- message={
|
|
|
- 'This feature is available to Premium users. Premium account settings can be managed on our website.'
|
|
|
- }
|
|
|
- action={() => {}}
|
|
|
- onClose={() => setPremiumModalVisible(false)}
|
|
|
- title={'Premium Feature'}
|
|
|
- />
|
|
|
-
|
|
|
- <WarningModal
|
|
|
- type={'success'}
|
|
|
- isVisible={askLocationVisible}
|
|
|
- onClose={() => setAskLocationVisible(false)}
|
|
|
- action={handleAcceptPermission}
|
|
|
- message="To use this feature we need your permission to access your location. If you press OK your system will ask you to approve location sharing with NomadMania app."
|
|
|
- />
|
|
|
- <WarningModal
|
|
|
- type={'success'}
|
|
|
- isVisible={openSettingsVisible || openSettingsBackgroundVisible}
|
|
|
- onClose={() => {
|
|
|
- setOpenSettingsVisible(false);
|
|
|
- setOpenSettingsBackgroundVisible(false);
|
|
|
- }}
|
|
|
- action={async () => {
|
|
|
- const isServicesEnabled = await Location.hasServicesEnabledAsync();
|
|
|
-
|
|
|
- if (!isServicesEnabled) {
|
|
|
- Platform.OS === 'ios'
|
|
|
- ? Linking.openURL('app-settings:')
|
|
|
- : Linking.sendIntent('android.settings.LOCATION_SOURCE_SETTINGS');
|
|
|
- } else {
|
|
|
- Platform.OS === 'ios' ? Linking.openURL('app-settings:') : Linking.openSettings();
|
|
|
- }
|
|
|
- }}
|
|
|
- message={
|
|
|
- openSettingsBackgroundVisible
|
|
|
- ? "NomadMania app needs background location access to update your location automatically. Please select 'Always' in location permissions. Open settings?"
|
|
|
- : 'NomadMania app needs location permissions to function properly. Open settings?'
|
|
|
- }
|
|
|
- />
|
|
|
- </View>
|
|
|
+ </ActionSheet>
|
|
|
);
|
|
|
- };
|
|
|
-
|
|
|
- const renderScene = (filterKey: string | null) => {
|
|
|
- switch (filterKey) {
|
|
|
- case 'regions':
|
|
|
- return renderRegions();
|
|
|
- case 'series':
|
|
|
- return renderSeries();
|
|
|
- case 'nomads':
|
|
|
- return renderNomads();
|
|
|
- default:
|
|
|
- return null;
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- return (
|
|
|
- <ReactModal
|
|
|
- isVisible={!!isFilterVisible}
|
|
|
- onBackdropPress={handleCloseFilter}
|
|
|
- onBackButtonPress={handleCloseFilter}
|
|
|
- style={styles.modal}
|
|
|
- statusBarTranslucent={true}
|
|
|
- presentationStyle="overFullScreen"
|
|
|
- >
|
|
|
- <View style={[styles.modalContainer, { minHeight: 260 }]}>
|
|
|
- {renderScene(isFilterVisible)}
|
|
|
- </View>
|
|
|
- </ReactModal>
|
|
|
- );
|
|
|
-};
|
|
|
+ }
|
|
|
+);
|
|
|
|
|
|
export default FilterModal;
|
