From 8c3bd354f83abe786165ec98eae9c8128e2e53a8 Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Sun, 26 May 2024 20:53:43 +0100
Subject: [PATCH] Misc: Remove FileSummary - fetching/loading behaviour

---
 .../Collection/Files/FilesSummaryGroup.tsx    | 19 +++++--------------
 src/core/react-query/webui/queries.ts         |  1 -
 .../collection/series/SeriesFileSummary.tsx   |  4 ++--
 3 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/src/components/Collection/Files/FilesSummaryGroup.tsx b/src/components/Collection/Files/FilesSummaryGroup.tsx
index 6aee2faf6..c296da12f 100644
--- a/src/components/Collection/Files/FilesSummaryGroup.tsx
+++ b/src/components/Collection/Files/FilesSummaryGroup.tsx
@@ -1,9 +1,6 @@
 import React, { useMemo } from 'react';
-import { mdiLoading } from '@mdi/js';
-import Icon from '@mdi/react';
 import { forEach, map, omit } from 'lodash';
 import prettyBytes from 'pretty-bytes';
-import { useDebounceValue } from 'usehooks-ts';
 
 import type { WebuiSeriesFileSummaryGroupRangeByType, WebuiSeriesFileSummaryGroupType } from '@/core/types/api/webui';
 
@@ -23,14 +20,12 @@ const HeaderFragment = ({ range, title }: HeaderFragmentProps) => {
 
 type HeaderProps = {
   ranges: WebuiSeriesFileSummaryGroupRangeByType;
-  fetchingState: boolean;
 };
-const Header = ({ fetchingState, ranges }: HeaderProps) => (
+const Header = ({ ranges }: HeaderProps) => (
   <div className="flex gap-x-2">
     <HeaderFragment title={ranges?.Normal?.Range.length > 2 ? 'Episodes' : 'Episode'} range={ranges?.Normal?.Range} />
     <HeaderFragment title={ranges?.Normal?.Range.length > 2 ? 'Specials' : 'Special'} range={ranges?.Special?.Range} />
     {map(omit(ranges, ['Normal', 'Special']), (item, key) => <HeaderFragment title={key} range={item.Range} />)}
-    {fetchingState && <Icon path={mdiLoading} spin size="2rem" />}
   </div>
 );
 
@@ -51,9 +46,8 @@ const Row = ({ label, value }: RowProps) => (
 
 type GroupProps = {
   group: WebuiSeriesFileSummaryGroupType;
-  fetchingState: boolean;
 };
-const Group = ({ fetchingState, group }: GroupProps) => {
+const Group = ({ group }: GroupProps) => {
   const sizes = useMemo(() => {
     const sizeMap: Record<string, { size: number, count: number }> = {};
     forEach(group.RangeByType, (item, key) => {
@@ -76,8 +70,6 @@ const Group = ({ fetchingState, group }: GroupProps) => {
     )).join(' | ');
   }, [group]);
 
-  const [fetchState] = useDebounceValue(fetchingState, 500);
-
   const groupDetails = useMemo(() => (group.GroupName ? `${group.GroupName} (${group.GroupNameShort})` : '-'), [
     group,
   ]);
@@ -133,7 +125,7 @@ const Group = ({ fetchingState, group }: GroupProps) => {
   return (
     <div className="flex flex-col gap-y-6 rounded border border-panel-border bg-panel-background-transparent p-6">
       <div className="flex text-xl font-semibold">
-        <Header ranges={group.RangeByType} fetchingState={fetchState} />
+        <Header ranges={group.RangeByType} />
       </div>
       <div className="flex gap-x-[4.5rem]">
         <div className="flex flex-col gap-y-2">
@@ -153,11 +145,10 @@ const Group = ({ fetchingState, group }: GroupProps) => {
 
 type Props = {
   groups?: WebuiSeriesFileSummaryGroupType[];
-  fetchingState: boolean;
 };
-const FilesSummaryGroups = ({ fetchingState, groups = [] }: Props) => (
+const FilesSummaryGroups = ({ groups = [] }: Props) => (
   // eslint-disable-next-line react/no-array-index-key
-  groups.map((group, index) => <Group key={index} group={group} fetchingState={fetchingState} />)
+  groups.map((group, index) => <Group key={index} group={group} />)
 );
 
 export default FilesSummaryGroups;
diff --git a/src/core/react-query/webui/queries.ts b/src/core/react-query/webui/queries.ts
index 8c72fd265..2c1bd839b 100644
--- a/src/core/react-query/webui/queries.ts
+++ b/src/core/react-query/webui/queries.ts
@@ -51,7 +51,6 @@ export const useSeriesFileSummaryQuery = (seriesId: number, params: SeriesFileSu
     queryKey: ['webui', 'series-file-summary', seriesId, params],
     queryFn: () => axios.get(`WebUI/Series/${seriesId}/FileSummary`, { params }),
     enabled,
-    placeholderData: prevData => prevData,
   });
 
 export const useSeriesOverviewQuery = (seriesId: number, enabled = true) =>
diff --git a/src/pages/collection/series/SeriesFileSummary.tsx b/src/pages/collection/series/SeriesFileSummary.tsx
index 051cb15a0..7cbf090fa 100644
--- a/src/pages/collection/series/SeriesFileSummary.tsx
+++ b/src/pages/collection/series/SeriesFileSummary.tsx
@@ -51,7 +51,7 @@ const SeriesFileSummary = () => {
 
   const [mode, setMode] = useState<ModeType>('Series');
 
-  const { data: fileSummary, isFetching, isLoading } = useSeriesFileSummaryQuery(
+  const { data: fileSummary, isLoading } = useSeriesFileSummaryQuery(
     toNumber(seriesId!),
     { groupBy: 'GroupName,FileVersion,FileLocation,AudioLanguages,SubtitleLanguages,VideoResolution' },
     !!seriesId,
@@ -79,7 +79,7 @@ const SeriesFileSummary = () => {
             </div>
           )}
           {mode === 'Series'
-            ? <FilesSummaryGroups groups={fileSummary?.Groups} fetchingState={isFetching} />
+            ? <FilesSummaryGroups groups={fileSummary?.Groups} />
             : <FileMissingEpisodes missingEps={fileSummary?.MissingEpisodes} />}
         </div>
       </div>