import { Heart, Mic, Pause, Phone, Play, Send, Square, ThumbsUp, X } from "lucide-react"; import { useDispatch, useSelector } from "react-redux"; import { AppDispatch, RootState } from "../../app/store"; import { useRef, useState, useEffect, useCallback } from "react"; import { feedReactionSave, memberFollow, updateMemberFollow, updateReaction } from "../../app/reducers/feed"; import { Link, useParams } from "react-router-dom"; import { fetchMemberFeed } from "../../app/reducers/profile"; export default function ProfileFeeds() { const { postDataFetched, feedPosts, postPagination, loading, dataFetched } = useSelector((state: RootState) => state.profile); const postsEndRef = useRef(null); const dispatch = useDispatch(); const [showReactions, setShowReactions] = useState<{[key: string]: boolean}>({}); const timeoutRef = useRef<{[key: string]: ReturnType}>({}); const [showInterestModal, setShowInterestModal] = useState(false); const [selectedPost, setSelectedPost] = useState(null); const [selectedUserId, setSelectedUserId] = useState(null); const [showVoiceModal, setShowVoiceModal] = useState(false); const [isRecording, setIsRecording] = useState(false); const [isPaused, setIsPaused] = useState(false); const [recordingTime, setRecordingTime] = useState(0); const [audioBlob, setAudioBlob] = useState(null); const mediaRecorderRef = useRef(null); const audioChunksRef = useRef([]); const timerRef = useRef | null>(null); const [selectedVoicePostId, setSelectedVoicePostId] = useState(null); const { id } = useParams(); const handleMouseEnter = (postId: number) => { const key = `post-${postId}`; if (timeoutRef.current[key]) { clearTimeout(timeoutRef.current[key]); } setShowReactions(prev => ({...prev, [key]: true})); }; const handleMouseLeave = (postId: number) => { const key = `post-${postId}`; timeoutRef.current[key] = setTimeout(() => { setShowReactions(prev => ({...prev, [key]: false})); }, 1000); // 1 seconds delay }; const handleReactionSelect = (postId: number, reactionType: string, userId: number) => { const key = `post-${postId}`; setShowReactions(prev => ({...prev, [key]: false})); dispatch(updateReaction({postId: postId, reaction: reactionType})) dispatch(feedReactionSave({reaction: reactionType, postId: postId, userId: userId})) }; const handleMemberFollow = (userId: number) => { dispatch(updateMemberFollow({userId: userId})) dispatch(memberFollow(userId)) } const handleInterestClick = (postId: number, userId: number) => { setSelectedPost(postId); setSelectedUserId(userId); setShowInterestModal(true); }; const handleInterestConfirm = () => { if (selectedPost && selectedUserId) { console.log(`Sending interest to post ${selectedPost} by user ${selectedUserId}`); // You would typically dispatch an action here // dispatch(sendInterest({postId: selectedPost, userId: selectedUserId})); } setShowInterestModal(false); }; const closeInterestModal = () => { setShowInterestModal(false); }; // Clean up timeouts on unmount useEffect(() => { return () => { Object.values(timeoutRef.current).forEach(timeout => clearTimeout(timeout)); }; }, []); const handleVoiceClick = (postId: number) => { setSelectedVoicePostId(postId); setShowVoiceModal(true); // Reset recording state setIsRecording(false); setIsPaused(false); setRecordingTime(0); setAudioBlob(null); audioChunksRef.current = []; }; const startRecording = async () => { try { setRecordingTime(0); const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const mediaRecorder = new MediaRecorder(stream); mediaRecorderRef.current = mediaRecorder; mediaRecorder.ondataavailable = (event) => { if (event.data.size > 0) { audioChunksRef.current.push(event.data); } }; mediaRecorder.onstop = () => { const audioBlob = new Blob(audioChunksRef.current, { type: 'audio/wav' }); setAudioBlob(audioBlob); }; // Clear any existing timer first if (timerRef.current) { clearInterval(timerRef.current); timerRef.current = null; } // Start recording mediaRecorder.start(); setIsRecording(true); // Start timer immediately with a shorter interval for the first update setTimeout(() => { setRecordingTime(1); // Force an update to 1 second immediately // Then continue with regular interval timerRef.current = setInterval(() => { setRecordingTime(prev => prev + 1); }, 1000); }, 100); } catch (error) { console.error('Error accessing microphone:', error); } }; const pauseRecording = () => { if (mediaRecorderRef.current && isRecording && !isPaused) { mediaRecorderRef.current.pause(); setIsPaused(true); // Pause timer if (timerRef.current) { clearInterval(timerRef.current); timerRef.current = null; } } }; const resumeRecording = () => { if (mediaRecorderRef.current && isRecording && isPaused) { mediaRecorderRef.current.resume(); setIsPaused(false); // Resume timer timerRef.current = setInterval(() => { setRecordingTime(prev => prev + 1); }, 1000); } }; const stopRecording = () => { if (mediaRecorderRef.current && isRecording) { mediaRecorderRef.current.stop(); setIsRecording(false); setIsPaused(false); // Stop timer if (timerRef.current) { clearInterval(timerRef.current); timerRef.current = null; } // Stop all tracks on the stream mediaRecorderRef.current.stream.getTracks().forEach(track => track.stop()); } }; const sendVoiceMessage = () => { if (audioBlob && selectedVoicePostId) { console.log(`Sending voice message to post ${selectedVoicePostId}`); // Here you would dispatch an action to send the voice message // dispatch(sendVoiceMessage({ postId: selectedVoicePostId, audio: audioBlob })); // Close the modal closeVoiceModal(); } }; const closeVoiceModal = () => { // Stop recording if active if (isRecording) { stopRecording(); } setShowVoiceModal(false); }; // Format time as MM:SS const formatTime = (seconds: number) => { const minutes = Math.floor(seconds / 60); const remainingSeconds = seconds % 60; return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`; }; // Clean up on unmount useEffect(() => { return () => { if (timerRef.current) { clearInterval(timerRef.current); } if (mediaRecorderRef.current && isRecording) { mediaRecorderRef.current.stream.getTracks().forEach(track => track.stop()); } }; }, [isRecording]); const loadMorePosts = useCallback(() => { if (!loading && postPagination && postPagination.current_page < postPagination.last_page) { const nextPage = postPagination.current_page + 1; if (!id) return; const decodedId = atob(id); dispatch(fetchMemberFeed({ id: decodedId, page: nextPage })); } }, [loading, postPagination, dispatch, id]); useEffect(() => { const observer = new IntersectionObserver( (entries) => { const target = entries[0]; if (target.isIntersecting && dataFetched) { loadMorePosts(); } }, { root: null, rootMargin: '100px', // Load more posts when 100px before reaching the end threshold: 0.1 } ); const currentRef = postsEndRef.current; if (currentRef) { observer.observe(currentRef); } return () => { if (currentRef) { observer.unobserve(currentRef); } }; }, [dataFetched, loadMorePosts]); return( <>

{/* Actual posts */} {feedPosts.map((post, index) => (

{/* Post header */}