Merge pull request #14 from builtbysuraj/dev

Cart page, Payment Integration

client/index.html

@@ -14,4 +14,5 @@
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
+  <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
 </html>

client/package.json

@@ -16,6 +16,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.15.2",
     "@reduxjs/toolkit": "^2.0.1",
+    "@tanstack/react-query": "^5.17.10",
     "axios": "^1.6.4",
     "classnames": "^2.5.1",
     "lodash.debounce": "^4.0.8",

client/src/App.tsx

@@ -1,22 +1,14 @@
-import { Route, Routes } from 'react-router-dom'
+import { Suspense } from 'react'
+import { Outlet } from 'react-router-dom'
 import { Footer, Header } from './layouts'
-import {
-  CartPage,
-  HomePage,
-  ProductDetailsPage,
-  ProductListingPage,
-} from './pages'
 
 export default function App() {
   return (
     <div className="AppContainer">
       <Header />
-      <Routes>
-        <Route path="/" element={<HomePage />} />
-        <Route path="/products" element={<ProductListingPage />} />
-        <Route path="/products/:id" element={<ProductDetailsPage />} />
-        <Route path="/cart" element={<CartPage />} />
-      </Routes>
+      <Suspense fallback="Loading...">
+        <Outlet />
+      </Suspense>
       <Footer />
     </div>
   )

client/src/components/Form.tsx

@@ -0,0 +1,7 @@
+export default function Form() {
+  return (
+    <>
+      <div>Form</div>
+    </>
+  )
+}

client/src/components/ui/Button.tsx

@@ -0,0 +1,5 @@
+type ButtonType = React.ComponentPropsWithoutRef<'button'>
+
+export default function Button({ children, ...props }: ButtonType) {
+  return <button {...props}>{children}</button>
+}

client/src/components/ui/Input.tsx

@@ -0,0 +1,9 @@
+/* eslint-disable react-refresh/only-export-components */
+
+// import { forwardRef } from 'react'
+
+// function Input({ label, type = 'text', className = '', ...props }, ref) {
+//   return <>{label && <label htmlFor="">{label}</label>}</>
+// }
+
+// export default forwardRef(Input)

client/src/hooks/useFilters.ts

@@ -3,7 +3,7 @@ import { useGetAllProductsQuery } from '@/state/services/productApi'
 import { useAppSelector } from '@/state/store'
 
 export default function useFilter() {
-  const stateData = useAppSelector((state) => state.filtersReducer)
+  const stateData = useAppSelector((state) => state.filter)
   const { data } = useGetAllProductsQuery()
   const filteredData = data?.products
     ?.filter((item) => {

client/src/hooks/useHandleDispatch.ts

@@ -11,7 +11,7 @@ import {
   sort,
 } from '@/state/slices/filtersSlice'
 import { useAppDispatch } from '@/state/store'
-import { ProductType } from '@/types'
+import { CartType } from '@/types'
 
 export default function useHandleDispatch() {
   const dispatch = useAppDispatch()
@@ -32,11 +32,11 @@ export default function useHandleDispatch() {
     dispatch(filterSearch(query))
   }
 
-  const handleAddToCart = (data: ProductType) => {
+  const handleAddToCart = (data: CartType) => {
     dispatch(addToCart(data))
   }
 
-  const handleDecrementCartItem = (data: ProductType) => {
+  const handleDecrementCartItem = (data: CartType) => {
     dispatch(decrementCartItem(data))
   }
 

client/src/layouts/filters/SidebarFilters.tsx

@@ -8,7 +8,7 @@ import RatingFilter from './components/RatingFilter'
 import CategoryFilter from './components/CategoryFilter'
 
 export default function SidebarFilters() {
-  const stateData = useAppSelector((state) => state.filtersReducer)
+  const stateData = useAppSelector((state) => state.filter)
   const {
     handleFilterRating,
     handleSort,

client/src/layouts/filters/components/CategoryFilter.tsx

@@ -1,5 +1,27 @@
 import { Checkbox, FormControlLabel, FormGroup } from '@mui/material'
-import { categories } from '@/db/productData'
+
+const categories = [
+  'smartphones',
+  'laptops',
+  'fragrances',
+  'skincare',
+  'groceries',
+  'home-decoration',
+  'furniture',
+  'tops',
+  'womens-dresses',
+  'womens-shoes',
+  'mens-shirts',
+  'mens-shoes',
+  'mens-watches',
+  'womens-watches',
+  'womens-bags',
+  'womens-jewellery',
+  'sunglasses',
+  'automotive',
+  'motorcycle',
+  'lighting',
+]
 
 export default function CategoryFilter() {
   return (

client/src/layouts/header/Header.module.css

@@ -6,9 +6,9 @@
   justify-content: center;
   min-width: 100rem;
   /* position: sticky; */
-  a {
-    color: white;
-  }
+}
+.header-container a {
+  color: white;
 }
 
 .header-wrapper {
@@ -23,16 +23,16 @@
 .header-input {
   outline: 0;
   border: 0;
-  padding: 0 0.8rem;
+  padding: 0 0.9rem;
   margin: 0 0.7rem;
-  height: 2rem;
+  height: 2.2rem;
   width: 30rem;
   box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
   font-size: 0.9rem;
   border-radius: 2px;
 }
 
-.header-btn {
+.header-login-btn {
   outline: 0;
   border: 0;
   cursor: pointer;
@@ -50,7 +50,7 @@
 
 .header-search-icon {
   position: absolute;
-  top: 6px;
+  top: 9px;
   right: 20px;
   cursor: pointer;
 }

client/src/layouts/header/Header.tsx

@@ -1,18 +1,18 @@
 import { Link } from 'react-router-dom'
 
-import classNames from 'classnames/bind'
 import cart from '@/assets/img/cart.svg'
 import search from '@/assets/img/search.svg'
 import useHandleDispatch from '@/hooks/useHandleDispatch'
 import { useAppSelector } from '@/state/store'
+import classNames from 'classnames/bind'
 import styles from './Header.module.css'
 import flipkart from '/flipkart.png'
 
 const cx = classNames.bind(styles)
 
 export default function Header() {
-  const stateData = useAppSelector((state) => state.filtersReducer)
-  const cartData = useAppSelector((state) => state.cartReducer)
+  const stateData = useAppSelector((state) => state.filter)
+  const cartData = useAppSelector((state) => state.cart)
   const { handleSearchQuery } = useHandleDispatch()
 
   return (
@@ -37,7 +37,9 @@ export default function Header() {
           />
         </div>
         <div>
-          <button className={cx('header-btn')}>Login</button>
+          <Link to="/login">
+            <button className={cx('header-login-btn')}>Login</button>
+          </Link>
         </div>
         <div>
           <Link to="/products">All products</Link>

client/src/lazyComponents.ts

@@ -0,0 +1,25 @@
+import { lazy } from 'react'
+
+const HomePage = lazy(() => import('./pages/home/HomePage'))
+const CartPage = lazy(() => import('./pages/cart/CartPage'))
+const ProductDetailsPage = lazy(
+  () => import('./pages/product-details/ProductDetailsPage')
+)
+const ProductListingPage = lazy(
+  () => import('./pages/product-listing/ProductListingPage')
+)
+const LoginPage = lazy(() => import('./pages/login/LoginPage'))
+const SignUpPage = lazy(() => import('./pages/signup/SignUpPage'))
+const PaymentSuccess = lazy(
+  () => import('./pages/payment-success/PaymentSuccess')
+)
+
+export {
+  CartPage,
+  HomePage,
+  LoginPage,
+  PaymentSuccess,
+  ProductDetailsPage,
+  ProductListingPage,
+  SignUpPage,
+}

client/src/main.tsx

@@ -1,62 +1,22 @@
 import { createRoot } from 'react-dom/client'
 import { Provider } from 'react-redux'
-import { BrowserRouter } from 'react-router-dom'
+import { RouterProvider } from 'react-router-dom'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
-import { ThemeProvider, createTheme } from '@mui/material'
-import App from './App'
 import './assets/css/reset.css'
+import router from './routes'
 import store from './state/store'
 
 if (process.env.NODE_ENV !== 'development') {
   console.log = () => {}
-  // console.error = () => {}
-  // console.warn = () => {}
 }
 
-const theme = createTheme({
-  typography: {},
-  palette: {
-    primary: {
-      main: '#1D3557',
-    },
-    secondary: {
-      main: '#DDA15E',
-    },
-  },
-  components: {
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          // color: red[300],
-        },
-      },
-      defaultProps: {
-        disableElevation: true,
-        disableRipple: true,
-        disableFocusRipple: true,
-      },
-    },
-    MuiAppBar: {
-      styleOverrides: {
-        root: {
-          background: '#2874f0',
-          height: '3.6rem',
-        },
-      },
-      defaultProps: {
-        elevation: 1,
-        position: 'sticky',
-      },
-    },
-  },
-})
+const queryClient = new QueryClient()
 
 createRoot(document.querySelector('#root') as HTMLElement).render(
   <Provider store={store}>
-    <ThemeProvider theme={theme}>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
-    </ThemeProvider>
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
   </Provider>
 )