Function BlogPage

client/src/component/Blog.jsx:28–359

(props)

};

export default function BlogPage(props) {
  const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com";
  
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("All");
  const [blogPosts, setBlogPosts] = useState([]);
  const [isPaused, setIsPaused] = useState(false);
  const [currentPosition, setCurrentPosition] = useState(0);
  const [isPlaying, setIsPlaying] = useState(false);
  const speechInstanceRef = useRef(null);

  const categories = ["All", ...new Set(blogPosts.map((post) => post.category))];

  const filteredPosts = blogPosts.filter((post) => {
    const matchesSearch =
      post.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      post.content.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesCategory =
      selectedCategory === "All" || post.category === selectedCategory;
    return matchesSearch && matchesCategory;
  });

  // const formatDate = (dateString) => {
  //   const date = new Date(dateString);
  //   if (isNaN(date.getTime())) {
  //     throw new Error("Invalid date format");
  //   }
  //   const day = String(date.getDate()).padStart(2, "0");
  //   const month = String(date.getMonth() + 1).padStart(2, "0");
  //   const year = date.getFullYear();
  //   return `${day}-${month}-${year}`;
  // };

  const categoryImage = (cat) => {
    const imgSrc = images.find((image) => image.category === cat);
    return imgSrc ? imgSrc.src : "";
  };

  const fetchData = async () => {
    try {
      let response = await fetch(`${VITE_SERVER_PORT}/api/blog/all-blog`);
      let data = await response.json();
      setBlogPosts(data.blogs);
      console.log(data.blogs);
    } catch (error) {
      console.error(error);
    }
  };

  const handlePlay = (id, title, excerpt) => {
    const textToSpeak = `${title}. ${excerpt}`;
    document.getElementsByClassName(`pause-button-${id}`)[0].classList.remove('hidden')
    document.getElementsByClassName(`speak-button-${id}`)[0].classList.add('hidden')
    console.log(textToSpeak)
    if (isPaused && speechInstanceRef.current) {
      setIsPaused(true);
      window.speechSynthesis.speak(speechInstanceRef.current);
    } else {