{"size": 5068, "ext": "js", "max_stars_repo_path": "client/src/components/static/Slideshow.js", "max_stars_repo_name": "Zandy12/NHNAC-website", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/src/components/static/Slideshow.js", "max_issues_repo_name": "Zandy12/NHNAC-website", "max_issues_repo_issues_event_min_datetime": "2021-07-20T03:25:37.000Z", "max_issues_repo_issues_event_max_datetime": "2021-09-01T22:45:16.000Z", "max_forks_repo_path": "client/src/components/static/Slideshow.js", "max_forks_repo_name": "Nathan-Crabtree/NHNAC-website", "max_forks_repo_forks_event_min_datetime": "2021-08-04T08:42:15.000Z", "max_forks_repo_forks_event_max_datetime": "2021-08-04T08:42:15.000Z"}
{"max_stars_count": null, "max_issues_count": 3, "max_forks_count": 1, "avg_line_length": 38.1052631579, "max_line_length": 138, "alphanum_fraction": 0.5282162589}
import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import $ from 'jquery';

export const Slideshow = ({ hands, homes, people }) => {

    // Src: https://www.w3schools.com/howto/howto_js_slideshow.asp 
    var slideIndex = useRef(0);

    /**
     * Renders and hides images in the order they were placed and edits styling of the viewer.
     * 
     * @param {integer} n 
     */
    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        if (n > slides.length) { slideIndex.current = 1 }
        if (n < 1) { slideIndex.current = slides.length }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex.current - 1].style.display = "block";
        dots[slideIndex.current - 1].className += " active";
    }

    /**
     * Next and previous controls for the slideshow viewer.
     * 
     * @param {integer} n 
     */
    function plusSlides(n) { showSlides(slideIndex.current += n); }

    /**
     * Thumbnail image controls.
     * 
     * @param {integer} n 
     */
    function currentSlide(n) { showSlides(slideIndex.current = n); }

    useEffect(() => {
        /**
         * Automated version of showSlides(). 
         * 
         */
        const showSlidesAuto = () => {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("dot");
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            slideIndex.current++;

            if (slideIndex.current > slides.length) { slideIndex.current = 1 }
            slides[slideIndex.current - 1].style.display = "block";
            dots[slideIndex.current - 1].className += " active";
        }

        // Src: https://stackoverflow.com/questions/40325035/document-ready-settimeout
        let functionDone = false;

        // Change image every 5 seconds
        let timeout = setTimeout(function () {
            showSlidesAuto();
            functionDone = true;
        }, 5000);

        $(function () {
            if (!functionDone) {
                // Clear time interval function once new page loads
                clearTimeout(timeout);

                showSlidesAuto();
            }
        });
    }, []);

    return (
        <React.Fragment>
            {/* NOTE: Majority of this code is starter code. */}
            {/* Src: https://www.w3schools.com/howto/howto_js_slideshow.asp */}
            {/* Slideshow wrapper */}
            <div className="slideshow_wrapper">
                <div className="slideshow-container">

                    {/* Full-width images with number and caption text */}
                    <div className="mySlides fade image_display">
                        <img srcSet={hands} alt="People putting hands into a group." style={{ width: "100%" }} />
                        <p className="text slide_image_desc image_desc">People putting hands into a group.</p>
                    </div>

                    <div className="mySlides fade image_display">
                        <img srcSet={homes} alt="Looking out upon a hill with homes under a cloudy blue sky." style={{ width: "100%" }} />
                        <p className="text slide_image_desc image_desc">Looking out upon a hill with homes under a cloudy blue sky.</p>
                    </div>

                    <div className="mySlides fade image_display">
                        <img srcSet={people} alt="Professionals gathered smiling." style={{ width: "100%" }} />
                        <p className="text slide_image_desc image_desc">Professionals gathered smiling.</p>
                    </div>

                    {/* Next and previous buttons */}
                    <button className="prev" onClick={() => { plusSlides(-1) }}>&#10094;</button>
                    <button className="next" onClick={() => { plusSlides(1) }}>&#10095;</button>
                    <br />
                </div>

                {/* The dots/circles */}
                <div style={{ textAlign: "center" }}>
                    <span className="dot" onClick={() => { currentSlide(1) }}></span>
                    <span className="dot" onClick={() => { currentSlide(2) }}></span>
                    <span className="dot" onClick={() => { currentSlide(3) }}></span>
                </div>
            </div>
        </React.Fragment>
    );
};
export default Slideshow;

// PropTypes for jest testing
Slideshow.propTypes = {
    hands: PropTypes.string.isRequired,
    homes: PropTypes.string.isRequired,
    people: PropTypes.string.isRequired
}