import React, { useMemo } from 'react'; import { bem } from 'utils/bem'; import { PurchaseOrderDetails } from 'backend-api/models'; import { LoadingState } from 'common/types'; import { H4, Body } from 'common/components/typography'; import { ResponsiveContainer } from 'common/components/sidebar-form/responsive-container'; import { Badge } from 'common/components/badge'; import { AnchorLink } from 'common/components/anchor-link'; import { SPaper } from 'common/s-components/s-paper'; import { AllProjectsLoader } from 'common/components/loaders/all-projects-loader'; import { TabLoader } from 'common/components/loaders/tab-loader'; import { Info } from './components'; import { SDetails, BEM_CLASS } from './s-details'; interface DetailsProps { projectId: number; data?: PurchaseOrderDetails; isLoading: LoadingState; onViewPOsClick: () => void; } const classes = bem(BEM_CLASS); export const Details = React.memo(({ projectId, data, isLoading, onViewPOsClick }: DetailsProps) => { const body = useMemo(() => { if (isLoading === LoadingState.Started || isLoading === LoadingState.Failed || !data) { let emptyComponent: React.ReactChild = <>; if (isLoading === LoadingState.Started) { emptyComponent = ; } else if (isLoading === LoadingState.Failed) { emptyComponent = Data failed to load. Try refreshing this page.; } else if (!data) { emptyComponent = No Data Available.; } return ( {emptyComponent} ); } return ; }, [data, isLoading, projectId]); return (

{isLoading === LoadingState.Started ? ( ) : ( data && ( <>

{data.name}

{data.isBlanket && ( )} ) )}

{body} ); });