Added sorting functionality to ApartmentCards component, Added sortApartments.ts file.

[kea-roy]

Summary

This pull request is the second step towards implementing improved sorting options on apartment card lists.

1. Added a DropDown component for the property to sort by

• Current options (need feedback on what to keep/add)
• (Relevance, Date Added, Address, LandlordID, Avg Price, Avg Rating)

2. Added a DropDown component for the direction to sort by (low to high/ high to low)
3. Added sortApartments.ts file (Not completed on documentation, waiting for feedback first before removing commented code)

• Supports all fields in CardData, ApartmentWithID, and 'originalOrder'
• Clones array to make sure original order can be preserved

Test Plan

Tested on different screen sizes and mobile (for drop-down component look)
Tested sorting on different search results to ensure the relevance property sorts correctly.
Tested sorting on all fields with home page results, college town results, west results, and north results

Notes

The Dropdown menu item list has not been finalized and I'm including various items currently in this poll request to get feedback on which ones to keep/add.

The documentation for sortApartments.ts is also not completed. I've included commented-out code in case I need to use it after feedback.

[dti-github-bot]

[diff-counting] Significant lines: 424.

[kea-roy]

Commit Changes

1. Adjusted sorting options after feedback from designers and product managers.
2. Simplified sorting to a single drop-down menu (the "high to low and low to high" drop-down has been removed and each sorting parameter now has multiple options (ex: high price/ low price) added into the first drop down).
3. Removed extra code from sortApartments.
4. Simplified code using ternary conditional rendering.
5. Adjusted dropdown component UI to better match figma (including adding a bullet point to indicate the currently selected option and margin spacing)

[kea-roy]

Commit Changes

1. Removed unnecessary window-size tracking code in DropDown.tsx file that tracked whether the window was small
2. Improved documentation for ApartmentCards.tsx to mention sorting dropdown menu.
3. Added documentation to DropDown.tsx to explain what the component does.

[kea-roy]

Good job on your first task! Your changes to the types, average ratings/price, setting default value, and addition of the drop down arrow are great and very useful. However, the removal of isMobile has caused the border radius on mobile display to no longer be curved. You can return the previous code for isMobile or change it if you want to. Desktop display (good): Mobile display after your changes (no longer curved): Mobile display before your changes (still curved):

Commit Changes

1. Fixed issue on ApartmentPage.tsx by styling the mobile version of the dropdown.

[kea-roy]

Commit Changes

1. Removed bullet points on dropdown design after additional designer feedback.
2. Cleared imports that were not used.

[CasperL1218]

PR Review

Your implementation of the sortApartment.ts is extensive and complete, covering all the cases for sorting the apartments. The sorting system is robust and the display of the apartment list all look correct.

I believe these can be improved:

1. Include some frontend UI photos in your PR/commits to better showcase the functionalities
2. I noticed that there are some inconsistencies with the font styling with the dropdown menu.

• The "Sort by: " text should not have the colon
• The option texts should not be all capitalized
• The "Sort by" text and the text options of the dropdown should have a larger font
  For comparison:

The "Sort by" and the option texts should have a 24 : 18 ratio to the text I highlighted below where it currently has a 18 : 18 so 1 : 1 ratio.

Overall these are minor issues and the implementation is great.

[kea-roy]

PR Review

Your implementation of the sortApartment.ts is extensive and complete, covering all the cases for sorting the apartments. The sorting system is robust and the display of the apartment list all look correct.

I believe these can be improved:

1. Include some frontend UI photos in your PR/commits to better showcase the functionalities
2. I noticed that there are some inconsistencies with the font styling with the dropdown menu.

• The "Sort by: " text should not have the colon
• The option texts should not be all capitalized
• The "Sort by" text and the text options of the dropdown should have a larger font
  For comparison:

The "Sort by" and the option texts should have a 24 : 18 ratio to the text I highlighted below where it currently has a 18 : 18 so 1 : 1 ratio.
Overall these are minor issues and the implementation is great.

Thank you Casper for noticing those issues! I've created pull request #360 to resolve the issues you noticed and improve the code.

[kea-roy]

Commit Changes

1. Resolved merge errors in BookmarksPage.tsx
2. Replaced the old dropdown implementation on the bookmarks page with the new DropDownWithLabel implementation.
3. Adjusted DropDown and DropDownWithLabel to block word wrap (will always stay inline).

[kea-roy]

Commit Changes

1. Merged main into branch
2. Adjusted DropDown to be compatible with all uses of the DropDown component, including in ReviewModal.
3. Resolved some compile warnings in DropDown and ReviewModal (== to ===)

[CasperL1218]

The PR is complete and comprehensive, especially with detailed documentation that make the code easy to follow. Just notice that there are some unused imports and fields in:

1. frontend/src/components/Apartment/Header.tsx
2. frontend/src/components/FAQ/CollapsibleQuestion.tsx
3. frontend/src/components/Landlord/Header.tsx
4. frontend/src/components/PhotoCarousel/PhotoCarousel.tsx

Overall it's a great job!

[kea-roy]

Commit Changes

1. Adjusted dropdown styling and size in DropDown and DropDownWithLabel components to better match current website scaling.
2. Fixed ReviewModal custom dropdown styling to be left-aligned.
3. Adjusted padding around the dropdown on pages with dropdown to match changes.

[ggsawatyanon]

Good job, Kea-Roy, this is a useful feature. Good documentation and styling. I also like the animation you added.