From 6d53d2a153a98070c42d0619c15902b6bd5dfab4 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Wed, 19 Jul 2023 17:52:19 -0700
Subject: [PATCH] Fixed: Translations for columns

---
 frontend/src/Components/Icon.js                   |  4 ++--
 frontend/src/Store/Actions/episodeActions.js      |  5 ++---
 .../src/Store/Middleware/createPersistState.js    | 15 +++++++++++----
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/src/Components/Icon.js b/frontend/src/Components/Icon.js
index 8c534d8d4..90842b039 100644
--- a/frontend/src/Components/Icon.js
+++ b/frontend/src/Components/Icon.js
@@ -43,7 +43,7 @@ class Icon extends PureComponent {
       return (
         <span
           className={containerClassName}
-          title={title}
+          title={typeof title === 'function' ? title() : title}
         >
           {icon}
         </span>
@@ -60,7 +60,7 @@ Icon.propTypes = {
   name: PropTypes.object.isRequired,
   kind: PropTypes.string.isRequired,
   size: PropTypes.number.isRequired,
-  title: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   darken: PropTypes.bool.isRequired,
   isSpinning: PropTypes.bool.isRequired,
   fixedWidth: PropTypes.bool.isRequired
diff --git a/frontend/src/Store/Actions/episodeActions.js b/frontend/src/Store/Actions/episodeActions.js
index c7f05aa8b..b84dfe168 100644
--- a/frontend/src/Store/Actions/episodeActions.js
+++ b/frontend/src/Store/Actions/episodeActions.js
@@ -119,9 +119,8 @@ export const defaultState = {
       },
       label: React.createElement(Icon, {
         name: icons.SCORE,
-        get title() {
-          return translate('CustomFormatScore');
-        }
+        title: () => translate('CustomFormatScore')
+
       }),
       isVisible: false
     },
diff --git a/frontend/src/Store/Middleware/createPersistState.js b/frontend/src/Store/Middleware/createPersistState.js
index fc6b5c88c..aa16ffa9e 100644
--- a/frontend/src/Store/Middleware/createPersistState.js
+++ b/frontend/src/Store/Middleware/createPersistState.js
@@ -36,10 +36,17 @@ function mergeColumns(path, initialState, persistedState, computedState) {
     const column = initialColumns.find((i) => i.name === persistedColumn.name);
 
     if (column) {
-      columns.push({
-        ...column,
-        isVisible: persistedColumn.isVisible
-      });
+      const newColumn = {};
+
+      // We can't use a spread operator or Object.assign to clone the column
+      // or any accessors are lost and can break translations.
+      for (const prop of Object.keys(column)) {
+        Object.defineProperty(newColumn, prop, Object.getOwnPropertyDescriptor(column, prop));
+      }
+
+      newColumn.isVisible = persistedColumn.isVisible;
+
+      columns.push(newColumn);
     }
   });