[VO-1035 & VO-1034 & VO-1036] fix(AppSections): Some fixes linked to additional apps on cozy-store

react/AppSections/Sections.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
 import flag from 'cozy-flags'
-import { useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import styles from './Sections.styl'
 import * as catUtils from './categories'
@@ -16,9 +15,9 @@ import en from './locales/en.json'
 import fr from './locales/fr.json'
 import * as searchUtils from './search'
 import Typography from '../Typography'
-import withBreakpoints from '../helpers/withBreakpoints'
-import { translate } from '../providers/I18n'
-import withLocales from '../providers/I18n/withLocales'
+import { useBreakpoints } from '../providers/Breakpoints'
+import { useI18n, useExtendI18n } from '../providers/I18n'
+import withOnlyLocales from '../providers/I18n/withOnlyLocales'
 
 const locales = {
   en,
@@ -230,7 +229,10 @@ const SectionsWrapper = props => {
   const i18nConfig = generateI18nConfig(config?.categories)
   useExtendI18n(i18nConfig)
 
-  return <Sections {...props} />
+  const { t } = useI18n()
+  const breakpoints = useBreakpoints()
+
+  return <Sections {...props} breakpoints={breakpoints} t={t} />
 }
 
 Sections.propTypes = {
@@ -277,6 +279,4 @@ Sections.defaultProps = {
   })
 }
 
-export const Untranslated = withBreakpoints()(SectionsWrapper)
-
-export default withLocales(locales)(translate()(Untranslated))
+export default withOnlyLocales(locales)(SectionsWrapper)

react/AppSections/__snapshots__/index.spec.jsx.snap

@@ -1076,7 +1076,7 @@ exports[`AppsSection component should render dropdown filter on mobile if no nav
           "value": "partners",
         },
         Object {
-          "label": "Shortcuts",
+          "label": "Additional apps",
           "secondary": false,
           "value": "shortcuts",
         },
@@ -1482,7 +1482,7 @@ exports[`AppsSection component should render dropdown filter on tablet if no nav
           "value": "partners",
         },
         Object {
-          "label": "Shortcuts",
+          "label": "Additional apps",
           "secondary": false,
           "value": "shortcuts",
         },

react/AppSections/categories.spec.js

@@ -104,7 +104,7 @@ describe('generateOptionsFromApps', () => {
         type: 'webapp',
         value: 'others'
       },
-      { label: 'Shortcuts', secondary: false, value: 'shortcuts' },
+      { label: 'Additional apps', secondary: false, value: 'shortcuts' },
       {
         label: 'Services',
         secondary: false,
@@ -158,7 +158,7 @@ describe('generateOptionsFromApps', () => {
         value: 'others'
       },
       {
-        label: 'Shortcuts',
+        label: 'Additional apps',
         secondary: false,
         value: 'shortcuts'
       },

react/AppSections/components/__snapshots__/AppsSection.spec.jsx.snap

@@ -28,7 +28,7 @@ Array [
     "title": "Cozy Photos",
   },
   Object {
-    "developer": "By undefined",
+    "developer": null,
     "status": "Update available",
     "title": "Tasky",
   },

react/AppSections/locales/en.json

@@ -27,11 +27,11 @@
     "telecom": "Telecom",
     "transport": "Transportation",
     "pro": "Work",
-    "shortcuts": "Shortcuts"
+    "shortcuts": "Additional apps"
   },
   "sections": {
     "applications": "Applications",
     "konnectors": "Services",
-    "shortcuts": "Shortcuts"
+    "shortcuts": "Additional apps"
   }
 }

react/AppSections/locales/fr.json

@@ -27,11 +27,11 @@
     "telecom": "Mobile",
     "transport": "Voyage et transport",
     "pro": "Travail",
-    "shortcuts": "Raccourcis"
+    "shortcuts": "App supplémentaires"
   },
   "sections": {
     "applications": "Applications",
     "konnectors": "Services",
-    "shortcuts": "Raccourcis"
+    "shortcuts": "App supplémentaires"
   }
 }

react/AppTile/index.jsx

@@ -20,7 +20,6 @@ import Tile, {
 } from '../Tile'
 import palette from '../palette'
 import { AppDoctype } from '../proptypes'
-import useBreakpoints from '../providers/Breakpoints'
 import { createUseI18n } from '../providers/I18n'
 
 const locales = { en, fr }
