[FLOW 28] Added Review Distribution View #188
Conversation
|
What do you think about making the distributions popovers that opened up on click of the existing "easy" and "useful" text here? That would keep the UI cleaner so that the left border is still always the same roundedness as the "liked" circle bar 
|
|
That is actually very clever - will look into it |
|
|
||
| // Handle search result data from search worker message | ||
| const performSearch = (event: MessageEvent) => { | ||
| const performSearch = useCallback((event: MessageEvent) => { |
There was a problem hiding this comment.
Probably don't need to useCallback here since this is an uncomplicated fn with no deps, it just adds memory/allocation overhead: https://kentcdodds.com/blog/usememo-and-usecallback
There was a problem hiding this comment.
example.mp4
(EDIT: updated the video to not use the stupid zoomy animation thing)
Oh, I added this useCallback because I noticed it was adding a new event listener for every user input character in the searchBar, which I don't think is the expected behavior. You do make a good point though - I think there is some kind of underlying cache mechanism because I did console.time and somewhere, somehow React is already caching the data itself. But this makes it so there is just one event listener added after the component mounts (instead of a new eventListener every time the searchBar is edited)
There was a problem hiding this comment.
Hmm maybe that's an issue with useEffect below? That's where we add the listeners
There was a problem hiding this comment.
oh wait, good point - yeah I think that would be a better solution - just remove the handleUserKeyPress in the dependency array, since we can avoid two separate useCallbacks with that.
|
finally got this done without importing a gazillion material UI components demo.mp4 |
| "@fortawesome/react-fontawesome": "^0.1.8", | ||
| "@loadable/component": "^5.12.0", | ||
| "@tippy.js/react": "^3.1.1", | ||
| "@tippyjs/react": "^4.2.6", |
There was a problem hiding this comment.
Package was deprecated, which is why CSS styling wasn't showing up for some components using this. See: https://www.npmjs.com/package/@tippy.js/react
| setDeleting(true); | ||
| try { | ||
| const [response, status] = await makeAuthenticatedDELETERequest( | ||
| const [, status] = await makeAuthenticatedDELETERequest( |
There was a problem hiding this comment.
This is just correcting a lint error introduced in #184
| </PopoverWrapper> | ||
| ); | ||
|
|
||
| export default Popover; |
There was a problem hiding this comment.
PopoverWrapper is nearly identical to ToolTipWrapper, except instead it has an arrow and appears when clicked instead of being hovered over. Both use tippy.js/react.
demo.mp4
Associated Backend PR: UWFlow/uwflow#131
PR Summary Generated With Copilot:
This pull request introduces several changes to the codebase, focusing on updating dependencies, adding a Rating Distribution view to the professor and course view, fixing linting issues and a small error with search. The most important changes include updating the
@tippyjs/reactdependency, adding new components for displaying rating distributions, and refactoring the search bar's event handling.Dependency updates:
package.json: Updated the@tippyjs/reactdependency from version 3.1.1 to 4.2.6.Enhancements to rating display components:
src/components/display/Popover.tsx: Added a newPopovercomponent to encapsulate popover functionality.src/components/display/RatingBox.tsx: Integrated the newPopovercomponent and added aRatingDistributionGraphto display detailed rating distributions.src/components/display/RatingDistributionGraph.tsx: Created a newRatingDistributionGraphcomponent to visualize rating distributions.src/components/display/styles/Popover.tsx: Added styled components for thePopovercomponent.src/components/display/styles/RatingDistributionGraph.tsx: Added styled components for theRatingDistributionGraphcomponent.Refactoring and improvements to search functionality:
src/components/navigation/SearchBar.tsx: Refactored the search bar to useuseEffectfor handling search worker messages and key press events, improving readability and maintainability.GraphQL query updates:
src/graphql/fragments/CourseFragment.tsx: Added a new fragmentCourseReviewDistributionto fetch course review distributions.src/graphql/fragments/ProfFragment.tsx: Added a new fragmentProfReviewDistributionto fetch professor review distributions.src/graphql/queries/course/Course.tsx: Updated course queries to include the newCourseReviewDistributionfragment.src/graphql/queries/prof/Prof.tsx: Updated professor queries to include the newProfReviewDistributionfragment.Enhancements to course page:
src/pages/coursePage/CourseInfoHeader.tsx: Updated theCourseInfoHeadercomponent to include rating distributions in the props and display them using the new components.src/pages/coursePage/CoursePage.tsx: Added logic to process and pass rating distribution data to theCourseInfoHeadercomponent