diff --git a/mobile/src/app/(tabs)/inbox.tsx b/mobile/src/app/(tabs)/inbox.tsx index 2193634..e18cb38 100644 --- a/mobile/src/app/(tabs)/inbox.tsx +++ b/mobile/src/app/(tabs)/inbox.tsx @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import { Pressable, StyleSheet, Text, View } from 'react-native'; import { useInboxStore, type ActivityItem, type ApprovalItem, type InboxState } from '../../store/inbox-store'; import { colors } from '../../theme'; @@ -10,6 +10,7 @@ export default function InboxScreen() { const hydrate = useInboxStore((state: InboxState) => state.hydrate); const approve = useInboxStore((state: InboxState) => state.approve); const reject = useInboxStore((state: InboxState) => state.reject); + const [pendingApprovalId, setPendingApprovalId] = useState(null); useEffect(() => { void hydrate(); @@ -26,11 +27,43 @@ export default function InboxScreen() { {item.summary} Status: {item.status} - void approve(item.id)}> - Approve + { + setPendingApprovalId(item.id); + try { + await approve(item.id); + } finally { + setPendingApprovalId(null); + } + }} + > + + {pendingApprovalId === item.id ? 'Approving…' : 'Approve'} + - void reject(item.id)}> - Reject + { + setPendingApprovalId(item.id); + try { + await reject(item.id); + } finally { + setPendingApprovalId(null); + } + }} + > + + {pendingApprovalId === item.id ? 'Rejecting…' : 'Reject'} + @@ -102,6 +135,9 @@ const styles = StyleSheet.create({ flexDirection: 'row', gap: 10, }, + buttonDisabled: { + opacity: 0.6, + }, approveButton: { backgroundColor: colors.accentPrimary, borderRadius: 10,