From e3122774a6785ab50fe8e07aa34f06bb59f9854a Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Mon, 21 Feb 2022 09:19:03 +0100
Subject: [PATCH] refactor: reduce code changes

---
 src/routes/Addons/Addons.js     | 25 ++++++++++++----------
 src/routes/Discover/Discover.js | 37 ++++++++++++++++++++-------------
 src/routes/Library/Library.js   | 10 ++++-----
 3 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index 2489900be..4b7e9f53a 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -68,15 +68,6 @@ const Addons = ({ urlParams, queryParams }) => {
     const renderLogoFallback = React.useCallback(() => (
         <Icon className={styles['icon']} icon={'ic_addons'} />
     ), []);
-    const renderMultiselectsInputs = React.useCallback(() => {
-        return selectInputs.map((selectInput, index) => (
-            <Multiselect
-                {...selectInput}
-                key={index}
-                className={styles['select-input-container']}
-            />
-        ));
-    }, [selectInputs]);
     React.useLayoutEffect(() => {
         closeAddAddonModal();
         setSearch('');
@@ -91,7 +82,13 @@ const Addons = ({ urlParams, queryParams }) => {
                         <div className={styles['add-button-label']}>Add addon</div>
                     </Button>
                     <div className={styles['multiselect-inputs-container']}>
-                        { renderMultiselectsInputs() }
+                        {selectInputs.map((selectInput, index) => (
+                            <Multiselect
+                                {...selectInput}
+                                key={index}
+                                className={styles['select-input-container']}
+                            />
+                        ))}
                     </div>
                     <div className={styles['spacing']} />
                     <SearchBar
@@ -181,7 +178,13 @@ const Addons = ({ urlParams, queryParams }) => {
             {
                 filtersModalOpen ?
                     <ModalDialog title={'Addons filters'} className={styles['filters-modal']} onCloseRequest={closeFiltersModal}>
-                        { renderMultiselectsInputs() }
+                        {selectInputs.map((selectInput, index) => (
+                            <Multiselect
+                                {...selectInput}
+                                key={index}
+                                className={styles['select-input-container']}
+                            />
+                        ))}
                     </ModalDialog>
                     :
                     null
diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index f87f70d84..8f4ecc314 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -17,19 +17,6 @@ const Discover = ({ urlParams, queryParams }) => {
     const [inputsModalOpen, openInputsModal, closeInputsModal] = useBinaryState(false);
     const [addonModalOpen, openAddonModal, closeAddonModal] = useBinaryState(false);
     const [selectedMetaItemIndex, setSelectedMetaItemIndex] = React.useState(0);
-    const renderMultiselectsInputs = React.useCallback(() => {
-        return selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
-            <Multiselect
-                key={index}
-                className={styles['select-input']}
-                title={title}
-                options={options}
-                selected={selected}
-                renderLabelText={renderLabelText}
-                onSelect={onSelect}
-            />
-        ));
-    }, [selectInputs]);
     const selectedMetaItem = React.useMemo(() => {
         return discover.catalog !== null &&
             discover.catalog.content.type === 'Ready' &&
@@ -94,7 +81,17 @@ const Discover = ({ urlParams, queryParams }) => {
                         discover.defaultRequest ?
                             <div className={styles['selectable-inputs-container']}>
                                 <div className={styles['multiselect-inputs-container']}>
-                                    { renderMultiselectsInputs() }
+                                    {selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
+                                        <Multiselect
+                                            key={index}
+                                            className={styles['select-input']}
+                                            title={title}
+                                            options={options}
+                                            selected={selected}
+                                            renderLabelText={renderLabelText}
+                                            onSelect={onSelect}
+                                        />
+                                    ))}
                                 </div>
                                 <Button className={styles['filter-container']} title={'All filters'} onClick={openInputsModal}>
                                     <Icon className={styles['filter-icon']} icon={'ic_filter'} />
@@ -192,7 +189,17 @@ const Discover = ({ urlParams, queryParams }) => {
                 inputsModalOpen && discover.defaultRequest ?
                     <ModalDialog title={'Catalog filters'} className={styles['selectable-inputs-modal']} onCloseRequest={closeInputsModal}>
                         <div className={styles['selectable-input-container']}>
-                            { renderMultiselectsInputs() }
+                            {selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
+                                <Multiselect
+                                    key={index}
+                                    className={styles['select-input']}
+                                    title={title}
+                                    options={options}
+                                    selected={selected}
+                                    renderLabelText={renderLabelText}
+                                    onSelect={onSelect}
+                                />
+                            ))}
                         </div>
                     </ModalDialog>
                     :
diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js
index 7ff0374ef..dd9558946 100644
--- a/src/routes/Library/Library.js
+++ b/src/routes/Library/Library.js
@@ -48,10 +48,6 @@ const Library = ({ model, urlParams, queryParams }) => {
     const library = useLibrary(model, urlParams, queryParams);
     const [typeSelect, sortSelect, paginationInput] = useSelectableInputs(library);
     const [inputsModalOpen, openInputsModal, closeInputsModal] = useBinaryState(false);
-    const multiselectInputs = <>
-        <Multiselect {...typeSelect} className={styles['select-input-container']} />
-        <Multiselect {...sortSelect} className={styles['select-input-container']} />
-    </>;
     return (
         <MainNavBars className={styles['library-container']} route={model}>
             <div className={styles['library-content']}>
@@ -59,7 +55,8 @@ const Library = ({ model, urlParams, queryParams }) => {
                     model === 'continue_watching' || profile.auth !== null ?
                         <div className={styles['selectable-inputs-container']}>
                             <div className={styles['multiselect-inputs-container']}>
-                                { multiselectInputs }
+                                <Multiselect {...typeSelect} className={styles['select-input-container']} />
+                                <Multiselect {...sortSelect} className={styles['select-input-container']} />
                             </div>
                             <div className={styles['spacing']} />
                             {
@@ -120,7 +117,8 @@ const Library = ({ model, urlParams, queryParams }) => {
                 inputsModalOpen ?
                     <ModalDialog title={'Library filters'} className={styles['selectable-inputs-modal']} onCloseRequest={closeInputsModal}>
                         <div className={styles['selectable-input-container']}>
-                            { multiselectInputs }
+                            <Multiselect {...typeSelect} className={styles['select-input-container']} />
+                            <Multiselect {...sortSelect} className={styles['select-input-container']} />
                         </div>
                     </ModalDialog>
                     :