@@ -52,7 +51,6 @@ export const AppTile = ({
 }) => {
   const { t } = useI18n()
   const { developer = {} } = app
-  const { isMobile } = useBreakpoints()
 
   const name = nameProp || app.name
 
@@ -61,7 +59,7 @@ export const AppTile = ({
   const isStatusArray = Array.isArray(showStatus)
 
   const statusToDisplay =
-    isShortcutFile(app) && statusLabel === APP_STATUS.installed && isMobile
+    isShortcutFile(app) && statusLabel === APP_STATUS.installed
       ? 'favorite'
       : isStatusArray
       ? showStatus.indexOf(statusLabel) > -1 && statusLabel
@@ -71,9 +69,6 @@ export const AppTile = ({
 
   const isInMaintenanceWithSpecificDisplay =
     displaySpecificMaintenanceStyle && statusLabel === APP_STATUS.maintenance
-  const tileSubtitle = isShortcutFile(app)
-    ? app.metadata?.source
-    : developer.name
 
   return (
     <Tile
@@ -109,8 +104,8 @@ export const AppTile = ({
         <TileTitle isMultiline={!statusLabel}>
           {namePrefix ? `${namePrefix} ${name}` : name}
         </TileTitle>
-        {showDeveloper && (
-          <TileSubtitle>{`${t('app_item.by')} ${tileSubtitle}`}</TileSubtitle>
+        {developer.name && showDeveloper && (
+          <TileSubtitle>{`${t('app_item.by')} ${developer.name}`}</TileSubtitle>
         )}
         {statusToDisplay && (
           <TileFooter isAccent={statusLabel === APP_STATUS.update}>

react/AppTile/locales/fr.json

@@ -4,6 +4,6 @@
     "installed": "Installée",
     "maintenance": "En maintenance",
     "update": "Mise à jour dispo.",
-    "favorite": "Ajouté sur la page d'accueil"
+    "favorite": "Ajouté sur l'accueil"
   }
 }

react/providers/I18n/index.jsx

@@ -89,8 +89,9 @@ I18n.childContextTypes = {
   lang: PropTypes.string
 }
 
-export { initTranslation, extend, useExtendI18n } from './translation'
+export { initTranslation, extend } from './translation'
 export { default as translate } from './translate'
 export { default as createUseI18n } from './createUseI18n'
+export { default as useExtendI18n } from './useExtendI18n'
 
 export default I18n

react/providers/I18n/translation.jsx

@@ -1,6 +1,6 @@
 import Polyglot from 'node-polyglot'
 
-import { DEFAULT_LANG, useI18n } from '.'
+import { DEFAULT_LANG } from '.'
 
 export let _polyglot
 
@@ -40,34 +40,3 @@ export const initTranslation = (
 }
 
 export const extend = (dict, polyglot) => (polyglot || _polyglot)?.extend(dict)
-
-// Use to determine if we need to merge locales again, and to avoid useless calls
-let useExtendI18nLang = ''
-
-/**
- * Hook to merge app locales with cozy-ui locales
- * @param {object} locales - Locales sorted by lang `{ fr: {...}, en: {...} }`
- * @returns {void}
- */
-export const useExtendI18n = locales => {
-  const { lang, polyglot } = useI18n()
-
-  if (!locales || !lang || !polyglot) return
-
-  // To simplify code we use Polyglot.extend to merge
-  // locales from object and from polyglot.phrases
-  // rather than native JS or lodash. this is why we have two extend.
-  if (useExtendI18nLang !== lang) {
-    const _polyglot = new Polyglot({
-      phrases: locales[lang],
-      locale: lang
-    })
-
-    // merge locales from app and cozy-ui, without replacing existing one in app
-    extend(polyglot.phrases, _polyglot)
-    // use merged locales in app
-    extend(_polyglot.phrases, polyglot)
-    // set the sitch to avoid useless merge
-    useExtendI18nLang = lang
-  }
-}

react/providers/I18n/useExtendI18n.jsx

@@ -0,0 +1,37 @@
+import Polyglot from 'node-polyglot'
+import { useState } from 'react'
+
+import { useI18n } from '.'
+import { extend } from './translation'
+
+/**
+ * Hook to merge app locales with cozy-ui locales
+ * @param {object} locales - Locales sorted by lang `{ fr: {...}, en: {...} }`
+ * @returns {void}
+ */
+const useExtendI18n = locales => {
+  const { lang, polyglot } = useI18n()
+  // Use to determine if we need to merge locales again, and to avoid useless calls
+  const [useExtendI18nLang, setUseExtendI18nLang] = useState('')
+
+  if (!locales || !lang || !polyglot) return
+
+  // To simplify code we use Polyglot.extend to merge
+  // locales from object and from polyglot.phrases
+  // rather than native JS or lodash. this is why we have two extend.
+  if (useExtendI18nLang !== lang) {
+    const _polyglot = new Polyglot({
+      phrases: locales[lang],
+      locale: lang
+    })
+
+    // merge locales from app and cozy-ui, without replacing existing one in app
+    extend(polyglot.phrases, _polyglot)
+    // use merged locales in app
+    extend(_polyglot.phrases, polyglot)
+    // set the switch to avoid useless merge
+    setUseExtendI18nLang(lang)
+  }
+}
+
+export default useExtendI18n