333 lines
9.9 KiB
TypeScript
333 lines
9.9 KiB
TypeScript
|
/**
|
|||
|
|
* HomeScreen — karta med live-uppdrag + snabbstatistik (intjänat idag)
|
|||
|
|
* Integrerad med useLiveLocation() för kontinuerlig GPS-tracking
|
|||
|
|
*/
|
|||
|
|
import { useCallback, useEffect, useRef, useState } from 'react'
|
|||
|
|
import {
|
|||
|
|
View, Text, StyleSheet, TouchableOpacity,
|
|||
|
|
ActivityIndicator, Platform,
|
|||
|
|
} from 'react-native'
|
|||
|
|
import MapView, { Marker, Region, PROVIDER_DEFAULT } from 'react-native-maps'
|
|||
|
|
import { useNavigation } from '@react-navigation/native'
|
|||
|
|
import { missions, wallet, type Mission, type WalletBalance } from '../lib/api'
|
|||
|
|
import { useLiveLocation } from '../src/hooks/useLiveLocation'
|
|||
|
|
import { useHeading } from '../src/hooks/useHeading'
|
|||
|
|
import { useLocationStore } from '../src/stores/locationStore'
|
|||
|
|
import { UserLocationMarker } from '../src/components/gps/UserLocationMarker'
|
|||
|
|
import { FollowUserButton } from '../src/components/gps/FollowUserButton'
|
|||
|
|
import { GpsDiagnostics } from '../src/components/gps/GpsDiagnostics'
|
|||
|
|
|
|||
|
|
const STOCKHOLM_ARCHIPELAGO: Region = {
|
|||
|
|
latitude: 59.45,
|
|||
|
|
longitude: 18.5,
|
|||
|
|
latitudeDelta: 0.8,
|
|||
|
|
longitudeDelta: 0.8,
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const CATEGORY_EMOJI: Record<string, string> = {
|
|||
|
|
infrastruktur: '🏗️',
|
|||
|
|
vägar: '🛤️',
|
|||
|
|
hamnar: '⚓',
|
|||
|
|
bryggor: '🚢',
|
|||
|
|
fritidshus: '🏠',
|
|||
|
|
miljö: '🌿',
|
|||
|
|
övrigt: '📍',
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function HomeScreen() {
|
|||
|
|
const navigation = useNavigation<any>()
|
|||
|
|
const mapRef = useRef<MapView>(null)
|
|||
|
|
|
|||
|
|
// Initialize live location tracking
|
|||
|
|
useLiveLocation()
|
|||
|
|
useHeading()
|
|||
|
|
|
|||
|
|
const {
|
|||
|
|
currentPosition,
|
|||
|
|
followUser,
|
|||
|
|
setUserPannedMap,
|
|||
|
|
locationAuthStatus,
|
|||
|
|
} = useLocationStore()
|
|||
|
|
|
|||
|
|
const [region, setRegion] = useState<Region>(STOCKHOLM_ARCHIPELAGO)
|
|||
|
|
const [nearbyMissions, setNearbyMissions] = useState<Mission[]>([])
|
|||
|
|
const [balance, setBalance] = useState<WalletBalance | null>(null)
|
|||
|
|
const [loadingMissions, setLoadingMissions] = useState(false)
|
|||
|
|
const [showDiagnostics, setShowDiagnostics] = useState(false)
|
|||
|
|
const [initialLocationSet, setInitialLocationSet] = useState(false)
|
|||
|
|
|
|||
|
|
// Center map on first position fix
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (currentPosition && !initialLocationSet) {
|
|||
|
|
const newRegion: Region = {
|
|||
|
|
latitude: currentPosition.coords.latitude,
|
|||
|
|
longitude: currentPosition.coords.longitude,
|
|||
|
|
latitudeDelta: 0.5,
|
|||
|
|
longitudeDelta: 0.5,
|
|||
|
|
}
|
|||
|
|
setRegion(newRegion)
|
|||
|
|
mapRef.current?.animateToRegion(newRegion, 800)
|
|||
|
|
fetchNearby(currentPosition.coords.latitude, currentPosition.coords.longitude)
|
|||
|
|
setInitialLocationSet(true)
|
|||
|
|
}
|
|||
|
|
}, [currentPosition, initialLocationSet])
|
|||
|
|
|
|||
|
|
// Auto-follow user when followUser is true
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (followUser && currentPosition && mapRef.current) {
|
|||
|
|
const newRegion: Region = {
|
|||
|
|
latitude: currentPosition.coords.latitude,
|
|||
|
|
longitude: currentPosition.coords.longitude,
|
|||
|
|
latitudeDelta: region.latitudeDelta,
|
|||
|
|
longitudeDelta: region.longitudeDelta,
|
|||
|
|
}
|
|||
|
|
mapRef.current.animateToRegion(newRegion, 300)
|
|||
|
|
}
|
|||
|
|
}, [currentPosition, followUser, region.latitudeDelta, region.longitudeDelta])
|
|||
|
|
|
|||
|
|
// Wallet balance
|
|||
|
|
useEffect(() => {
|
|||
|
|
wallet.balance().then(setBalance).catch(() => {})
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
const fetchNearby = useCallback(async (lat: number, lng: number) => {
|
|||
|
|
setLoadingMissions(true)
|
|||
|
|
try {
|
|||
|
|
const data = await missions.nearby(lat, lng, 60)
|
|||
|
|
setNearbyMissions(data)
|
|||
|
|
} catch {
|
|||
|
|
// silent
|
|||
|
|
} finally {
|
|||
|
|
setLoadingMissions(false)
|
|||
|
|
}
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
const onRegionChangeComplete = useCallback((r: Region) => {
|
|||
|
|
setRegion(r)
|
|||
|
|
fetchNearby(r.latitude, r.longitude)
|
|||
|
|
}, [fetchNearby])
|
|||
|
|
|
|||
|
|
const onPanDrag = useCallback(() => {
|
|||
|
|
setUserPannedMap(true)
|
|||
|
|
}, [setUserPannedMap])
|
|||
|
|
|
|||
|
|
const availableSEK = balance ? ((balance.balance - balance.pending_payouts) / 100).toFixed(0) : '—'
|
|||
|
|
const pendingSEK = balance ? (balance.pending_payouts / 100).toFixed(0) : '—'
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<View style={styles.container}>
|
|||
|
|
{/* Map */}
|
|||
|
|
<MapView
|
|||
|
|
ref={mapRef}
|
|||
|
|
style={styles.map}
|
|||
|
|
provider={PROVIDER_DEFAULT}
|
|||
|
|
initialRegion={STOCKHOLM_ARCHIPELAGO}
|
|||
|
|
region={region}
|
|||
|
|
onRegionChangeComplete={onRegionChangeComplete}
|
|||
|
|
onPanDrag={onPanDrag}
|
|||
|
|
showsUserLocation={false} // We use custom UserLocationMarker
|
|||
|
|
showsMyLocationButton={false}
|
|||
|
|
rotateEnabled={false} // Map stays north-up, marker rotates
|
|||
|
|
>
|
|||
|
|
{/* Custom user location marker with heading */}
|
|||
|
|
{currentPosition && (
|
|||
|
|
<Marker
|
|||
|
|
coordinate={{
|
|||
|
|
latitude: currentPosition.coords.latitude,
|
|||
|
|
longitude: currentPosition.coords.longitude,
|
|||
|
|
}}
|
|||
|
|
anchor={{ x: 0.5, y: 0.5 }}
|
|||
|
|
flat={true}
|
|||
|
|
>
|
|||
|
|
<UserLocationMarker />
|
|||
|
|
</Marker>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{nearbyMissions.map(m => (
|
|||
|
|
<Marker
|
|||
|
|
key={m.id}
|
|||
|
|
coordinate={{ latitude: m.latitude, longitude: m.longitude }}
|
|||
|
|
title={m.title}
|
|||
|
|
description={`${(m.reward_amount / 100).toFixed(0)} SEK`}
|
|||
|
|
onCalloutPress={() => navigation.navigate('MissionDetail', { missionId: m.id })}
|
|||
|
|
>
|
|||
|
|
<View style={styles.markerBubble}>
|
|||
|
|
<Text style={styles.markerEmoji}>
|
|||
|
|
{CATEGORY_EMOJI[m.category] ?? '📍'}
|
|||
|
|
</Text>
|
|||
|
|
<Text style={styles.markerReward}>
|
|||
|
|
{(m.reward_amount / 100).toFixed(0)} kr
|
|||
|
|
</Text>
|
|||
|
|
</View>
|
|||
|
|
</Marker>
|
|||
|
|
))}
|
|||
|
|
</MapView>
|
|||
|
|
|
|||
|
|
{/* Loading indicator */}
|
|||
|
|
{loadingMissions && (
|
|||
|
|
<View style={styles.loadingOverlay}>
|
|||
|
|
<ActivityIndicator color="#6366f1" size="small" />
|
|||
|
|
</View>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* GPS Diagnostics toggle */}
|
|||
|
|
<TouchableOpacity
|
|||
|
|
style={styles.diagnosticsToggle}
|
|||
|
|
onPress={() => setShowDiagnostics(prev => !prev)}
|
|||
|
|
>
|
|||
|
|
<Text style={styles.diagnosticsToggleText}>
|
|||
|
|
{showDiagnostics ? '🔧' : '🛠️'}
|
|||
|
|
</Text>
|
|||
|
|
</TouchableOpacity>
|
|||
|
|
|
|||
|
|
{/* GPS Diagnostics overlay */}
|
|||
|
|
{showDiagnostics && <GpsDiagnostics />}
|
|||
|
|
|
|||
|
|
{/* Stats card */}
|
|||
|
|
<View style={styles.statsCard}>
|
|||
|
|
<View style={styles.statItem}>
|
|||
|
|
<Text style={styles.statLabel}>Tillgängligt</Text>
|
|||
|
|
<Text style={styles.statValue}>{availableSEK} kr</Text>
|
|||
|
|
</View>
|
|||
|
|
<View style={styles.statDivider} />
|
|||
|
|
<View style={styles.statItem}>
|
|||
|
|
<Text style={styles.statLabel}>Under behandling</Text>
|
|||
|
|
<Text style={[styles.statValue, { color: '#f59e0b' }]}>{pendingSEK} kr</Text>
|
|||
|
|
</View>
|
|||
|
|
<View style={styles.statDivider} />
|
|||
|
|
<View style={styles.statItem}>
|
|||
|
|
<Text style={styles.statLabel}>Uppdrag nära</Text>
|
|||
|
|
<Text style={[styles.statValue, { color: '#10b981' }]}>{nearbyMissions.length}</Text>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
|
|||
|
|
{/* Follow user button */}
|
|||
|
|
<View style={styles.followBtnContainer}>
|
|||
|
|
<FollowUserButton />
|
|||
|
|
</View>
|
|||
|
|
|
|||
|
|
{/* Location status indicator */}
|
|||
|
|
{locationAuthStatus !== 'granted' && locationAuthStatus !== null && (
|
|||
|
|
<View style={styles.locationWarning}>
|
|||
|
|
<Text style={styles.locationWarningText}>
|
|||
|
|
⚠️ GPS-behörighet: {locationAuthStatus}
|
|||
|
|
</Text>
|
|||
|
|
</View>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Missions list button */}
|
|||
|
|
<TouchableOpacity
|
|||
|
|
style={styles.missionsBtn}
|
|||
|
|
onPress={() => navigation.navigate('Uppdrag')}
|
|||
|
|
>
|
|||
|
|
<Text style={styles.missionsBtnText}>
|
|||
|
|
🎯 {nearbyMissions.length} uppdrag nära dig
|
|||
|
|
</Text>
|
|||
|
|
</TouchableOpacity>
|
|||
|
|
</View>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const styles = StyleSheet.create({
|
|||
|
|
container: { flex: 1, backgroundColor: '#0A0A1B' },
|
|||
|
|
map: { flex: 1 },
|
|||
|
|
|
|||
|
|
markerBubble: {
|
|||
|
|
backgroundColor: '#6366f1',
|
|||
|
|
borderRadius: 20,
|
|||
|
|
paddingHorizontal: 10,
|
|||
|
|
paddingVertical: 6,
|
|||
|
|
alignItems: 'center',
|
|||
|
|
shadowColor: '#000',
|
|||
|
|
shadowOffset: { width: 0, height: 2 },
|
|||
|
|
shadowOpacity: 0.4,
|
|||
|
|
shadowRadius: 4,
|
|||
|
|
elevation: 4,
|
|||
|
|
},
|
|||
|
|
markerEmoji: { fontSize: 14 },
|
|||
|
|
markerReward: { color: '#fff', fontSize: 11, fontWeight: '700' },
|
|||
|
|
|
|||
|
|
loadingOverlay: {
|
|||
|
|
position: 'absolute',
|
|||
|
|
top: Platform.OS === 'ios' ? 60 : 16,
|
|||
|
|
right: 16,
|
|||
|
|
backgroundColor: 'rgba(0,0,0,0.7)',
|
|||
|
|
borderRadius: 20,
|
|||
|
|
padding: 8,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
diagnosticsToggle: {
|
|||
|
|
position: 'absolute',
|
|||
|
|
top: Platform.OS === 'ios' ? 60 : 16,
|
|||
|
|
right: 60,
|
|||
|
|
width: 36,
|
|||
|
|
height: 36,
|
|||
|
|
backgroundColor: 'rgba(10,10,27,0.9)',
|
|||
|
|
borderRadius: 18,
|
|||
|
|
borderWidth: 1,
|
|||
|
|
borderColor: 'rgba(255,255,255,0.15)',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
justifyContent: 'center',
|
|||
|
|
},
|
|||
|
|
diagnosticsToggleText: { fontSize: 16 },
|
|||
|
|
|
|||
|
|
statsCard: {
|
|||
|
|
position: 'absolute',
|
|||
|
|
top: Platform.OS === 'ios' ? 60 : 16,
|
|||
|
|
left: 16,
|
|||
|
|
right: 104,
|
|||
|
|
flexDirection: 'row',
|
|||
|
|
backgroundColor: 'rgba(10,10,27,0.92)',
|
|||
|
|
borderRadius: 16,
|
|||
|
|
borderWidth: 1,
|
|||
|
|
borderColor: 'rgba(255,255,255,0.1)',
|
|||
|
|
padding: 12,
|
|||
|
|
alignItems: 'center',
|
|||
|
|
},
|
|||
|
|
statItem: { flex: 1, alignItems: 'center' },
|
|||
|
|
statLabel: { color: 'rgba(255,255,255,0.45)', fontSize: 10, marginBottom: 2 },
|
|||
|
|
statValue: { color: '#fff', fontSize: 15, fontWeight: '800' },
|
|||
|
|
statDivider: { width: 1, height: 28, backgroundColor: 'rgba(255,255,255,0.1)' },
|
|||
|
|
|
|||
|
|
followBtnContainer: {
|
|||
|
|
position: 'absolute',
|
|||
|
|
bottom: 100,
|
|||
|
|
right: 16,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
locationWarning: {
|
|||
|
|
position: 'absolute',
|
|||
|
|
top: Platform.OS === 'ios' ? 120 : 76,
|
|||
|
|
left: 16,
|
|||
|
|
right: 16,
|
|||
|
|
backgroundColor: 'rgba(245,158,11,0.2)',
|
|||
|
|
borderRadius: 12,
|
|||
|
|
padding: 10,
|
|||
|
|
borderWidth: 1,
|
|||
|
|
borderColor: 'rgba(245,158,11,0.4)',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
},
|
|||
|
|
locationWarningText: {
|
|||
|
|
color: '#f59e0b',
|
|||
|
|
fontSize: 12,
|
|||
|
|
fontWeight: '600',
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
missionsBtn: {
|
|||
|
|
position: 'absolute',
|
|||
|
|
bottom: 32,
|
|||
|
|
left: 16,
|
|||
|
|
right: 16,
|
|||
|
|
backgroundColor: '#6366f1',
|
|||
|
|
borderRadius: 16,
|
|||
|
|
paddingVertical: 16,
|
|||
|
|
alignItems: 'center',
|
|||
|
|
shadowColor: '#6366f1',
|
|||
|
|
shadowOffset: { width: 0, height: 4 },
|
|||
|
|
shadowOpacity: 0.4,
|
|||
|
|
shadowRadius: 12,
|
|||
|
|
elevation: 8,
|
|||
|
|
},
|
|||
|
|
missionsBtnText: { color: '#fff', fontWeight: '700', fontSize: 16 },
|
|||
|
|
})
|