|
| 1 | +import React, { useCallback, useEffect, useState } from 'react'; |
| 2 | +import { View, Text, StyleSheet, ScrollView, Pressable } from 'react-native'; |
| 3 | +import { useSessionUser, useSession } from '@/providers/SessionProvider'; |
| 4 | +import { BACKGROUND_TASK_IDENTIFIER, getBackgroundTaskRegistrationState, registerBackgroundFetch, unregisterBackgroundTask, triggerBackgroundTaskForTesting } from '@/utils/tasks.utils'; |
| 5 | + |
| 6 | +interface BgState { |
| 7 | + status: number | null; |
| 8 | + isRegistered: boolean; |
| 9 | + loading: boolean; |
| 10 | + lastAction?: string; |
| 11 | +} |
| 12 | + |
| 13 | +export default function DebugScreen() { |
| 14 | + const { fcmToken, authReady, fcmReady, user, accessToken } = useSessionUser(); |
| 15 | + const { session } = useSession(); |
| 16 | + const [bg, setBg] = useState<BgState>({ status: null, isRegistered: false, loading: false }); |
| 17 | + |
| 18 | + const refresh = useCallback(async () => { |
| 19 | + setBg((s) => ({ ...s, loading: true })); |
| 20 | + try { |
| 21 | + const r = await getBackgroundTaskRegistrationState(); |
| 22 | + setBg((s) => ({ ...s, ...r, loading: false })); |
| 23 | + } catch (e) { |
| 24 | + setBg((s) => ({ ...s, loading: false, lastAction: 'refresh failed' })); |
| 25 | + } |
| 26 | + }, []); |
| 27 | + |
| 28 | + useEffect(() => { |
| 29 | + refresh(); |
| 30 | + }, [refresh]); |
| 31 | + |
| 32 | + const register = async () => { |
| 33 | + setBg((s) => ({ ...s, loading: true })); |
| 34 | + await registerBackgroundFetch(); |
| 35 | + await refresh(); |
| 36 | + setBg((s) => ({ ...s, lastAction: 'registered' })); |
| 37 | + }; |
| 38 | + const unregister = async () => { |
| 39 | + setBg((s) => ({ ...s, loading: true })); |
| 40 | + await unregisterBackgroundTask(); |
| 41 | + await refresh(); |
| 42 | + setBg((s) => ({ ...s, lastAction: 'unregistered' })); |
| 43 | + }; |
| 44 | + const trigger = async () => { |
| 45 | + setBg((s) => ({ ...s, lastAction: 'triggering' })); |
| 46 | + await triggerBackgroundTaskForTesting(); |
| 47 | + }; |
| 48 | + |
| 49 | + const tokenTail = fcmToken ? fcmToken.slice(-10) : 'none'; |
| 50 | + |
| 51 | + return ( |
| 52 | + <ScrollView style={styles.root} contentContainerStyle={styles.content}> |
| 53 | + <Text style={styles.h1}>Debug</Text> |
| 54 | + <Section title="Session"> |
| 55 | + <Mono label="FCM Ready" value={String(fcmReady)} /> |
| 56 | + <Mono label="Auth Ready" value={String(authReady)} /> |
| 57 | + <Mono label="FCM Token Tail" value={tokenTail} /> |
| 58 | + <Mono label="User Email" value={user?.email || '—'} /> |
| 59 | + <Mono label="Access Token" value={accessToken ? accessToken.slice(0, 15) + '…' : '—'} /> |
| 60 | + </Section> |
| 61 | + <Section title="Raw Session Snapshot"> |
| 62 | + <Text style={styles.code}>{JSON.stringify(session, null, 2)}</Text> |
| 63 | + </Section> |
| 64 | + <Section title="Background Task"> |
| 65 | + <Mono label="Identifier" value={BACKGROUND_TASK_IDENTIFIER} /> |
| 66 | + <Mono label="Status" value={bg.status === null ? '—' : String(bg.status)} /> |
| 67 | + <Mono label="Registered" value={String(bg.isRegistered)} /> |
| 68 | + <Mono label="Last Action" value={bg.lastAction || '—'} /> |
| 69 | + <View style={styles.rowWrap}> |
| 70 | + <Btn label="Refresh" onPress={refresh} disabled={bg.loading} /> |
| 71 | + <Btn label="Register" onPress={register} disabled={bg.loading || bg.isRegistered} /> |
| 72 | + <Btn label="Unregister" onPress={unregister} disabled={bg.loading || !bg.isRegistered} /> |
| 73 | + <Btn label="Trigger(dev)" onPress={trigger} /> |
| 74 | + </View> |
| 75 | + </Section> |
| 76 | + <Text style={styles.footer}>Build Debug Utilities v1</Text> |
| 77 | + </ScrollView> |
| 78 | + ); |
| 79 | +} |
| 80 | + |
| 81 | +function Section({ title, children }: { title: string; children: React.ReactNode }) { |
| 82 | + return ( |
| 83 | + <View style={styles.section}> |
| 84 | + <Text style={styles.sectionTitle}>{title}</Text> |
| 85 | + {children} |
| 86 | + </View> |
| 87 | + ); |
| 88 | +} |
| 89 | + |
| 90 | +function Mono({ label, value }: { label: string; value: string }) { |
| 91 | + return ( |
| 92 | + <View style={styles.kvRow}> |
| 93 | + <Text style={styles.kvLabel}>{label}</Text> |
| 94 | + <Text style={styles.kvValue}>{value}</Text> |
| 95 | + </View> |
| 96 | + ); |
| 97 | +} |
| 98 | + |
| 99 | +function Btn({ label, onPress, disabled }: { label: string; onPress: () => void; disabled?: boolean }) { |
| 100 | + return ( |
| 101 | + <Pressable |
| 102 | + onPress={disabled ? undefined : onPress} |
| 103 | + style={[styles.btn, disabled && styles.btnDisabled]} |
| 104 | + android_ripple={{ color: '#222' }} |
| 105 | + > |
| 106 | + <Text style={styles.btnText}>{label}</Text> |
| 107 | + </Pressable> |
| 108 | + ); |
| 109 | +} |
| 110 | + |
| 111 | +const styles = StyleSheet.create({ |
| 112 | + root: { flex: 1, backgroundColor: '#000' }, |
| 113 | + content: { padding: 16, paddingBottom: 48 }, |
| 114 | + h1: { fontSize: 26, fontWeight: '600', color: '#fff', marginBottom: 12 }, |
| 115 | + section: { marginBottom: 24, backgroundColor: '#111', borderRadius: 8, padding: 12 }, |
| 116 | + sectionTitle: { color: '#9acd32', fontWeight: '600', fontSize: 16, marginBottom: 8 }, |
| 117 | + kvRow: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 4 }, |
| 118 | + kvLabel: { color: '#bbb', fontSize: 13 }, |
| 119 | + kvValue: { color: '#fff', fontFamily: 'monospace', fontSize: 13, flexShrink: 1, textAlign: 'right' }, |
| 120 | + code: { color: '#8f8', fontFamily: 'monospace', fontSize: 12 }, |
| 121 | + rowWrap: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 8 }, |
| 122 | + btn: { backgroundColor: '#222', paddingVertical: 8, paddingHorizontal: 12, borderRadius: 6, marginRight: 8, marginBottom: 8 }, |
| 123 | + btnDisabled: { opacity: 0.4 }, |
| 124 | + btnText: { color: '#fff', fontSize: 12, fontWeight: '600' }, |
| 125 | + footer: { textAlign: 'center', color: '#444', fontSize: 12 }, |
| 126 | + row: { flexDirection: 'row', alignItems: 'center', gap: 12 }, |
| 127 | + debugButton: { marginLeft: 12, backgroundColor: '#333', paddingHorizontal: 14, paddingVertical: 10, borderRadius: 6, justifyContent: 'center' }, |
| 128 | + debugButtonText: { color: '#fff', fontWeight: '600' }, |
| 129 | +}); |
0 commit comments