search

awais-124 / valorant-api

Valorant API Usage
https://valorant-agents-bundles.netlify.app/
0 stars 1 forks source link

Add a search bar with search functionality. #2

Closed awais-124 closed 3 weeks ago

awais-124 commented 3 weeks ago

Feature Request

Add a search bar with backend functionality.

What needs to be done.

  • Add a search bar on top of page.
  • Add it below navbar.
  • Make it responsive
  • Add functionality so that users can search bundles and agents.
  • Sort items based on search keystroke.
  • Sort on every key stroke.
  • Feel free to style search bar.

Contributing

  • Fork the repo.
  • Create a new branch with name as 'ISSUE-(Issue Number)'.
  • Create a pull request once done.
LaibaKhalil61 commented 3 weeks ago

I'd like to do it

awais-124 commented 3 weeks ago

I'd like to do it

Yes plz.

vincyy24 commented 3 weeks ago
  • Sort items based on search keystroke

Hi, do you mean Sort or Filter on every keystroke?

awais-124 commented 3 weeks ago
  • Sort items based on search keystroke

Hi, do you mean Sort or Filter on every keystroke?

Yes, its filter in fact. Thank You!

LaibaKhalil61 commented 3 weeks ago

Is the search bar is to be added only on Agents and Bundles page? As you have mentioned "Add functionality so that users can search bundles and agents."

awais-124 commented 3 weeks ago

Is the search bar is to be added only on Agents and Bundles page? As you have mentioned "Add functionality so that users can search bundles and agents."

Yes only on them.

vincyy24 commented 3 weeks ago

Hey @awais-124, I tried to complete the same issue, can you take a look? Here's the branch

awais-124 commented 3 weeks ago

Hey @awais-124, I tried to complete the same issue, can you take a look? Here's the branch

Good Job!. Just need to make few changes.

vincyy24 commented 3 weeks ago

Hey @awais-124, I tried to complete the same issue, can you take a look? Here's the branch

Good Job!. Just need to make few changes.

  • Move the search-bar to right side of web page.
  • Align it with Main Heading. Keep them both at same level row-wise.
  • Currently you are searching if query is included in agents'/bundles' name, change it startsWith.
  • Use .startsWith() method.
const filterBySearch = (data, key) =>
      data.filter((item) =>
          item[key].toUpperCase().includes(searchValue.toUpperCase()) 
      );

Just committed the changes, should I create a pull request now or any more changes? I tried to keep the heading and the search bar at same level, but at smaller screens it could break the design so I went with column flow for smaller widths..

awais-124 commented 3 weeks ago

Hey @awais-124, I tried to complete the same issue, can you take a look? Here's the branch

Good Job!. Just need to make few changes.

  • Move the search-bar to right side of web page.
  • Align it with Main Heading. Keep them both at same level row-wise.
  • Currently you are searching if query is included in agents'/bundles' name, change it startsWith.
  • Use .startsWith() method.
const filterBySearch = (data, key) =>
        data.filter((item) =>
            item[key].toUpperCase().includes(searchValue.toUpperCase()) 
        );

Just committed the changes, should I create a pull request now or any more changes? I tried to keep the heading and the search bar at same level, but at smaller screens it could break the design so I went with column flow for smaller widths..