Untitled

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);

  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]);
  

  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>
            )}
          </div>
        ))}
      </div>
    ) : (
      !loading && <p className="see-videos-no-videos">Kayıtlı video bulunamadı.</p>
    )}
  </div>
  
  );
};

export default SeeVideos;