diff --git a/src/sections/alerts/Alerts.tsx b/src/sections/alerts/Alerts.tsx index e576b838b..47fef76ab 100644 --- a/src/sections/alerts/Alerts.tsx +++ b/src/sections/alerts/Alerts.tsx @@ -3,20 +3,20 @@ import { Alert as AlertComponent } from '@iqss/dataverse-design-system' import { useTranslation } from 'react-i18next' import styles from './Alerts.module.scss' import parse from 'html-react-parser' -import { useAlertContext } from './AlertContext' import { Alert } from '../../alert/domain/models/Alert' -export function Alerts() { +export function Alerts({ alerts }: { alerts: Alert[] }) { const { t } = useTranslation('dataset') - const { datasetAlerts } = useAlertContext() + return (
- {datasetAlerts.map((alert: Alert, index) => { + {alerts.map((alert: Alert, index) => { const translatedMsg = alert.dynamicFields ? t(`alerts.${alert.messageKey}.alertText`, alert.dynamicFields) : t(`alerts.${alert.messageKey}.alertText`) const translatedHeading = t(`alerts.${alert.messageKey}.heading`) const alertKey = `alert-${index}` + return ( ([]) + + useDeepCompareEffect(() => { + if (dataset?.alerts) { + console.log( + '%cSetting initial dataset alerts', + 'background: red; color: white; padding: 2px;' + ) + setDatasetAlerts(dataset.alerts) + } + }, [dataset?.alerts]) useEffect(() => { - if (created) { - addDatasetAlert({ messageKey: AlertMessageKey.DATASET_CREATED, variant: 'success' }) + if (created && dataset) { + setDatasetAlerts((prevAlerts) => { + const datasetCreatedAdded = prevAlerts.some( + (alert) => alert.messageKey === AlertMessageKey.DATASET_CREATED + ) + if (datasetCreatedAdded) return prevAlerts + + return [...prevAlerts, { messageKey: AlertMessageKey.DATASET_CREATED, variant: 'success' }] + }) } - if (metadataUpdated) { - addDatasetAlert({ messageKey: AlertMessageKey.METADATA_UPDATED, variant: 'success' }) + if (metadataUpdated && dataset) { + setDatasetAlerts((prevAlerts) => { + const metadataUpdatedAdded = prevAlerts.some( + (alert) => alert.messageKey === AlertMessageKey.METADATA_UPDATED + ) + if (metadataUpdatedAdded) return prevAlerts + + return [...prevAlerts, { messageKey: AlertMessageKey.METADATA_UPDATED, variant: 'success' }] + }) } + }, [created, metadataUpdated, dataset]) + + useEffect(() => { if (dataset) { + console.log('%cRunning effect', 'background: blue; color: white; padding: 2px;') + if (publishInProgress && !publishCompleted) { - const newAlerts = datasetAlerts.filter( - (alert) => - alert.messageKey !== AlertMessageKey.DRAFT_VERSION && - alert.messageKey !== AlertMessageKey.DATASET_CREATED && - alert.messageKey !== AlertMessageKey.METADATA_UPDATED + console.log( + '%cPublish in progress but not completed', + 'background: orange; color: white; padding: 2px;' ) - newAlerts.push({ messageKey: AlertMessageKey.PUBLISH_IN_PROGRESS, variant: 'info' }) - setDatasetAlerts(newAlerts) + + setDatasetAlerts((prevAlerts) => { + const publishInProgressAdded = prevAlerts.some( + (alert) => alert.messageKey === AlertMessageKey.PUBLISH_IN_PROGRESS + ) + if (publishInProgressAdded) return prevAlerts + + return [{ messageKey: AlertMessageKey.PUBLISH_IN_PROGRESS, variant: 'info' }] + }) } if (publishInProgress && publishCompleted) { - removeDatasetAlert(AlertMessageKey.PUBLISH_IN_PROGRESS) + console.log( + '%cPublish in progress and completed', + 'background: green; color: white; padding: 2px;' + ) navigate(`${Route.DATASETS}?persistentId=${dataset.persistentId}`, { state: { publishInProgress: false }, replace: true }) } } - }, [publishCompleted, dataset]) + }, [dataset, publishInProgress, publishCompleted, navigate]) useEffect(() => { setIsLoading(isLoading) @@ -99,7 +137,7 @@ export function Dataset({
- +
@@ -122,33 +160,38 @@ export function Dataset({ - - -
- {filesTabInfiniteScrollEnabled ? ( - - ) : ( - } + + {!publishInProgress && ( + + +
+ {filesTabInfiniteScrollEnabled ? ( + + ) : ( + + )} +
+
+ +
+ - )} -
-
- -
- -
-
-
+
+
+
+ )} +
diff --git a/src/sections/dataset/DatasetFactory.tsx b/src/sections/dataset/DatasetFactory.tsx index 3f996e626..85b98bc09 100644 --- a/src/sections/dataset/DatasetFactory.tsx +++ b/src/sections/dataset/DatasetFactory.tsx @@ -13,7 +13,6 @@ import { SettingsProvider } from '../settings/SettingsProvider' import { DatasetProvider } from './DatasetProvider' import { MultipleFileDownloadProvider } from '../file/multiple-file-download/MultipleFileDownloadProvider' import { NotImplementedModalProvider } from '../not-implemented/NotImplementedModalProvider' -import { AlertProvider } from '../alerts/AlertProvider' import { searchParamVersionToDomainVersion } from '../../Router' import { FILES_TAB_INFINITE_SCROLL_ENABLED } from './config' @@ -30,9 +29,7 @@ export class DatasetFactory { - - - + diff --git a/src/sections/dataset/DatasetSkeleton.tsx b/src/sections/dataset/DatasetSkeleton.tsx index a04bddf2a..5daa14f0d 100644 --- a/src/sections/dataset/DatasetSkeleton.tsx +++ b/src/sections/dataset/DatasetSkeleton.tsx @@ -25,16 +25,20 @@ export function DatasetSkeleton() { - - - - - - - - + ) } + +export const TabsSkeleton = () => ( + + + + + + + + +) diff --git a/src/sections/dataset/dataset-alerts/DatasetAlerts.tsx b/src/sections/dataset/dataset-alerts/DatasetAlerts.tsx index 59ca18f61..f7fa0b910 100644 --- a/src/sections/dataset/dataset-alerts/DatasetAlerts.tsx +++ b/src/sections/dataset/dataset-alerts/DatasetAlerts.tsx @@ -1,17 +1,35 @@ -import { useAlertContext } from '../../alerts/AlertContext' -import { Alerts } from '../../alerts/Alerts' +import { useTranslation } from 'react-i18next' +import parse from 'html-react-parser' +import { Alert as AlertComponent } from '@iqss/dataverse-design-system' import { Alert } from '../../../alert/domain/models/Alert' -import { useEffect } from 'react' +import styles from './DatasetAlerts.module.scss' interface DatasetAlertsProps { alerts: Alert[] } export function DatasetAlerts({ alerts }: DatasetAlertsProps) { - const { addDatasetAlert } = useAlertContext() - useEffect(() => { - alerts.forEach((alert) => addDatasetAlert(alert)) - }, [addDatasetAlert, alerts]) + const { t } = useTranslation('dataset') - return + return ( +
+ {alerts.map((alert: Alert, index) => { + const translatedMsg = alert.dynamicFields + ? t(`alerts.${alert.messageKey}.alertText`, alert.dynamicFields) + : t(`alerts.${alert.messageKey}.alertText`) + const translatedHeading = t(`alerts.${alert.messageKey}.heading`) + const alertKey = `alert-${index}` + + return ( + + {parse(translatedMsg)} + + ) + })} +
+ ) }