export function UserSwiper()

in src/components/user-swiper/user-swiper.tsx [12:49]

• 26 lines of code
• 3 McCabe index (conditional complexity)

export function UserSwiper() {
    const { isPhone } = usePhone();
    const [progressCount, setProgressCount] = useState<number>(0);
    const [stop, setStop] = useState<boolean>(false);

    const [swiperRef, setSwiperRef] = useState<SwiperClass>();

    const handlePrevious = useCallback(() => {
        swiperRef?.slidePrev();
    }, [swiperRef]);

    const handleNext = useCallback(() => {
        swiperRef?.slideNext();
    }, [swiperRef]);

    const pagination = {
        clickable: true,
        renderBullet: function (index, className) {
            return '<span class="' + className + '"></span>';
        },
    };

    useAnimationFrame(deltaTime => {
        // Pass on a function to the setter of the state
        // to make sure we always have the latest state
        setProgressCount(prevProgressCount => {
            if (prevProgressCount >= 100) {
                handleNext();
                return 0;
            }
            if (deltaTime > 100) return prevProgressCount;

            return prevProgressCount + deltaTime * 0.02;
        });
    }, stop);

    return (
        <div style={{ position: 'relative' }} onMouseMove={() => setStop(true)} onMouseLeave={() => setStop(false)}>