add filter searching

client/package.json

@@ -44,5 +44,5 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://localhost:5000/"
+  "proxy": "http://localhost:5001/"
 }

client/src/App.js

@@ -7,7 +7,7 @@ import OrdersScreen from './screens/Cartscreen';
 import RegisterScreen from './screens/Registerscreen';
 import LoginScreen from './screens/Loginscreen';
 import history from './history';
-
+import TrackingOrdersScreen from './screens/Trackingordersscreen';
 function App() {
     return (
         <div className="App container-fluid">
@@ -19,7 +19,7 @@ function App() {
                 <Route path="/ordersscreen" exact component={OrdersScreen}></Route>
                 <Route path="/register" exact component={RegisterScreen}></Route>
                 <Route path="/login" exact component={LoginScreen}></Route>
-
+                <Route path="/orderstracker" exact component={TrackingOrdersScreen}></Route>
                 </Switch>
             </Router>
         </div>

client/src/Reducers/orderReducer.js

@@ -26,5 +26,32 @@ export const orderReducer = (state = INITIAL_STATE, action) => {
     }
 }
 
+
 
+const getAllOrdersReducerInitialState = { orders: [], loading: true, error: false, }
+export const getAllOrdersReducer = (state = getAllOrdersReducerInitialState, action) => {
+
+    switch (action.type) {
+        case 'GET_USERORDERS_REQUESTS':
+            return ({
+                loading: true,
+                ...state
+            })
+        case 'GET_USERORDERS_SUCCESS':
+            return ({
+                ...state,
+                loading: false,
+                orders: action.payload
+            })
+        case 'GET_USERORDERS_FAILED':
+            return ({
+                ...state,
+                loading: false,
+                error: action.payload
+            })
+        default:
+            return state
+    }
+
+}
 

client/src/Reducers/productReducer.js

@@ -19,6 +19,18 @@ export const getProductsReducer = (state = INITIAL_STATE, action) => {
                 loading: false,
                 error: action.payload
             })
+
+        case 'GET_FILTRED_PRODUCTS_REQUEST':
+            return ({
+                ...state,
+                loading: true
+            })
+        case 'GET_FILTRED_PRODUCTS':
+            return ({
+                ...state,
+                loading: false,
+                products: action.payload
+            })
         default:
             return state
     }

client/src/Reducers/userReducer.js

@@ -1,5 +1,3 @@
-
-
 const INITIAL_STATE = {}
 
 export const userRegistrationReducer = (state = INITIAL_STATE, action) => {

client/src/actions/orderAction.js

@@ -12,7 +12,7 @@ export const placeOrder = (token, subtotal) => async (dispatch, getState) => {
             type: "PLACE_ORDER_SUC",
             payload: request.data
         })
-        
+
     } catch (e) {
 
         dispatch({
@@ -21,4 +21,25 @@ export const placeOrder = (token, subtotal) => async (dispatch, getState) => {
         })
         console.log(e.message)
     }
+}
+
+export const getUserOrders = () => async (dispatch, getState) => {
+
+
+    const currentUser = getState().userLoginReducer.user;
+    dispatch({
+        type: 'GET_USERORDERS_REQUESTS',
+    })
+    try {
+        const response = await axios.get('api/orders/getuserorders', { params: { userId: currentUser._id } });
+        dispatch({
+            type: 'GET_USERORDERS_SUCCESS',
+            payload: response.data
+        })
+    } catch (e) {
+        dispatch({
+            type: 'GET_USERORDERS_FAILED',
+            payload: { error: e.message }
+        })
+    }
 }

client/src/actions/productActions.js

@@ -17,6 +17,20 @@ export const getAllProducts = () => async (dispatch, getState) => {
         })
     }
 
+}
+
+export const filterProducts = (searchTerm, category) => async (dispatch, getState) => {
+    await dispatch(getAllProducts());
+
+    const allProducts = category === "all" ? getState().getProductsReducer.products :
+        getState().getProductsReducer.products.filter(product => product.category === category)
+    dispatch({
+        type: 'GET_FILTRED_PRODUCTS_REQUEST'
+    })
+    dispatch({
+        type: 'GET_FILTRED_PRODUCTS',
+        payload: allProducts?.filter(product => product.name.toLowerCase().includes(searchTerm))
+    })
 
 
 }

client/src/components/Checkout.js

@@ -1,24 +1,31 @@
 import react from 'react';
-import { useDispatch } from 'react-redux'; 
+import { useDispatch, useSelector } from 'react-redux';
 import StripeCheckout from 'react-stripe-checkout';
-import {placeOrder} from '../actions/orderAction';
+import { placeOrder } from '../actions/orderAction';
+import SuccessNotification from '../components/SuccessNotification';
+import Spinneer from '../components/Spinner';
 
