mirror of
https://github.com/jjbrunton/Sauci.git
synced 2026-10-31 10:19:43 +00:00
Initial commit
This commit is contained in:
jjbrunton committed
commit
4d53d83769
73 files changed
+37728
No files matched your search
@@ -0,0 +1,571 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { View, Text, StyleSheet, FlatList, TextInput, TouchableOpacity, KeyboardAvoidingView, Platform, Image, ActivityIndicator, Alert, AppState } from "react-native";
|
||||
import { useLocalSearchParams, useRouter, Stack } from "expo-router";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { supabase } from "../../../src/lib/supabase";
|
||||
import { useAuthStore } from "../../../src/store";
|
||||
import * as ImagePicker from "expo-image-picker";
|
||||
import * as FileSystem from 'expo-file-system';
|
||||
import { decode } from 'base64-arraybuffer';
|
||||
import { Database } from "../../../src/types/supabase";
|
||||
|
||||
type Message = Database["public"]["Tables"]["messages"]["Row"];
|
||||
|
||||
export default function ChatScreen() {
|
||||
const { id } = useLocalSearchParams();
|
||||
const matchId = id as string;
|
||||
const router = useRouter();
|
||||
const { user } = useAuthStore();
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [match, setMatch] = useState<any>(null);
|
||||
const [inputText, setInputText] = useState("");
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [partnerTyping, setPartnerTyping] = useState(false);
|
||||
const flatListRef = useRef<FlatList>(null);
|
||||
const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!matchId) return;
|
||||
|
||||
// Fetch match context (question and responses)
|
||||
const fetchMatch = async () => {
|
||||
const { data } = await supabase
|
||||
.from("matches")
|
||||
.select("*, question:questions(*)")
|
||||
.eq("id", matchId)
|
||||
.single();
|
||||
|
||||
if (data) {
|
||||
// Fetch responses for both users in this couple for this question
|
||||
const { data: responses } = await supabase
|
||||
.from("responses")
|
||||
.select("*, profiles(name)")
|
||||
.eq("question_id", data.question_id)
|
||||
.eq("couple_id", data.couple_id);
|
||||
|
||||
setMatch({ ...data, responses: responses || [] });
|
||||
}
|
||||
};
|
||||
fetchMatch();
|
||||
|
||||
// Fetch initial messages and mark as read
|
||||
const fetchMessagesAndMarkRead = async () => {
|
||||
const { data, error } = await supabase
|
||||
.from("messages")
|
||||
.select("*")
|
||||
.eq("match_id", matchId)
|
||||
.order("created_at", { ascending: false });
|
||||
|
||||
if (data) {
|
||||
setMessages(data);
|
||||
|
||||
// Identify unread messages from partner
|
||||
const unreadIds = data
|
||||
.filter(m => m.user_id !== user?.id && !m.read_at)
|
||||
.map(m => m.id);
|
||||
|
||||
if (unreadIds.length > 0) {
|
||||
await supabase
|
||||
.from("messages")
|
||||
.update({ read_at: new Date().toISOString() })
|
||||
.in("id", unreadIds);
|
||||
|
||||
// Optimistically update local state
|
||||
setMessages(prev => prev.map(m =>
|
||||
unreadIds.includes(m.id) ? { ...m, read_at: new Date().toISOString() } : m
|
||||
));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
fetchMessagesAndMarkRead();
|
||||
|
||||
// Subscribe to new messages, updates (read receipts), and typing
|
||||
const channel = supabase
|
||||
.channel(`chat:${matchId}`)
|
||||
.on(
|
||||
"postgres_changes",
|
||||
{
|
||||
event: "INSERT",
|
||||
schema: "public",
|
||||
table: "messages",
|
||||
filter: `match_id=eq.${matchId}`,
|
||||
},
|
||||
async (payload) => {
|
||||
const newMessage = payload.new as Message;
|
||||
|
||||
// If receiving a message from partner, mark as read immediately since we are in the chat
|
||||
if (newMessage.user_id !== user?.id) {
|
||||
await supabase
|
||||
.from("messages")
|
||||
.update({ read_at: new Date().toISOString() })
|
||||
.eq("id", newMessage.id);
|
||||
newMessage.read_at = new Date().toISOString();
|
||||
}
|
||||
|
||||
setMessages((prev) => [newMessage, ...prev]);
|
||||
setPartnerTyping(false); // Stop typing indicator if they sent a message
|
||||
}
|
||||
)
|
||||
.on(
|
||||
"postgres_changes",
|
||||
{
|
||||
event: "UPDATE",
|
||||
schema: "public",
|
||||
table: "messages",
|
||||
filter: `match_id=eq.${matchId}`,
|
||||
},
|
||||
(payload) => {
|
||||
const updatedMessage = payload.new as Message;
|
||||
setMessages((prev) =>
|
||||
prev.map(m => m.id === updatedMessage.id ? updatedMessage : m)
|
||||
);
|
||||
}
|
||||
)
|
||||
.on("broadcast", { event: "typing" }, (payload) => {
|
||||
if (payload.payload.userId !== user?.id) {
|
||||
setPartnerTyping(true);
|
||||
|
||||
// Auto-hide typing indicator after 3s
|
||||
if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
|
||||
typingTimeoutRef.current = setTimeout(() => {
|
||||
setPartnerTyping(false);
|
||||
}, 3000);
|
||||
}
|
||||
})
|
||||
.subscribe();
|
||||
|
||||
return () => {
|
||||
supabase.removeChannel(channel);
|
||||
if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
|
||||
};
|
||||
}, [matchId]);
|
||||
|
||||
const handleTyping = (text: string) => {
|
||||
setInputText(text);
|
||||
|
||||
if (text.length > 0) {
|
||||
supabase.channel(`chat:${matchId}`).send({
|
||||
type: "broadcast",
|
||||
event: "typing",
|
||||
payload: { userId: user?.id },
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleSend = async () => {
|
||||
if (!inputText.trim()) return;
|
||||
if (!user) return;
|
||||
|
||||
const content = inputText.trim();
|
||||
setInputText("");
|
||||
|
||||
const { error } = await supabase.from("messages").insert({
|
||||
match_id: matchId,
|
||||
user_id: user.id,
|
||||
content: content,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
Alert.alert("Error", "Failed to send message");
|
||||
setInputText(content);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePickImage = async () => {
|
||||
const result = await ImagePicker.launchImageLibraryAsync({
|
||||
mediaTypes: ImagePicker.MediaTypeOptions.Images,
|
||||
allowsEditing: true,
|
||||
quality: 0.7,
|
||||
});
|
||||
|
||||
if (!result.canceled) {
|
||||
uploadImage(result.assets[0].uri);
|
||||
}
|
||||
};
|
||||
|
||||
const uploadImage = async (uri: string) => {
|
||||
if (!user) return;
|
||||
setUploading(true);
|
||||
|
||||
try {
|
||||
let fileBody;
|
||||
let ext = "jpg";
|
||||
|
||||
if (Platform.OS === 'web') {
|
||||
const response = await fetch(uri);
|
||||
const blob = await response.blob();
|
||||
fileBody = blob;
|
||||
|
||||
if (blob.type === 'image/png') ext = 'png';
|
||||
else if (blob.type === 'image/jpeg' || blob.type === 'image/jpg') ext = 'jpg';
|
||||
else if (blob.type === 'image/gif') ext = 'gif';
|
||||
else if (blob.type === 'image/webp') ext = 'webp';
|
||||
} else {
|
||||
const base64 = await FileSystem.readAsStringAsync(uri, { encoding: FileSystem.EncodingType.Base64 });
|
||||
fileBody = decode(base64);
|
||||
|
||||
const uriExt = uri.split('.').pop();
|
||||
if (uriExt && uriExt !== uri) {
|
||||
ext = uriExt.toLowerCase();
|
||||
}
|
||||
}
|
||||
|
||||
const fileName = `${matchId}/${Date.now()}_${Math.random().toString(36).substring(7)}.${ext}`;
|
||||
const contentType = `image/${ext === "jpg" ? "jpeg" : ext}`;
|
||||
|
||||
const { error: uploadError } = await supabase.storage
|
||||
.from("chat-media")
|
||||
.upload(fileName, fileBody, {
|
||||
contentType,
|
||||
upsert: false
|
||||
});
|
||||
|
||||
if (uploadError) throw uploadError;
|
||||
|
||||
const { data: { publicUrl } } = supabase.storage
|
||||
.from("chat-media")
|
||||
.getPublicUrl(fileName);
|
||||
|
||||
await supabase.from("messages").insert({
|
||||
match_id: matchId,
|
||||
user_id: user.id,
|
||||
media_path: publicUrl,
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
Alert.alert("Error", "Failed to upload image");
|
||||
console.error(error);
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const revealMessage = async (messageId: string) => {
|
||||
// Optimistic update
|
||||
setMessages(prev => prev.map(m =>
|
||||
m.id === messageId ? { ...m, media_viewed_at: new Date().toISOString() } : m
|
||||
));
|
||||
|
||||
const { error } = await supabase
|
||||
.from("messages")
|
||||
.update({ media_viewed_at: new Date().toISOString() })
|
||||
.eq("id", messageId);
|
||||
|
||||
if (error) {
|
||||
console.error("Failed to mark as viewed", error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const renderMessage = ({ item }: { item: Message }) => {
|
||||
const isMe = item.user_id === user?.id;
|
||||
return (
|
||||
<View style={[styles.messageRow, isMe ? styles.myMessageRow : styles.theirMessageRow]}>
|
||||
<View style={[styles.bubble, isMe ? styles.myBubble : styles.theirBubble]}>
|
||||
{item.media_path ? (
|
||||
<View>
|
||||
<Image
|
||||
source={{ uri: item.media_path }}
|
||||
style={styles.messageImage}
|
||||
blurRadius={(!isMe && !item.media_viewed_at) ? 20 : 0}
|
||||
/>
|
||||
{(!isMe && !item.media_viewed_at) && (
|
||||
<TouchableOpacity
|
||||
style={styles.revealOverlay}
|
||||
activeOpacity={0.8}
|
||||
onPress={() => revealMessage(item.id)}
|
||||
>
|
||||
<View style={styles.revealContent}>
|
||||
<Ionicons name="eye-off-outline" size={32} color="#fff" />
|
||||
<Text style={styles.revealText}>Tap to reveal</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
) : (
|
||||
<Text style={styles.messageText}>{item.content}</Text>
|
||||
)}
|
||||
<View style={styles.metaContainer}>
|
||||
<Text style={[styles.timestamp, isMe ? styles.myTimestamp : styles.theirTimestamp]}>
|
||||
{new Date(item.created_at!).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||||
</Text>
|
||||
{isMe && (
|
||||
<Ionicons
|
||||
name={item.read_at ? "checkmark-done-outline" : "checkmark-outline"}
|
||||
size={14}
|
||||
color={item.read_at ? "#4cd137" : "rgba(255,255,255,0.7)"}
|
||||
style={styles.readIcon}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Stack.Screen options={{
|
||||
title: "Chat",
|
||||
headerTitle: match?.question?.text ? () => (
|
||||
<View style={styles.headerTitleContainer}>
|
||||
<Text style={styles.headerTitle} numberOfLines={2}>
|
||||
{match.question.text}
|
||||
{match.question.partner_text ? ` & ${match.question.partner_text}` : ""}
|
||||
</Text>
|
||||
{match.responses && match.responses.length > 0 && (
|
||||
<View style={styles.answersContainer}>
|
||||
{match.responses.map((response) => (
|
||||
<Text key={response.user_id} style={styles.answerText}>
|
||||
{response.profiles?.name || 'You'}: {response.answer}
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
) : "Chat",
|
||||
headerStyle: { backgroundColor: "#16213e" },
|
||||
headerTintColor: "#fff",
|
||||
headerBackTitleVisible: false,
|
||||
}} />
|
||||
|
||||
<KeyboardAvoidingView
|
||||
style={styles.keyboardAvoiding}
|
||||
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
||||
keyboardVerticalOffset={Platform.OS === "ios" ? 90 : 0}
|
||||
>
|
||||
{/* Sticky top bar with question and answers */}
|
||||
{match?.question && (
|
||||
<View style={styles.stickyTopBar}>
|
||||
<Text style={styles.stickyQuestionText}>
|
||||
{match.question.text}
|
||||
{match.question.partner_text ? ` & ${match.question.partner_text}` : ""}
|
||||
</Text>
|
||||
{match.responses && match.responses.length > 0 && (
|
||||
<View style={styles.stickyAnswersContainer}>
|
||||
{match.responses.map((response) => (
|
||||
<Text key={response.user_id} style={styles.stickyAnswerText}>
|
||||
{response.user_id === user?.id ? 'You' : (response.profiles?.name || 'Partner')}: {response.answer}
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
|
||||
<FlatList
|
||||
ref={flatListRef}
|
||||
data={messages}
|
||||
renderItem={renderMessage}
|
||||
keyExtractor={(item) => item.id}
|
||||
inverted
|
||||
contentContainerStyle={styles.listContent}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
ListHeaderComponent={
|
||||
partnerTyping ? (
|
||||
<View style={styles.typingContainer}>
|
||||
<Text style={styles.typingText}>Partner is typing...</Text>
|
||||
</View>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
|
||||
<View style={styles.inputContainer}>
|
||||
<TouchableOpacity onPress={handlePickImage} disabled={uploading} style={styles.attachButton}>
|
||||
{uploading ? (
|
||||
<ActivityIndicator color="#e94560" size="small" />
|
||||
) : (
|
||||
<Ionicons name="image-outline" size={24} color="#e94560" />
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={inputText}
|
||||
onChangeText={handleTyping}
|
||||
placeholder="Type a message..."
|
||||
placeholderTextColor="#666"
|
||||
multiline
|
||||
/>
|
||||
|
||||
<TouchableOpacity onPress={handleSend} disabled={!inputText.trim()} style={styles.sendButton}>
|
||||
<Ionicons
|
||||
name="send"
|
||||
size={24}
|
||||
color={inputText.trim() ? "#e94560" : "#666"}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#1a1a2e",
|
||||
},
|
||||
keyboardAvoiding: {
|
||||
flex: 1,
|
||||
},
|
||||
listContent: {
|
||||
padding: 16,
|
||||
},
|
||||
messageRow: {
|
||||
marginBottom: 16,
|
||||
flexDirection: "row",
|
||||
},
|
||||
myMessageRow: {
|
||||
justifyContent: "flex-end",
|
||||
},
|
||||
theirMessageRow: {
|
||||
justifyContent: "flex-start",
|
||||
},
|
||||
bubble: {
|
||||
maxWidth: "75%",
|
||||
padding: 12,
|
||||
borderRadius: 20,
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 2,
|
||||
},
|
||||
myBubble: {
|
||||
backgroundColor: "#e94560",
|
||||
borderBottomRightRadius: 4,
|
||||
},
|
||||
theirBubble: {
|
||||
backgroundColor: "#16213e",
|
||||
borderWidth: 1,
|
||||
borderColor: "#0f3460",
|
||||
borderBottomLeftRadius: 4,
|
||||
},
|
||||
messageText: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
lineHeight: 22,
|
||||
},
|
||||
messageImage: {
|
||||
width: 200,
|
||||
height: 200,
|
||||
borderRadius: 12,
|
||||
backgroundColor: "rgba(0,0,0,0.2)",
|
||||
},
|
||||
metaContainer: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end",
|
||||
marginTop: 4,
|
||||
},
|
||||
timestamp: {
|
||||
fontSize: 10,
|
||||
},
|
||||
myTimestamp: {
|
||||
color: "rgba(255, 255, 255, 0.7)",
|
||||
},
|
||||
theirTimestamp: {
|
||||
color: "rgba(255, 255, 255, 0.4)",
|
||||
},
|
||||
readIcon: {
|
||||
marginLeft: 4,
|
||||
},
|
||||
inputContainer: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
padding: 12,
|
||||
paddingBottom: Platform.OS === "ios" ? 34 : 12,
|
||||
backgroundColor: "#16213e",
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: "#0f3460",
|
||||
},
|
||||
attachButton: {
|
||||
padding: 10,
|
||||
},
|
||||
input: {
|
||||
flex: 1,
|
||||
backgroundColor: "#0f3460",
|
||||
borderRadius: 24,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 10,
|
||||
color: "#fff",
|
||||
maxHeight: 120,
|
||||
marginHorizontal: 8,
|
||||
fontSize: 16,
|
||||
},
|
||||
sendButton: {
|
||||
padding: 10,
|
||||
},
|
||||
headerTitleContainer: {
|
||||
alignItems: "center",
|
||||
maxWidth: 200,
|
||||
},
|
||||
headerTitle: {
|
||||
color: "#fff",
|
||||
fontWeight: "bold",
|
||||
fontSize: 16,
|
||||
textAlign: "center",
|
||||
},
|
||||
answersContainer: {
|
||||
marginTop: 4,
|
||||
alignItems: "center",
|
||||
},
|
||||
answerText: {
|
||||
color: "rgba(255,255,255,0.8)",
|
||||
fontSize: 12,
|
||||
marginBottom: 2,
|
||||
},
|
||||
typingContainer: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
},
|
||||
typingText: {
|
||||
color: "#666",
|
||||
fontStyle: "italic",
|
||||
fontSize: 12,
|
||||
},
|
||||
revealOverlay: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "rgba(0,0,0,0.3)",
|
||||
borderRadius: 12,
|
||||
},
|
||||
revealContent: {
|
||||
alignItems: "center",
|
||||
backgroundColor: "rgba(0,0,0,0.6)",
|
||||
padding: 12,
|
||||
borderRadius: 12,
|
||||
},
|
||||
revealText: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
fontWeight: "bold",
|
||||
marginTop: 4,
|
||||
},
|
||||
stickyTopBar: {
|
||||
backgroundColor: "#16213e",
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#0f3460",
|
||||
padding: 16,
|
||||
paddingTop: 12,
|
||||
paddingBottom: 12,
|
||||
},
|
||||
stickyQuestionText: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
marginBottom: 8,
|
||||
},
|
||||
stickyAnswersContainer: {
|
||||
alignItems: "center",
|
||||
},
|
||||
stickyAnswerText: {
|
||||
color: "rgba(255,255,255,0.8)",
|
||||
fontSize: 14,
|
||||
marginBottom: 4,
|
||||
}
|
||||
});
|
||||
Reference in new issue
Block a user