Bringing over changes to develop + Sprint task for this week (and also more stuff)

nabilridhwan commented 1 year ago

The merging part

Combine changes from PR #118
Combine changes from PR #125
- Adds Cypress scripts for web
- Add testing for home page

New items (as part of the Sprint and other QOL improvements):

The Container component now has an upper limit max width of 1440px. This fixes the issue of the marketplace page spanning the whole page and fixed the padding.
Fixed hyperlinks not going to the proper link when the element is clicked from the home page (e.g. Clicking on category brings you to the wrong page)
Add Layout for home and product/[id] page using getLayout()
Carousel left and right buttons are now outside of the Carousel (to prevent misclicks) and half-transparent white in color and appropriately spaced. The buttons also only show up when there is more than 1 item in the Carousel.
Carousel component has a new prop called shwoButtons which will programatically show the next/previous buttons.
Changed to Next JS Image component for Advertisement component.
Add listing and category skeleton element to show in place while the page is loading
Better error handling for Supabase + React Query
Remove width and change shadow size for CardBackground
Add flex-wrap class to User and FlexContainer component to make it responsive.
Add font-semibold to Title component.
Temporary change to Description component to return <p> tag only.
Made /product/[id] to be SSR and also programatically fetch images for the listing. The product page also has layout changes and responsive-first design).

Additional new changes:

Made the "Chat Now" card in Product page to span full width on mobile.
Implement the line-clamp property from tailwind css
In the product page, it will show if the price is for a unit price and also show if its negotiable or not.

Note

In /products/[id] page, the Carousel images does not use the Image component because of sizing issues, I felt that as of now, I can use the img tag to get the desired style I want without nesting the Image component in hell. Any improvements, please do let me know :)

[x] Bug fix (non-breaking change which fixes an issue)
[ ] Issue fix (non-breaking change that addresses existing opened issue)
[x] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to change)
[x] Refactoring change (refactoring change must not apply any form of functional change)

[x] Related issues linked using fixes #number. / There is no issue fix.
[x] Unit tests or E2E tests added for any new feature changes. / There is no new feature that requires test.
[x] Ensured that there's no linter errors.
[x] Ran the full set of testings and coverage reports exceed 80%. / There is currently no test.
[x] All Merge Conflicts have been fully resolved.
[x] Branch is rebased off the target branch.
[x] This PR is complete and does not have incomplete work that'll break the application.

RuinedRuins commented 1 year ago

github CI says pnpm run build failed?

nabilridhwan commented 1 year ago

the build issue is fixed off this thread between me and Matthew. thanks!

RuinedRuins commented 1 year ago

A UI improvement I would suggest for the next sprint is to add pips in the carousel to let the user know how many pictures are in the carousel slide

kKar1503 / project-inc-siwma-1