ChallengeView.tsx

import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import Content from 'components/Content/Content'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { UserChallengeState } from 'enums'
import React, { useCallback, useEffect, useState } from 'react'
import { useAppSelector } from 'store/hooks'
import ChallengeCard from './ChallengeCard/ChallengeCard'
import './challengeView.scss'

const ChallengeView = () => {
  const { t } = useI18n()
  const { userChallengeList } = useAppSelector(state => state.ecolyo.challenge)

  const marginPx = 16
  const cardWidth =
    window.outerWidth < 500 ? window.outerWidth - marginPx * 6 : 285
  const cardHeight = window.outerHeight * 0.65
  const [headerHeight, setHeaderHeight] = useState<number>(0)
  const [touchStart, setTouchStart] = useState<number>()
  const [touchEnd, setTouchEnd] = useState<number>()
  const [index, setIndex] = useState<number>(0)
  const [isLastDuelDone, setIsLastDuelDone] = useState<boolean>(false)
  const [containerTranslation, setContainerTranslation] =
    useState<number>(marginPx)

  const resetValues = () => {
    // Method used to cancel a swipe on a simple click
    setTouchEnd(0)
    setTouchStart(0)
  }

  const moveSliderRight = useCallback(() => {
    if (
      index < userChallengeList.length - 1 ||
      (isLastDuelDone && index < userChallengeList.length)
    ) {
      setContainerTranslation(prev => prev - cardWidth - marginPx)
      setIndex(prev => prev + 1)
    }
  }, [cardWidth, index, isLastDuelDone, userChallengeList.length])

  const moveSliderLeft = useCallback(() => {
    if (index > 0) {
      setContainerTranslation(prev => prev + cardWidth + marginPx)
      setIndex(prev => prev - 1)
    }
    if (index <= 1) {
      setContainerTranslation(marginPx)
    }
  }, [cardWidth, index])

  const moveToSlide = useCallback(
    (slideIndex: number) => {
      setContainerTranslation(-slideIndex * (cardWidth + marginPx) + marginPx)
      setIndex(slideIndex)
    },
    [cardWidth]
  )

  const handleClickOrTouchEnd = () => {
    // if the swipe is too small and can be taken for a touch
    if (touchStart && touchEnd) {
      if (touchStart - touchEnd < 5 && -5 < touchStart - touchEnd) return
      // Change the following value in order to change the swipe sensibility
      if (touchStart - touchEnd > 75) {
        // If swipe left move slider right and add positive translation
        moveSliderRight()
      }
      if (touchStart - touchEnd < -75) {
        // If swipe right move slider left and add negative translation
        moveSliderLeft()
      }
    }
    resetValues()
  }

  useEffect(() => {
    let currentChallengeIndex = userChallengeList.findIndex(
      challenge =>
        challenge.state === UserChallengeState.UNLOCKED ||
        challenge.state === UserChallengeState.ONGOING ||
        challenge.state === UserChallengeState.DUEL
    )
    if (currentChallengeIndex === -1) {
      currentChallengeIndex = isLastDuelDone ? userChallengeList.length : 0
    }
    setContainerTranslation(
      -currentChallengeIndex * (cardWidth + marginPx) + marginPx
    )
    setIndex(currentChallengeIndex)
  }, [userChallengeList, cardWidth, isLastDuelDone])

  useEffect(() => {
    if (
      userChallengeList[userChallengeList.length - 1].state ==
      UserChallengeState.DONE
    ) {
      setIsLastDuelDone(true)
    }
  }, [userChallengeList])

  return (
    <>
      <CozyBar titleKey="common.title_challenge" />
      <Header
        setHeaderHeight={setHeaderHeight}
        desktopTitleKey="common.title_challenge"
      />
      <Content heightOffset={headerHeight}>
        <div
          className="challengeSlider"
          onClick={resetValues}
          onTouchStart={event => setTouchStart(event.targetTouches[0].clientX)}
          onTouchMove={event => setTouchEnd(event.targetTouches[0].clientX)}
          onTouchEnd={handleClickOrTouchEnd}
          onMouseDown={event => setTouchStart(event.clientX)}
          onMouseMove={event => setTouchEnd(event.clientX)}
          onMouseUp={handleClickOrTouchEnd}
        >
          <div
            className="challenge-container"
            style={{
              transform: `translateX(${containerTranslation}px)`,
            }}
          >
            {userChallengeList.map((userChallenge, i) => (
              <ChallengeCard
                key={userChallenge.id}
                userChallenge={userChallenge}
                indexSlider={index}
                index={i}
                cardWidth={cardWidth}
                cardHeight={cardHeight}
                moveToSlide={moveToSlide}
              />
            ))}

            {isLastDuelDone && (
              <ChallengeCard
                indexSlider={index}
                index={userChallengeList.length}
                cardWidth={cardWidth}
                cardHeight={cardHeight}
                isChallengeCardLast={true}
                moveToSlide={moveToSlide}
              />
            )}
          </div>
        </div>
        <div className="sliderButtons">
          <StyledIconButton
            onClick={moveSliderLeft}
            icon={LeftArrowIcon}
            sized={16}
            aria-label={t('challenge.accessibility.button_slider_previous')}
          />
          <StyledIconButton
            onClick={moveSliderRight}
            icon={RightArrowIcon}
            sized={16}
            aria-label={t('challenge.accessibility.button_slider_next')}
          />
        </div>
      </Content>
    </>
  )
}

export default ChallengeView