feat: refactor new ideas for managing states

IQSS · Jul 17, 2024 · b8d89aa · b8d89aa
1 parent a0a2024
commit b8d89aa
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 69 deletions.
diff --git 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 (
     <div className={styles.container}>
-      {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 (
           <AlertComponent
             key={alertKey}

diff --git a/src/sections/dataset/Dataset.tsx b/src/sections/dataset/Dataset.tsx
@@ -1,9 +1,9 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { Col, Row, Tabs } from '@iqss/dataverse-design-system'
 import styles from './Dataset.module.scss'
 import { DatasetLabels } from './dataset-labels/DatasetLabels'
 import { useLoading } from '../loading/LoadingContext'
-import { DatasetSkeleton } from './DatasetSkeleton'
+import { DatasetSkeleton, TabsSkeleton } from './DatasetSkeleton'
 import { PageNotFound } from '../page-not-found/PageNotFound'
 import { useTranslation } from 'react-i18next'
 import { DatasetMetadata } from './dataset-metadata/DatasetMetadata'
@@ -17,14 +17,14 @@ import { useNotImplementedModal } from '../not-implemented/NotImplementedModalCo
 import { NotImplementedModal } from '../not-implemented/NotImplementedModal'
 import { SeparationLine } from '../shared/layout/SeparationLine/SeparationLine'
 import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
-import { useAlertContext } from '../alerts/AlertContext'
-import { AlertMessageKey } from '../../alert/domain/models/Alert'
+import { Alert, AlertMessageKey } from '../../alert/domain/models/Alert'
 import { DatasetRepository } from '../../dataset/domain/repositories/DatasetRepository'
 import { DatasetAlerts } from './dataset-alerts/DatasetAlerts'
 import { DatasetFilesScrollable } from './dataset-files/DatasetFilesScrollable'
 import useCheckPublishCompleted from './useCheckPublishCompleted'
 import { useNavigate } from 'react-router-dom'
 import { Route } from '../Route.enum'
+import { useDeepCompareEffect } from 'use-deep-compare'
 
 interface DatasetProps {
   fileRepository: FileRepository
@@ -47,37 +47,75 @@ export function Dataset({
   const { dataset, isLoading } = useDataset()
   const { t } = useTranslation('dataset')
   const { hideModal, isModalOpen } = useNotImplementedModal()
-  const { setDatasetAlerts, datasetAlerts, addDatasetAlert, removeDatasetAlert } = useAlertContext()
   const publishCompleted = useCheckPublishCompleted(publishInProgress, dataset, datasetRepository)
   const navigate = useNavigate()
+  // TODO: Move this to custom hook useDatasetAlerts
+  const [datasetAlerts, setDatasetAlerts] = useState<Alert[]>([])
+
+  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({
             <div className={styles.container}>
               <Row>
                 <Col>
-                  <DatasetAlerts alerts={dataset.alerts} />
+                  <DatasetAlerts alerts={datasetAlerts} />
                 </Col>
               </Row>
             </div>
@@ -122,33 +160,38 @@ export function Dataset({
                   <DatasetSummary summaryFields={dataset.summaryFields} license={dataset.license} />
                 </Col>
               </Row>
-              <Tabs defaultActiveKey="files">
-                <Tabs.Tab eventKey="files" title={t('filesTabTitle')}>
-                  <div className={styles['tab-container']}>
-                    {filesTabInfiniteScrollEnabled ? (
-                      <DatasetFilesScrollable
-                        filesRepository={fileRepository}
-                        datasetPersistentId={dataset.persistentId}
-                        datasetVersion={dataset.version}
-                      />
-                    ) : (
-                      <DatasetFiles
-                        filesRepository={fileRepository}
-                        datasetPersistentId={dataset.persistentId}
-                        datasetVersion={dataset.version}
+              {publishInProgress && <TabsSkeleton />}
+
+              {!publishInProgress && (
+                <Tabs defaultActiveKey="files">
+                  <Tabs.Tab eventKey="files" title={t('filesTabTitle')}>
+                    <div className={styles['tab-container']}>
+                      {filesTabInfiniteScrollEnabled ? (
+                        <DatasetFilesScrollable
+                          filesRepository={fileRepository}
+                          datasetPersistentId={dataset.persistentId}
+                          datasetVersion={dataset.version}
+                        />
+                      ) : (
+                        <DatasetFiles
+                          filesRepository={fileRepository}
+                          datasetPersistentId={dataset.persistentId}
+                          datasetVersion={dataset.version}
+                        />
+                      )}
+                    </div>
+                  </Tabs.Tab>
+                  <Tabs.Tab eventKey="metadata" title={t('metadataTabTitle')}>
+                    <div className={styles['tab-container']}>
+                      <DatasetMetadata
+                        persistentId={dataset.persistentId}
+                        metadataBlocks={dataset.metadataBlocks}
                       />
-                    )}
-                  </div>
-                </Tabs.Tab>
-                <Tabs.Tab eventKey="metadata" title={t('metadataTabTitle')}>
-                  <div className={styles['tab-container']}>
-                    <DatasetMetadata
-                      persistentId={dataset.persistentId}
-                      metadataBlocks={dataset.metadataBlocks}
-                    />
-                  </div>
-                </Tabs.Tab>
-              </Tabs>
+                    </div>
+                  </Tabs.Tab>
+                </Tabs>
+              )}
+
               <SeparationLine />
             </div>
           </article>

diff --git 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 {
           <NotImplementedModalProvider>
             <MetadataBlockInfoProvider repository={metadataBlockInfoRepository}>
               <AnonymizedProvider>
-                <AlertProvider>
-                  <DatasetWithSearchParams />
-                </AlertProvider>
+                <DatasetWithSearchParams />
               </AnonymizedProvider>
             </MetadataBlockInfoProvider>
           </NotImplementedModalProvider>

diff --git a/src/sections/dataset/DatasetSkeleton.tsx b/src/sections/dataset/DatasetSkeleton.tsx
@@ -25,16 +25,20 @@ export function DatasetSkeleton() {
               <Skeleton height="300px" style={{ marginBottom: 10 }} />
             </Col>
           </Row>
-          <Tabs defaultActiveKey="files">
-            <Tabs.Tab eventKey="files" title="Files">
-              <Skeleton height="1000px" style={{ marginTop: 20 }} />
-            </Tabs.Tab>
-            <Tabs.Tab eventKey="metadata" title="Metadata">
-              <Skeleton height="1000px" style={{ marginTop: 20 }} />
-            </Tabs.Tab>
-          </Tabs>
+          <TabsSkeleton />
         </div>
       </article>
     </SkeletonTheme>
   )
 }
+
+export const TabsSkeleton = () => (
+  <Tabs defaultActiveKey="files">
+    <Tabs.Tab eventKey="files" title="Files">
+      <Skeleton height="1000px" style={{ marginTop: 20 }} />
+    </Tabs.Tab>
+    <Tabs.Tab eventKey="metadata" title="Metadata">
+      <Skeleton height="1000px" style={{ marginTop: 20 }} />
+    </Tabs.Tab>
+  </Tabs>
+)
diff --git 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 <Alerts></Alerts>
+  return (
+    <div className={styles.container}>
+      {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 (
+          <AlertComponent
+            key={alertKey}
+            variant={alert.variant}
+            customHeading={translatedHeading}
+            dismissible={false}>
+            {parse(translatedMsg)}
+          </AlertComponent>
+        )
+      })}
+    </div>
+  )
 }