Refactoring/Enhancement: Store Product Page

billychen0894 / florist-ecommerce-app

Florist eCommerce App built with Next.js 14

https://florist-ecommerce-app.vercel.app

0 stars 0 forks source link

Refactoring/Enhancement: Store Product Page #81

Open billychen0894 opened 5 months ago

billychen0894 commented 5 months ago

Overview

Objective: To enhance performance for the product page
Motivation: To reduce disruption for users exploration on products

Implementation Checklist

[x] Task 1: Refactor Product List & Pagination
[x] Task 2: Remove redundant products fetch calls
[x] Task 3: Refactor Sort component
[x] Task 4: Refactor Filter component

Disclaimer

This issue is used for tracking purposes and to document the progress and improvements made to the project. It will remain open to allow easy access and visibility of the ongoing enhancements/refactoring efforts. Comments in this issue will be updated regularly to reflect progress and any additional improvements.

billychen0894 commented 5 months ago

Task 1: Refactor Product List & Pagination

The Product List and Pagination components were improved by using some helper functions to abstract away some logics, such as constructURL(). And the state required for Product List and Pagination are passed from the parent component.

Related commits

billychen0894 commented 5 months ago

Task 2: Remove redundant products fetch calls

Previously, the ProductList and Pagination component were calling fetchProducts() individually, which is redundant. Because both components share the same data. That is, the fetch call should only be happened at the parent component of ProductList and Pagination. Once the products data is received, it then be passed down to the components.

Related commits

billychen0894 commented 5 months ago

Task 3: Refactor Sort component

Most logic for Sort component was abstracted away by creating helper functions, such as getCurrSortLabel() and createQueryString() to update sort related query params in the url.

Related commits

fe62ed2

billychen0894 commented 5 months ago

Task 4: Refactor Filter component

Filter components are utilizing SSR and CSR. The parent component is SSR that fetches required data and then further pass data down to client-side rendering components. The FilterActionButton and FilterForm are client-side rendering and both of them shared the same state. Therefore, it is easier to manage both state and data required from their parent component, using Context API.