feat: Replace deprecated alerter by actual one

cozy · Jul 16, 2024 · 5587dca · 5587dca
1 parent 1657f51
commit 5587dca
Show file tree

Hide file tree

Showing 10 changed files with 224 additions and 291 deletions.
diff --git a/src/declarations.d.ts b/src/declarations.d.ts
@@ -1,10 +1,6 @@
 declare module 'cozy-ui/*'
 
 declare module 'cozy-ui/transpiled/react' {
-  export const Alerter: {
-    error: (message: string) => void
-  }
-
   export const logger: {
     info: (message: string, ...rest: unknown[]) => void
   }
@@ -15,12 +11,3 @@ declare module 'cozy-ui/transpiled/react/providers/I18n' {
     t: (key: string, options?: Record<string, unknown>) => string
   }
 }
-
-declare module 'cozy-ui/transpiled/react/deprecated/Alerter' {
-  const Alerter: {
-    error: (message: string, options?: Record<string, unknown>) => void
-    success: (message: string, options?: Record<string, unknown>) => void
-  }
-
-  export default Alerter
-}
diff --git a/src/photos/components/Alerter.jsx b/src/photos/components/Alerter.jsx
diff --git a/src/photos/components/Layout.jsx b/src/photos/components/Layout.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Outlet, NavLink as RouterLink } from 'react-router-dom'
 
 import { BarComponent } from 'cozy-bar'
-import { useI18n, translate } from 'cozy-ui/transpiled/react/providers/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import Sprite from 'cozy-ui/transpiled/react/Icon/Sprite'
 import { Layout as LayoutUI, Main } from 'cozy-ui/transpiled/react/Layout'
 import Sidebar from 'cozy-ui/transpiled/react/Sidebar'
@@ -18,7 +18,6 @@ import { isFlagshipApp } from 'cozy-device-helper'
 import flag from 'cozy-flags'
 
 import ButtonClient from 'components/pushClient/Button'
-import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter'
 import { UploadQueue } from '../ducks/upload'
 import PushBanner from 'components/PushBanner'
 
@@ -113,15 +112,14 @@ const getNavLinks = () => {
   return <NoBackupNavLinks />
 }
 
-export const Layout = ({ t }) => (
+export const Layout = () => (
   <LayoutUI>
     <BarComponent />
     <Sidebar className={styles['pho-sidebar']}>
       <Nav>{getNavLinks()}</Nav>
       {!isFlagshipApp() && <ButtonClient />}
     </Sidebar>
 
-    <Alerter t={t} />
     <UploadQueue />
     <Main className={styles['pho-content']}>
       <PushBanner />
@@ -133,4 +131,4 @@ export const Layout = ({ t }) => (
   </LayoutUI>
 )
 
-export default translate()(Layout)
+export default Layout
diff --git a/src/photos/ducks/albums/components/AlbumPhotos.jsx b/src/photos/ducks/albums/components/AlbumPhotos.jsx
@@ -2,13 +2,13 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import { Outlet, useNavigate, useLocation } from 'react-router-dom'
+import flow from 'lodash/flow'
 
 import { withClient } from 'cozy-client'
 import { showModal } from 'react-cozy-helpers'
 import { translate } from 'cozy-ui/transpiled/react/providers/I18n'
-import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter'
+import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { ShareModal } from 'cozy-sharing'
-import flow from 'lodash/flow'
 
 import styles from '../../../styles/layout.styl'
 
@@ -38,7 +38,10 @@ class AlbumPhotos extends Component {
 
   renameAlbum = name => {
     if (name.trim() === '') {
-      Alerter.error('Error.album_rename_abort')
+      this.props.showAlert({
+        message: this.props.t('Error.album_rename_abort'),
+        severity: 'error'
+      })
       return
     } else if (name === this.props.album.name) {
       this.setState({ editing: false })
@@ -54,7 +57,10 @@ class AlbumPhotos extends Component {
         this.setState({ editing: false })
       })
       .catch(() => {
-        Alerter.error('Error.generic')
+        this.props.showAlert({
+          message: this.props.t('Error.generic'),
+          severity: 'error'
+        })
       })
   }
   // !TODO Hack. We should not use 99999 as limit.
@@ -88,7 +94,7 @@ class AlbumPhotos extends Component {
     })
   }
   renderDestroyConfirm = () => {
-    const { t, navigate, album, deleteAlbum } = this.props
+    const { t, navigate, album, deleteAlbum, showAlert } = this.props
 
     return (
       <DestroyConfirm
@@ -101,11 +107,19 @@ class AlbumPhotos extends Component {
             // eslint-disable-next-line promise/always-return
             .then(() => {
               navigate('/albums')
-              Alerter.success('Albums.remove_album.success', {
-                name: album.name
+              showAlert({
+                message: t('Albums.remove_album.success', {
+                  name: album.name
+                }),
+                severity: 'success'
               })
             })
-            .catch(() => Alerter.error('Albums.remove_album.error.generic'))
+            .catch(() =>
+              showAlert({
+                message: t('Albums.remove_album.error.generic'),
+                severity: 'error'
+              })
+            )
         }
       />
     )
@@ -230,7 +244,16 @@ AlbumPhotos.propTypes = {
 const AlbumPhotosWrapper = props => {
   const { pathname } = useLocation()
   const navigate = useNavigate()
-  return <AlbumPhotos {...props} navigate={navigate} pathname={pathname} />
+  const { showAlert } = useAlert()
+
+  return (
+    <AlbumPhotos
+      {...props}
+      navigate={navigate}
+      pathname={pathname}
+      showAlert={showAlert}
+    />
+  )
 }
 
 export default flow(