From 98ea63ea27ad260b3696516619decd96285e477c Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Mon, 5 Aug 2024 17:56:15 +0300
Subject: [PATCH] Fixed: Formatting empty size on disk values

---
 frontend/src/RootFolder/RootFolderRow.tsx     |  2 +-
 .../Details/{SeasonInfo.js => SeasonInfo.tsx} | 27 +++++++++----------
 frontend/src/Series/Details/SeriesDetails.js  |  9 +++----
 .../Overview/SeriesIndexOverviewInfo.tsx      |  4 ++-
 .../Index/Posters/SeriesIndexPosterInfo.tsx   |  2 +-
 frontend/src/Utilities/Number/formatBytes.ts  |  6 +----
 6 files changed, 22 insertions(+), 28 deletions(-)
 rename frontend/src/Series/Details/{SeasonInfo.js => SeasonInfo.tsx} (75%)

diff --git a/frontend/src/RootFolder/RootFolderRow.tsx b/frontend/src/RootFolder/RootFolderRow.tsx
index bf8ac6f7a..3b97319da 100644
--- a/frontend/src/RootFolder/RootFolderRow.tsx
+++ b/frontend/src/RootFolder/RootFolderRow.tsx
@@ -21,7 +21,7 @@ interface RootFolderRowProps {
 }
 
 function RootFolderRow(props: RootFolderRowProps) {
-  const { id, path, accessible, freeSpace, unmappedFolders = [] } = props;
+  const { id, path, accessible, freeSpace = 0, unmappedFolders = [] } = props;
 
   const isUnavailable = !accessible;
 
diff --git a/frontend/src/Series/Details/SeasonInfo.js b/frontend/src/Series/Details/SeasonInfo.tsx
similarity index 75%
rename from frontend/src/Series/Details/SeasonInfo.js
rename to frontend/src/Series/Details/SeasonInfo.tsx
index bcadbcaf1..83e93a20d 100644
--- a/frontend/src/Series/Details/SeasonInfo.js
+++ b/frontend/src/Series/Details/SeasonInfo.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import DescriptionList from 'Components/DescriptionList/DescriptionList';
 import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
@@ -6,14 +5,19 @@ import formatBytes from 'Utilities/Number/formatBytes';
 import translate from 'Utilities/String/translate';
 import styles from './SeasonInfo.css';
 
-function SeasonInfo(props) {
-  const {
-    totalEpisodeCount,
-    monitoredEpisodeCount,
-    episodeFileCount,
-    sizeOnDisk
-  } = props;
+interface SeasonInfoProps {
+  totalEpisodeCount: number;
+  monitoredEpisodeCount: number;
+  episodeFileCount: number;
+  sizeOnDisk: number;
+}
 
+function SeasonInfo({
+  totalEpisodeCount,
+  monitoredEpisodeCount,
+  episodeFileCount,
+  sizeOnDisk,
+}: SeasonInfoProps) {
   return (
     <DescriptionList>
       <DescriptionListItem
@@ -47,11 +51,4 @@ function SeasonInfo(props) {
   );
 }
 
-SeasonInfo.propTypes = {
-  totalEpisodeCount: PropTypes.number.isRequired,
-  monitoredEpisodeCount: PropTypes.number.isRequired,
-  episodeFileCount: PropTypes.number.isRequired,
-  sizeOnDisk: PropTypes.number.isRequired
-};
-
 export default SeasonInfo;
diff --git a/frontend/src/Series/Details/SeriesDetails.js b/frontend/src/Series/Details/SeriesDetails.js
index 10e7938ee..2871212ea 100644
--- a/frontend/src/Series/Details/SeriesDetails.js
+++ b/frontend/src/Series/Details/SeriesDetails.js
@@ -212,8 +212,8 @@ class SeriesDetails extends Component {
     } = this.props;
 
     const {
-      episodeFileCount,
-      sizeOnDisk
+      episodeFileCount = 0,
+      sizeOnDisk = 0
     } = statistics;
 
     const {
@@ -454,10 +454,9 @@ class SeriesDetails extends Component {
                             name={icons.DRIVE}
                             size={17}
                           />
+
                           <span className={styles.sizeOnDisk}>
-                            {
-                              formatBytes(sizeOnDisk || 0)
-                            }
+                            {formatBytes(sizeOnDisk)}
                           </span>
                         </div>
                       </Label>
diff --git a/frontend/src/Series/Index/Overview/SeriesIndexOverviewInfo.tsx b/frontend/src/Series/Index/Overview/SeriesIndexOverviewInfo.tsx
index 58a98c86d..6024e7967 100644
--- a/frontend/src/Series/Index/Overview/SeriesIndexOverviewInfo.tsx
+++ b/frontend/src/Series/Index/Overview/SeriesIndexOverviewInfo.tsx
@@ -194,10 +194,12 @@ function getInfoRowProps(
   }
 
   if (name === 'sizeOnDisk') {
+    const { sizeOnDisk = 0 } = props;
+
     return {
       title: translate('SizeOnDisk'),
       iconName: icons.DRIVE,
-      label: formatBytes(props.sizeOnDisk),
+      label: formatBytes(sizeOnDisk),
     };
   }
 
diff --git a/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.tsx b/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.tsx
index 559ee9532..a85a95ae4 100644
--- a/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.tsx
+++ b/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.tsx
@@ -37,7 +37,7 @@ function SeriesIndexPosterInfo(props: SeriesIndexPosterInfoProps) {
     added,
     seasonCount,
     path,
-    sizeOnDisk,
+    sizeOnDisk = 0,
     tags,
     sortKey,
     showRelativeDates,
diff --git a/frontend/src/Utilities/Number/formatBytes.ts b/frontend/src/Utilities/Number/formatBytes.ts
index bccf7435a..a0ae8a985 100644
--- a/frontend/src/Utilities/Number/formatBytes.ts
+++ b/frontend/src/Utilities/Number/formatBytes.ts
@@ -1,10 +1,6 @@
 import { filesize } from 'filesize';
 
-function formatBytes(input?: string | number) {
-  if (!input) {
-    return '';
-  }
-
+function formatBytes(input: string | number) {
   const size = Number(input);
 
   if (isNaN(size)) {