diff --git a/mapkom_client/app/(tabs)/index.tsx b/mapkom_client/app/(tabs)/index.tsx index 683ac1c..ac5ba94 100644 --- a/mapkom_client/app/(tabs)/index.tsx +++ b/mapkom_client/app/(tabs)/index.tsx @@ -4,17 +4,14 @@ import * as MapLibreNative from '@maplibre/maplibre-react-native'; import { CameraRef } from '@maplibre/maplibre-react-native'; import { Platform, StyleSheet } from 'react-native'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; -import { useCallback, useMemo, useRef, useState } from 'react'; +import { useMemo, useRef, useState } from 'react'; import { useForegroundPermissions } from 'expo-location'; import MapFabStack from '@/lib/components/MapFabStack'; import React from 'react'; -import { useSocketIoListener } from '@/lib/providers/SocketIoProvider'; -import { feature, featureCollection } from '@turf/helpers'; import iconTramPointer from '@/assets/images/iconTramPointer.png'; import iconTramSmall from '@/assets/images/iconTramSmall.png'; import iconBusPointer from '@/assets/images/iconBusPointer.png'; import iconBusSmall from '@/assets/images/iconBusSmall.png'; -import { VehicleLocation } from '@/lib/vehicle'; import { SheetManager } from 'react-native-actions-sheet'; import { useMapStyleString } from '@/lib/hooks/useMapStyle'; import useLocationMarkers from '@/lib/hooks/useLocationMarkers'; @@ -39,7 +36,7 @@ export default function Index() { const markers = useLocationMarkers(); const [selectedMarker, setSelectedMarker] = useState(null); const mapFilters = useMemo( - () => getMapFilters(selectedMarker), + () => getMapFilters<'native'>(selectedMarker), [selectedMarker], ); diff --git a/mapkom_client/app/(tabs)/index.web.tsx b/mapkom_client/app/(tabs)/index.web.tsx index e649d9d..001d20d 100644 --- a/mapkom_client/app/(tabs)/index.web.tsx +++ b/mapkom_client/app/(tabs)/index.web.tsx @@ -1,18 +1,13 @@ import { styles } from '@/lib/styles'; -import { FAB, Surface } from 'react-native-paper'; +import { Surface } from 'react-native-paper'; import * as MapLibreWeb from '@vis.gl/react-maplibre'; -import { ImageSourcePropType, ImageURISource, StyleSheet } from 'react-native'; -import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { useForegroundPermissions } from 'expo-location'; -import MapFabStack from '@/lib/components/MapFabStack'; +import { ImageURISource, StyleSheet } from 'react-native'; +import { useEffect, useMemo, useState } from 'react'; import React from 'react'; -import { useSocketIoListener } from '@/lib/providers/SocketIoProvider'; -import { feature, featureCollection } from '@turf/helpers'; import iconTramPointer from '@/assets/images/iconTramPointer.png'; import iconTramSmall from '@/assets/images/iconTramSmall.png'; import iconBusPointer from '@/assets/images/iconBusPointer.png'; import iconBusSmall from '@/assets/images/iconBusSmall.png'; -import { VehicleLocation } from '@/lib/vehicle'; import { SheetManager } from 'react-native-actions-sheet'; import useMapStyle from '@/lib/hooks/useMapStyle'; import 'maplibre-gl/dist/maplibre-gl.css'; @@ -26,7 +21,7 @@ export default function IndexWeb() { const markers = useLocationMarkers(); const [selectedMarker, setSelectedMarker] = useState(null); const mapFilters = useMemo( - () => getMapFilters(selectedMarker), + () => getMapFilters<'web'>(selectedMarker), [selectedMarker], ); @@ -37,7 +32,7 @@ export default function IndexWeb() { return ( @@ -175,7 +170,7 @@ function ClickHandler({ setSelectedMarker }: ClickHandlerProps) { }); }); }); - }, [map]); + }, [map, setSelectedMarker]); return null; } diff --git a/mapkom_client/lib/Icon.d.ts b/mapkom_client/lib/Icon.d.ts index bfb0665..cf530b2 100644 --- a/mapkom_client/lib/Icon.d.ts +++ b/mapkom_client/lib/Icon.d.ts @@ -2,7 +2,7 @@ import GlyphMap from '@expo/vector-icons/build/vendor/react-native-vector-icons/ import { ImageSourcePropType, View } from 'react-native'; import type { Props as OriginalIconProps } from 'react-native-paper/src/components/Icon'; import type { Props as OriginalButtonProps } from 'react-native-paper/src/components/Button/Button'; -import { ForwardedRef } from 'react'; +import type { ForwardRefComponent } from 'react-native-paper/src/utils/forwardRef'; export type MaterialCommunityIcon = keyof typeof GlyphMap; export default MaterialCommunityIcon; @@ -41,10 +41,12 @@ declare module 'react-native-paper/src/components/Icon' { declare module 'react-native-paper/src/components/Button' { export type Props = ReplaceProps; - export default function Button( - props: ReplaceProps, - ref: ForwardedRef, - ): React.ReactNode; + export type Button = ForwardRefComponent< + View, + ReplaceProps + >; + + export default Button; } declare module 'react-native-paper' { @@ -54,8 +56,8 @@ declare module 'react-native-paper' { export function Icon( props: ReplaceProps, ): React.ReactNode; - export function Button( - props: ReplaceProps, - ref: ForwardedRef, - ): React.ReactNode; + export type Button = ForwardRefComponent< + View, + ReplaceProps + >; } diff --git a/mapkom_client/lib/i18n/index.ts b/mapkom_client/lib/i18n/index.ts index 9a8d65b..5f31726 100644 --- a/mapkom_client/lib/i18n/index.ts +++ b/mapkom_client/lib/i18n/index.ts @@ -3,10 +3,10 @@ import translationPl from './pl.json'; const resources = { en: { translation: translationEn }, - "en-US": { translation: translationEn }, - "en-GB": { translation: translationEn }, + 'en-US': { translation: translationEn }, + 'en-GB': { translation: translationEn }, pl: { translation: translationPl }, - "pl-PL": { translation: translationPl }, + 'pl-PL': { translation: translationPl }, }; export default resources; diff --git a/mapkom_client/lib/mapFilters.ts b/mapkom_client/lib/mapFilters.ts index 8966801..76723a2 100644 --- a/mapkom_client/lib/mapFilters.ts +++ b/mapkom_client/lib/mapFilters.ts @@ -1,15 +1,15 @@ -import { useEffect, useState } from 'react'; import type { FilterExpression as NativeExpression } from '@maplibre/maplibre-react-native/src/types/MapLibreRNStyles'; import type { ExpressionSpecification as WebExpression } from 'maplibre-gl'; -import type { Platform, PlatformWebStatic } from 'react-native'; -type MapFilter = Platform extends PlatformWebStatic +type Platform = 'web' | 'native'; + +type MapFilter

