add - commentsCount
This commit is contained in:
Victor
@@ -3,16 +3,16 @@ import {
|
||||
BottomSheetBackdrop,
|
||||
BottomSheetModal,
|
||||
BottomSheetScrollView,
|
||||
} from "@gorhom/bottom-sheet";
|
||||
import { BlurView } from "expo-blur";
|
||||
import { Image as ExpoImage } from "expo-image";
|
||||
} from '@gorhom/bottom-sheet';
|
||||
import { BlurView } from 'expo-blur';
|
||||
import { Image as ExpoImage } from 'expo-image';
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
} from 'react';
|
||||
import {
|
||||
Image,
|
||||
Platform,
|
||||
@@ -20,29 +20,29 @@ import {
|
||||
Text,
|
||||
TextInput,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
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";
|
||||
} from 'react-native';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { icons } from '../../assets';
|
||||
import { increment, 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';
|
||||
|
||||
let externalOpen;
|
||||
let externalClose;
|
||||
export const openComments = (projectId) => {
|
||||
if (typeof externalOpen === "function") externalOpen(projectId);
|
||||
if (typeof externalOpen === 'function') externalOpen(projectId);
|
||||
};
|
||||
export const closeComments = () => {
|
||||
if (typeof externalClose === "function") externalClose();
|
||||
if (typeof externalClose === 'function') externalClose();
|
||||
};
|
||||
|
||||
const formatRelativeTime = (date) => {
|
||||
try {
|
||||
const d = date instanceof Date ? date : date?.toDate?.() || null;
|
||||
if (!d) return "";
|
||||
if (!d) return '';
|
||||
const diff = Math.max(0, Date.now() - d.getTime());
|
||||
const sec = Math.floor(diff / 1000);
|
||||
if (sec < 60) return `${sec}s`;
|
||||
@@ -53,7 +53,7 @@ const formatRelativeTime = (date) => {
|
||||
const dA = Math.floor(h / 24);
|
||||
return `${dA}j`;
|
||||
} catch (e) {
|
||||
return "";
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
@@ -63,7 +63,7 @@ const CommentsBottomSheet = () => {
|
||||
const { currentUID, currentUserData } = useUser();
|
||||
|
||||
const [projectId, setProjectId] = useState(null);
|
||||
const [text, setText] = useState("");
|
||||
const [text, setText] = useState('');
|
||||
const [typing, setTyping] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -82,15 +82,15 @@ const CommentsBottomSheet = () => {
|
||||
};
|
||||
}, []);
|
||||
|
||||
const snapPoints = useMemo(() => ["50%", "90%"], []);
|
||||
const snapPoints = useMemo(() => ['50%', '90%'], []);
|
||||
|
||||
const commentsRef = useMemo(() => {
|
||||
try {
|
||||
return projectId
|
||||
? projectsRef
|
||||
.doc(projectId)
|
||||
.collection("comments")
|
||||
.orderBy("createdAt", "desc")
|
||||
.collection('comments')
|
||||
.orderBy('createdAt', 'desc')
|
||||
: null;
|
||||
} catch {
|
||||
return null;
|
||||
@@ -113,26 +113,31 @@ const CommentsBottomSheet = () => {
|
||||
});
|
||||
|
||||
const onSend = async () => {
|
||||
const value = (text || "").trim();
|
||||
const value = (text || '').trim();
|
||||
if (!value || !projectId || !currentUID) return;
|
||||
try {
|
||||
setText("");
|
||||
setText('');
|
||||
const docRef = await projectsRef
|
||||
.doc(projectId)
|
||||
.collection("comments")
|
||||
.collection('comments')
|
||||
.add({
|
||||
userId: currentUID,
|
||||
userName: currentUserData?.userName || "",
|
||||
profilePicture: currentUserData?.profilePictureURL || "",
|
||||
userName: currentUserData?.userName || '',
|
||||
profilePicture: currentUserData?.profilePictureURL || '',
|
||||
text: value,
|
||||
createdAt: serverTimestamp(),
|
||||
});
|
||||
try {
|
||||
await projectsRef
|
||||
.doc(projectId)
|
||||
.set({ commentsCount: increment(1) }, { merge: true });
|
||||
} catch {}
|
||||
// Optimistic: ajouter immédiatement le commentaire en tête de liste
|
||||
const optimistic = {
|
||||
id: docRef?.id || Math.random().toString(36).slice(2),
|
||||
userId: currentUID,
|
||||
userName: currentUserData?.userName || "",
|
||||
profilePicture: currentUserData?.profilePictureURL || "",
|
||||
userName: currentUserData?.userName || '',
|
||||
profilePicture: currentUserData?.profilePictureURL || '',
|
||||
text: value,
|
||||
createdAt: new Date(),
|
||||
};
|
||||
@@ -187,15 +192,14 @@ const CommentsBottomSheet = () => {
|
||||
bottomInset={insets.bottom}
|
||||
backdropComponent={renderBackdrop}
|
||||
handleIndicatorStyle={{ backgroundColor: Palette.white }}
|
||||
backgroundStyle={{ backgroundColor: "transparent" }}
|
||||
backgroundStyle={{ backgroundColor: 'transparent' }}
|
||||
onDismiss={() => {
|
||||
setProjectId(null);
|
||||
setTyping(false);
|
||||
setText("");
|
||||
}}
|
||||
>
|
||||
setText('');
|
||||
}}>
|
||||
<BlurView
|
||||
intensity={Platform.OS !== "ios" ? 10 : 20}
|
||||
intensity={Platform.OS !== 'ios' ? 10 : 20}
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: Palette.glass,
|
||||
@@ -209,9 +213,8 @@ const CommentsBottomSheet = () => {
|
||||
<View style={{ paddingTop: 10, paddingBottom: 8 }}>
|
||||
<Pressable
|
||||
onPress={() => modalRef.current?.dismiss?.()}
|
||||
style={{ position: "absolute", right: 10, top: 8, padding: 6 }}
|
||||
hitSlop={8}
|
||||
>
|
||||
style={{ position: 'absolute', right: 10, top: 8, padding: 6 }}
|
||||
hitSlop={8}>
|
||||
<Image
|
||||
source={icons.close}
|
||||
style={{ width: 22, height: 22, tintColor: Palette.white }}
|
||||
@@ -223,9 +226,8 @@ const CommentsBottomSheet = () => {
|
||||
fontSize: 22,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
alignSelf: "center",
|
||||
}}
|
||||
>
|
||||
alignSelf: 'center',
|
||||
}}>
|
||||
Commentaires
|
||||
</Text>
|
||||
</View>
|
||||
@@ -238,14 +240,12 @@ const CommentsBottomSheet = () => {
|
||||
paddingHorizontal: 14,
|
||||
paddingBottom: (insets?.bottom || 0) + 12,
|
||||
}}
|
||||
showsVerticalScrollIndicator
|
||||
>
|
||||
showsVerticalScrollIndicator>
|
||||
{Array.isArray(comments) && comments.length > 0 ? (
|
||||
comments.map((c) => (
|
||||
<View
|
||||
key={c.id}
|
||||
style={{ flexDirection: "row", gap: 12, marginBottom: 14 }}
|
||||
>
|
||||
style={{ flexDirection: 'row', gap: 12, marginBottom: 14 }}>
|
||||
{c?.profilePicture ? (
|
||||
<ExpoImage
|
||||
source={{ uri: c.profilePicture }}
|
||||
@@ -260,26 +260,24 @@ const CommentsBottomSheet = () => {
|
||||
style={{
|
||||
...size({ size: 42 }),
|
||||
borderRadius: 100,
|
||||
backgroundColor: "#FFFFFF22",
|
||||
backgroundColor: '#FFFFFF22',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<View style={{ flex: 1 }}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
}}
|
||||
>
|
||||
{c?.userId === currentUID ? "vous" : c?.userName || ""}
|
||||
}}>
|
||||
{c?.userId === currentUID ? 'vous' : c?.userName || ''}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
@@ -287,8 +285,7 @@ const CommentsBottomSheet = () => {
|
||||
color: Palette.white,
|
||||
opacity: 0.75,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
• {formatRelativeTime(c?.createdAt)}
|
||||
</Text>
|
||||
</View>
|
||||
@@ -297,8 +294,7 @@ const CommentsBottomSheet = () => {
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
{c?.text}
|
||||
</Text>
|
||||
</View>
|
||||
@@ -311,10 +307,9 @@ const CommentsBottomSheet = () => {
|
||||
color: Palette.white,
|
||||
opacity: 0.8,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
textAlign: "center",
|
||||
textAlign: 'center',
|
||||
marginTop: 6,
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
Aucun commentaire pour le moment
|
||||
</Text>
|
||||
)}
|
||||
@@ -322,14 +317,14 @@ const CommentsBottomSheet = () => {
|
||||
{/* INPUT en bas du contenu */}
|
||||
<View style={{ height: 12 }} />
|
||||
<BlurView
|
||||
intensity={Platform.OS !== "ios" ? 10 : 20}
|
||||
intensity={Platform.OS !== 'ios' ? 10 : 20}
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
paddingHorizontal: 16,
|
||||
backgroundColor: Palette.glass,
|
||||
overflow: "hidden",
|
||||
overflow: 'hidden',
|
||||
height: 54,
|
||||
borderRadius: 16,
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user