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:
parent
b9dacecf22
commit
436a59b56b
3 changed files with 96 additions and 46 deletions
|
@ -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}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
41
src/components/search/SearchFieldsComponent.js
Normal file
41
src/components/search/SearchFieldsComponent.js
Normal 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;
|
44
src/components/search/SearchResultsComponent.js
Normal file
44
src/components/search/SearchResultsComponent.js
Normal 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;
|
Loading…
Add table
Add a link
Reference in a new issue