= P extends 'web' ? WebExpression : NativeExpression; -type MapFilters = { - BUS: MapFilter; - TRAM: MapFilter; +type MapFilters

= { + BUS: MapFilter

; + TRAM: MapFilter

; }; type VehicleTypeFilter = ['==', ['literal', string], ['get', 'vehicleType']]; @@ -30,9 +30,9 @@ function combineFilters( return ['all', typeFilter, selectedFilter]; } -export default function getMapFilters( +export default function getMapFilters

( selectedMarker: string | null, -): MapFilters { +): MapFilters

{ if (selectedMarker) { return { BUS: combineFilters( diff --git a/mapkom_client/lib/providers/BackendUrlProvider.tsx b/mapkom_client/lib/providers/BackendUrlProvider.tsx index a8b5b00..922ef0e 100644 --- a/mapkom_client/lib/providers/BackendUrlProvider.tsx +++ b/mapkom_client/lib/providers/BackendUrlProvider.tsx @@ -33,11 +33,13 @@ export function BackendUrlProvider({ children }: BackendUrlProviderProps) { const scriptURL = NativeModules?.SourceCode?.scriptURL; if (!scriptURL) return process.env.EXPO_PUBLIC_API_URL; const url = new URL(scriptURL); - if (url.hostname.endsWith("exp.direct")) return process.env.EXPO_PUBLIC_API_URL; + if (url.hostname.endsWith('exp.direct')) + return process.env.EXPO_PUBLIC_API_URL; return `${url.protocol}//${url.hostname}:8080`; }) as () => string )() - : process.env.EXPO_PUBLIC_API_URL) || 'https://mapkom-api.ggorg.xyz', + : process.env.EXPO_PUBLIC_API_URL) || + 'https://mapkom-api.ggorg.xyz', ); // TODO: handle more than 1 city + remember the last city + detect city by location + add city selection menu diff --git a/mapkom_client/lib/sheets/VehicleSheet.tsx b/mapkom_client/lib/sheets/VehicleSheet.tsx index 01c7b05..b3e909f 100644 --- a/mapkom_client/lib/sheets/VehicleSheet.tsx +++ b/mapkom_client/lib/sheets/VehicleSheet.tsx @@ -21,7 +21,6 @@ import { } from 'react-native-actions-sheet'; import React, { Dispatch, - RefObject, SetStateAction, useCallback, useEffect, @@ -111,7 +110,7 @@ function VehicleDetailsSheetRoute() { destroy(); } }; - }, [parentParams, vehicle]); + }, [parentParams, prevPos, vehicle]); const listener = useCallback( (_: string, vehicles: VehicleLocation[]) => {