From 42b4d08e55ece6b068539a2d689ff40039e41f06 Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Wed, 31 Jan 2024 04:34:00 +0300
Subject: [PATCH] Replace card component in SectionContainer

---
 .../components/library/SectionContainer.tsx   | 34 +++++++------------
 1 file changed, 12 insertions(+), 22 deletions(-)

diff --git a/src/apps/experimental/components/library/SectionContainer.tsx b/src/apps/experimental/components/library/SectionContainer.tsx
index 18669452a0..8eb64c4e6f 100644
--- a/src/apps/experimental/components/library/SectionContainer.tsx
+++ b/src/apps/experimental/components/library/SectionContainer.tsx
@@ -1,43 +1,29 @@
 import type { BaseItemDto, TimerInfoDto } from '@jellyfin/sdk/lib/generated-client';
-import React, { FC, useEffect, useRef } from 'react';
+import React, { FC } from 'react';
 
-import cardBuilder from 'components/cardbuilder/cardBuilder';
 import ItemsContainer from 'elements/emby-itemscontainer/ItemsContainer';
 import Scroller from 'elements/emby-scroller/Scroller';
 import LinkButton from 'elements/emby-button/LinkButton';
-import imageLoader from 'components/images/imageLoader';
-
-import { CardOptions } from 'types/cardOptions';
+import Cards from 'components/cardbuilder/Card/Cards';
+import type { CardOptions } from 'types/cardOptions';
 
 interface SectionContainerProps {
     url?: string;
     sectionTitle: string;
     items: BaseItemDto[] | TimerInfoDto[];
     cardOptions: CardOptions;
+    reloadItems?: () => void;
 }
 
 const SectionContainer: FC<SectionContainerProps> = ({
     sectionTitle,
     url,
     items,
-    cardOptions
+    cardOptions,
+    reloadItems
 }) => {
-    const element = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        const itemsContainer = element.current?.querySelector('.itemsContainer');
-        cardBuilder.buildCards(items, {
-            itemsContainer: itemsContainer,
-            parentContainer: element.current,
-
-            ...cardOptions
-        });
-
-        imageLoader.lazyChildren(itemsContainer);
-    }, [cardOptions, items]);
-
     return (
-        <div ref={element} className='verticalSection hide'>
+        <div className='verticalSection'>
             <div className='sectionTitleContainer sectionTitleContainer-cards padded-left'>
                 {url && items.length > 5 ? (
                     <LinkButton
@@ -66,7 +52,11 @@ const SectionContainer: FC<SectionContainerProps> = ({
             >
                 <ItemsContainer
                     className='itemsContainer scrollSlider focuscontainer-x'
-                />
+                    reloadItems={reloadItems}
+                    queryKey={cardOptions.queryKey}
+                >
+                    <Cards items={items} cardOptions={cardOptions} />
+                </ItemsContainer>
             </Scroller>
         </div>
     );