Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { FC, useEffect } from 'react'
import { useFieldArray, useFormContext } from 'react-hook-form'
import { Pipe, usePipesRepairsCollection } from '@/entities/pipe'
import { useRouter } from 'next/router'
import { PipeRepairBlock, OperationRepairForm } from '@/entities/accounting-object'
import Skeleton from 'react-loading-skeleton'
export interface RepairPipesBlockProps {
draftRepairOperation?: OperationRepairForm
isAddNewType?: boolean
accountingObjects?: string[]
setIsAlreadyLoaded?: (value: boolean) => void
}
export const RepairPipesBlock: FC<RepairPipesBlockProps> = ({
draftRepairOperation,
isAddNewType,
accountingObjects,
setIsAlreadyLoaded,
}) => {
const router = useRouter()
const { control } = useFormContext()
const { fields, append } = useFieldArray({
control,
name: 'repairData',
})
const { isLoading, isRefetching } = usePipesRepairsCollection({
enabled: !draftRepairOperation || (isAddNewType && !!accountingObjects?.length),
filters: {
accountingObject:
(router.query.accountingObject && JSON.parse(router.query.accountingObject as string)) || accountingObjects,
},
onSuccess: data => {
data?.['hydra:member']?.forEach(pipe => {
append(pipe)
})
setIsAlreadyLoaded && setIsAlreadyLoaded(true)
},
cacheTime: 0,
refetchOnMount: false,
})
useEffect(() => {
draftRepairOperation &&
draftRepairOperation?.repairData?.forEach(pipe => {
append(pipe)
})
}, [draftRepairOperation])
const isLoadingPipes = isLoading || isRefetching
return (
<div className='flex flex-col gap-y-2.5'>
{isLoadingPipes ? (
<Skeleton count={3} height={150} containerClassName='flex flex-col gap-y-5' />
) : (
<>
{fields.map((field, index) => (
<div
className='bg-white px-5 py-4 flex flex-col gap-y-2.5'
key={index + 'pipe' + (field as Pipe).identifyNumber}
>
<h2>{(field as Pipe).identifyNumber}</h2>
<PipeRepairBlock parentName={`repairData.${index}.`} />
</div>
))}
</>
)}
</div>
)
}
|