comments
This commit is contained in:
@@ -0,0 +1,216 @@
|
||||
import { BlurView } from "expo-blur";
|
||||
import React, { useMemo, useState } from "react";
|
||||
import {
|
||||
Image,
|
||||
Platform,
|
||||
Pressable,
|
||||
Text,
|
||||
TextInput,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { icons } from "../../assets";
|
||||
import { projectsRef, serverTimestamp } from "../../config/firebase";
|
||||
import useDataFromRef from "../../hooks/useDataFromRef";
|
||||
import { useUser } from "../../providers/UserDataProvider";
|
||||
import { Palette } from "../../styles";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import { size } from "../../styles/Style";
|
||||
import AppActionSheet from "../AppActionSheet";
|
||||
|
||||
const formatRelativeTime = (date) => {
|
||||
try {
|
||||
const d = date instanceof Date ? date : date?.toDate?.() || null;
|
||||
if (!d) return "";
|
||||
const diff = Math.max(0, Date.now() - d.getTime());
|
||||
const sec = Math.floor(diff / 1000);
|
||||
if (sec < 60) return `${sec}s`;
|
||||
const min = Math.floor(sec / 60);
|
||||
if (min < 60) return `${min}min`;
|
||||
const h = Math.floor(min / 60);
|
||||
if (h < 24) return `${h}h`;
|
||||
const dA = Math.floor(h / 24);
|
||||
return `${dA}j`;
|
||||
} catch (e) {
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
||||
const CommentsModal = ({ sheetId, payload }) => {
|
||||
const projectId = payload?.projectId || null;
|
||||
const { currentUID, currentUserData } = useUser();
|
||||
const [text, setText] = useState("");
|
||||
|
||||
const commentsRef = useMemo(() => {
|
||||
try {
|
||||
return projectId
|
||||
? projectsRef
|
||||
.doc(projectId)
|
||||
.collection("comments")
|
||||
.orderBy("createdAt", "desc")
|
||||
: null;
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
}, [projectId]);
|
||||
|
||||
const { data: comments = [] } = useDataFromRef({
|
||||
ref: commentsRef,
|
||||
simpleRef: false,
|
||||
listener: true,
|
||||
condition: !!commentsRef,
|
||||
refreshArray: [projectId],
|
||||
});
|
||||
|
||||
const onSend = async () => {
|
||||
const value = (text || "").trim();
|
||||
if (!value || !projectId || !currentUID) return;
|
||||
try {
|
||||
setText("");
|
||||
const docRef = projectsRef.doc(projectId).collection("comments");
|
||||
await docRef.add({
|
||||
userId: currentUID,
|
||||
userName: currentUserData?.userName || "",
|
||||
profilePicture: currentUserData?.profilePictureURL || "",
|
||||
text: value,
|
||||
createdAt: serverTimestamp(),
|
||||
});
|
||||
} catch (e) {
|
||||
// Ignore
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AppActionSheet id="Comments" props={{ gestureEnabled: true }}>
|
||||
<View style={{ gap: 14 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 22,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
alignSelf: "center",
|
||||
}}
|
||||
>
|
||||
Commentaires
|
||||
</Text>
|
||||
<View style={{ gap: 14, maxHeight: 400 }}>
|
||||
{Array.isArray(comments) && comments.length > 0 ? (
|
||||
comments.map((c) => (
|
||||
<View key={c.id} style={{ flexDirection: "row", gap: 12 }}>
|
||||
{c?.profilePicture ? (
|
||||
<Image
|
||||
source={{ uri: c.profilePicture }}
|
||||
cachePolicy="memory-disk"
|
||||
priority="high"
|
||||
contentFit="cover"
|
||||
transition={100}
|
||||
style={{ ...size({ size: 42 }), borderRadius: 100 }}
|
||||
/>
|
||||
) : (
|
||||
<View
|
||||
style={{
|
||||
...size({ size: 42 }),
|
||||
borderRadius: 100,
|
||||
backgroundColor: "#FFFFFF22",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<View style={{ flex: 1 }}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
}}
|
||||
>
|
||||
{c?.userId === currentUID ? "vous" : c?.userName || ""}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
opacity: 0.75,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
• {formatRelativeTime(c?.createdAt)}
|
||||
</Text>
|
||||
</View>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
{c?.text}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
))
|
||||
) : (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
opacity: 0.8,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
textAlign: "center",
|
||||
marginTop: 6,
|
||||
}}
|
||||
>
|
||||
Aucun commentaire pour le moment
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={{ marginTop: 6 }}>
|
||||
<BlurView
|
||||
intensity={20}
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
paddingHorizontal: 16,
|
||||
backgroundColor: Palette.glass,
|
||||
borderRadius: 16,
|
||||
overflow: "hidden",
|
||||
height: 54,
|
||||
}}
|
||||
experimentalBlurMethod={
|
||||
Platform.OS !== "ios" ? "dimezisBlurView" : "none"
|
||||
}
|
||||
>
|
||||
<TextInput
|
||||
placeholder="Ajouter un commentaire"
|
||||
placeholderTextColor="#FFFFFFAA"
|
||||
value={text}
|
||||
onChangeText={setText}
|
||||
style={{
|
||||
flex: 1,
|
||||
color: Palette.white,
|
||||
fontSize: 14,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
/>
|
||||
<Pressable onPress={onSend}>
|
||||
<Image
|
||||
source={icons.send}
|
||||
style={{ width: 24, height: 24, tintColor: Palette.white }}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</Pressable>
|
||||
</BlurView>
|
||||
</View>
|
||||
</View>
|
||||
</AppActionSheet>
|
||||
);
|
||||
};
|
||||
|
||||
export default CommentsModal;
|
||||
Reference in New Issue
Block a user