product list eval pull request#153
Conversation
| import React from "react"; | ||
| export const ProductList = () => { | ||
| //useEffect on page load make an api call that sets the products from our GET /products route | ||
|
|
| for (let i = 0; i < count; i++) { | ||
| if (i % 9 == 0) { | ||
| if (i == 0) { |
There was a problem hiding this comment.
code here is complex and not easy to understand and its not really maintainable. Consider extracting to different functions to help with readability.
| return <ProductListItem key={product._id} product={product} />; | ||
| })} | ||
| </section> | ||
| <div className={styles.buttons}>{paginationButtons()}</div> |
There was a problem hiding this comment.
I think pagination should have been its own component. Separating logic will make your code way more readable and clean.
| if (!category || category == "#") { | ||
| response = await axios.get("http://localhost:8001/products/", { | ||
| params: { | ||
| page: pageNum, | ||
| price: price, | ||
| query: query, | ||
| }, | ||
| }); | ||
| } else { | ||
| response = await axios.get("http://localhost:8001/products/", { |
There was a problem hiding this comment.
was really necessary to separate this?
| return response.data; | ||
| } | ||
| ); | ||
| export const productSlice = createSlice({ |
| return ( | ||
| <> | ||
| <section className={styles.section}> | ||
| {products.map((product) => { |
| <> | ||
| <section className={styles.section}> | ||
| {products.map((product) => { | ||
| return <ProductListItem key={product._id} product={product} />; |
There was a problem hiding this comment.
I like the separation of products and product.
| import styles from "../page.module.css"; | ||
| import { fetchProducts } from "../store/slices/product"; | ||
| import axios from "axios"; | ||
| export const SearchForm = () => { |
There was a problem hiding this comment.
not the best file name as this component is not only doing a search, but also handling the filters.
| import styles from "../page.module.css"; | ||
| import { fetchProducts } from "../store/slices/product"; | ||
| import axios from "axios"; | ||
| export const SearchForm = () => { |
There was a problem hiding this comment.
check your spacing! The whole file is hard to read because of the lack of proper spacing. Either too much, or not at all :(
| // sets all options to a state variable | ||
| const getCategories = async () => { | ||
| try { | ||
| let response = await axios.get( |
There was a problem hiding this comment.
should be const if you are not redefining it later
2 participants
No description provided.