From 1c2a7f9f90350fa794f84f59aa9e7aa56348f2b7 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Wed, 3 Jan 2024 12:16:18 +0100
Subject: [PATCH] fix: update translations on lang change on MetaRow

---
 src/common/MetaRow/MetaRow.js |  2 +-
 src/common/useTranslate.js    | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/common/MetaRow/MetaRow.js b/src/common/MetaRow/MetaRow.js
index de56dcdca..5a99c585a 100644
--- a/src/common/MetaRow/MetaRow.js
+++ b/src/common/MetaRow/MetaRow.js
@@ -16,7 +16,7 @@ const MetaRow = ({ className, title, catalog, message, itemComponent }) => {
 
     const catalogTitle = React.useMemo(() => {
         return title ?? t.catalogTitle(catalog);
-    }, [title, catalog]);
+    }, [title, catalog, t.catalogTitle]);
 
     const items = React.useMemo(() => {
         return catalog?.items ?? catalog?.content?.content;
diff --git a/src/common/useTranslate.js b/src/common/useTranslate.js
index 22f0443ea..f253e5129 100644
--- a/src/common/useTranslate.js
+++ b/src/common/useTranslate.js
@@ -1,20 +1,21 @@
+const { useCallback } = require('react');
 const { useTranslation } = require('react-i18next');
 
 const useTranslate = () => {
     const { t } = useTranslation();
 
-    const string = (key) => t(key);
+    const string = useCallback((key) => t(key), [t]);
 
-    const stringWithPrefix = (value, prefix, fallback = null) => {
+    const stringWithPrefix = useCallback((value, prefix, fallback = null) => {
         const key = `${prefix}${value}`;
         const defaultValue = fallback ?? value.charAt(0).toUpperCase() + value.slice(1);
 
         return t(key, {
             defaultValue,
         });
-    };
+    }, [t]);
 
-    const catalogTitle = ({ addon, id, name, type } = {}, withType = true) => {
+    const catalogTitle = useCallback(({ addon, id, name, type } = {}, withType = true) => {
         if (addon && id && name) {
             const partialKey = `${addon.manifest.id}/${id}`;
             const translatedName = stringWithPrefix(partialKey, 'CATALOG_', name);
@@ -28,7 +29,7 @@ const useTranslate = () => {
         }
 
         return null;
-    };
+    }, [stringWithPrefix]);
 
     return {
         string,