1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

Cleanup SearchPage implementation

This commit is contained in:
Bill Thornton 2021-05-28 15:58:41 -04:00
parent b9dacecf22
commit 436a59b56b
3 changed files with 96 additions and 46 deletions

View file

@ -1,57 +1,22 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React, { useEffect, useRef, useState } from 'react'; import React, { useState } from 'react';
import { Events } from 'jellyfin-apiclient';
import SearchFields from '../search/searchfields'; import SearchFieldsComponent from '../search/SearchFieldsComponent';
import SearchResults from '../search/searchresults'; import SearchResultsComponent from '../search/SearchResultsComponent';
const SearchPage = ({ serverId, parentId, collectionType }) => { const SearchPage = ({ serverId, parentId, collectionType }) => {
const [ searchFields, setSearchFields ] = useState(null); const [ query, setQuery ] = useState(null);
const searchFieldsContainer = useRef(null);
const [ searchResults, setSearchResults ] = useState(null);
const searchResultsContainer = useRef(null);
useEffect(() => {
if (!searchFields) {
setSearchFields(
new SearchFields({
element: searchFieldsContainer.current
})
);
setSearchResults(
new SearchResults({
element: searchResultsContainer.current,
serverId: serverId || ApiClient.serverId(),
parentId,
collectionType
})
);
}
return () => {
searchFields?.destroy();
searchResults?.destroy();
};
}, []);
useEffect(() => {
if (searchFields) {
Events.on(searchFields, 'search', (e, value) => {
searchResults.search(value);
});
}
}, [ searchFields ]);
return ( return (
<> <>
<div <SearchFieldsComponent
className='padded-left padded-right searchFields' onSearch={setQuery}
ref={searchFieldsContainer}
/> />
<div <SearchResultsComponent
className='searchResults padded-bottom-page padded-top' serverId={serverId || ApiClient.serverId()}
ref={searchResultsContainer} parentId={parentId}
collectionType={collectionType}
query={query}
/> />
</> </>
); );

View file

@ -0,0 +1,41 @@
import { Events } from 'jellyfin-apiclient';
import PropTypes from 'prop-types';
import React, { useEffect, useRef, useState } from 'react';
import SearchFields from './searchfields';
const SearchFieldsComponent = ({ onSearch = () => {} }) => {
const [ searchFields, setSearchFields ] = useState(null);
const searchFieldsElement = useRef(null);
useEffect(() => {
setSearchFields(
new SearchFields({ element: searchFieldsElement.current })
);
return () => {
searchFields?.destroy();
};
}, []);
useEffect(() => {
if (searchFields) {
Events.on(searchFields, 'search', (e, value) => {
onSearch(value);
});
}
}, [ searchFields ]);
return (
<div
className='padded-left padded-right searchFields'
ref={searchFieldsElement}
/>
);
};
SearchFieldsComponent.propTypes = {
onSearch: PropTypes.func
};
export default SearchFieldsComponent;

View file

@ -0,0 +1,44 @@
import PropTypes from 'prop-types';
import React, { useEffect, useRef, useState } from 'react';
import SearchResults from './searchresults';
const SearchResultsComponent = ({ serverId, parentId, collectionType, query }) => {
const [ searchResults, setSearchResults ] = useState(null);
const searchResultsElement = useRef(null);
useEffect(() => {
setSearchResults(
new SearchResults({
element: searchResultsElement.current,
serverId: serverId || ApiClient.serverId(),
parentId,
collectionType
})
);
return () => {
searchResults?.destroy();
};
}, []);
useEffect(() => {
searchResults?.search(query);
}, [ query ]);
return (
<div
className='searchResults padded-bottom-page padded-top'
ref={searchResultsElement}
/>
);
};
SearchResultsComponent.propTypes = {
serverId: PropTypes.string,
parentId: PropTypes.string,
collectionType: PropTypes.string,
query: PropTypes.string
};
export default SearchResultsComponent;