ChallengeView.tsx

import React, { useCallback, useEffect, useState } from 'react'
import './challengeView.scss'
import { useSelector } from 'react-redux'
import { AppStore } from 'store'
import CozyBar from 'components/Header/CozyBar'
import Content from 'components/Content/Content'
import Header from 'components/Header/Header'
import ChallengeCard from './ChallengeCard'
import StyledIconbutton from 'components/CommonKit/IconButton/StyledIconButton'
import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
import { UserChallengeState } from 'enum/userChallenge.enum'
import { UserChallenge } from 'models'

const ChallengeView: React.FC = () => {
  const { userChallengeList } = useSelector(
    (state: AppStore) => state.ecolyo.challenge
  )

  const marginPx = 16
  const cardWitdh =
    window.outerWidth < 500 ? window.outerWidth - marginPx * 6 : 285
  const cardHeight =
    window.outerWidth < 500
      ? window.outerHeight * 0.6
      : window.outerHeight * 0.5
  const [headerHeight, setHeaderHeight] = useState<number>(0)
  const [touchStart, setTouchStart] = useState<number>()
  const [touchEnd, setTouchEnd] = useState<number>()
  const [index, setindex] = useState<number>(0)
  const [lastChallengeIndex, setlastChallengeIndex] = useState<number>(0)
  const [containerTranslation, setcontainerTranslation] = useState<number>(
    marginPx
  )
  const defineHeaderHeight = (height: number) => {
    setHeaderHeight(height)
  }

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

  const moveSliderRight = useCallback(() => {
    if (index < userChallengeList.length - 1) {
      if (index === 0)
        setcontainerTranslation(
          (prev: number) => prev - cardWitdh - marginPx * 1.2
        )
      else if (index >= 1)
        setcontainerTranslation((prev: number) => prev - cardWitdh - marginPx)
      else setcontainerTranslation((prev: number) => prev - cardWitdh)
      setindex(prev => prev + 1)
    }
  }, [cardWitdh, index, userChallengeList.length])

  const moveSliderLeft = useCallback(() => {
    if (index > 0) {
      if (index >= 1)
        setcontainerTranslation((prev: number) => prev + cardWitdh + marginPx)
      else setcontainerTranslation((prev: number) => prev + cardWitdh)
      setindex(prev => prev - 1)
    }
    if (index <= 1) {
      setcontainerTranslation(marginPx)
    }
  }, [cardWitdh, index])

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const handleClickOrTouchStart = (e: any) => {
    if (e.nativeEvent instanceof TouchEvent)
      setTouchStart(e.targetTouches[0].clientX)
    if (e.nativeEvent instanceof MouseEvent) setTouchStart(e.clientX)
  }

  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 sensibilyy
      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()
  }

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const handleClickOrTouchMove = (e: any) => {
    if (e.nativeEvent instanceof TouchEvent)
      setTouchEnd(e.targetTouches[0].clientX)
    if (e.nativeEvent instanceof MouseEvent) setTouchEnd(e.clientX)
  }

  useEffect(() => {
    userChallengeList.forEach((challenge: UserChallenge, i: number) => {
      if (
        challenge.state === UserChallengeState.UNLOCKED ||
        challenge.state === UserChallengeState.ONGOING ||
        challenge.state === UserChallengeState.DUEL
      ) {
        setlastChallengeIndex(i)
        if (lastChallengeIndex === 0) return
        else if (lastChallengeIndex === 1) {
          setcontainerTranslation(0 - cardWitdh * lastChallengeIndex)
        } else {
          setcontainerTranslation(
            0 - cardWitdh * lastChallengeIndex - marginPx * 1.2
          )
        }
        setindex(i)
      }
    })
  }, [userChallengeList, lastChallengeIndex, cardWitdh])

  return (
    <>
      <CozyBar titleKey={'COMMON.APP_CHALLENGE_TITLE'} />
      <Header
        setHeaderHeight={defineHeaderHeight}
        desktopTitleKey={'COMMON.APP_CHALLENGE_TITLE'}
      ></Header>
      <Content height={headerHeight}>
        <div
          className="challengeSlider"
          onClick={resetValues}
          onTouchStart={handleClickOrTouchStart}
          onTouchMove={handleClickOrTouchMove}
          onTouchEnd={handleClickOrTouchEnd}
          onMouseDown={handleClickOrTouchStart}
          onMouseMove={handleClickOrTouchMove}
          onMouseUp={handleClickOrTouchEnd}
        >
          <div
            className="container"
            style={{
              transform: `translateX(${containerTranslation}px)`,
            }}
          >
            {userChallengeList.map((userChallenge, i) => (
              <ChallengeCard
                key={i}
                userChallenge={userChallenge}
                indexSlider={index}
                index={i}
                cardWidth={cardWitdh}
                cardHeight={cardHeight}
              />
            ))}
          </div>
        </div>
        <div className="sliderButtons">
          <StyledIconbutton
            onClick={moveSliderLeft}
            icon={LeftArrowIcon}
            size={16}
          />
          <StyledIconbutton
            onClick={moveSliderRight}
            icon={RightArrowIcon}
            size={16}
          />
        </div>
      </Content>
    </>
  )
}

export default ChallengeView