Algolia search functionality

[bryanparmelee]

Adds Algolia search functionality to the donations collection. (Currently only works with production firestore database).

• package.json

  • install algolia search package, react instant search components for algolia search, and react instant search types.

• src/api/firebase-donations.ts

  • import newly-created type for donation details that includes the donation itself (as opposed to a document reference).
  • add getDonationById function that returns donation details with the donation.
  • function checks to ensure the donation details you are attempting to fetch was uploaded by current user, or current user has access to view all donations.

• src/app/donations/[id]/page.tsx

  • create new page to display donation details and the donation itself (as opposed to document reference).
  • used getDonationById function to fetch donationDetails based on the donation ID params in the url (/donations/XXXXXXXXXX)
  • TODO, additional styling to display images, determine which donation details should be displayed

• src/components/AlgoliaHitCard.tsx

  • component that displays the individual search results when searching for donations on the browse page.
  • Clicking one of these results redirects the user to the donation details page ((/donations/XXXXXXXXXX)

• src/components/AlgoliaHits.module.css

  • styles for the Algolia Hit Cards

• src/components/AlgoliaHits.tsx

  • This component controls what happens with each "hit" which is an algolia search result. In this case we simply map over each hit and return a clickable AlgoliaHitCard.

• src/components/AlgoliaSearchBox.tsx

  • this is the search box proper, mostly boilerplate code from Algolia. Uses existing styles for the original search box on the browse page.

• src/components/Browse.tsx

  • adds the newly create algolia components to the browse page, where the search bar lives.
  • clicking the magnifying glass opens the search bar. An aloglia API environment variable must be set to use the search otherwise, otherwise "Search currently disabled" appears instead.
  • The InstantSearch component is a provider that gives any components nested within access to the Alogolia search instance. The search bar, and if they exist, search results (hits) display here.

• src/models/donation-detail.ts

  • creates a new type interface that is donation details with its corresponding donation, as opposed to a document reference.

• src/types/AlgoliaTypes.ts

  • custom types for algolia to match our data shape.