• + 0 comments
    import React, { useEffect, useMemo, useState } from "react";
    
    function Slides({ slides }) {
      const [isRestartButton, setIsRestartButton] = useState(false);
      const [isPrevButton, setIsPrevButton] = useState(false);
      const [isNextButton, setIsNextButton] = useState(false);
      const [currentIdx, setCurrentIdx] = useState(0);
      const lastIdx = slides.length - 1;
      const data = useMemo(()=> slides[currentIdx],[currentIdx]);
    
      useEffect(() => {
        if (slides.length > 1) {
          setIsNextButton(true);
        }
      }, []);
    
      useEffect(() => {
        setIsRestartButton(currentIdx !== 0);
        setIsPrevButton(currentIdx !== 0);
        setIsNextButton(currentIdx !== lastIdx);
      }, [currentIdx]);
    
      const handleRestartButton = () => {
        setCurrentIdx(0);
      };
    
      const handlePrevButton = () => {
        setCurrentIdx(currentIdx - 1);
      };
    
      const handleNextButton = () => {
        setCurrentIdx(currentIdx + 1);
      };
    
      return (
        <div>
          <div id="navigation" className="text-center">
    
            <button 
            data-testid="button-restart" 
            className="small outlined" 
            disabled={!isRestartButton} 
            onClick={handleRestartButton} 
            >
              Restart
            </button>
    
            <button 
            data-testid="button-prev" 
            className="small" 
            disabled={!isPrevButton} 
            onClick={handlePrevButton}
            >
              Prev
            </button>
    
            <button 
            data-testid="button-next" 
            className="small" 
            disabled={!isNextButton} 
            onClick={handleNextButton}
            >
              Next
            </button>
    
          </div>
          
          <div id="slide" className="card text-center">
            <h1 data-testid="title">{data.title}</h1>
            <p data-testid="text">{data.text}</p>
          </div>
        </div>
      );
    }
    
    export default Slides;