DEV Community

Discussion on: How to add search to your Gatsby site

Collapse
 
ericphifer profile image
Eric • Edited

Could use some help. I'm trying to make a similar search component for a database and I messed something up, could anyone help? I think this is the relevant section...

const unflattenResults = (results) =>
  results.map((resident) => {
    const {
      id,
      firstname,
      nickname,
      spousename,
      lastname,
      address,
      secondaddress,
      thirdaddress,
      email,
      phone,
      organization,
      groupmembership,
      notes,
    } = resident;
    return {
      id,
      residents: {
        firstname,
        groupmembership,
        email,
        address,
        lastname,
        phone,
        organization,
        nickname,
        spousename,
        secondaddress,
        thirdaddress,
        notes,
      },
    };
  });

export default function HomePage({ data }) {
  const homepage = data.homepage.nodes;
  const residents = data.residents.nodes;
  const { index, store } = data.ressearch.nodes;

  const { search } = window.location;
  const queryify = new URLSearchParams(search).get('s');
  const [searchQuery, setSearchQuery] = useState(queryify || '');

  const results = useFlexSearch(searchQuery, index, store);
  const findings = unflattenResults(results);

  return (
<>
 <SearchBar searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
      <ResidentStyles>
        {residents.map((resident) => (
          <section className="card" key={resident.id}>
            <p className="title">{resident.firstname}</p>
          </section>
        ))}
      </ResidentStyles>
</>
Enter fullscreen mode Exit fullscreen mode