-
-export default function Checkout({subtotal}) {
+export default function Checkout({ subtotal }) {
     const dispatch = useDispatch();
+
+    const orderState = useSelector(state => state.orderReducer);
+    const { loading, error, success } = orderState;
     const tokenHandler = (token) => {
-        dispatch(placeOrder(token,subtotal))
+        dispatch(placeOrder(token, subtotal))
     }
-    return(
+    return (
         <div>
             <StripeCheckout
-            amount={subtotal}
-            shippingAddress
-            stripeKey="pk_test_51JKBHIE4KLe4LrYx9WSpEPvxqFdwENbNOPmEP1KTnOufYSRrdZA2POSMVZFtahGFf2eCOVa6TMm5M2dxIwMUrmxY00Vt7op0aN"
-            token={tokenHandler}
+                amount={subtotal}
+                shippingAddress
+                stripeKey="pk_test_51JKBHIE4KLe4LrYx9WSpEPvxqFdwENbNOPmEP1KTnOufYSRrdZA2POSMVZFtahGFf2eCOVa6TMm5M2dxIwMUrmxY00Vt7op0aN"
+                token={tokenHandler}
             >
-                <button className="btn" style={{backgroundColor:"red"}}>pay now</button>
+                <button className="btn" style={{ backgroundColor: "red" }}>pay now</button>
             </StripeCheckout>
+            {success && <SuccessNotification title="your payment was successful!" details="your order is being processed"></SuccessNotification>}
+            {loading && <Spinneer />}
+            {error && <p>{error}</p>}
         </div>
     )
 }

client/src/components/DropDown.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { logoutUser } from '../actions/userAction';
@@ -8,22 +8,40 @@ import { logoutUser } from '../actions/userAction';
 const DropDown = () => {
     const [activ, setActive] = useState(false)
     const dispatch = useDispatch();
+
+
+    const refContainer = useRef(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (refContainer.current && !refContainer.current.contains(event.target)) {
+                setActive(false)
+            }
+        }
+        document.addEventListener("mousedown", handleClickOutside)
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [refContainer])
+
     const x = useSelector(state => state.userLoginReducer.user);
 
+
     const dropdownShow = activ ? "dropdown-menu show" : "dropdown-menu"
     return (
         <div className="collapse navbar-collapse" id="navbarNavDarkDropdown">
             <ul className="navbar-nav">
                 <li className="nav-item dropdown">
-                    <a className="nav-link dropdown-toggle" onClick={() => setActive(!activ)} href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                    <a className="nav-link dropdown-toggle" onClick={() => setActive(!activ)} href="###" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                         {x?.name}
                     </a>
-                    <ul className={dropdownShow} dropdownlist aria-labelledby="navbarDarkDropdownMenuLink">
-                        <li><a className="dropdown-item" href="#">Orders</a></li>
-                        <li><Link className="dropdown-item  nav-link" to="/" onClick={() => { 
+                    <ul onClick={()=>setActive(!activ)} className={dropdownShow} ref={refContainer} dropdownlist aria-labelledby="navbarDarkDropdownMenuLink">
+                        <li><Link className="dropdown-item  nav-link" to="/orderstracker">Orders tracker</Link></li>
+                        <li>
+                            <Link className="dropdown-item  nav-link" to="/"
+                            onClick={() => {
                             dispatch(logoutUser())
-                            window.location.reload();
-                            }}>logout</Link></li>
+                            window.location.reload();}}
+                        >Logout</Link>
+                        </li>
                     </ul>
                 </li>
             </ul>

client/src/components/Filter.js

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+
+
+const Filter = ({ searchTermFromFilterComponent }) => {
+    const dispatch = useDispatch();
+    const [searchTerm, setSearchTerm] = useState("");
+    const [categorie, setCategorie] = useState("all");
+
+
+    useEffect(() => {
+
+        searchTermFromFilterComponent(searchTerm, categorie)
+
+    }, [searchTerm, categorie])
+
+
+
+    /* input changer -> state change -> rerender -> this function getExecuted*/
+
+    return (
+        <div className="row shadow-lg p-3 mb-5 bg-white rounded d-flex m-auto justify-content-center align-items-center">
+            <div className="className col-md-3 d-flex align-items-center">
+                <input className="form-control"
+                    type="text" name="" id="" placeholder="search product"
+                    onChange={(e) => {
+                        setSearchTerm(e.target.value)
+                    }}
+                />
+            </div>
+
+
+            <div className="col-md-3 mt-2">
+                <select className="form-control"
+                    value={categorie}
+                    onChange={(e) => {
+                        setCategorie(e.target.value)
+                    }}>
+                    <option value="all">All</option>
+                    <option value="veg">veg</option>
+                    <option value="nonveg">nonveg</option>
+                </select>
+            </div>
+
+            <div className="col-md-3 mt-2">
+                <button className="form-control btn" style={{ backgroundColor: "red" }}>Filter</button>
+            </div>
+
+        </div>
+    )
+}
+
+export default Filter;

client/src/components/OrdersTable.js

@@ -0,0 +1,30 @@
+import React from 'react'
+
+
+
+const OrderTable = () => {
+    return (
+        <div className="table">
+            <table class="table">
+                <thead class="thead-dark">
+                    <tr>
+                        <th scope="col">#</th>
+                        <th scope="col">First</th>
+                        <th scope="col">Last</th>
+                        <th scope="col">Handle</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <th scope="row">1</th>
+                        <td>Mark</td>
+                        <td>Otto</td>
+                        <td>@mdo</td>
+                    </tr>
+                </tbody>
+            </table>
+
+
+        </div>
+    )
+}

client/src/components/Spinner.js

@@ -3,9 +3,9 @@ import React from 'react'
 
 
 const Spinner = () => {
-    return (<div class="d-flex justify-content-center">
-        <div class="spinner-border" role="status">
-            <span class="sr-only">Loading...</span>
+    return (<div className="d-flex justify-content-center">
+        <div className="spinner-border" role="status">
+            <span className="sr-only">Loading...</span>
         </div>
     </div>)
 }

client/src/components/SuccessNotification.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+
+
+const SuccessNotification = ({ text, details }) => {
+    return (
+        <div class="alert alert-success" role="alert">
+            <h1>{text}</h1>
+        </div>
+    )
+}
+
+export default SuccessNotification;