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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { FC, Fragment } from 'react'
import { useInfiniteWarehousesCollection, WAREHOUSE_COLLECTION_PER_PAGE, WarehouseCard } from '@/entities/warehouse'
import { EmptyData } from '@/shared/ui'
import { getNextPage, useTranslate } from '@/shared/lib'
import Skeleton from 'react-loading-skeleton'
import InfiniteScroll from 'react-infinite-scroll-component'
import Loading from '@/shared/assets/icons/common/loading.svg'
export const WarehousesView: FC = () => {
const { data, isLoading, fetchNextPage, hasNextPage } = useInfiniteWarehousesCollection({
keepPreviousData: true,
getNextPageParam: (lastPage, pages) => getNextPage(lastPage, pages, WAREHOUSE_COLLECTION_PER_PAGE),
})
const { t } = useTranslate(['accounting-object'])
const isEmpty = !data?.pages?.[0]['hydra:member']?.length && !isLoading
const totalItemsCount = data?.pages?.reduce((acc, page) => acc + page['hydra:member'].length, 0)
return (
<div className='flex flex-col p-5 gap-y-5 h-full'>
{isEmpty ? (
<EmptyData
className='my-auto'
title={t('Storage locations have not been created yet')}
subTitle={t('Click on the “Create Warehouse" button to add a new storage location')}
/>
) : isLoading ? (
<Skeleton count={10} height={80} borderRadius={20} containerClassName='flex flex-col gap-y-5' />
) : (
<InfiniteScroll
dataLength={totalItemsCount || 0}
next={fetchNextPage}
hasMore={hasNextPage || false}
loader={<Loading className='w-10 h-10 mx-auto fill-main animate-spin' />}
scrollableTarget='scrollableDiv'
className='flex flex-col gap-y-5 h-full'
>
{data?.pages?.map((page, i) => (
<Fragment key={`page-${i}`}>
{page['hydra:member']?.map((warehouse, index, total) => (
<WarehouseCard
key={warehouse.id}
warehouse={warehouse}
isDefaultOpen={index === 0 && total?.length === 1}
/>
))}
</Fragment>
))}
</InfiniteScroll>
)}
</div>
)
}
|