Connection.tsx

import { FluidType } from 'enums'
import { FluidConnection } from 'models'
import React, { useCallback } from 'react'
import { updateFluidConnection } from 'store/global/global.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import EpglInit from './EPGLConnect/EpglInit'
import GrdfInit from './GRDFConnect/GrdfInit'
import SgeInit from './SGEConnect/SgeInit'
import './connection.scss'

const Connection = ({ fluidType }: { fluidType: FluidType }) => {
  const { fluidStatus } = useAppSelector(state => state.ecolyo.global)
  const currentFluidStatus = fluidStatus[fluidType]
  const dispatch = useAppDispatch()

  const handleSuccess = useCallback(async () => {
    const updatedConnection: FluidConnection = {
      ...currentFluidStatus.connection,
      shouldLaunchKonnector: true,
    }
    dispatch(
      updateFluidConnection({
        fluidType: fluidType,
        fluidConnection: updatedConnection,
      })
    )
  }, [dispatch, fluidType, currentFluidStatus.connection])
  return (
    <div className="konnector-form">
      {fluidType === FluidType.ELECTRICITY && <SgeInit />}
      {fluidType === FluidType.WATER && <EpglInit />}
      {fluidType === FluidType.GAS && <GrdfInit onSuccess={handleSuccess} />}
    </div>
  )
}

export default Connection