widgets\TripReviewSection\index.js

mail@pastecode.io avatar
unknown
typescript
8 days ago
4.5 kB
2
Indexable
Never
import { useState, useEffect, useCallback } from 'react'
import { CCard, CCardBody } from '@coreui/react'
import { LoadingSpinner, RvTable } from '@Shared'
import { TripReviewFilter } from './components'
import { useTripReviewTable } from './hooks'
import { useTripReviewReducer } from './reducer'
import { useLocation } from 'react-router-dom'
import TripReviewSummary from './components/TripReviewSummary'
import momenttz from 'moment-timezone'
import { useSearchParams } from '@Hooks'
import { useTripReviewStore } from '@Contexts'

function TripReviewSection() {
  const tripReviewStore = useTripReviewStore()
  const displayTrips = tripReviewStore.use.displayTrips()

  const { title, data, error, fields, customCells, sorterValue } =
    useTripReviewTable()

  const location = useLocation()
  const searchParams = useSearchParams()

  const [state, actions] = useTripReviewReducer()
  const { inputUser, inputTrainId, inputCrewId, inputLocomotiveId } = state
  const [isFirstLoad, setIsFirstLoad] = useState(true)

  // Fake loading state for UI/UX purposes
  const [fakeLoading, setFakeLoading] = useState(false)

  const showData = useCallback(() => {
    const updateTrips =
      data.filter(
        trip =>
          (trip.email.split('@')[0] === inputUser || inputUser === '') &&
          (trip.train_id === inputTrainId || inputTrainId === '') &&
          (trip.crew_id === inputCrewId || inputCrewId === '') &&
          (trip.loco_id === inputLocomotiveId || inputLocomotiveId === '')
      ) || []
    tripReviewStore.setState({ displayTrips: updateTrips })

    setFakeLoading(true)
    setTimeout(() => {
      setFakeLoading(false)
    }, 200)
  }, [data, inputUser, inputTrainId, inputCrewId, inputLocomotiveId])

  const onClickFilter = () => {
    showData()
  }

  useEffect(() => {
    const pageParam = searchParams.getSearchParam('page')
    pageParam && actions.onChangePage(pageParam)
    if (data && isFirstLoad) {
      setTimeout(() => {
        setIsFirstLoad(false)
      }, 500)
    }
    if (data && !isFirstLoad) {
      setTimeout(() => {
        actions.onChangePage('')
      }, 100)
    }
  }, [data])

  useEffect(() => {
    if (location.state?.fromDetail) {
      actions.onChangeFromDetail(true)
      setIsFirstLoad(false)
    }
  }, [location])

  const onChangePage = useCallback(
    e => {
      if (!isFirstLoad) {
        setTimeout(() => {
          actions.onChangePage(e.toString())
        }, 20)
      }
    },
    [isFirstLoad]
  )

  // Checktime only
  useEffect(() => {
    if (data && data.length > 0) {
      const dataSlide = data.slice(0, 2)
      console.log(
        `%c\nFirst ${dataSlide.length} trips:`,
        'background: #80A8CD22; color: #FFF; font-weight: bold;'
      )
      dataSlide.map(item => {
        const time_zone = momenttz.tz.guess()
        const sutc_time = item.start_date_utc
        const slocal_time = sutc_time
          ? momenttz.utc(sutc_time).tz(time_zone).format()
          : null
        const eutc_time = item.end_date_utc
        const elocal_time = eutc_time
          ? momenttz.utc(eutc_time).tz(time_zone).format()
          : null
        console.log(
          `%cData start date: ${sutc_time} (UTC)\nData end date: ${eutc_time} (UTC)`,
          'background: #80A8CD22; color: #bada55'
        )
        console.log(
          `%cDisplay start date: ${slocal_time} (${time_zone})\nDisplay end date: ${elocal_time} (${time_zone})`,
          'background: #80A8CD22; color: #E45050'
        )
      })
    }
  }, [data])

  useEffect(() => {
    data && showData()
  }, [data, inputUser, inputTrainId, inputCrewId, inputLocomotiveId])

  return (
    <CCard>
      <CCardBody>
        <h4>{title}</h4>
        <TripReviewFilter
          error={error}
          state={state}
          actions={actions}
          onFilter={onClickFilter}
        />
        <TripReviewSummary isLoading={fakeLoading} tripsData={displayTrips} />
        {fakeLoading ? (
          <LoadingSpinner classNames="my-5" />
        ) : (
          <RvTable
            items={displayTrips}
            fields={fields}
            customizedCells={customCells}
            sorterValue={sorterValue}
            onPageChange={onChangePage}
            activePage={parseInt(state.page) ?? 1}
          />
        )}
      </CCardBody>
    </CCard>
  )
}

export default TripReviewSection
Leave a Comment