spt/db-website
spt/db-website
0
0
Fork 0
mirror of https://github.com/sp-tarkov/db-website.git synced 2025-02-08 04:50:46 -05:00
Code

Fix for search bar resetting it's contents when attempting to fully delete them (#3)

Browse Source 
Yes, I know that not adding all hook dependencies is bad practice.
I don't have the time or energy to refactor it properly.

Co-authored-by: Terkoiz <terkoiz@spt.dev>
Reviewed-on: SPT-AKI/DB-Website#3
This commit is contained in:
Terkoiz 2023-08-30 15:24:55 +00:00
parent 6ea3100ecc
commit 945bc8eca1
1 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/pages/mainPageComponents/SearchArea.tsx
View File

@ -90,7 +90,17 @@ export const SearchArea = () => {
// eslint-disable-next-line // eslint-disable-next-line
}, []) // Need to only be created on startup }, []) // Need to only be created on startup
useEffect(() => initHierarchy(), [initHierarchy]) useEffect(() => {
initHierarchy()
// This should only run once on component load
if (!searchInputState && params.id) {
const newId = params.id.trim();
setSearchInput(newId);
(async () => await handleInput(newId))();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [initHierarchy]) // Only need this to run once
useEffect(()=>{ useEffect(()=>{
if (selectedItem){ if (selectedItem){
@ -119,15 +129,6 @@ export const SearchArea = () => {
setIsBusy(false) setIsBusy(false)
}, [handleIDInput, handleNameInput, isbusy, setSelectedItem]) }, [handleIDInput, handleNameInput, isbusy, setSelectedItem])
useEffect(() => {
if (!searchInputState && params.id) {
const newId = params.id.trim();
console.log(newId);
setSearchInput(newId);
(async () => await handleInput(newId))();
}
}, [params, searchInputState, setSearchInput, handleInput, navigate])
const formatDisplayItems = () => { const formatDisplayItems = () => {
// If loading // If loading
if (isbusy) return <CircularProgress size={100}/> if (isbusy) return <CircularProgress size={100}/>
@ -149,7 +150,7 @@ export const SearchArea = () => {
} else return <Typography id='search-no-data'>No data to display</Typography> } else return <Typography id='search-no-data'>No data to display</Typography>
} }
const findOptionValue = (option: ItemOption, value: ItemOption): boolean => { const findOptionValue = (option: IItemOption, value: IItemOption): boolean => {
return option.name?.toLocaleLowerCase() === value.name?.toLocaleLowerCase() return option.name?.toLocaleLowerCase() === value.name?.toLocaleLowerCase()
|| option.id?.toLocaleLowerCase() === value.id?.toLocaleLowerCase() || option.id?.toLocaleLowerCase() === value.id?.toLocaleLowerCase()
|| option.shortName?.toLocaleLowerCase() === value.shortName?.toLocaleLowerCase() || option.shortName?.toLocaleLowerCase() === value.shortName?.toLocaleLowerCase()
@ -160,7 +161,7 @@ export const SearchArea = () => {
<Autocomplete <Autocomplete
id='search-autocomplete' id='search-autocomplete'
options={selectOptions.map((elt) => ({name: elt.name, shortName: elt.shortName, id: elt.id}))} options={selectOptions.map((elt) => ({name: elt.name, shortName: elt.shortName, id: elt.id}))}
getOptionLabel={(option) => option.name ? option.name : option.id} getOptionLabel={(option) => (option.name ? option.name : option.id) ?? ''}
isOptionEqualToValue={(option, value) => findOptionValue(option, value)} isOptionEqualToValue={(option, value) => findOptionValue(option, value)}
open={!isbusy && searchInputState.length >= searchThreshold && (searchInputState !== selectedItem?.locale.Name && searchInputState !== selectedItem?.item._name)} open={!isbusy && searchInputState.length >= searchThreshold && (searchInputState !== selectedItem?.locale.Name && searchInputState !== selectedItem?.item._name)}
className={classes.autocomplete} className={classes.autocomplete}