2020-07-21 14:04:32 +02:00
|
|
|
import React, { useState, useEffect, ReactElement } from 'react'
|
2021-10-13 18:48:59 +02:00
|
|
|
import Page from '@shared/Page'
|
|
|
|
import Alert from '@shared/atoms/Alert'
|
|
|
|
import Loader from '@shared/atoms/Loader'
|
|
|
|
import { useAsset } from '@context/Asset'
|
|
|
|
import AssetContent from './AssetContent'
|
2020-07-21 14:04:32 +02:00
|
|
|
|
2021-10-13 18:48:59 +02:00
|
|
|
export default function AssetDetails({ uri }: { uri: string }): ReactElement {
|
2022-02-03 15:31:43 +01:00
|
|
|
const { asset, title, error, isInPurgatory, loading } = useAsset()
|
2020-12-10 14:30:40 +01:00
|
|
|
const [pageTitle, setPageTitle] = useState<string>()
|
2020-07-21 14:04:32 +02:00
|
|
|
|
|
|
|
useEffect(() => {
|
2022-02-03 15:31:43 +01:00
|
|
|
if (!asset || error) {
|
2020-12-10 14:30:40 +01:00
|
|
|
setPageTitle('Could not retrieve asset')
|
2020-11-20 14:31:28 +01:00
|
|
|
return
|
2020-07-21 14:04:32 +02:00
|
|
|
}
|
2020-12-10 14:30:40 +01:00
|
|
|
setPageTitle(isInPurgatory ? '' : title)
|
2022-02-03 15:31:43 +01:00
|
|
|
}, [asset, error, isInPurgatory, title])
|
2020-07-21 14:04:32 +02:00
|
|
|
|
2022-02-03 15:31:43 +01:00
|
|
|
return asset && pageTitle !== undefined && !loading ? (
|
2021-05-28 14:47:47 +02:00
|
|
|
<Page title={pageTitle} uri={uri}>
|
2022-02-03 15:31:43 +01:00
|
|
|
<AssetContent asset={asset} />
|
2021-05-28 14:47:47 +02:00
|
|
|
</Page>
|
2020-07-21 14:04:32 +02:00
|
|
|
) : error ? (
|
2020-12-10 14:30:40 +01:00
|
|
|
<Page title={pageTitle} noPageHeader uri={uri}>
|
|
|
|
<Alert title={pageTitle} text={error} state="error" />
|
2020-11-18 20:01:33 +01:00
|
|
|
</Page>
|
2020-07-21 14:04:32 +02:00
|
|
|
) : (
|
2020-11-18 20:01:33 +01:00
|
|
|
<Page title={undefined} uri={uri}>
|
2020-07-21 14:04:32 +02:00
|
|
|
<Loader />
|
2020-11-18 20:01:33 +01:00
|
|
|
</Page>
|
2020-07-21 14:04:32 +02:00
|
|
|
)
|
|
|
|
}
|