I am having trouble performing an aggressive search with fuse, where my search result will only return the one item with matching title, or role from either Buffed or Nerfed genre.
I have a json file where I am pulling data from using Firebase. This is my json file:
//Buffed
firebase.firestore().collection('Buffed').add({
id: getUUID(),
title: 'Cyclops',
description: 'A mysterious celestial traveler'
role: 'Mage',
genre: 'Buffed',
});
firebase.firestore().collection('Buffed').add({
id: getUUID(),
title: 'Esmeralda',
description: 'Family Member of Agelta'
role: 'Mage',
genre: 'Buffed',
});
firebase.firestore().collection('Buffed').add({
id: getUUID(),
title: 'Paquito',
description: 'Nobody'
role: 'Fighter',
genre: 'Buffed',
});
//Nerfed
firebase.firestore().collection('Nerfed').add({
id: getUUID(),
title: 'Hayabusa',
description:'Shadow Warrior'
role: 'Assassin',
genre: 'Nerfed',
});
firebase.firestore().collection('Nerfed').add({
id: getUUID(),
title: 'Karrie',
description: 'War Machine'
role: 'Marksman',
genre: 'Nerfed',
});
firebase.firestore().collection('Nerfed').add({
id: getUUID(),
title: 'Gloo',
description: 'Dark Creature'
role: 'Tank',
genre: 'Nerfed',
});
I am getting these data from Fireabase using this filter.js file:
export default function selectionFilter({ Nerfed, Buffed } = []) {
return {
Buffed: [
{ title: 'Buffed', data: Buffed?.filter((item) => item.genre === 'Buffed') },
],
Nerfed: [
{ title: 'Nerfed', data: Nerfed?.filter((item) => item.genre === 'Nerfed') },
],
};
}
This is my search function located in a index.js file under header:
Header.Search = function HeaderSearch({ searchTerm, setSearchTerm, ...restProps }) {
const [searchActive, setSearchActive] = useState(false);
return (
<Search {...restProps}>
<SearchIcon onClick={() => setSearchActive((searchActive) => !searchActive)} data-testid="search-click">
<img src="/images/icons/search.png" alt="Search" />
</SearchIcon>
<SearchInput
value={searchTerm}
onChange={({ target }) => setSearchTerm(target.value)}
placeholder="Search Heroes"
active={searchActive}
data-testid="search-input"
/>
</Search>
);
};
This is my index.js file where I am doing my search using Fuse.
import React, { useState, useEffect, useContext } from 'react';
import { Card, Header, Loading} from '../components';
export function BrowseContainer ({slides}) {
const [category, setCategory] = useState('Buffed');
const [searchTerm, setSearchTerm] = useState('');
const [slideRows, setSlideRows] = useState([]);
useEffect(() => {
setSlideRows(slides[category]);
},
[slides, category]);
useEffect(() => {
const fuse = new Fuse(slideRows, { keys: ['data.genre','data.description', 'data.title', 'data.role'] });
const results = fuse.search(searchTerm).map(({ item }) => item);
if (slideRows.length > 0 && searchTerm.length > 3 && results.length > 0) {
setSlideRows(results);
} else {
setSlideRows(slides[category]);
}
}, [searchTerm]) ;
return profile.displayName ? (
<Header.Frame>
<Header.Group>
<Header.TextLink active={category === 'Buffed' ? 'true' : 'false'} onClick={() => setCategory('Buffed')}>
Buffed
</Header.TextLink>
<Header.TextLink active={category === 'Nerfed' ? 'true' : 'false'} onClick={() => setCategory('Nerfed')}>
Nerfed
</Header.TextLink>
</Header.Group>
<Header.Group>
<Header.Search searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
</Header.Group>
<Card.Group>
{slideRows.map((slideItem) => (
<Card key={`${category}-${slideItem.title.toLowerCase()}`}>
<Card.Title>{slideItem.title}</Card.Title>
<Card.Entities>
{slideItem.data.map((item) => (
<Card.Item key={item.docId} item={item}>
<Card.Image src={`/images/${category}/${item.title}/small.jpg`} />
<Card.Meta>
<Card.SubTitle>{item.title}</Card.SubTitle>
<Card.Text>{item.role}</Card.Text>
</Card.Meta>
</Card.Item>
))}
</Card.Entities>
<Card.Feature category={category}>
</Card.Feature>
</Card>
))}
</Card.Group>
)}
My search cons Result is returning the entire slideRow where the searched item is located. I only want to return the one item with matching title, or role from either Buffed or Nerfed genre.
Via Active questions tagged javascript - Stack Overflow https://ift.tt/EweaSqm
Comments
Post a Comment