added the searchbar, filters, and sort by dropdown box #215
Conversation
…zed them correctly
…anything but removes the tools when filtering
…it makes a star off to the side for some reason
There was a problem hiding this comment.
Hey @0Jsnipes, left some comments down below. Please take a look when you get a chance and ask any questions that you may have.
Also would be great if you could provide a short video of you going through the features.
There was a problem hiding this comment.
Please remove 'React' from the import statement. Latest React versions no longer require this
| const [currentTab, setCurrentTab] = useState('All'); | ||
| const [searchQuery, setSearchQuery] = useState(''); | ||
| const [sortOption, setSortOption] = useState('Most Popular'); | ||
| const [favorites, setFavorites] = useState([]); // State to track favorite tool IDs |
There was a problem hiding this comment.
Lets also remove these unnecessary comments
| const handleToggleFavorite = (id) => { | ||
| setFavorites((prevFavorites) => | ||
| prevFavorites.includes(id) | ||
| ? prevFavorites.filter((favId) => favId !== id) // Remove if already in favorites |
| // Filters and Search | ||
| const renderFilters = () => ( | ||
| <Grid container direction="column" spacing={2}> | ||
| <Grid |
There was a problem hiding this comment.
Some of these components should have their styling attributes abstracted over onto the styles.js page. Lets emphasize seperation of concerns and follow what other files are doing as well.
| key={tab} | ||
| /> | ||
| ))} | ||
| // Filters and Search |
| const ToolCard = (props) => { | ||
| const { id, maskedToolUrl, backgroundImgURL, name, description } = props; | ||
|
|
||
| const ToolCard = ({ id, name, description, maskedToolUrl, backgroundImgURL, favorites = [], handleToggleFavorite }) => { |
There was a problem hiding this comment.
move new and existing props into its own line for better readability. Have the argument of this component as 'props' as before, but underneath, have a line of code that follows:
const ToolCard = (props) => {
const { id, name, description, etc...} = props
| </Typography> | ||
| <IconButton | ||
| onClick={(e) => { | ||
| e.stopPropagation(); // Prevent the click from propagating to the card |
There was a problem hiding this comment.
Let's ensure we keep spelling in check as well. Rename this to RecommendedForYou.jsx, as well as the folder.
| ); | ||
| }; | ||
|
|
||
| ReccomendedForYou.propTypes = { |
There was a problem hiding this comment.
This is not necessary. It would be better to use JSDocs for this case.
| </Grid> | ||
| ); | ||
| }; | ||
| const ToolsListingContainer = ({ |
There was a problem hiding this comment.
Rework all the props to be destructured into its own variable called props, similar to how it was before, but with the new props you've added as well.
updated userSlice.js for adding pending, fulfilled and rejected slices for the updateUserFavorite function. updated user.js by adding updateUserFavorite Async function writing to firestore. updated HomePage.jsx to dispatch updateUserFavorite action, and update local 'favorites' state variable, and useEffect to update current state if user-state in redux store changes.
added user favorite tools functionality
… disappear when there are none
Description
Provide a concise summary of the changes in this PR. Include the motivation behind these changes and any relevant context.
I added the search bar, filter buttons, and sort by drop-down box. these were asked to be added in the #196 issue
I also added the favorites section and recommended tools section but did not implement them yet I was unsure of the functionality of the favorites and just started working with another collaborator on the issue.
Related Issue
#196
If this PR addresses an issue, link to it here.
#196
Type of Change
Please select the type(s) of change that apply and delete those that do not.
Proposed Solution
Describe your code changes in detail. Explain how you implemented your solution and any design decisions you made.
How to Test
Provide instructions on how to test these changes. Include details on test configurations, test cases, and expected outcomes.
Unit Tests
List the unit tests added or modified to verify your changes.
added 3 tests to ensure the functionality of the features
filter.test.jsx
searchbar.test.jsx
sortdropdown.jsx
Documentation Updates
Indicate whether documentation needs to be updated due to this PR.
If yes, describe what documentation updates are needed and link to the relevant documentation.
Checklist
Additional Information
Add any other information that might be useful for the reviewers.
