Untitled
unknown
plain_text
5 months ago
4.4 kB
3
Indexable
import React, { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; import './SeeVideos.css'; import useVideoStore from '../stores/uploadedVideosStore'; const SeeVideos = () => { const { id } = useParams(); // URL'den gelen id const { videos, fetchVideos, error } = useVideoStore(); const [loading, setLoading] = useState(false); const [comments, setComments] = useState({}); // Videolar için yorumlar useEffect(() => { const loadVideos = async () => { if (!id) { console.error('No ID found in URL'); return; } console.log('Fetching videos for ID:', id); setLoading(true); // Yeni bir mülakat yüklenmeden önce mevcut videoları geçici olarak sıfırla useVideoStore.setState({ videos: [] }); try { await fetchVideos(id); // Backend'den videoları çek } catch (err) { if (err.response && err.response.status === 404) { console.warn('No videos found for this interview.'); } else { console.error('Error fetching videos:', err); } } finally { setLoading(false); } }; loadVideos(); }, [id, fetchVideos]); // Yorum kaydetme const handleSaveComment = (videoId) => { const comment = comments[videoId]?.trim(); if (!comment) { alert('Lütfen bir yorum girin!'); return; } alert(`Yorum kaydedildi: ${comment}`); // API entegrasyonu için burada bir POST isteği yapılabilir. setComments((prev) => ({ ...prev, [videoId]: '' })); // Yorumu sıfırla }; // Video silme const handleDeleteVideo = (videoId) => { if (window.confirm('Bu videoyu silmek istediğinizden emin misiniz?')) { console.log(`Video silindi: ${videoId}`); // API entegrasyonu için burada bir DELETE isteği yapılabilir. useVideoStore.setState((prev) => ({ videos: prev.videos.filter((video) => video._id !== videoId), })); } }; if (!Array.isArray(videos)) { console.error('Videos is not an array:', videos); return <p>Videolar yüklenirken bir hata oluştu.</p>; } return ( <div className="see-videos-page"> <h1>Videolar</h1> {loading && <p>Videolar yükleniyor...</p>} {error && <p className="see-videos-error">{error}</p>} {!loading && videos.length > 0 ? ( <div className="see-videos-list"> {videos.map((video, index) => ( <div key={video._id} className="see-videos-item"> <h3>Video {index + 1}</h3> <video controls> <source src={video.videoUrl} type="video/webm" /> Tarayıcınız video etiketini desteklemiyor. </video> {video.candidate && ( <div className="see-videos-candidate-info"> <p> <strong>Ad:</strong> {video.candidate.firstName}{' '} {video.candidate.lastName} </p> <p> <strong>Email:</strong> {video.candidate.email} </p> <p> <strong>Telefon:</strong> {video.candidate.phone} </p> </div> )} {/* Yorum Alanı */} <textarea className="comment-area" placeholder="Bu video hakkında yorum yapın..." value={comments[video._id] || ''} onChange={(e) => setComments((prev) => ({ ...prev, [video._id]: e.target.value, })) } /> <button className="save-comment-btn" onClick={() => handleSaveComment(video._id)} > Yorumu Kaydet </button> {/* Sil Butonu */} <button className="delete-video-btn" onClick={() => handleDeleteVideo(video._id)} > Sil </button> </div> ))} </div> ) : ( !loading && <p className="see-videos-no-videos">Kayıtlı video bulunamadı.</p> )} </div> ); }; export default SeeVideos;
Editor is loading...
Leave a Comment