E-Commerce Project

import { useNavigate } from "react-router-dom";
import { useEffect } from "react";
import useOrderStore from "../store/orderStore";
import { fetchOrders } from "../services/orderService";
import Card from "../components/card";
import { useRequest } from "../hooks/useRequest";
import LoadingSpinner from "../components/loadingSpinner";

const Orders = () => {
  const { orders } = useOrderStore();
  const navigate = useNavigate();
  const { error, loading, execute } = useRequest<void>();

  useEffect(() => {
    execute(fetchOrders);
  }, [execute]);

  if (loading) {
    return (
      <div className="flex justify-center mt-6">
        <LoadingSpinner />
      </div>
    );
  }
  if (error) {
    return (
      <div className="p-4 text-danger">
        <p>{error}</p>
      </div>
    );
  }
  return (
    <div>
      <div className="header">
        <h2>My Orders</h2>
      </div>
      <div className=" p-6 max-w-4xl mx-auto">
        {orders.length === 0 ? (
          <p className="text-center">No orders found.</p>
        ) : (
          <div className="space-y-4">
            {orders.map((order) => (
              <Card
                className="hover:scale-110 hover:shadow-2xl"
                key={order._id}
                title={`Order #${order._id}`}
                onClick={() => navigate(`/orders/${order._id}`)}
                footer={`Total: $${order.totalPrice.toFixed(2)}`}
              >
                <p className="mb-2">
                  Status: <span className="font-semibold">{order.status}</span>
                </p>
              </Card>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

export default Orders;

import { useNavigate } from "react-router-dom";
import { Product } from "../types";
import { useAddToCart } from "../hooks/useAddToCart";
import Card from "./card";
import clsx from "clsx";

const ProductCard = ({ product, className }: { product: Product, className?: string }) => {
  const { added, handleAddToCart } = useAddToCart();
  const navigate = useNavigate();

  const footer = (
    <button
      className='btn btn-primary'
      onClick={() => handleAddToCart(product, 1)}
    >
      {added ? "Added" : "Add to Cart"}
    </button>
  )
  return (
    <Card className={clsx("text-center", className)} title={product.name} footer={footer} onClick={() => navigate(`/products/${product._id}`)}>
      <h3>{product.price}</h3>
      <img src={product.imageUrl} alt={product.name} className="w-full h-48 object-contain" />
    </Card>

  );
};

export default ProductCard;

import * as api from "../api/order";
import { logError } from "../utils/logging";
import { getOrders, setOrders } from "../utils/storage";

/**
 * Fetches all orders from the server and sets them in the store.
 */
export const fetchOrders = async () => {
  try {
    const response = await api.getOrders();
    setOrders(response);
  } catch (error) {
    logError("fetchOrders", error);
    throw error;
  }
};

import { create } from "zustand";
import { Cart } from "../types";

interface CartState {
  cart: Cart;
  setCart: (cart: Cart) => void;
}

const useCartStore = create<CartState>((set) => ({
  cart: { _id: "", user: "", items: [], total: 0 },
  setCart: (cart) => set({ cart }),
}));

export default useCartStore;

import { useState, useCallback } from "react";

export const useRequest = <T,>() => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [data, setData] = useState<T | null>(null);

  const execute = useCallback(async (requestFn: () => Promise<T>) => {
    setLoading(true);
    setError(null);
    try {
      const result = await requestFn();
      setData(result);
    } catch (err) {
      setError("Something went wrong. Please try again.");
      console.error(err);
    } finally {
      setLoading(false);
    }
  }, []);

  return { data, loading, error, execute };
};

import axios from "./axiosConfig";
import { Order } from "../types";
import { authHeader } from "../utils";

// Fetch all orders
export const getOrders = async (): Promise<Order[]> => {
  const response = await axios.get("/orders", authHeader());
  return response.data;
};

// Place an order
export const placeOrder = async (): Promise<Order> => {
  const response = await axios.post("/orders", null, authHeader());
  return response.data;
};

// Get order by ID
export const getOrderById = async (orderId: string): Promise<Order> => {
  const response = await axios.get(`/orders/${orderId}`, authHeader());
  return response.data;
};