nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-26 23:50:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix catalog search issues

Browse Source
This commit is contained in:
Bill 2022-09-22 00:07:28 -04:00
parent a3212f8a16
commit 71e8d8a3a1
2 changed files with 66 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/catalog/views/page/common/CatalogSearchView.tsx
View File

@ -1,6 +1,6 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IFurnitureData } from '@nitrots/nitro-renderer'; import { IFurnitureData } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import { CatalogPage, CatalogType, FilterCatalogNode, FurnitureOffer, GetOfferNodes, GetSessionDataManager, ICatalogNode, ICatalogPage, IPurchasableOffer, LocalizeText, PageLocalization, SearchResult } from '../../../../../api'; import { CatalogPage, CatalogType, FilterCatalogNode, FurnitureOffer, GetOfferNodes, GetSessionDataManager, ICatalogNode, ICatalogPage, IPurchasableOffer, LocalizeText, PageLocalization, SearchResult } from '../../../../../api';
import { Button, Flex } from '../../../../../common'; import { Button, Flex } from '../../../../../common';
import { useCatalog } from '../../../../../hooks'; import { useCatalog } from '../../../../../hooks';
@ -8,32 +8,21 @@ import { useCatalog } from '../../../../../hooks';
export const CatalogSearchView: FC<{}> = props => export const CatalogSearchView: FC<{}> = props =>
{ {
const [ searchValue, setSearchValue ] = useState(''); const [ searchValue, setSearchValue ] = useState('');
const [ needsProcessing, setNeedsProcessing ] = useState(false);
const { currentType = null, rootNode = null, offersToNodes = null, searchResult = null, setSearchResult = null, setCurrentPage = null } = useCatalog(); const { currentType = null, rootNode = null, offersToNodes = null, searchResult = null, setSearchResult = null, setCurrentPage = null } = useCatalog();
const updateSearchValue = (value: string) => useEffect(() =>
{ {
if(!value || !value.length) let search = searchValue?.toLocaleLowerCase().replace(' ', '');
{
setSearchValue('');
if(searchResult) setSearchResult(null); if(!search || !search.length)
}
else
{ {
setSearchValue(value); setSearchResult(null);
setNeedsProcessing(true);
} return;
} }
const processSearch = useCallback((search: string) => const timeout = setTimeout(() =>
{ {
setNeedsProcessing(false);
search = search.toLocaleLowerCase().replace(' ', '');
if(!search || !search.length) return;
const furnitureDatas = GetSessionDataManager().getAllFurnitureData({ const furnitureDatas = GetSessionDataManager().getAllFurnitureData({
loadFurnitureData: null loadFurnitureData: null
}); });
@ -82,30 +71,24 @@ export const CatalogSearchView: FC<{}> = props =>
FilterCatalogNode(search, foundFurniLines, rootNode, nodes); FilterCatalogNode(search, foundFurniLines, rootNode, nodes);
setCurrentPage((new CatalogPage(-1, 'default_3x3', new PageLocalization([], []), offers, false, 1) as ICatalogPage));
setSearchResult(new SearchResult(search, offers, nodes.filter(node => (node.isVisible)))); setSearchResult(new SearchResult(search, offers, nodes.filter(node => (node.isVisible))));
}, [ offersToNodes, currentType, rootNode, setCurrentPage, setSearchResult ]); setCurrentPage((new CatalogPage(-1, 'default_3x3', new PageLocalization([], []), offers, false, 1) as ICatalogPage));
}, 300);
useEffect(() =>
{
if(!needsProcessing) return;
const timeout = setTimeout(() => processSearch(searchValue), 300);
return () => clearTimeout(timeout); return () => clearTimeout(timeout);
}, [ searchValue, needsProcessing, processSearch ]); }, [ offersToNodes, currentType, rootNode, searchValue, setCurrentPage, setSearchResult ]);
return ( return (
<Flex gap={ 1 }> <Flex gap={ 1 }>
<Flex fullWidth alignItems="center" position="relative"> <Flex fullWidth alignItems="center" position="relative">
<input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => updateSearchValue(event.target.value) } onKeyDown={ event => ((event.code === 'Enter') || (event.code === 'NumpadEnter')) && processSearch(searchValue) } /> <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
</Flex> </Flex>
{ (!searchValue || !searchValue.length) && { (!searchValue || !searchValue.length) &&
<Button variant="primary" className="catalog-search-button"> <Button variant="primary" className="catalog-search-button">
<FontAwesomeIcon icon="search" /> <FontAwesomeIcon icon="search" />
</Button> } </Button> }
{ searchValue && !!searchValue.length && { searchValue && !!searchValue.length &&
<Button variant="primary" className="catalog-search-button" onClick={ event => updateSearchValue('') }> <Button variant="primary" className="catalog-search-button" onClick={ event => setSearchValue('') }>
<FontAwesomeIcon icon="times" /> <FontAwesomeIcon icon="times" />
</Button> } </Button> }
</Flex> </Flex>

2
src/hooks/catalog/useCatalog.ts
View File

@ -357,7 +357,7 @@ const useCatalogState = () =>
const openPageById = useCallback((id: number) => const openPageById = useCallback((id: number) =>
{ {
setSearchResult(null); if(id !== -1) setSearchResult(null);
if(!isVisible) if(!isVisible)
{ {