search

Namit2111 / bible-verse-finder

https://bible-verse-finder.vercel.app
GNU General Public License v3.0
23 stars 31 forks source link

Implement "See More" Functionality for Search Results #27

Closed JustinhSE closed 3 weeks ago

JustinhSE commented 1 month ago

Overview

Currently, our application only displays the top 5 search results for verse similarity. We need to enhance this feature to allow users to view more results in a paginated manner. This will improve user experience by providing access to a broader range of similar verses while maintaining a clean and manageable interface.

Tasks

  1. Modify app.py to return more than 5 results:

    • Increase the number of results returned to a maximum of 20.
    • Ensure only results with similarity percentages higher than 10% are included.

  2. Update the VerseSearch component in the frontend:

    • Initially display only the top 5 results.
    • Add a "See More" button below the initial results.
    • Implement logic to show 5 more results each time the "See More" button is clicked.
    • Limit the "See More" functionality to a maximum of 3 clicks (15 additional results total).
    • Hide the "See More" button when all available results are displayed or after 3 clicks.

  3. Update the UI to accommodate the new feature:

    • Style the "See More" button to match the existing design.
    • Implement smooth transitions when new results are loaded.

  4. Add error handling:

    • Handle cases where fewer than 5 additional results are available.
anjali-vaish commented 1 month ago

@JustinhSE I'd like to work on this. Could you please assign this to me. Thanks!

rairohit17 commented 1 month ago

@JustinhSE i would like to work on this "see more " functionality

Proposed Approach:

Backend:

Modify app.py to return up to 20 similar verses.

Frontend:

Update the VerseSearch component to:

  1. Initially display the top 5 results.
  2. Implement filtering to filter verses into an array containing verses with a similarity higher than 10%.
  3. Add a "See More" button to load 5 additional results each time it's clicked, with a maximum of 3 clicks (15 additional results).
  4. Implement a visibleCount state to track how many results to show. Hide the button when all results are displayed or after 3 clicks.
JustinhSE commented 1 month ago

@anjali-vaish and @rairohit17 saw both of you expressed interest. I saw one of you had a breakdown of how you would solve it. I'm confirming to make sure you are still working on it @rairohit17 otherwise @anjali-vaish will get the issue