From 7900fb9e1d603473a37f7df22a5f42d57d3100c3 Mon Sep 17 00:00:00 2001 From: builtbysuraj Date: Mon, 22 Jan 2024 00:55:23 +0530 Subject: [PATCH 1/4] refactor: Add reusable Form and Input, Remove classNames package --- client/package-lock.json | 6 -- client/package.json | 1 - client/src/assets/css/reset.css | 4 +- .../Form.module.css} | 2 +- client/src/components/Form.tsx | 50 ++++++++++++- client/src/components/ui/Input.tsx | 45 +++++++++-- client/src/hooks/useFilters.ts | 2 +- client/src/hooks/useHandleDispatch.ts | 2 +- .../filters/components/RatingFilter.tsx | 58 +++++++------- .../filters/components/SortProductsFilter.tsx | 61 +++++++-------- client/src/layouts/footer/Footer.tsx | 17 ++--- client/src/layouts/header/Header.tsx | 19 ++--- client/src/pages/cart/CartPage.module.css | 21 ------ client/src/pages/cart/CartPage.tsx | 26 +++---- .../cart-price-details/CartPriceDetails.tsx | 7 +- .../cart/components/empty-cart/EmptyCart.tsx | 8 +- .../place-order/PlaceOrder.module.css | 21 ++++++ .../components/place-order/PlaceOrder.tsx | 6 +- client/src/pages/home/HomePage.tsx | 6 +- client/src/pages/login/LoginPage.tsx | 41 +++------- .../product-listing/ProductListingPage.tsx | 2 +- client/src/pages/signup/SignUpPage.module.css | 75 ------------------- client/src/pages/signup/SignUpPage.tsx | 41 +++------- client/src/state/services/productApi.ts | 2 +- client/src/state/slices/cartSlice.ts | 6 +- client/src/state/slices/filtersSlice.ts | 2 +- client/src/state/store.ts | 3 +- client/src/types/index.ts | 12 +-- client/src/utils/index.ts | 2 +- 29 files changed, 224 insertions(+), 324 deletions(-) rename client/src/{pages/login/LoginPage.module.css => components/Form.module.css} (97%) create mode 100644 client/src/pages/cart/components/place-order/PlaceOrder.module.css delete mode 100644 client/src/pages/signup/SignUpPage.module.css diff --git a/client/package-lock.json b/client/package-lock.json index f58b969..fb0c369 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -14,7 +14,6 @@ "@reduxjs/toolkit": "^2.0.1", "@tanstack/react-query": "^5.17.10", "axios": "^1.6.4", - "classnames": "^2.5.1", "lodash.debounce": "^4.0.8", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -2772,11 +2771,6 @@ "node": "*" } }, - "node_modules/classnames": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", - "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" - }, "node_modules/clsx": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", diff --git a/client/package.json b/client/package.json index 4e4e3e5..fac0522 100644 --- a/client/package.json +++ b/client/package.json @@ -21,7 +21,6 @@ "@reduxjs/toolkit": "^2.0.1", "@tanstack/react-query": "^5.17.10", "axios": "^1.6.4", - "classnames": "^2.5.1", "lodash.debounce": "^4.0.8", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/client/src/assets/css/reset.css b/client/src/assets/css/reset.css index a1ad506..d9fd081 100644 --- a/client/src/assets/css/reset.css +++ b/client/src/assets/css/reset.css @@ -14,15 +14,13 @@ html { body { line-height: 1.5; min-height: 100vh; - min-width: 100vw; - /* overflow-x: hidden; */ + max-width: 100vw; } .AppContainer { background-color: #f1f3f6; z-index: -1; min-height: 100vh; - min-width: 100rem; } input, diff --git a/client/src/pages/login/LoginPage.module.css b/client/src/components/Form.module.css similarity index 97% rename from client/src/pages/login/LoginPage.module.css rename to client/src/components/Form.module.css index 62aef7a..07a3ef7 100644 --- a/client/src/pages/login/LoginPage.module.css +++ b/client/src/components/Form.module.css @@ -49,7 +49,7 @@ border: 0; border-bottom: 1px solid grey; } -input::placeholder { +.login-form input::placeholder { opacity: 0.7; } diff --git a/client/src/components/Form.tsx b/client/src/components/Form.tsx index 0b72510..bf49114 100644 --- a/client/src/components/Form.tsx +++ b/client/src/components/Form.tsx @@ -1,7 +1,49 @@ -export default function Form() { +import { Link } from 'react-router-dom' +import styles from './Form.module.css' + +type FormProps = { + mode: string + promptText: string + promptLink: string + promptLinkText: string +} + +export default function From({ + mode, + promptText, + promptLink, + promptLinkText, +}: FormProps) { return ( - <> -
Form
- +
+
+
+ {mode} +
+
+

Get access to your Orders,

+

Wishlist and Recommendations

+
+
+
+
+ + + + By continuing, you agree to Flipkart's + Terms of Use + and + Privacy Policy. + + +

+ {promptText}{' '} + + {promptLinkText} + +

+
+
+
) } diff --git a/client/src/components/ui/Input.tsx b/client/src/components/ui/Input.tsx index 174bf95..a42dcc0 100644 --- a/client/src/components/ui/Input.tsx +++ b/client/src/components/ui/Input.tsx @@ -1,9 +1,40 @@ -/* eslint-disable react-refresh/only-export-components */ +type InputProps = { + type: string + name?: string + id?: string + value: string + onChange: React.ChangeEventHandler | undefined + checked?: boolean + label?: string + className?: string +} -// import { forwardRef } from 'react' +function Input({ + type, + name, + id, + value, + onChange, + checked, + label, + className = '', +}: InputProps) { + return ( + <> + + + + ) +} -// function Input({ label, type = 'text', className = '', ...props }, ref) { -// return <>{label && } -// } - -// export default forwardRef(Input) +export default Input diff --git a/client/src/hooks/useFilters.ts b/client/src/hooks/useFilters.ts index 2e55f2e..0933bbb 100644 --- a/client/src/hooks/useFilters.ts +++ b/client/src/hooks/useFilters.ts @@ -1,6 +1,6 @@ import { SORT_TYPE } from '@/constants/filterConstants' import { useGetAllProductsQuery } from '@/state/services/productApi' -import { ProductType } from '@/types' +import type { ProductType } from '@/types' import useGetParams from './useGetParams' export default function useFilter() { diff --git a/client/src/hooks/useHandleDispatch.ts b/client/src/hooks/useHandleDispatch.ts index f78dcfb..1bb4ce0 100644 --- a/client/src/hooks/useHandleDispatch.ts +++ b/client/src/hooks/useHandleDispatch.ts @@ -6,7 +6,7 @@ import { removeFromCart, } from '@/state/slices/cartSlice' import { useAppDispatch } from '@/state/store' -import { CartType, ProductType } from '@/types' +import type { CartType, ProductType } from '@/types' export default function useHandleDispatch() { const dispatch = useAppDispatch() diff --git a/client/src/layouts/filters/components/RatingFilter.tsx b/client/src/layouts/filters/components/RatingFilter.tsx index 563a26b..2423082 100644 --- a/client/src/layouts/filters/components/RatingFilter.tsx +++ b/client/src/layouts/filters/components/RatingFilter.tsx @@ -1,5 +1,5 @@ +import Input from '@/components/ui/Input' import { RATING_TYPE } from '@/constants/filterConstants' -import { FormControlLabel, Radio, RadioGroup, Typography } from '@mui/material' type Props = { searchParams: URLSearchParams @@ -12,38 +12,30 @@ export default function RatingFilter({ }: Props) { const rating = searchParams.get('rating') || '' + const ratingItems = [ + { value: RATING_TYPE.FOUR_AND_UP, label: '4 & Up' }, + { value: RATING_TYPE.THREE_AND_UP, label: '3 & Up' }, + { value: RATING_TYPE.TWO_AND_UP, label: '2 & Up' }, + { value: RATING_TYPE.ONE_AND_UP, label: '1 & Up' }, + ] + return ( - <> - - Customer Review - - handleFilterRating(e.target.value)} - > - } - label="4 & Up" - /> - } - label="3 & Up" - /> - } - label="2 & Up" - /> - } - label="1 & Up" - /> - - +
+

