FluidChartSwipe.tsx

import FluidChartSlide from 'components/FluidChart/FluidChartSlide'
import { useChartResize } from 'components/Hooks/useChartResize'
import { FluidType } from 'enums'
import { DateTime } from 'luxon'
import React, { useEffect, useRef, useState } from 'react'
import SwipeableViews from 'react-swipeable-views'
import { virtualize } from 'react-swipeable-views-utils'
import DateChartService from 'services/dateChart.service'
import { setCurrentIndex, setSelectedDate } from 'store/chart/chart.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import './fluidChartSwipe.scss'

const VirtualizeSwipeableViews = virtualize(SwipeableViews)

interface FluidChartSwipeProps {
  fluidType: FluidType
  setActive: React.Dispatch<React.SetStateAction<boolean>>
}

const FluidChartSwipe = ({ fluidType, setActive }: FluidChartSwipeProps) => {
  const dispatch = useAppDispatch()
  const { currentIndex, currentTimeStep, selectedDate } = useAppSelector(
    state => state.ecolyo.chart
  )
  const swipe = useRef<HTMLDivElement>(null)
  const [isSwitching, setIsSwitching] = useState(false)

  const handleChangeIndex = (index: number) => {
    const dateChartService = new DateChartService()
    let increment = 0
    if (currentIndex < index) {
      increment = dateChartService.defineIncrementForPreviousIndex(
        currentTimeStep,
        selectedDate,
        currentIndex
      )
    } else {
      increment = dateChartService.defineIncrementForNextIndex(
        currentTimeStep,
        selectedDate,
        currentIndex
      )
    }
    const updatedDate: DateTime = dateChartService.incrementDate(
      currentTimeStep,
      selectedDate,
      increment
    )
    const updatedIndex: number = dateChartService.defineDateIndex(
      currentTimeStep,
      updatedDate
    )
    dispatch(setSelectedDate(updatedDate))
    dispatch(setCurrentIndex(updatedIndex))
  }

  const { height, width } = useChartResize(swipe, false)

  useEffect(() => {
    function initIndex() {
      const dateChartService = new DateChartService()
      const updatedIndex: number = dateChartService.defineDateIndex(
        currentTimeStep,
        selectedDate
      )
      dispatch(setCurrentIndex(updatedIndex))
    }
    initIndex()
  }, [dispatch, currentTimeStep, selectedDate])

  const slideRenderer = (key: number, index: number) => (
    <FluidChartSlide
      key={key}
      index={index}
      fluidType={fluidType}
      width={width}
      height={height}
      isSwitching={isSwitching}
      setActive={setActive}
    />
  )

  return (
    <div className="fluidchartswipe-root" ref={swipe}>
      <VirtualizeSwipeableViews
        index={currentIndex}
        overscanSlideAfter={1}
        overscanSlideBefore={1}
        onChangeIndex={handleChangeIndex}
        slideRenderer={({ key, index }) => slideRenderer(key, index)}
        enableMouseEvents
        onSwitching={!isSwitching ? () => setIsSwitching(true) : null}
        onTransitionEnd={() => {
          setIsSwitching(false)
        }}
        axis="x-reverse"
      />
    </div>
  )
}

export default FluidChartSwipe