mirror of
https://github.com/jjbrunton/Sauci.git
synced 2026-11-01 18:19:43 +00:00
feat(dares): optional photo/audio proof of completion
The sender can require photo or audio proof when sending any dare, catalogue or custom. The recipient captures and uploads the proof as a new couple-scoped 'dare_proof' media kind and attaches it on submit; the server enforces ownership, kind, couple, and MIME-type match. The proof renders inline on the dare card for the sender to review before confirming completion. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
f22d4a3649
commit
504eddaf68
21 files changed
+668
-28
No files matched your search
@@ -6,9 +6,9 @@ import Animated, { FadeIn } from "react-native-reanimated";
|
||||
import { GradientBackground } from "../../components/ui";
|
||||
import { Paywall } from "../../components/paywall";
|
||||
import { colors, featureColors, radius, spacing, typography } from "../../theme";
|
||||
import { DareCard, DarePackGrid, SendDareSheet } from "./components";
|
||||
import { DareCard, DarePackGrid, DareProofSheet, SendDareSheet } from "./components";
|
||||
import { useDares } from "./hooks/useDares";
|
||||
import type { DarePack } from "./types";
|
||||
import type { DarePack, SentDare } from "./types";
|
||||
|
||||
const ACCENT = featureColors.dares.accent;
|
||||
|
||||
@@ -27,6 +27,7 @@ export function DaresScreen() {
|
||||
const [sheetPack, setSheetPack] = useState<DarePack | null>(null);
|
||||
const [sheetOpen, setSheetOpen] = useState(false);
|
||||
const [paywallOpen, setPaywallOpen] = useState(false);
|
||||
const [proofDare, setProofDare] = useState<SentDare | null>(null);
|
||||
|
||||
const openPaywall = useCallback(() => {
|
||||
setSheetOpen(false);
|
||||
@@ -68,6 +69,14 @@ export function DaresScreen() {
|
||||
void dares.respond(dareId, action);
|
||||
return;
|
||||
}
|
||||
if (action === "submit") {
|
||||
// Proof-required dares detour through the capture sheet before submitting.
|
||||
const dare = dares.active.find((candidate) => candidate.id === dareId);
|
||||
if (dare && dare.proof_type !== "none") {
|
||||
setProofDare(dare);
|
||||
return;
|
||||
}
|
||||
}
|
||||
void dares[action](dareId);
|
||||
},
|
||||
[dares],
|
||||
@@ -173,6 +182,12 @@ export function DaresScreen() {
|
||||
onRequestPremium={openPaywall}
|
||||
/>
|
||||
|
||||
<DareProofSheet
|
||||
dare={proofDare}
|
||||
onClose={() => setProofDare(null)}
|
||||
onSubmit={(dareId, proofMediaId) => dares.submit(dareId, proofMediaId)}
|
||||
/>
|
||||
|
||||
<Paywall
|
||||
visible={paywallOpen}
|
||||
onClose={closePaywall}
|
||||
|
||||
@@ -2,6 +2,7 @@ import { memo } from "react";
|
||||
import { ActivityIndicator, Pressable, StyleSheet, Text, View } from "react-native";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { colors, featureColors, radius, spacing, typography } from "../../../theme";
|
||||
import { DareProofView } from "./DareProofView";
|
||||
import type { SentDare } from "../types";
|
||||
|
||||
const ACCENT = featureColors.dares.accent;
|
||||
@@ -92,6 +93,23 @@ export const DareCard = memo(function DareCard({ dare, busy, onAction }: DareCar
|
||||
|
||||
{dare.sender_notes ? <Text style={styles.notes}>“{dare.sender_notes}”</Text> : null}
|
||||
|
||||
{dare.proof_type !== "none" ? (
|
||||
<View style={styles.proofRow}>
|
||||
<Ionicons
|
||||
name={dare.proof_type === "photo" ? "camera-outline" : "mic-outline"}
|
||||
size={13}
|
||||
color={ACCENT}
|
||||
/>
|
||||
<Text style={styles.proofLabel}>
|
||||
{dare.proof_type === "photo" ? "Photo proof required" : "Audio proof required"}
|
||||
</Text>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
{dare.proof_media_id && dare.proof_type !== "none" ? (
|
||||
<DareProofView proofMediaId={dare.proof_media_id} proofType={dare.proof_type} />
|
||||
) : null}
|
||||
|
||||
{deadline ? (
|
||||
<View style={styles.deadlineRow}>
|
||||
<Ionicons name="time-outline" size={13} color={colors.textTertiary} />
|
||||
@@ -157,6 +175,13 @@ const styles = StyleSheet.create({
|
||||
fontStyle: "italic",
|
||||
marginTop: spacing.sm,
|
||||
},
|
||||
proofRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: spacing.xs,
|
||||
marginTop: spacing.sm,
|
||||
},
|
||||
proofLabel: { ...typography.caption1, color: ACCENT, fontWeight: "600" },
|
||||
deadlineRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
|
||||
@@ -0,0 +1,243 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import {
|
||||
ActivityIndicator, Image, Modal, Platform, Pressable, StyleSheet, Text, View,
|
||||
} from "react-native";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import * as ImagePicker from "expo-image-picker";
|
||||
import { useAudioRecorder } from "../../../hooks/useAudioRecorder";
|
||||
import { uploadMedia } from "../../../lib/mediaApi";
|
||||
import { colors, featureColors, radius, spacing, typography } from "../../../theme";
|
||||
import type { SentDare } from "../types";
|
||||
|
||||
const ACCENT = featureColors.dares.accent;
|
||||
|
||||
const MAX_AUDIO_SECONDS = 60;
|
||||
|
||||
export interface DareProofSheetProps {
|
||||
/** The active incoming dare being submitted; null closes the sheet. */
|
||||
dare: SentDare | null;
|
||||
onClose: () => void;
|
||||
/** Uploads have already happened; the id is ready to attach to the submit call. */
|
||||
onSubmit: (dareId: string, proofMediaId: string) => Promise<void> | void;
|
||||
}
|
||||
|
||||
function imageMime(uri: string): string {
|
||||
const ext = uri.split(".").pop()?.toLowerCase() ?? "jpg";
|
||||
if (ext === "png") return "image/png";
|
||||
if (ext === "webp") return "image/webp";
|
||||
return "image/jpeg";
|
||||
}
|
||||
|
||||
/** expo-av records .m4a on both platforms; web lands on webm. */
|
||||
function audioMime(uri: string): string {
|
||||
const ext = uri.split(".").pop()?.toLowerCase() ?? "m4a";
|
||||
if (ext === "webm") return "audio/webm";
|
||||
if (ext === "wav") return "audio/wav";
|
||||
if (ext === "mp3") return "audio/mpeg";
|
||||
if (ext === "caf") return "audio/x-caf";
|
||||
return "audio/mp4";
|
||||
}
|
||||
|
||||
export function DareProofSheet({ dare, onClose, onSubmit }: DareProofSheetProps) {
|
||||
const [photoUri, setPhotoUri] = useState<string | null>(null);
|
||||
const [sending, setSending] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const recorder = useAudioRecorder({ maxDurationSeconds: MAX_AUDIO_SECONDS });
|
||||
const visible = dare !== null;
|
||||
const mode = dare?.proof_type ?? "none";
|
||||
|
||||
useEffect(() => {
|
||||
if (!visible) return;
|
||||
setPhotoUri(null);
|
||||
setError(null);
|
||||
setSending(false);
|
||||
recorder.resetRecording();
|
||||
// Reset only when a new dare opens the sheet, not on recorder identity churn.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [visible, dare?.id]);
|
||||
|
||||
const pickPhoto = useCallback(async (fromCamera: boolean) => {
|
||||
setError(null);
|
||||
if (fromCamera) {
|
||||
const permission = await ImagePicker.requestCameraPermissionsAsync();
|
||||
if (!permission.granted) {
|
||||
setError("Camera access is needed to take a proof photo.");
|
||||
return;
|
||||
}
|
||||
}
|
||||
const result = fromCamera
|
||||
? await ImagePicker.launchCameraAsync({ allowsEditing: false, quality: 0.7 })
|
||||
: await ImagePicker.launchImageLibraryAsync({
|
||||
mediaTypes: ImagePicker.MediaTypeOptions.Images,
|
||||
allowsEditing: false,
|
||||
quality: 0.7,
|
||||
});
|
||||
if (!result.canceled) setPhotoUri(result.assets[0].uri);
|
||||
}, []);
|
||||
|
||||
const proofUri = mode === "photo" ? photoUri : recorder.recordingUri;
|
||||
const canSend = proofUri !== null && !sending && recorder.state !== "recording";
|
||||
|
||||
const handleSend = useCallback(async () => {
|
||||
if (!dare || !proofUri) return;
|
||||
setSending(true);
|
||||
setError(null);
|
||||
try {
|
||||
const mimeType = mode === "photo" ? imageMime(proofUri) : audioMime(proofUri);
|
||||
const upload = await uploadMedia(proofUri, { kind: "dare_proof", mimeType });
|
||||
await onSubmit(dare.id, upload.media.id);
|
||||
onClose();
|
||||
} catch {
|
||||
setError("Could not send your proof. Check your connection and try again.");
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
}, [dare, proofUri, mode, onSubmit, onClose]);
|
||||
|
||||
return (
|
||||
<Modal visible={visible} animationType="slide" transparent onRequestClose={onClose}>
|
||||
<View style={styles.backdrop}>
|
||||
<View style={styles.sheet}>
|
||||
<View style={styles.handle} />
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.title}>
|
||||
{mode === "photo" ? "Photo proof" : "Audio proof"}
|
||||
</Text>
|
||||
<Pressable onPress={onClose} hitSlop={12} disabled={sending}>
|
||||
<Ionicons name="close" size={22} color={colors.textSecondary} />
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
<Text style={styles.subtitle}>
|
||||
{mode === "photo"
|
||||
? "Your partner asked for a photo to prove this one."
|
||||
: "Your partner asked for a voice note to prove this one."}
|
||||
</Text>
|
||||
|
||||
{mode === "photo" ? (
|
||||
<View style={styles.captureArea}>
|
||||
{photoUri ? (
|
||||
<Image source={{ uri: photoUri }} style={styles.preview} resizeMode="cover" />
|
||||
) : (
|
||||
<View style={styles.placeholder}>
|
||||
<Ionicons name="camera-outline" size={32} color={colors.textTertiary} />
|
||||
</View>
|
||||
)}
|
||||
<View style={styles.captureButtons}>
|
||||
{Platform.OS !== "web" ? (
|
||||
<Pressable style={styles.captureButton} onPress={() => void pickPhoto(true)}>
|
||||
<Ionicons name="camera" size={16} color={ACCENT} />
|
||||
<Text style={styles.captureButtonText}>Take photo</Text>
|
||||
</Pressable>
|
||||
) : null}
|
||||
<Pressable style={styles.captureButton} onPress={() => void pickPhoto(false)}>
|
||||
<Ionicons name="images-outline" size={16} color={ACCENT} />
|
||||
<Text style={styles.captureButtonText}>
|
||||
{photoUri ? "Choose another" : "Choose photo"}
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.captureArea}>
|
||||
<Pressable
|
||||
style={[styles.recordButton, recorder.state === "recording" && styles.recordButtonActive]}
|
||||
onPress={() => {
|
||||
if (recorder.state === "recording") void recorder.stopRecording();
|
||||
else void recorder.startRecording();
|
||||
}}
|
||||
disabled={sending}
|
||||
>
|
||||
<Ionicons
|
||||
name={recorder.state === "recording" ? "stop" : "mic"}
|
||||
size={28}
|
||||
color={recorder.state === "recording" ? colors.background : ACCENT}
|
||||
/>
|
||||
</Pressable>
|
||||
<Text style={styles.recordStatus}>
|
||||
{recorder.state === "recording"
|
||||
? `Recording… ${recorder.durationSeconds}s`
|
||||
: recorder.recordingUri
|
||||
? `Recorded ${recorder.durationSeconds}s — tap the mic to redo`
|
||||
: `Tap to record (up to ${MAX_AUDIO_SECONDS}s)`}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{error ? <Text style={styles.error}>{error}</Text> : null}
|
||||
|
||||
<Pressable
|
||||
onPress={() => void handleSend()}
|
||||
disabled={!canSend}
|
||||
style={[styles.sendButton, !canSend && styles.sendButtonDisabled]}
|
||||
>
|
||||
{sending ? (
|
||||
<ActivityIndicator size="small" color={colors.background} />
|
||||
) : (
|
||||
<Text style={styles.sendButtonText}>Send proof & finish dare</Text>
|
||||
)}
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
backdrop: { flex: 1, backgroundColor: "rgba(0,0,0,0.6)", justifyContent: "flex-end" },
|
||||
sheet: {
|
||||
backgroundColor: colors.background,
|
||||
borderTopLeftRadius: radius.xxl,
|
||||
borderTopRightRadius: radius.xxl,
|
||||
paddingHorizontal: spacing.lg,
|
||||
paddingBottom: Platform.OS === "ios" ? spacing.xl : spacing.lg,
|
||||
},
|
||||
handle: {
|
||||
width: 36, height: 4, borderRadius: radius.full,
|
||||
backgroundColor: colors.border, alignSelf: "center", marginTop: spacing.sm,
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row", alignItems: "center", justifyContent: "space-between",
|
||||
paddingVertical: spacing.md,
|
||||
},
|
||||
title: { ...typography.title3, color: colors.text },
|
||||
subtitle: { ...typography.subhead, color: colors.textSecondary, marginBottom: spacing.lg },
|
||||
captureArea: { alignItems: "center", gap: spacing.md, marginBottom: spacing.lg },
|
||||
preview: {
|
||||
width: "100%", height: 220,
|
||||
borderRadius: radius.lg, borderWidth: 1, borderColor: colors.border,
|
||||
},
|
||||
placeholder: {
|
||||
width: "100%", height: 220,
|
||||
borderRadius: radius.lg, borderWidth: 1, borderColor: colors.border,
|
||||
backgroundColor: colors.backgroundLight,
|
||||
alignItems: "center", justifyContent: "center",
|
||||
},
|
||||
captureButtons: { flexDirection: "row", gap: spacing.sm },
|
||||
captureButton: {
|
||||
flexDirection: "row", alignItems: "center", gap: spacing.xs,
|
||||
paddingHorizontal: spacing.md, paddingVertical: spacing.sm,
|
||||
borderRadius: radius.full, borderWidth: 1, borderColor: ACCENT,
|
||||
},
|
||||
captureButtonText: { ...typography.subhead, color: ACCENT, fontWeight: "600" },
|
||||
recordButton: {
|
||||
width: 72, height: 72, borderRadius: radius.full,
|
||||
borderWidth: 2, borderColor: ACCENT,
|
||||
alignItems: "center", justifyContent: "center",
|
||||
backgroundColor: colors.backgroundLight,
|
||||
},
|
||||
recordButtonActive: { backgroundColor: ACCENT },
|
||||
recordStatus: { ...typography.footnote, color: colors.textSecondary },
|
||||
error: { ...typography.footnote, color: colors.error, marginBottom: spacing.md },
|
||||
sendButton: {
|
||||
backgroundColor: ACCENT,
|
||||
borderRadius: radius.full,
|
||||
paddingVertical: spacing.md,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
minHeight: 50,
|
||||
},
|
||||
sendButtonDisabled: { opacity: 0.4 },
|
||||
sendButtonText: { ...typography.headline, color: colors.background, fontWeight: "700" },
|
||||
});
|
||||
@@ -0,0 +1,112 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { ActivityIndicator, Image, Pressable, StyleSheet, Text, View } from "react-native";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { Audio } from "expo-av";
|
||||
import { getMediaUrl } from "../../../lib/mediaApi";
|
||||
import { colors, featureColors, radius, spacing, typography } from "../../../theme";
|
||||
import type { DareProofType } from "../types";
|
||||
|
||||
const ACCENT = featureColors.dares.accent;
|
||||
|
||||
export interface DareProofViewProps {
|
||||
proofMediaId: string;
|
||||
proofType: DareProofType;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the attached proof inline on a dare card: the photo itself, or a
|
||||
* play button for audio. Signed URLs are short-lived, so the URL is resolved
|
||||
* lazily on first render (photo) or first play (audio).
|
||||
*/
|
||||
export function DareProofView({ proofMediaId, proofType }: DareProofViewProps) {
|
||||
const [url, setUrl] = useState<string | null>(null);
|
||||
const [failed, setFailed] = useState(false);
|
||||
const [sound, setSound] = useState<Audio.Sound | null>(null);
|
||||
const [playing, setPlaying] = useState(false);
|
||||
const [loadingAudio, setLoadingAudio] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (proofType !== "photo") return;
|
||||
let cancelled = false;
|
||||
getMediaUrl(proofMediaId)
|
||||
.then((result) => { if (!cancelled) setUrl(result.url); })
|
||||
.catch(() => { if (!cancelled) setFailed(true); });
|
||||
return () => { cancelled = true; };
|
||||
}, [proofMediaId, proofType]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => { if (sound) void sound.unloadAsync(); };
|
||||
}, [sound]);
|
||||
|
||||
const togglePlayback = useCallback(async () => {
|
||||
try {
|
||||
if (sound) {
|
||||
const status = await sound.getStatusAsync();
|
||||
if (status.isLoaded && status.isPlaying) {
|
||||
await sound.pauseAsync();
|
||||
setPlaying(false);
|
||||
} else {
|
||||
await sound.replayAsync();
|
||||
setPlaying(true);
|
||||
}
|
||||
return;
|
||||
}
|
||||
setLoadingAudio(true);
|
||||
const { url: signedUrl } = await getMediaUrl(proofMediaId);
|
||||
const created = await Audio.Sound.createAsync(
|
||||
{ uri: signedUrl },
|
||||
{ shouldPlay: true },
|
||||
(status) => {
|
||||
if (status.isLoaded && status.didJustFinish) setPlaying(false);
|
||||
},
|
||||
);
|
||||
setSound(created.sound);
|
||||
setPlaying(true);
|
||||
} catch {
|
||||
setFailed(true);
|
||||
} finally {
|
||||
setLoadingAudio(false);
|
||||
}
|
||||
}, [sound, proofMediaId]);
|
||||
|
||||
if (failed) {
|
||||
return <Text style={styles.failed}>Proof could not be loaded.</Text>;
|
||||
}
|
||||
|
||||
if (proofType === "photo") {
|
||||
return url ? (
|
||||
<Image source={{ uri: url }} style={styles.photo} resizeMode="cover" />
|
||||
) : (
|
||||
<ActivityIndicator size="small" color={ACCENT} style={styles.loader} />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Pressable style={styles.audioRow} onPress={() => void togglePlayback()} disabled={loadingAudio}>
|
||||
{loadingAudio ? (
|
||||
<ActivityIndicator size="small" color={ACCENT} />
|
||||
) : (
|
||||
<Ionicons name={playing ? "pause-circle" : "play-circle"} size={28} color={ACCENT} />
|
||||
)}
|
||||
<Text style={styles.audioLabel}>{playing ? "Playing proof…" : "Play audio proof"}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
photo: {
|
||||
width: "100%", height: 180, marginTop: spacing.sm,
|
||||
borderRadius: radius.md, borderWidth: 1, borderColor: colors.border,
|
||||
},
|
||||
loader: { marginTop: spacing.sm, alignSelf: "flex-start" },
|
||||
audioRow: {
|
||||
flexDirection: "row", alignItems: "center", gap: spacing.sm,
|
||||
marginTop: spacing.sm,
|
||||
paddingHorizontal: spacing.md, paddingVertical: spacing.sm,
|
||||
borderRadius: radius.md, borderWidth: 1, borderColor: colors.border,
|
||||
backgroundColor: colors.background,
|
||||
alignSelf: "flex-start",
|
||||
},
|
||||
audioLabel: { ...typography.subhead, color: colors.text, fontWeight: "600" },
|
||||
failed: { ...typography.footnote, color: colors.textTertiary, marginTop: spacing.sm },
|
||||
});
|
||||
@@ -6,7 +6,7 @@ import {
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { daresApi } from "../../../lib/daresApi";
|
||||
import { colors, featureColors, radius, spacing, typography } from "../../../theme";
|
||||
import { DURATION_OPTIONS, type DareItem, type DarePack, type SendDarePayload } from "../types";
|
||||
import { DURATION_OPTIONS, PROOF_OPTIONS, type DareItem, type DarePack, type DareProofType, type SendDarePayload } from "../types";
|
||||
|
||||
const ACCENT = featureColors.dares.accent;
|
||||
|
||||
@@ -26,6 +26,7 @@ export function SendDareSheet({ visible, pack, canSendCustom, onClose, onSend, o
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [customText, setCustomText] = useState("");
|
||||
const [durationHours, setDurationHours] = useState<number | null>(24);
|
||||
const [proofType, setProofType] = useState<DareProofType>("none");
|
||||
const [notes, setNotes] = useState("");
|
||||
const [sending, setSending] = useState(false);
|
||||
|
||||
@@ -35,6 +36,7 @@ export function SendDareSheet({ visible, pack, canSendCustom, onClose, onSend, o
|
||||
setSelectedId(null);
|
||||
setCustomText("");
|
||||
setNotes("");
|
||||
setProofType("none");
|
||||
daresApi
|
||||
.packDares(pack.id)
|
||||
.then((result) => setDares(result.dares))
|
||||
@@ -52,10 +54,11 @@ export function SendDareSheet({ visible, pack, canSendCustom, onClose, onSend, o
|
||||
? { custom_dare_text: customText.trim(), custom_dare_intensity: 3, duration_hours: durationHours }
|
||||
: { dare_id: selectedId!, duration_hours: durationHours };
|
||||
if (notes.trim()) payload.sender_notes = notes.trim();
|
||||
if (proofType !== "none") payload.proof_type = proofType;
|
||||
const sent = await onSend(payload);
|
||||
setSending(false);
|
||||
if (sent) onClose();
|
||||
}, [canSubmit, sending, isCustom, customText, selectedId, durationHours, notes, onSend, onClose]);
|
||||
}, [canSubmit, sending, isCustom, customText, selectedId, durationHours, proofType, notes, onSend, onClose]);
|
||||
|
||||
return (
|
||||
<Modal visible={visible} animationType="slide" transparent onRequestClose={onClose}>
|
||||
@@ -135,6 +138,29 @@ export function SendDareSheet({ visible, pack, canSendCustom, onClose, onSend, o
|
||||
})}
|
||||
</View>
|
||||
|
||||
<Text style={styles.sectionLabel}>REQUIRE PROOF</Text>
|
||||
<View style={styles.durationRow}>
|
||||
{PROOF_OPTIONS.map((option) => {
|
||||
const selected = option.value === proofType;
|
||||
return (
|
||||
<Pressable
|
||||
key={option.value}
|
||||
onPress={() => setProofType(option.value)}
|
||||
style={[styles.chip, styles.proofChip, selected && styles.chipSelected]}
|
||||
>
|
||||
<Ionicons
|
||||
name={option.icon as keyof typeof Ionicons.glyphMap}
|
||||
size={14}
|
||||
color={selected ? ACCENT : colors.textSecondary}
|
||||
/>
|
||||
<Text style={[styles.chipText, selected && styles.chipTextSelected]}>
|
||||
{option.label}
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
|
||||
<Text style={styles.sectionLabel}>ADD A NOTE</Text>
|
||||
<TextInput
|
||||
style={styles.notesInput}
|
||||
@@ -229,6 +255,7 @@ const styles = StyleSheet.create({
|
||||
paddingHorizontal: spacing.md, paddingVertical: spacing.sm - 2,
|
||||
borderRadius: radius.full, borderWidth: 1, borderColor: colors.border,
|
||||
},
|
||||
proofChip: { flexDirection: "row", alignItems: "center", gap: spacing.xs },
|
||||
chipSelected: { borderColor: ACCENT, backgroundColor: "rgba(212,175,55,0.12)" },
|
||||
chipText: { ...typography.footnote, color: colors.textSecondary },
|
||||
chipTextSelected: { color: ACCENT, fontWeight: "600" },
|
||||
|
||||
@@ -4,3 +4,7 @@ export { DarePackGrid } from "./DarePackGrid";
|
||||
export type { DarePackGridProps } from "./DarePackGrid";
|
||||
export { SendDareSheet } from "./SendDareSheet";
|
||||
export type { SendDareSheetProps } from "./SendDareSheet";
|
||||
export { DareProofSheet } from "./DareProofSheet";
|
||||
export type { DareProofSheetProps } from "./DareProofSheet";
|
||||
export { DareProofView } from "./DareProofView";
|
||||
export type { DareProofViewProps } from "./DareProofView";
|
||||
@@ -30,7 +30,7 @@ export interface UseDaresReturn {
|
||||
refresh: () => Promise<void>;
|
||||
send: (payload: SendDarePayload) => Promise<boolean>;
|
||||
respond: (dareId: string, action: "accept" | "decline") => Promise<void>;
|
||||
submit: (dareId: string) => Promise<void>;
|
||||
submit: (dareId: string, proofMediaId?: string) => Promise<void>;
|
||||
complete: (dareId: string) => Promise<void>;
|
||||
cancel: (dareId: string) => Promise<void>;
|
||||
}
|
||||
@@ -167,7 +167,7 @@ export function useDares({ isFocused = true }: UseDaresConfig = {}): UseDaresRet
|
||||
refresh,
|
||||
send,
|
||||
respond: useCallback((dareId, action) => act(dareId, () => daresApi.respond(dareId, action)), [act]),
|
||||
submit: useCallback((dareId) => act(dareId, () => daresApi.submit(dareId)), [act]),
|
||||
submit: useCallback((dareId, proofMediaId) => act(dareId, () => daresApi.submit(dareId, proofMediaId)), [act]),
|
||||
complete: useCallback((dareId) => act(dareId, () => daresApi.complete(dareId)), [act]),
|
||||
cancel: useCallback((dareId) => act(dareId, () => daresApi.cancel(dareId)), [act]),
|
||||
};
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
export type DareStatus =
|
||||
| "pending" | "active" | "submitted" | "completed" | "expired" | "declined" | "cancelled";
|
||||
|
||||
/** Sender-chosen proof of completion; "none" means a plain "I did it" suffices. */
|
||||
export type DareProofType = "none" | "photo" | "audio";
|
||||
|
||||
export interface DarePack {
|
||||
id: string;
|
||||
name: string;
|
||||
@@ -36,6 +39,8 @@ export interface SentDare {
|
||||
direction: "incoming" | "outgoing";
|
||||
status: DareStatus;
|
||||
sender_notes: string | null;
|
||||
proof_type: DareProofType;
|
||||
proof_media_id: string | null;
|
||||
sent_at: string;
|
||||
accepted_at: string | null;
|
||||
submitted_at: string | null;
|
||||
@@ -70,8 +75,15 @@ export interface SendDarePayload {
|
||||
custom_dare_intensity?: number;
|
||||
duration_hours?: number | null;
|
||||
sender_notes?: string | null;
|
||||
proof_type?: DareProofType;
|
||||
}
|
||||
|
||||
export const PROOF_OPTIONS: { label: string; value: DareProofType; icon: string }[] = [
|
||||
{ label: "No proof", value: "none", icon: "checkmark-circle-outline" },
|
||||
{ label: "Photo", value: "photo", icon: "camera-outline" },
|
||||
{ label: "Audio", value: "audio", icon: "mic-outline" },
|
||||
];
|
||||
|
||||
export const DURATION_OPTIONS: { label: string; hours: number | null }[] = [
|
||||
{ label: "1 hour", hours: 1 },
|
||||
{ label: "6 hours", hours: 6 },
|
||||
|
||||
Reference in new issue
Block a user