Fix order saving and displaying (#70)

* --ammend * --ammend * fixing error display in reset password (#71) * --ammend * --ammend * --ammend * --ammend --------- Co-authored-by: Niyonshuti Jean De Dieu <[email protected]>
atlp-rwanda · Aug 5, 2024 · 68ec831 · 68ec831
1 parent b827b82
commit 68ec831
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 47 deletions.
diff --git a/src/assets/styles/ViewCart.scss b/src/assets/styles/ViewCart.scss
@@ -207,7 +207,6 @@ FaCheckSquare {
         border-radius: 10px;
         padding: 1rem;
         margin-top: 5rem;
-
         .box {
           p {
             color: $black;
@@ -237,10 +236,10 @@ FaCheckSquare {
 
       .order-details {
         border: 2px solid $border-color;
-        padding: 10px;
         border-radius: 10px;
+        margin: 0;
         margin-top: 10px;
-
+        width: 90%;
         h3 {
           color: $primary-color;
           font-size: 18px;
@@ -431,7 +430,6 @@ FaCheckSquare {
         border: 2px solid $border-color;
         border-radius: 10px;
         padding: 5px;
-
         .box {
           p {
             color: $black;
@@ -462,6 +460,7 @@ FaCheckSquare {
         border: 2px solid $border-color;
         padding: 10px;
         border-radius: 10px;
+        margin: 0;
         margin-top: 10px;
 
         h3 {

diff --git a/src/pages/UserViewCart.tsx b/src/pages/UserViewCart.tsx
@@ -192,6 +192,9 @@ const UserViewCart: React.FC = () => {
       const cartId = localStorage.getItem('cartToPay');
       const products = localStorage.getItem('productsToSave');
       const shopId = localStorage.getItem('shopIdToSave');
+      console.log("Caert id", cartId);
+      console.log("Product ", products)
+      console.log("Shop id ", shopId)
       if (!cartId || !products || !shopId) {
         navigate('/shopping-cart');
         toast.error('Unknown error occurred saving order');

diff --git a/src/pages/UserViewOrders.tsx b/src/pages/UserViewOrders.tsx
@@ -48,9 +48,38 @@ const UserVIewOrders: React.FC = () => {
   const [orderResponseData, setOrderResponseData] = useState(null);
   const [isLoggedOut, setIsLoggedOut] = useState(false);
   const [isPreloader, setIsPreloader] = useState(false);
+  const [cartResponseData, setCartResponseData] = useState(null);
+
   const navigate = useNavigate();
 
   const cartState = useAppSelector((state) => state.cart);
+  useEffect(() => {
+    fetchCarts();
+  }, [dispatch]);
+  const fetchCarts = async () => {
+    try {
+      setIsLoading(true);
+      const response = await dispatch(getUserCarts());
+      const response1 = await dispatch(getUserCarts()).unwrap();
+      if (response.payload === 'Not authorized') {
+        setIsLoggedOut(true);
+        toast.error('Please login first');
+        navigate('/login');
+      }
+      setCartResponseData(response1.data);
+      setIsLoading(false);
+    } catch (error: any) {
+      if (error === 'Not authorized') {
+        setIsLoggedOut(true);
+        toast.error('Please login first');
+        navigate('/login');
+      }
+      console.error('Error fetching carts:', error);
+      setIsLoading(false);
+      setIsError(true);
+      toast.error(error.message);
+    }
+  };
 
   useEffect(() => {
     fetchOrders();
@@ -74,7 +103,7 @@ const UserVIewOrders: React.FC = () => {
       console.error('Error fetching orders:', error);
       setIsLoading(false);
       setIsError(true);
-      toast.error("Error getting orders, check your internet");
+      toast.error('Error getting orders, check your internet');
     } finally {
       setIsLoading(false);
     }
@@ -102,6 +131,13 @@ const UserVIewOrders: React.FC = () => {
       </div>
     );
   }
+  if (orderResponseData.length < 1) {
+    return (
+      <div className="error-message">
+        <p>No orders found.</p>
+      </div>
+    );
+  }
 
   return (
     <>
@@ -126,50 +162,103 @@ const UserVIewOrders: React.FC = () => {
         <div className="order">
           {orderResponseData?.map((order) => (
             <React.Fragment key={order.id}>
-              {JSON.parse(order.products).map((product, index) => (
-                <div key={index} className="order-item">
-                  <div className="head">
-                    <div className="">Order No: {order.id.split('-')[0]}</div>
-                    <div className="">Details</div>
-                    <div className="">Placed on</div>
-                    <div className="">Status: {order.status}</div>
-                  </div>
-                  <div className="order-body">
-                    <div className="order-product">
-                      <img
-                        src={product.image}
-                        alt={product.name}
-                        className="product_img"
-                      />
-                      <p className="o-description">
-                        <h3>{product.name}</h3>
-                        <br />
-                        <span>x{product.quantity}</span>
-                        <span className="o-price">${product.price}</span>
-                      </p>
-                    </div>
-                    <div className="order-details">
-                      <Link to={''}>View Order Details</Link>
-                    </div>
-                    <div className="date-placed">
-                      <span>{new Date(order.createdAt).toDateString()}</span>
+              {typeof order.products === 'string'
+                ? JSON.parse(order.products).map((product, index) => (
+                    <div key={index} className="order-item">
+                      <div className="head">
+                        <div className="">
+                          Order No: {order.id.split('-')[0]}
+                        </div>
+                        <div className="">Details</div>
+                        <div className="">Placed on</div>
+                        <div className="">Status: {order.status}</div>
+                      </div>
+                      <div className="order-body">
+                        <div className="order-product">
+                          <img
+                            src={product.image}
+                            alt={product.name}
+                            className="product_img"
+                          />
+                          <p className="o-description">
+                            <h3>{product.name}</h3>
+                            <br />
+                            <span>x{product.quantity}</span>
+                            <span className="o-price">${product.price}</span>
+                          </p>
+                        </div>
+                        <div className="order-details">
+                          <Link to={''}>View Order Details</Link>
+                        </div>
+                        <div className="date-placed">
+                          <span>
+                            {new Date(order.createdAt).toDateString()}
+                          </span>
+                        </div>
+                        <div className="track">
+                          <button
+                            className={
+                              order.status === 'Cancelled' ? 'disabled' : ''
+                            }
+                            onClick={() =>
+                              navigate(`/trackOrder/${order.id}/${product.id}`)
+                            }
+                            disabled={order.status === 'Cancelled'}
+                          >
+                            TRACK ORDER
+                          </button>
+                        </div>
+                      </div>
                     </div>
-                    <div className="track">
-                      <button
-                        className={
-                          order.status === 'Cancelled' ? 'disabled' : ''
-                        }
-                        onClick={() =>
-                          navigate(`/trackOrder/${order.id}/${product.id}`)
-                        }
-                        disabled={order.status === 'Cancelled'}
-                      >
-                        TRACK ORDER
-                      </button>
+                  ))
+                : order.products.map((product, index) => (
+                    <div key={index} className="order-item">
+                      <div className="head">
+                        <div className="">
+                          Order No: {order.id.split('-')[0]}
+                        </div>
+                        <div className="">Details</div>
+                        <div className="">Placed on</div>
+                        <div className="">Status: {order.status}</div>
+                      </div>
+                      <div className="order-body">
+                        <div className="order-product">
+                          <img
+                            src={product.image}
+                            alt={product.name}
+                            className="product_img"
+                          />
+                          <p className="o-description">
+                            <h3>{product.name}</h3>
+                            <br />
+                            <span>x{product.quantity}</span>
+                            <span className="o-price">${product.price}</span>
+                          </p>
+                        </div>
+                        <div className="order-details">
+                          <Link to={''}>View Order Details</Link>
+                        </div>
+                        <div className="date-placed">
+                          <span>
+                            {new Date(order.createdAt).toDateString()}
+                          </span>
+                        </div>
+                        <div className="track">
+                          <button
+                            className={
+                              order.status === 'Cancelled' ? 'disabled' : ''
+                            }
+                            onClick={() =>
+                              navigate(`/trackOrder/${order.id}/${product.id}`)
+                            }
+                            disabled={order.status === 'Cancelled'}
+                          >
+                            TRACK ORDER
+                          </button>
+                        </div>
+                      </div>
                     </div>
-                  </div>
-                </div>
-              ))}
+                  ))}
             </React.Fragment>
           ))}
         </div>