From 10e13f726272b7c01f0299dd668be86fc6481933 Mon Sep 17 00:00:00 2001
From: Alexandru Branza <branza.alex@gmail.com>
Date: Thu, 29 Jun 2023 20:46:14 +0300
Subject: [PATCH 1/2] Discover: Scroll Up on Options Change

---
 src/routes/Discover/Discover.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index aadd947e0..1f845409b 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -19,6 +19,7 @@ const Discover = ({ urlParams, queryParams }) => {
     const [inputsModalOpen, openInputsModal, closeInputsModal] = useBinaryState(false);
     const [addonModalOpen, openAddonModal, closeAddonModal] = useBinaryState(false);
     const [selectedMetaItemIndex, setSelectedMetaItemIndex] = React.useState(0);
+    const metasContainerRef = React.useRef(null);
     const selectedMetaItem = React.useMemo(() => {
         return discover.catalog !== null &&
             discover.catalog.content.type === 'Ready' &&
@@ -75,6 +76,11 @@ const Discover = ({ urlParams, queryParams }) => {
         closeAddonModal();
         setSelectedMetaItemIndex(0);
     }, [discover.selected]);
+    const scrollUpOnChange = React.useCallback((onSelect, event) => {
+        if ((metasContainerRef || {}).current || {})
+            metasContainerRef.current.scrollTo(0, 0);
+        onSelect(event);
+    }, []);
     return (
         <MainNavBars className={styles['discover-container']} route={'discover'}>
             <div className={styles['discover-content']}>
@@ -88,7 +94,7 @@ const Discover = ({ urlParams, queryParams }) => {
                                 options={options}
                                 selected={selected}
                                 renderLabelText={renderLabelText}
-                                onSelect={onSelect}
+                                onSelect={scrollUpOnChange.bind(null, onSelect)}
                             />
                         ))}
                         <Button className={styles['filter-container']} title={'All filters'} onClick={openInputsModal}>
@@ -133,7 +139,7 @@ const Discover = ({ urlParams, queryParams }) => {
                                         ))}
                                     </div>
                                     :
-                                    <div className={classnames(styles['meta-items-container'], 'animation-fade-in')} onScroll={onScroll} onFocusCapture={metaItemsOnFocusCapture}>
+                                    <div className={classnames(styles['meta-items-container'], 'animation-fade-in')} ref={metasContainerRef} onScroll={onScroll} onFocusCapture={metaItemsOnFocusCapture}>
                                         {discover.catalog.content.content.map((metaItem, index) => (
                                             <MetaItem
                                                 key={index}
@@ -186,7 +192,7 @@ const Discover = ({ urlParams, queryParams }) => {
                                 options={options}
                                 selected={selected}
                                 renderLabelText={renderLabelText}
-                                onSelect={onSelect}
+                                onSelect={scrollUpOnChange.bind(null, onSelect)}
                             />
                         ))}
                     </ModalDialog>

From 949edb90f2c00a99ad71400aa4aaf4db89ea990f Mon Sep 17 00:00:00 2001
From: Alexandru Branza <branza.alex@gmail.com>
Date: Fri, 7 Jul 2023 14:34:26 +0300
Subject: [PATCH 2/2] Simplify Logic for Scrolling Up on Discover Filter Change

---
 src/routes/Discover/Discover.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index 1f845409b..1669a6d22 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -19,7 +19,12 @@ const Discover = ({ urlParams, queryParams }) => {
     const [inputsModalOpen, openInputsModal, closeInputsModal] = useBinaryState(false);
     const [addonModalOpen, openAddonModal, closeAddonModal] = useBinaryState(false);
     const [selectedMetaItemIndex, setSelectedMetaItemIndex] = React.useState(0);
-    const metasContainerRef = React.useRef(null);
+    const metasContainerRef = React.useRef();
+    React.useEffect(() => {
+        if (discover.catalog?.content.type === 'Loading') {
+            metasContainerRef.current.scrollTop = 0;
+        }
+    }, [discover.catalog]);
     const selectedMetaItem = React.useMemo(() => {
         return discover.catalog !== null &&
             discover.catalog.content.type === 'Ready' &&
@@ -76,11 +81,6 @@ const Discover = ({ urlParams, queryParams }) => {
         closeAddonModal();
         setSelectedMetaItemIndex(0);
     }, [discover.selected]);
-    const scrollUpOnChange = React.useCallback((onSelect, event) => {
-        if ((metasContainerRef || {}).current || {})
-            metasContainerRef.current.scrollTo(0, 0);
-        onSelect(event);
-    }, []);
     return (
         <MainNavBars className={styles['discover-container']} route={'discover'}>
             <div className={styles['discover-content']}>
@@ -94,7 +94,7 @@ const Discover = ({ urlParams, queryParams }) => {
                                 options={options}
                                 selected={selected}
                                 renderLabelText={renderLabelText}
-                                onSelect={scrollUpOnChange.bind(null, onSelect)}
+                                onSelect={onSelect}
                             />
                         ))}
                         <Button className={styles['filter-container']} title={'All filters'} onClick={openInputsModal}>
@@ -128,7 +128,7 @@ const Discover = ({ urlParams, queryParams }) => {
                                 </div>
                                 :
                                 discover.catalog.content.type === 'Loading' ?
-                                    <div className={classnames(styles['meta-items-container'], 'animation-fade-in')}>
+                                    <div ref={metasContainerRef} className={classnames(styles['meta-items-container'], 'animation-fade-in')}>
                                         {Array(CONSTANTS.CATALOG_PAGE_SIZE).fill(null).map((_, index) => (
                                             <div key={index} className={styles['meta-item-placeholder']}>
                                                 <div className={styles['poster-container']} />
@@ -139,7 +139,7 @@ const Discover = ({ urlParams, queryParams }) => {
                                         ))}
                                     </div>
                                     :
-                                    <div className={classnames(styles['meta-items-container'], 'animation-fade-in')} ref={metasContainerRef} onScroll={onScroll} onFocusCapture={metaItemsOnFocusCapture}>
+                                    <div ref={metasContainerRef} className={classnames(styles['meta-items-container'], 'animation-fade-in')} onScroll={onScroll} onFocusCapture={metaItemsOnFocusCapture}>
                                         {discover.catalog.content.content.map((metaItem, index) => (
                                             <MetaItem
                                                 key={index}
@@ -192,7 +192,7 @@ const Discover = ({ urlParams, queryParams }) => {
                                 options={options}
                                 selected={selected}
                                 renderLabelText={renderLabelText}
-                                onSelect={scrollUpOnChange.bind(null, onSelect)}
+                                onSelect={onSelect}
                             />
                         ))}
                     </ModalDialog>