mirror of
https://github.com/jjbrunton/Sauci.git
synced 2026-11-01 18:19:43 +00:00
Add message reporting and account deletion
- Add user message reporting via long press menu - Add delete-account edge function for App Store compliance - Update admin moderation page with AI/User tabs 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jamie BruntonandClaude Opus 4.5 committed
1 parent
314745c6cb
commit
693ae59321
14 files changed
+1583
-211
No files matched your search
@@ -9,9 +9,10 @@ import { Ionicons } from "@expo/vector-icons";
|
||||
import { LinearGradient } from "expo-linear-gradient";
|
||||
import Animated, { FadeInDown, useAnimatedStyle } from "react-native-reanimated";
|
||||
|
||||
import { InputBar, ChatHeader, ChatMessages } from "./components";
|
||||
import { InputBar, ChatHeader, ChatMessages, ReportMessageSheet } from "./components";
|
||||
import { useMediaUpload } from "./hooks/useMediaUpload";
|
||||
import { useMessageActions } from "./hooks/useMessageActions";
|
||||
import type { ReportReason } from "./types";
|
||||
|
||||
import { supabase } from "../../lib/supabase";
|
||||
import { useAuthStore, useMessageStore } from "../../store";
|
||||
@@ -42,6 +43,7 @@ export const ChatScreen: React.FC = () => {
|
||||
const [fullScreenImage, setFullScreenImage] = useState<string | null>(null);
|
||||
const [fullScreenImageLoading, setFullScreenImageLoading] = useState(true);
|
||||
const [fullScreenVideo, setFullScreenVideo] = useState<string | null>(null);
|
||||
const [reportingMessage, setReportingMessage] = useState<Message | null>(null);
|
||||
|
||||
// Ambient orb breathing animations
|
||||
const { orbStyle1, orbStyle2 } = useAmbientOrbAnimation({
|
||||
@@ -75,16 +77,60 @@ export const ChatScreen: React.FC = () => {
|
||||
// E2EE encryption hook for sending messages
|
||||
const { encryptMessage, isE2EEAvailable } = useEncryptedSend();
|
||||
|
||||
// Message actions hook for deletion
|
||||
const { showDeleteOptions } = useMessageActions({ userId: user?.id });
|
||||
// Message actions hook for deletion and reporting
|
||||
const { showDeleteOptions, deleteForSelf } = useMessageActions({
|
||||
userId: user?.id,
|
||||
onReport: (message) => setReportingMessage(message),
|
||||
});
|
||||
|
||||
// Handle long press on message to show delete options
|
||||
// Handle long press on message to show options
|
||||
const handleMessageLongPress = useCallback((message: Message, isMe: boolean) => {
|
||||
// Don't show options for already deleted messages
|
||||
if (message.deleted_at) return;
|
||||
showDeleteOptions(message, isMe);
|
||||
}, [showDeleteOptions]);
|
||||
|
||||
// Handle report submission
|
||||
const handleSubmitReport = async (reason: ReportReason) => {
|
||||
if (!reportingMessage || !user?.id) return;
|
||||
|
||||
try {
|
||||
// Insert the report
|
||||
const { error: reportError } = await supabase
|
||||
.from('message_reports')
|
||||
.insert({
|
||||
message_id: reportingMessage.id,
|
||||
reporter_id: user.id,
|
||||
reason: reason,
|
||||
});
|
||||
|
||||
if (reportError) {
|
||||
if (reportError.code === '23505') {
|
||||
// Unique violation - already reported
|
||||
Alert.alert('Already Reported', 'You have already reported this message.');
|
||||
} else {
|
||||
console.error('Report error:', reportError);
|
||||
Alert.alert('Error', 'Failed to submit report');
|
||||
}
|
||||
setReportingMessage(null);
|
||||
return;
|
||||
}
|
||||
|
||||
// Also delete the message for the reporter (so they don't see it anymore)
|
||||
await deleteForSelf(reportingMessage.id);
|
||||
|
||||
// Remove from local state
|
||||
setMessages(prev => prev.filter(m => m.id !== reportingMessage.id));
|
||||
|
||||
Alert.alert('Report Submitted', 'Thank you for your report. We will review it shortly.');
|
||||
setReportingMessage(null);
|
||||
} catch (err) {
|
||||
console.error('Report error:', err);
|
||||
Alert.alert('Error', 'Failed to submit report');
|
||||
setReportingMessage(null);
|
||||
}
|
||||
};
|
||||
|
||||
// Track active chat to prevent notifications for current chat
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
@@ -436,6 +482,13 @@ export const ChatScreen: React.FC = () => {
|
||||
)}
|
||||
</View>
|
||||
</Modal>
|
||||
|
||||
{/* Report Message Sheet */}
|
||||
<ReportMessageSheet
|
||||
visible={reportingMessage !== null}
|
||||
onClose={() => setReportingMessage(null)}
|
||||
onSubmit={handleSubmitReport}
|
||||
/>
|
||||
</GradientBackground>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,297 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
Modal,
|
||||
TouchableOpacity,
|
||||
TouchableWithoutFeedback,
|
||||
ActivityIndicator,
|
||||
Platform,
|
||||
} from "react-native";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { BlurView } from "expo-blur";
|
||||
import Animated, { FadeIn, FadeOut, SlideInDown, SlideOutDown } from "react-native-reanimated";
|
||||
import { colors, spacing, typography, radius } from "../../../theme";
|
||||
import { REPORT_REASONS, type ReportReason } from "../types";
|
||||
|
||||
interface ReportMessageSheetProps {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (reason: ReportReason) => Promise<void>;
|
||||
}
|
||||
|
||||
export function ReportMessageSheet({ visible, onClose, onSubmit }: ReportMessageSheetProps) {
|
||||
const [selectedReason, setSelectedReason] = useState<ReportReason | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// Reset state when modal closes
|
||||
useEffect(() => {
|
||||
if (!visible) {
|
||||
setSelectedReason(null);
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [visible]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!selectedReason || isLoading) return;
|
||||
|
||||
setIsLoading(true);
|
||||
await onSubmit(selectedReason);
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
const ReasonButton = ({ reason }: { reason: typeof REPORT_REASONS[number] }) => {
|
||||
const isSelected = selectedReason === reason.value;
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.reasonButton,
|
||||
isSelected && styles.reasonButtonSelected,
|
||||
]}
|
||||
onPress={() => setSelectedReason(reason.value)}
|
||||
disabled={isLoading}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={styles.reasonContent}>
|
||||
<View style={[styles.radioOuter, isSelected && styles.radioOuterSelected]}>
|
||||
{isSelected && <View style={styles.radioInner} />}
|
||||
</View>
|
||||
<Text style={[styles.reasonText, isSelected && styles.reasonTextSelected]}>
|
||||
{reason.label}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
transparent
|
||||
animationType="none"
|
||||
onRequestClose={onClose}
|
||||
statusBarTranslucent
|
||||
>
|
||||
<Animated.View style={styles.overlay} entering={FadeIn.duration(200)} exiting={FadeOut.duration(200)}>
|
||||
<TouchableWithoutFeedback onPress={onClose}>
|
||||
<View style={styles.backdrop} />
|
||||
</TouchableWithoutFeedback>
|
||||
|
||||
<Animated.View
|
||||
style={styles.sheetContainer}
|
||||
entering={SlideInDown.springify().damping(20)}
|
||||
exiting={SlideOutDown.duration(200)}
|
||||
>
|
||||
{Platform.OS === "ios" ? (
|
||||
<BlurView intensity={80} tint="dark" style={styles.sheet}>
|
||||
<SheetContent
|
||||
ReasonButton={ReasonButton}
|
||||
selectedReason={selectedReason}
|
||||
isLoading={isLoading}
|
||||
onClose={onClose}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
</BlurView>
|
||||
) : (
|
||||
<View style={[styles.sheet, styles.sheetAndroid]}>
|
||||
<SheetContent
|
||||
ReasonButton={ReasonButton}
|
||||
selectedReason={selectedReason}
|
||||
isLoading={isLoading}
|
||||
onClose={onClose}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</Animated.View>
|
||||
</Animated.View>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
// Sheet content extracted for reuse between iOS blur and Android solid background
|
||||
function SheetContent({
|
||||
ReasonButton,
|
||||
selectedReason,
|
||||
isLoading,
|
||||
onClose,
|
||||
onSubmit,
|
||||
}: {
|
||||
ReasonButton: React.FC<{ reason: typeof REPORT_REASONS[number] }>;
|
||||
selectedReason: ReportReason | null;
|
||||
isLoading: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: () => void;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
{/* Handle */}
|
||||
<View style={styles.handle} />
|
||||
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.headerTitle}>Report Message</Text>
|
||||
<TouchableOpacity style={styles.closeButton} onPress={onClose}>
|
||||
<Ionicons name="close" size={20} color={colors.textSecondary} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Description */}
|
||||
<Text style={styles.description}>
|
||||
Why are you reporting this message?
|
||||
</Text>
|
||||
|
||||
{/* Reason buttons */}
|
||||
<View style={styles.reasonButtons}>
|
||||
{REPORT_REASONS.map((reason) => (
|
||||
<ReasonButton key={reason.value} reason={reason} />
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Submit button */}
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.submitButton,
|
||||
!selectedReason && styles.submitButtonDisabled,
|
||||
]}
|
||||
onPress={onSubmit}
|
||||
disabled={!selectedReason || isLoading}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
{isLoading ? (
|
||||
<ActivityIndicator color={colors.text} size="small" />
|
||||
) : (
|
||||
<Text style={styles.submitButtonText}>Submit Report</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Bottom padding for safe area */}
|
||||
<View style={styles.bottomPadding} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
overlay: {
|
||||
flex: 1,
|
||||
justifyContent: "flex-end",
|
||||
},
|
||||
backdrop: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: "rgba(0, 0, 0, 0.6)",
|
||||
},
|
||||
sheetContainer: {
|
||||
maxHeight: "80%",
|
||||
},
|
||||
sheet: {
|
||||
borderTopLeftRadius: radius.xl,
|
||||
borderTopRightRadius: radius.xl,
|
||||
overflow: "hidden",
|
||||
paddingHorizontal: spacing.lg,
|
||||
paddingTop: spacing.md,
|
||||
},
|
||||
sheetAndroid: {
|
||||
backgroundColor: colors.backgroundLight,
|
||||
},
|
||||
handle: {
|
||||
width: 40,
|
||||
height: 4,
|
||||
backgroundColor: "rgba(255, 255, 255, 0.3)",
|
||||
borderRadius: 2,
|
||||
alignSelf: "center",
|
||||
marginBottom: spacing.md,
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
marginBottom: spacing.md,
|
||||
},
|
||||
headerTitle: {
|
||||
...typography.title3,
|
||||
color: colors.text,
|
||||
},
|
||||
closeButton: {
|
||||
position: "absolute",
|
||||
right: 0,
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 16,
|
||||
backgroundColor: "rgba(255, 255, 255, 0.1)",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
description: {
|
||||
...typography.body,
|
||||
color: colors.textSecondary,
|
||||
textAlign: "center",
|
||||
marginBottom: spacing.lg,
|
||||
},
|
||||
reasonButtons: {
|
||||
gap: spacing.sm,
|
||||
marginBottom: spacing.lg,
|
||||
},
|
||||
reasonButton: {
|
||||
paddingVertical: spacing.md,
|
||||
paddingHorizontal: spacing.lg,
|
||||
borderRadius: radius.lg,
|
||||
backgroundColor: "rgba(255, 255, 255, 0.05)",
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(255, 255, 255, 0.1)",
|
||||
},
|
||||
reasonButtonSelected: {
|
||||
backgroundColor: "rgba(231, 76, 60, 0.1)",
|
||||
borderColor: "rgba(231, 76, 60, 0.3)",
|
||||
},
|
||||
reasonContent: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: spacing.md,
|
||||
},
|
||||
radioOuter: {
|
||||
width: 22,
|
||||
height: 22,
|
||||
borderRadius: 11,
|
||||
borderWidth: 2,
|
||||
borderColor: colors.textTertiary,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
radioOuterSelected: {
|
||||
borderColor: colors.error,
|
||||
},
|
||||
radioInner: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
borderRadius: 6,
|
||||
backgroundColor: colors.error,
|
||||
},
|
||||
reasonText: {
|
||||
...typography.body,
|
||||
color: colors.textSecondary,
|
||||
},
|
||||
reasonTextSelected: {
|
||||
color: colors.text,
|
||||
fontWeight: "600",
|
||||
},
|
||||
submitButton: {
|
||||
paddingVertical: spacing.md,
|
||||
borderRadius: radius.lg,
|
||||
backgroundColor: colors.error,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
submitButtonDisabled: {
|
||||
backgroundColor: "rgba(231, 76, 60, 0.3)",
|
||||
},
|
||||
submitButtonText: {
|
||||
...typography.callout,
|
||||
color: colors.text,
|
||||
fontWeight: "600",
|
||||
},
|
||||
bottomPadding: {
|
||||
height: Platform.OS === "ios" ? 34 : 20,
|
||||
},
|
||||
});
|
||||
@@ -15,3 +15,4 @@ export type { MessageBubbleProps } from './MessageBubble';
|
||||
export { ChatHeader } from './ChatHeader';
|
||||
export { ChatMessages } from './ChatMessages';
|
||||
export { MatchCard } from './MatchCard';
|
||||
export { ReportMessageSheet } from './ReportMessageSheet';
|
||||
@@ -1,6 +1,6 @@
|
||||
/**
|
||||
* useMessageActions - Hook for message deletion actions
|
||||
* Handles "delete for self" and "delete for everyone" functionality.
|
||||
* useMessageActions - Hook for message actions
|
||||
* Handles "delete for self", "delete for everyone", and "report" functionality.
|
||||
*/
|
||||
import { Platform, ActionSheetIOS, Alert } from 'react-native';
|
||||
import * as Haptics from 'expo-haptics';
|
||||
@@ -9,9 +9,10 @@ import type { Message } from '../types';
|
||||
|
||||
interface UseMessageActionsConfig {
|
||||
userId: string | undefined;
|
||||
onReport?: (message: Message) => void;
|
||||
}
|
||||
|
||||
export function useMessageActions({ userId }: UseMessageActionsConfig) {
|
||||
export function useMessageActions({ userId, onReport }: UseMessageActionsConfig) {
|
||||
/**
|
||||
* Delete a message for the current user only.
|
||||
* Message will still be visible to the partner.
|
||||
@@ -46,8 +47,8 @@ export function useMessageActions({ userId }: UseMessageActionsConfig) {
|
||||
};
|
||||
|
||||
/**
|
||||
* Show delete options for a message.
|
||||
* Author gets both options, non-author only gets "delete for me".
|
||||
* Show options for a message.
|
||||
* Author gets delete options, non-author gets delete for me + report.
|
||||
*/
|
||||
const showDeleteOptions = (message: Message, isMe: boolean) => {
|
||||
// Don't show options for already deleted messages
|
||||
@@ -57,44 +58,73 @@ export function useMessageActions({ userId }: UseMessageActionsConfig) {
|
||||
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
|
||||
|
||||
if (Platform.OS === 'ios') {
|
||||
const options = ['Cancel', 'Delete for me'];
|
||||
if (isMe) options.push('Delete for everyone');
|
||||
|
||||
ActionSheetIOS.showActionSheetWithOptions(
|
||||
{
|
||||
options,
|
||||
destructiveButtonIndex: isMe ? 2 : 1,
|
||||
cancelButtonIndex: 0,
|
||||
title: 'Delete message?',
|
||||
},
|
||||
(buttonIndex) => {
|
||||
if (buttonIndex === 1) {
|
||||
deleteForSelf(message.id);
|
||||
} else if (buttonIndex === 2 && isMe) {
|
||||
deleteForEveryone(message.id);
|
||||
if (isMe) {
|
||||
// Author sees: Cancel, Delete for me, Delete for everyone
|
||||
const options = ['Cancel', 'Delete for me', 'Delete for everyone'];
|
||||
ActionSheetIOS.showActionSheetWithOptions(
|
||||
{
|
||||
options,
|
||||
destructiveButtonIndex: 2,
|
||||
cancelButtonIndex: 0,
|
||||
title: 'Delete message?',
|
||||
},
|
||||
(buttonIndex) => {
|
||||
if (buttonIndex === 1) {
|
||||
deleteForSelf(message.id);
|
||||
} else if (buttonIndex === 2) {
|
||||
deleteForEveryone(message.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
);
|
||||
} else {
|
||||
// Non-author sees: Cancel, Delete for me, Report
|
||||
const options = ['Cancel', 'Delete for me', 'Report'];
|
||||
ActionSheetIOS.showActionSheetWithOptions(
|
||||
{
|
||||
options,
|
||||
destructiveButtonIndex: 2,
|
||||
cancelButtonIndex: 0,
|
||||
title: 'Message options',
|
||||
},
|
||||
(buttonIndex) => {
|
||||
if (buttonIndex === 1) {
|
||||
deleteForSelf(message.id);
|
||||
} else if (buttonIndex === 2 && onReport) {
|
||||
onReport(message);
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
} else {
|
||||
// Android fallback using Alert
|
||||
const buttons: Array<{ text: string; style?: 'cancel' | 'default' | 'destructive'; onPress?: () => void }> = [
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{
|
||||
text: 'Delete for me',
|
||||
style: 'destructive',
|
||||
onPress: () => deleteForSelf(message.id),
|
||||
},
|
||||
];
|
||||
|
||||
if (isMe) {
|
||||
buttons.push({
|
||||
text: 'Delete for everyone',
|
||||
style: 'destructive',
|
||||
onPress: () => deleteForEveryone(message.id),
|
||||
});
|
||||
Alert.alert('Delete message?', undefined, [
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{
|
||||
text: 'Delete for me',
|
||||
style: 'destructive',
|
||||
onPress: () => deleteForSelf(message.id),
|
||||
},
|
||||
{
|
||||
text: 'Delete for everyone',
|
||||
style: 'destructive',
|
||||
onPress: () => deleteForEveryone(message.id),
|
||||
},
|
||||
]);
|
||||
} else {
|
||||
Alert.alert('Message options', undefined, [
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{
|
||||
text: 'Delete for me',
|
||||
onPress: () => deleteForSelf(message.id),
|
||||
},
|
||||
{
|
||||
text: 'Report',
|
||||
style: 'destructive',
|
||||
onPress: () => onReport?.(message),
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
Alert.alert('Delete message?', undefined, buttons);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -39,3 +39,13 @@ export const CHAT_COLORS = {
|
||||
ROSE: 'rgb(232, 164, 174)',
|
||||
ROSE_RGBA: 'rgba(232, 164, 174, ',
|
||||
} as const;
|
||||
|
||||
/** Report reasons for message reporting */
|
||||
export type ReportReason = 'harassment' | 'spam' | 'inappropriate_content' | 'other';
|
||||
|
||||
export const REPORT_REASONS: { value: ReportReason; label: string }[] = [
|
||||
{ value: 'harassment', label: 'Harassment' },
|
||||
{ value: 'spam', label: 'Spam' },
|
||||
{ value: 'inappropriate_content', label: 'Inappropriate Content' },
|
||||
{ value: 'other', label: 'Other' },
|
||||
];
|
||||
@@ -51,6 +51,7 @@ export function ProfileScreen() {
|
||||
handleDeleteRelationship,
|
||||
handleResetProgress,
|
||||
handleSignOut,
|
||||
handleDeleteAccount,
|
||||
navigateToPairing
|
||||
} = useCoupleManagement();
|
||||
|
||||
@@ -373,9 +374,11 @@ export function ProfileScreen() {
|
||||
)}
|
||||
|
||||
{/* Danger Zone */}
|
||||
{couple && (
|
||||
<DangerZone onDeleteRelationship={handleDeleteRelationship} />
|
||||
)}
|
||||
<DangerZone
|
||||
onDeleteRelationship={couple ? handleDeleteRelationship : undefined}
|
||||
onDeleteAccount={handleDeleteAccount}
|
||||
hasRelationship={!!couple}
|
||||
/>
|
||||
|
||||
{/* Version */}
|
||||
<Animated.View
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { View, Text, StyleSheet, Modal, Platform, KeyboardAvoidingView, TouchableOpacity, ActivityIndicator, TextInput } from 'react-native';
|
||||
import { View, Text, StyleSheet, Modal, Platform, KeyboardAvoidingView, TouchableOpacity, ActivityIndicator, TextInput, ViewStyle } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import Animated, { FadeInDown } from 'react-native-reanimated';
|
||||
import { BlurView } from 'expo-blur';
|
||||
@@ -7,25 +7,59 @@ import { GlassCard, GlassButton } from '../../../components/ui';
|
||||
import { colors, spacing, radius, typography } from '../../../theme';
|
||||
|
||||
interface DangerZoneProps {
|
||||
onDeleteRelationship: () => Promise<void>;
|
||||
onDeleteRelationship?: () => Promise<void>;
|
||||
onDeleteAccount: () => Promise<void>;
|
||||
hasRelationship?: boolean;
|
||||
}
|
||||
|
||||
export const DangerZone: React.FC<DangerZoneProps> = ({ onDeleteRelationship }) => {
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
export const DangerZone: React.FC<DangerZoneProps> = ({
|
||||
onDeleteRelationship,
|
||||
onDeleteAccount,
|
||||
hasRelationship = false
|
||||
}) => {
|
||||
const [showDeleteRelationshipModal, setShowDeleteRelationshipModal] = useState(false);
|
||||
const [showDeleteAccountModal, setShowDeleteAccountModal] = useState(false);
|
||||
const [deleteConfirmText, setDeleteConfirmText] = useState("");
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [isDeletingRelationship, setIsDeletingRelationship] = useState(false);
|
||||
const [isDeletingAccount, setIsDeletingAccount] = useState(false);
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (deleteConfirmText !== "DELETE") return;
|
||||
setIsDeleting(true);
|
||||
const handleDeleteRelationship = async () => {
|
||||
if (deleteConfirmText !== "DELETE" || !onDeleteRelationship) return;
|
||||
setIsDeletingRelationship(true);
|
||||
try {
|
||||
await onDeleteRelationship();
|
||||
setShowDeleteModal(false);
|
||||
setShowDeleteRelationshipModal(false);
|
||||
setDeleteConfirmText("");
|
||||
} catch (error) {
|
||||
// Error handling relies on parent throwing or managing its own alerts
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
setIsDeletingRelationship(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteAccount = async () => {
|
||||
if (deleteConfirmText !== "DELETE") return;
|
||||
setIsDeletingAccount(true);
|
||||
try {
|
||||
await onDeleteAccount();
|
||||
// No need to close modal - user will be signed out
|
||||
} catch (error) {
|
||||
// Error handling relies on parent throwing or managing its own alerts
|
||||
setIsDeletingAccount(false);
|
||||
}
|
||||
};
|
||||
|
||||
const closeRelationshipModal = () => {
|
||||
if (!isDeletingRelationship) {
|
||||
setShowDeleteRelationshipModal(false);
|
||||
setDeleteConfirmText("");
|
||||
}
|
||||
};
|
||||
|
||||
const closeAccountModal = () => {
|
||||
if (!isDeletingAccount) {
|
||||
setShowDeleteAccountModal(false);
|
||||
setDeleteConfirmText("");
|
||||
}
|
||||
};
|
||||
|
||||
@@ -36,23 +70,53 @@ export const DangerZone: React.FC<DangerZoneProps> = ({ onDeleteRelationship })
|
||||
style={styles.section}
|
||||
>
|
||||
<Text style={styles.dangerSectionTitle}>Danger Zone</Text>
|
||||
<GlassCard style={styles.dangerCard}>
|
||||
|
||||
{/* Delete Relationship - only show if in a relationship */}
|
||||
{hasRelationship && onDeleteRelationship && (
|
||||
<GlassCard style={styles.dangerCard}>
|
||||
<View style={styles.dangerContent}>
|
||||
<View style={styles.dangerInfo}>
|
||||
<View style={styles.dangerIconContainer}>
|
||||
<Ionicons name="heart-dislike" size={20} color={colors.error} />
|
||||
</View>
|
||||
<View style={styles.dangerTextContainer}>
|
||||
<Text style={styles.dangerTitle}>Delete Relationship Data</Text>
|
||||
<Text style={styles.dangerDescription}>
|
||||
Delete your relationship including all matches, chats, and shared photos. Your account will remain.
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<GlassButton
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onPress={() => setShowDeleteRelationshipModal(true)}
|
||||
icon={<Ionicons name="trash-outline" size={16} color={colors.text} />}
|
||||
style={styles.dangerButton}
|
||||
>
|
||||
Delete
|
||||
</GlassButton>
|
||||
</View>
|
||||
</GlassCard>
|
||||
)}
|
||||
|
||||
{/* Delete Account - always show */}
|
||||
<GlassCard style={hasRelationship ? StyleSheet.flatten([styles.dangerCard, styles.dangerCardSpacing]) as ViewStyle : styles.dangerCard}>
|
||||
<View style={styles.dangerContent}>
|
||||
<View style={styles.dangerInfo}>
|
||||
<View style={styles.dangerIconContainer}>
|
||||
<Ionicons name="warning" size={20} color={colors.error} />
|
||||
<Ionicons name="person-remove" size={20} color={colors.error} />
|
||||
</View>
|
||||
<View style={styles.dangerTextContainer}>
|
||||
<Text style={styles.dangerTitle}>Delete All Data</Text>
|
||||
<Text style={styles.dangerTitle}>Delete Account</Text>
|
||||
<Text style={styles.dangerDescription}>
|
||||
Permanently delete your relationship including all matches, chats, and shared photos.
|
||||
Permanently delete your account and all associated data. This cannot be undone.
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<GlassButton
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onPress={() => setShowDeleteModal(true)}
|
||||
onPress={() => setShowDeleteAccountModal(true)}
|
||||
icon={<Ionicons name="trash-outline" size={16} color={colors.text} />}
|
||||
style={styles.dangerButton}
|
||||
>
|
||||
@@ -62,27 +126,28 @@ export const DangerZone: React.FC<DangerZoneProps> = ({ onDeleteRelationship })
|
||||
</GlassCard>
|
||||
</Animated.View>
|
||||
|
||||
{/* Delete Relationship Modal */}
|
||||
<Modal
|
||||
visible={showDeleteModal}
|
||||
visible={showDeleteRelationshipModal}
|
||||
transparent
|
||||
animationType="fade"
|
||||
onRequestClose={() => !isDeleting && setShowDeleteModal(false)}
|
||||
onRequestClose={closeRelationshipModal}
|
||||
>
|
||||
<BlurView
|
||||
intensity={Platform.OS === 'ios' ? 20 : 0}
|
||||
tint="dark"
|
||||
<BlurView
|
||||
intensity={Platform.OS === 'ios' ? 20 : 0}
|
||||
tint="dark"
|
||||
style={StyleSheet.absoluteFill}
|
||||
>
|
||||
<KeyboardAvoidingView
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
style={styles.modalOverlay}
|
||||
>
|
||||
<View style={styles.modalContent}>
|
||||
<View style={styles.modalHeader}>
|
||||
<View style={styles.modalIconContainer}>
|
||||
<Ionicons name="warning" size={32} color={colors.error} />
|
||||
<Ionicons name="heart-dislike" size={32} color={colors.error} />
|
||||
</View>
|
||||
<Text style={styles.modalTitle}>Delete All Data?</Text>
|
||||
<Text style={styles.modalTitle}>Delete Relationship Data?</Text>
|
||||
</View>
|
||||
|
||||
<Text style={styles.modalDescription}>
|
||||
@@ -120,17 +185,14 @@ export const DangerZone: React.FC<DangerZoneProps> = ({ onDeleteRelationship })
|
||||
placeholderTextColor={colors.textTertiary}
|
||||
autoCapitalize="characters"
|
||||
autoCorrect={false}
|
||||
editable={!isDeleting}
|
||||
editable={!isDeletingRelationship}
|
||||
/>
|
||||
|
||||
<View style={styles.modalButtons}>
|
||||
<TouchableOpacity
|
||||
style={styles.cancelButton}
|
||||
onPress={() => {
|
||||
setShowDeleteModal(false);
|
||||
setDeleteConfirmText("");
|
||||
}}
|
||||
disabled={isDeleting}
|
||||
onPress={closeRelationshipModal}
|
||||
disabled={isDeletingRelationship}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={styles.cancelButtonText}>Cancel</Text>
|
||||
@@ -139,13 +201,13 @@ export const DangerZone: React.FC<DangerZoneProps> = ({ onDeleteRelationship })
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.deleteButton,
|
||||
(deleteConfirmText !== "DELETE" || isDeleting) && styles.deleteButtonDisabled,
|
||||
(deleteConfirmText !== "DELETE" || isDeletingRelationship) && styles.deleteButtonDisabled,
|
||||
]}
|
||||
onPress={handleDelete}
|
||||
disabled={deleteConfirmText !== "DELETE" || isDeleting}
|
||||
onPress={handleDeleteRelationship}
|
||||
disabled={deleteConfirmText !== "DELETE" || isDeletingRelationship}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
{isDeleting ? (
|
||||
{isDeletingRelationship ? (
|
||||
<ActivityIndicator size="small" color={colors.text} />
|
||||
) : (
|
||||
<>
|
||||
@@ -159,6 +221,110 @@ export const DangerZone: React.FC<DangerZoneProps> = ({ onDeleteRelationship })
|
||||
</KeyboardAvoidingView>
|
||||
</BlurView>
|
||||
</Modal>
|
||||
|
||||
{/* Delete Account Modal */}
|
||||
<Modal
|
||||
visible={showDeleteAccountModal}
|
||||
transparent
|
||||
animationType="fade"
|
||||
onRequestClose={closeAccountModal}
|
||||
>
|
||||
<BlurView
|
||||
intensity={Platform.OS === 'ios' ? 20 : 0}
|
||||
tint="dark"
|
||||
style={StyleSheet.absoluteFill}
|
||||
>
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
style={styles.modalOverlay}
|
||||
>
|
||||
<View style={styles.modalContent}>
|
||||
<View style={styles.modalHeader}>
|
||||
<View style={styles.modalIconContainer}>
|
||||
<Ionicons name="person-remove" size={32} color={colors.error} />
|
||||
</View>
|
||||
<Text style={styles.modalTitle}>Delete Account?</Text>
|
||||
</View>
|
||||
|
||||
<Text style={styles.modalDescription}>
|
||||
This action cannot be undone. This will permanently delete:
|
||||
</Text>
|
||||
|
||||
<View style={styles.deleteList}>
|
||||
<View style={styles.deleteListItem}>
|
||||
<Ionicons name="person" size={16} color={colors.error} />
|
||||
<Text style={styles.deleteListText}>Your account and profile</Text>
|
||||
</View>
|
||||
{hasRelationship && (
|
||||
<>
|
||||
<View style={styles.deleteListItem}>
|
||||
<Ionicons name="heart-dislike" size={16} color={colors.error} />
|
||||
<Text style={styles.deleteListText}>Your relationship data</Text>
|
||||
</View>
|
||||
<View style={styles.deleteListItem}>
|
||||
<Ionicons name="chatbubbles" size={16} color={colors.error} />
|
||||
<Text style={styles.deleteListText}>All chat messages and photos</Text>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
<View style={styles.deleteListItem}>
|
||||
<Ionicons name="key" size={16} color={colors.error} />
|
||||
<Text style={styles.deleteListText}>Your encryption keys</Text>
|
||||
</View>
|
||||
<View style={styles.deleteListItem}>
|
||||
<Ionicons name="cloud-offline" size={16} color={colors.error} />
|
||||
<Text style={styles.deleteListText}>All cloud-stored data</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Text style={styles.confirmLabel}>
|
||||
Type <Text style={styles.confirmKeyword}>DELETE</Text> to confirm:
|
||||
</Text>
|
||||
|
||||
<TextInput
|
||||
style={styles.confirmInput}
|
||||
value={deleteConfirmText}
|
||||
onChangeText={setDeleteConfirmText}
|
||||
placeholder="Type DELETE"
|
||||
placeholderTextColor={colors.textTertiary}
|
||||
autoCapitalize="characters"
|
||||
autoCorrect={false}
|
||||
editable={!isDeletingAccount}
|
||||
/>
|
||||
|
||||
<View style={styles.modalButtons}>
|
||||
<TouchableOpacity
|
||||
style={styles.cancelButton}
|
||||
onPress={closeAccountModal}
|
||||
disabled={isDeletingAccount}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={styles.cancelButtonText}>Cancel</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.deleteButton,
|
||||
(deleteConfirmText !== "DELETE" || isDeletingAccount) && styles.deleteButtonDisabled,
|
||||
]}
|
||||
onPress={handleDeleteAccount}
|
||||
disabled={deleteConfirmText !== "DELETE" || isDeletingAccount}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
{isDeletingAccount ? (
|
||||
<ActivityIndicator size="small" color={colors.text} />
|
||||
) : (
|
||||
<>
|
||||
<Ionicons name="trash" size={16} color={colors.text} />
|
||||
<Text style={styles.deleteButtonText}>Delete Account</Text>
|
||||
</>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
</BlurView>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -180,6 +346,9 @@ const styles = StyleSheet.create({
|
||||
borderColor: 'rgba(231, 76, 60, 0.3)',
|
||||
borderWidth: 1,
|
||||
},
|
||||
dangerCardSpacing: {
|
||||
marginTop: spacing.md,
|
||||
},
|
||||
dangerContent: {
|
||||
gap: spacing.md,
|
||||
},
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useRouter } from 'expo-router';
|
||||
import { useAuthStore, useMatchStore, useMessageStore, usePacksStore } from '../../../store';
|
||||
import { supabase } from '../../../lib/supabase';
|
||||
import { Events } from '../../../lib/analytics';
|
||||
import { clearKeys } from '../../../lib/encryption';
|
||||
|
||||
export function useCoupleManagement() {
|
||||
const router = useRouter();
|
||||
@@ -13,6 +14,7 @@ export function useCoupleManagement() {
|
||||
const { clearPacks } = usePacksStore();
|
||||
|
||||
const [isResettingProgress, setIsResettingProgress] = useState(false);
|
||||
const [isDeletingAccount, setIsDeletingAccount] = useState(false);
|
||||
|
||||
const handleUnpair = async () => {
|
||||
Alert.alert(
|
||||
@@ -99,16 +101,46 @@ export function useCoupleManagement() {
|
||||
);
|
||||
};
|
||||
|
||||
const handleDeleteAccount = async () => {
|
||||
setIsDeletingAccount(true);
|
||||
try {
|
||||
const { error } = await supabase.functions.invoke("delete-account", {
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
// Clear all local data
|
||||
clearMatches();
|
||||
clearMessages();
|
||||
clearPacks();
|
||||
await clearKeys();
|
||||
|
||||
Events.accountDeleted();
|
||||
|
||||
// Sign out the user (this will redirect to login)
|
||||
await signOut();
|
||||
} catch (error) {
|
||||
console.error("Delete account error:", error);
|
||||
Alert.alert("Error", "Failed to delete account. Please try again.");
|
||||
throw error;
|
||||
} finally {
|
||||
setIsDeletingAccount(false);
|
||||
}
|
||||
};
|
||||
|
||||
const navigateToPairing = () => {
|
||||
router.push("/(app)/pairing");
|
||||
};
|
||||
|
||||
return {
|
||||
isResettingProgress,
|
||||
isDeletingAccount,
|
||||
handleUnpair,
|
||||
handleDeleteRelationship,
|
||||
handleResetProgress,
|
||||
handleSignOut,
|
||||
handleDeleteAccount,
|
||||
navigateToPairing,
|
||||
};
|
||||
}
|
||||
Reference in new issue
Block a user