Customer Review

+ {ratingItems.map((item) => ( +
+ handleFilterRating(event.target.value)} + name="sort" + label={item.label} + value={item.value} + /> +
+ ))} +
+
) } diff --git a/client/src/layouts/filters/components/SortProductsFilter.tsx b/client/src/layouts/filters/components/SortProductsFilter.tsx index 54c2412..f60871e 100644 --- a/client/src/layouts/filters/components/SortProductsFilter.tsx +++ b/client/src/layouts/filters/components/SortProductsFilter.tsx @@ -1,5 +1,5 @@ +import Input from '@/components/ui/Input' import { SORT_TYPE } from '@/constants/filterConstants' -import { Typography } from '@mui/material' type Props = { searchParams: URLSearchParams @@ -11,42 +11,33 @@ export default function SortProductsFilter({ handleSort, }: Props) { const sort = searchParams.get('sort') || '' + + const sortItems = [ + { value: SORT_TYPE.PRICE_HIGH_TO_LOW, label: 'Price high to low' }, + { value: SORT_TYPE.PRICE_LOW_TO_HIGH, label: 'Price low to high' }, + { value: SORT_TYPE.RATING_HIGH_TO_LOW, label: 'Rating High To Low' }, + ] + return ( - <> - - Sort - +
+

Sort

- handleSort(e.target.value)} - checked={sort === SORT_TYPE.PRICE_HIGH_TO_LOW} - /> - -
- handleSort(e.target.value)} - checked={sort === SORT_TYPE.PRICE_LOW_TO_HIGH} - /> - -
- handleSort(e.target.value)} - checked={sort === SORT_TYPE.RATING_HIGH_TO_LOW} - /> -
+ {sortItems.map((item) => ( +
+ handleSort(event.target.value)} + name="sort" + label={item.label} + value={item.value} + /> +
+
+ ))} +
- +
) } diff --git a/client/src/layouts/footer/Footer.tsx b/client/src/layouts/footer/Footer.tsx index a305d14..976411e 100644 --- a/client/src/layouts/footer/Footer.tsx +++ b/client/src/layouts/footer/Footer.tsx @@ -1,15 +1,12 @@ -import { Divider } from '@mui/material' -import classNames from 'classnames/bind' -import { Link } from 'react-router-dom' import gift from '@/assets/img/gift.svg' import paymentMethods from '@/assets/img/payment-method.svg' import question from '@/assets/img/question.svg' import seller from '@/assets/img/seller.svg' import star from '@/assets/img/star.svg' +import { Divider } from '@mui/material' +import { Link } from 'react-router-dom' import styles from './Footer.module.css' -const cx = classNames.bind(styles) - export default function Footer() { const about = [ 'Contact Us', @@ -41,9 +38,9 @@ export default function Footer() { ] const social = ['Facebook', 'Twitter', 'YouTube'] return ( -