From 041dc659fe533971dcaa0642d6b8faf4f0e5b13e Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Fri, 9 Dec 2022 20:55:01 -0800
Subject: [PATCH] Fixed: Custom formats with a total score of zero not showing
 in some places

---
 .../src/Episode/History/EpisodeHistoryRow.js   | 18 +++---------------
 .../InteractiveSearch/InteractiveSearchRow.js  | 18 +++---------------
 .../src/Series/History/SeriesHistoryRow.js     | 18 +++---------------
 .../Number/formatPreferredWordScore.js         |  4 ++--
 4 files changed, 11 insertions(+), 47 deletions(-)

diff --git a/frontend/src/Episode/History/EpisodeHistoryRow.js b/frontend/src/Episode/History/EpisodeHistoryRow.js
index e02883124..9905fd953 100644
--- a/frontend/src/Episode/History/EpisodeHistoryRow.js
+++ b/frontend/src/Episode/History/EpisodeHistoryRow.js
@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import HistoryDetailsConnector from 'Activity/History/Details/HistoryDetailsConnector';
 import HistoryEventTypeCell from 'Activity/History/HistoryEventTypeCell';
 import Icon from 'Components/Icon';
-import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
@@ -11,6 +10,7 @@ import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
 import Popover from 'Components/Tooltip/Popover';
 import Tooltip from 'Components/Tooltip/Tooltip';
+import EpisodeFormats from 'Episode/EpisodeFormats';
 import EpisodeLanguages from 'Episode/EpisodeLanguages';
 import EpisodeQuality from 'Episode/EpisodeQuality';
 import { icons, kinds, tooltipPositions } from 'Helpers/Props';
@@ -129,21 +129,9 @@ class EpisodeHistoryRow extends Component {
         <TableRowCell className={styles.customFormatScore}>
           <Tooltip
             anchor={
-              formatPreferredWordScore(data.customFormatScore)
-            }
-            tooltip={
-              <div>
-                {
-                  customFormats.map((format) => {
-                    return (
-                      <Label key={format.id}>
-                        {format.name}
-                      </Label>
-                    );
-                  })
-                }
-              </div>
+              formatPreferredWordScore(data.customFormatScore, customFormats.length)
             }
+            tooltip={<EpisodeFormats formats={customFormats} />}
             position={tooltipPositions.BOTTOM}
           />
         </TableRowCell>
diff --git a/frontend/src/InteractiveSearch/InteractiveSearchRow.js b/frontend/src/InteractiveSearch/InteractiveSearchRow.js
index dd68d00fc..7cf1d47b6 100644
--- a/frontend/src/InteractiveSearch/InteractiveSearchRow.js
+++ b/frontend/src/InteractiveSearch/InteractiveSearchRow.js
@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import ProtocolLabel from 'Activity/Queue/ProtocolLabel';
 import Icon from 'Components/Icon';
-import Label from 'Components/Label';
 import Link from 'Components/Link/Link';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
@@ -10,6 +9,7 @@ import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
 import Popover from 'Components/Tooltip/Popover';
 import Tooltip from 'Components/Tooltip/Tooltip';
+import EpisodeFormats from 'Episode/EpisodeFormats';
 import EpisodeLanguages from 'Episode/EpisodeLanguages';
 import EpisodeQuality from 'Episode/EpisodeQuality';
 import { icons, kinds, tooltipPositions } from 'Helpers/Props';
@@ -199,21 +199,9 @@ class InteractiveSearchRow extends Component {
         <TableRowCell className={styles.customFormatScore}>
           <Tooltip
             anchor={
-              formatPreferredWordScore(customFormatScore)
-            }
-            tooltip={
-              <div>
-                {
-                  customFormats.map((format) => {
-                    return (
-                      <Label key={format.id}>
-                        {format.name}
-                      </Label>
-                    );
-                  })
-                }
-              </div>
+              formatPreferredWordScore(customFormatScore, customFormats.length)
             }
+            tooltip={<EpisodeFormats formats={customFormats} />}
             position={tooltipPositions.BOTTOM}
           />
         </TableRowCell>
diff --git a/frontend/src/Series/History/SeriesHistoryRow.js b/frontend/src/Series/History/SeriesHistoryRow.js
index 98a67cc93..25ad12d5c 100644
--- a/frontend/src/Series/History/SeriesHistoryRow.js
+++ b/frontend/src/Series/History/SeriesHistoryRow.js
@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import HistoryDetailsConnector from 'Activity/History/Details/HistoryDetailsConnector';
 import HistoryEventTypeCell from 'Activity/History/HistoryEventTypeCell';
 import Icon from 'Components/Icon';
-import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
@@ -11,6 +10,7 @@ import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
 import Popover from 'Components/Tooltip/Popover';
 import Tooltip from 'Components/Tooltip/Tooltip';
+import EpisodeFormats from 'Episode/EpisodeFormats';
 import EpisodeLanguages from 'Episode/EpisodeLanguages';
 import EpisodeNumber from 'Episode/EpisodeNumber';
 import EpisodeQuality from 'Episode/EpisodeQuality';
@@ -149,21 +149,9 @@ class SeriesHistoryRow extends Component {
         <TableRowCell className={styles.customFormatScore}>
           <Tooltip
             anchor={
-              formatPreferredWordScore(data.customFormatScore)
-            }
-            tooltip={
-              <div>
-                {
-                  customFormats.map((format) => {
-                    return (
-                      <Label key={format.id}>
-                        {format.name}
-                      </Label>
-                    );
-                  })
-                }
-              </div>
+              formatPreferredWordScore(data.customFormatScore, customFormats.length)
             }
+            tooltip={<EpisodeFormats formats={customFormats} />}
             position={tooltipPositions.BOTTOM}
           />
         </TableRowCell>
diff --git a/frontend/src/Utilities/Number/formatPreferredWordScore.js b/frontend/src/Utilities/Number/formatPreferredWordScore.js
index 93024e0de..64b2090d6 100644
--- a/frontend/src/Utilities/Number/formatPreferredWordScore.js
+++ b/frontend/src/Utilities/Number/formatPreferredWordScore.js
@@ -1,5 +1,5 @@
 
-function formatPreferredWordScore(input) {
+function formatPreferredWordScore(input, customFormatsLength = 0) {
   const score = Number(input);
 
   if (score > 0) {
@@ -10,7 +10,7 @@ function formatPreferredWordScore(input) {
     return score;
   }
 
-  return '';
+  return customFormatsLength > 0 ? '+1' : '';
 }
 
 export default formatPreferredWordScore;