feat(Viewer): Use useExtendI18n

And so locales from app and cozy-ui are merged

Author: JF-Cozy

react/Viewer/ViewerContainer.jsx

@@ -4,17 +4,18 @@ import cx from 'classnames'
 
 import useBreakpoints from '../providers/Breakpoints'
 import { FileDoctype } from '../proptypes'
-
-import Modal from '../Modal'
+import { useExtendI18n } from '../providers/I18n'
 import { useCozyTheme } from '../providers/CozyTheme'
+import Modal from '../Modal'
+
 import { toolbarPropsPropType } from './proptypes'
 import { isValidForPanel } from './helpers'
 import Viewer from './Viewer'
 import ViewerInformationsWrapper from './ViewerInformationsWrapper'
 import EncryptedProvider from './providers/EncryptedProvider'
 import AlertProvider from '../providers/Alert'
 import { ActionMenuProvider } from './providers/ActionMenuProvider'
-
+import { locales } from './locales'
 import styles from './styles.styl'
 
 const ViewerContainer = props => {
@@ -31,6 +32,7 @@ const ViewerContainer = props => {
   const { currentIndex, files, currentURL } = props
   const toolbarRef = createRef()
   const { isDesktop } = useBreakpoints()
+  useExtendI18n(locales)
   const currentFile = files[currentIndex]
   const fileCount = files.length
   const hasPrevious = currentIndex > 0

react/Viewer/components/Toolbar.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import cx from 'classnames'
-import flow from 'lodash/flow'
 
 import { useClient } from 'cozy-client'
 
@@ -12,15 +11,15 @@ import Icon from '../../Icon'
 import Typography from '../../Typography'
 import PreviousIcon from '../../Icons/Previous'
 import DownloadIcon from '../../Icons/Download'
+import { useI18n } from '../../providers/I18n'
+import MidEllipsis from '../../MidEllipsis'
 
-import { withViewerLocales } from '../hoc/withViewerLocales'
 import { downloadFile } from '../helpers'
 import { useEncrypted } from '../providers/EncryptedProvider'
 import { ToolbarFilePath } from './ToolbarFilePath'
 import { extractChildrenCompByName } from '../Footer/helpers'
 
 import styles from './styles.styl'
-import MidEllipsis from '../../MidEllipsis'
 
 const useClasses = makeStyles(theme => ({
   iconButton: {
@@ -36,14 +35,14 @@ const Toolbar = ({
   onMouseLeave,
   file,
   onClose,
-  t,
   toolbarRef,
   breakpoints: { isDesktop },
   children,
   showFilePath
 }) => {
   const client = useClient()
   const classes = useClasses()
+  const { t } = useI18n()
 
   const { url } = useEncrypted()
 
@@ -109,7 +108,4 @@ Toolbar.propTypes = {
   showFilePath: PropTypes.bool
 }
 
-export default flow(
-  withBreakpoints(),
-  withViewerLocales
-)(Toolbar)
+export default withBreakpoints()(Toolbar)