Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 17:15:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: reduce code changes

Browse source
This commit is contained in:
Tim 2022-02-21 09:19:03 +01:00
parent f18341f8ab
commit e3122774a6
3 changed files with 40 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/routes/Addons/Addons.js
View file

@ -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

37
src/routes/Discover/Discover.js
View file

@ -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>
:

10
src/routes/Library/Library.js
View file

@ -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>
: