Several improvements and reviewer's suggestions resolved

Author: mimartinez

admin/src/Hooks/useCollection.js

@@ -18,13 +18,12 @@ export function useCollection() {
 
   const hookingTextRendering = ({ indexed, listened }) => {
     if (indexed && listened)
-      return i18n("plugin.table.td.hookingText.hooked", "Hooked")
+      return i18n('plugin.table.td.hookingText.hooked', 'Hooked')
 
-    if (!indexed && !listened) 
-      return "/"
-  
-    return i18n("plugin.table.td.hookingText.reload", "Reload needed")
-  };
+    if (!indexed && !listened) return '/'
+
+    return i18n('plugin.table.td.hookingText.reload', 'Reload needed')
+  }
 
   const fetchCollections = async () => {
     const { data, error } = await request(`/${pluginId}/content-type/`, {
@@ -46,7 +45,9 @@ export function useCollection() {
         return collection
       })
       const reload = collections.find(
-        col => col.reloadNeeded === 'Reload needed',
+        col =>
+          col.reloadNeeded ===
+          i18n('plugin.table.td.hookingText.reload', 'Reload needed'),
       )
 
       const isIndexing = collections.find(col => col.isIndexing === true)

admin/src/Hooks/useI18n.js

@@ -1,13 +1,12 @@
 import { useIntl } from 'react-intl'
-
-import getTrad from '../utils/getTrad'
+import pluginId from '../pluginId'
 
 export const useI18n = () => {
   const { formatMessage } = useIntl()
 
   const i18n = (key, defaultMessage) => {
     return formatMessage({
-      id: getTrad(key),
+      id: `${pluginId}.${key}`,
       defaultMessage,
     })
   }

admin/src/containers/Settings/Credentials.js

@@ -14,18 +14,12 @@ const Credentials = () => {
     <Box>
       <Box padding={2}>
         <TextInput
-          placeholder={i18n(
-            'plugin.tab.settings.input.host.placeholder',
-            'Host',
-          )}
-          label={i18n(
-            'plugin.tab.settings.input.host.label',
-            'Meilisearch Host',
-          )}
+          placeholder={i18n('plugin.tab.settings.input.url.placeholder', 'URL')}
+          label={i18n('plugin.tab.settings.input.url.label', 'Meilisearch URL')}
           name="host"
           hint={i18n(
-            'plugin.tab.settings.input.host.hint',
-            'The host on which your Meilisearch is running',
+            'plugin.tab.settings.input.url.hint',
+            'The URL on which your Meilisearch is running',
           )}
           value={host}
           onChange={e => setHost(e.target.value)}

admin/src/index.js

@@ -2,7 +2,6 @@ import { prefixPluginTranslations } from '@strapi/helper-plugin'
 
 import pluginPkg from '../../package.json'
 import pluginId from './pluginId'
-import getTrad from './utils/getTrad'
 import PluginIcon from './components/PluginIcon'
 import Initializer from './components/Initializer'
 import { PERMISSIONS } from './constants'
@@ -22,8 +21,8 @@ export default {
       to: `/plugins/${pluginId}`,
       icon: PluginIcon,
       intlLabel: {
-        id: getTrad(`plugin.name`),
-        defaultMessage: 'Meilisearch',
+        id: `${pluginId}.plugin.name`,
+        defaultMessage: name,
       },
       Component: async () => {
         const component = await import(
@@ -39,15 +38,12 @@ export default {
   async registerTrads({ locales }) {
     const importedTrads = await Promise.all(
       locales.map(locale => {
-        return Promise.all([import(`./translations/${locale}.json`)])
-          .then(([pluginTranslations]) => {
+        return import(
+          /* webpackChunkName: "[pluginId]-[request]" */ `./translations/${locale}.json`
+        )
+          .then(({ default: data }) => {
             return {
-              data: {
-                ...prefixPluginTranslations(
-                  pluginTranslations.default,
-                  pluginId,
-                ),
-              },
+              data: prefixPluginTranslations(data, pluginId),
               locale,
             }
           })
@@ -59,6 +55,7 @@ export default {
           })
       }),
     )
+
     return Promise.resolve(importedTrads)
   },
 }

admin/src/translations/en.json

@@ -17,9 +17,9 @@
   "plugin.reload-server": "Reload server",
   "plugin.tab.collections": "Collections",
   "plugin.tab.settings": "Settings",
-  "plugin.tab.settings.input.host.placeholder": "Host",
-  "plugin.tab.settings.input.host.label": "Meilisearch Host",
-  "plugin.tab.settings.input.host.hint": "The host on which your Meilisearch is running",
+  "plugin.tab.settings.input.url.placeholder": "URL",
+  "plugin.tab.settings.input.url.label": "Meilisearch URL",
+  "plugin.tab.settings.input.url.hint": "The URL on which your Meilisearch is running",
   "plugin.tab.settings.input.apiKey.placeholder": "API key",
   "plugin.tab.settings.input.apiKey.label": "Meilisearch API Key",
   "plugin.tab.settings.input.apiKey.hint": "A valid API key with enough permission to create indexes (or the master key).",

admin/src/translations/es.json

@@ -17,9 +17,9 @@
   "plugin.reload-server": "Recargar el servidor",
   "plugin.tab.collections": "Colecciones",
   "plugin.tab.settings": "Configuraciones",
-  "plugin.tab.settings.input.host.placeholder": "Servidor",
-  "plugin.tab.settings.input.host.label": "Servidor Meilisearch",
-  "plugin.tab.settings.input.host.hint": "El servidor en el que se ejecuta su Meilisearch",
+  "plugin.tab.settings.input.url.placeholder": "URL",
+  "plugin.tab.settings.input.url.label": "URL del Meilisearch",
+  "plugin.tab.settings.input.url.hint": "La URL donde se ejecuta su Meilisearch",
   "plugin.tab.settings.input.apiKey.placeholder": "Clave API",
   "plugin.tab.settings.input.apiKey.label": "Clave API de Meilisearch",
   "plugin.tab.settings.input.apiKey.hint": "Una clave API válida con permiso suficiente para crear índices (o la clave maestra).",