Tryag File Manager

/var/www/html/tpid-konsulin/konsulin-cust-react/src/views/ClinicList.tsx

import { ClinicItem, Header } from 'components'
import { API } from 'config/api'
import { useGlobalContext } from 'hooks/context'
import { useGet } from 'hooks/useRequest'
import React, { useEffect, useState } from 'react'
import Skeleton from 'react-loading-skeleton'
import { useNavigate } from 'react-router-dom'

export const ClinicList: React.FC = () => {
  const navigate = useNavigate()
  const { openAlert } = useGlobalContext()
  const [listClinic, setClinicList] = useState<any>()
  const [dataClinicList, getClinicList] = useGet({ isLoading: false })

useEffect(() => {
    const { data } = dataClinicList
    if (data?.status === 'success') {
      setClinicList(data?.result)
    } else if (data?.status === 'fail') {
      openAlert({ messages: data?.messages })
    }
  }, [dataClinicList])

useEffect(() => {
    getClinicList.getRequest(API.CLINIC_LIST)
  }, [])

return (
    <div>
      <Header onBackClick={() => navigate(-1)} label='Semua Klinik' />

{dataClinicList.isLoading
        ? Array.from({ length: 3 }, (index: number) => (
            <div
              className='bg-white rounded-xl drop-shadow w-full flex my-4'
              // style={{ width: '393px' }}
            >
              <Skeleton height={128} width={129} className='mr-2' />
              <div className='flex flex-col justify-between py-4'>
                <div>
                  <Skeleton height={15} width={80} />
                  <Skeleton height={15} width={100} />
                </div>
                <Skeleton height={15} width={150} />
              </div>
            </div>
          ))
        : listClinic?.map((items: any, index: number) => (
            <ClinicItem
              item={items}
              key={index}
              className='my-4'
              onClinicClick={(id) =>
                navigate('/doctor-clinic-list', { state: id })
              }
            />
          ))}
    </div>
  )
}