+
+);
+
+export default ConfirmModal;
diff --git a/src/components/dashboard/CustomSelect.tsx b/src/components/dashboard/CustomSelect.tsx
index 240eae1..9338e72 100644
--- a/src/components/dashboard/CustomSelect.tsx
+++ b/src/components/dashboard/CustomSelect.tsx
@@ -18,28 +18,28 @@ const CustomSelect: React.FC
+
+
+
+ {message}
++ + {product.name} + . + + {' '} + This can't be + undone +
+
+
+
+
+ setIsOpen(!isOpen)}
data-testid={testId}
>
- {selectedOption}
+ {defaultValue}
{' '}
{isOpen && (
-
+
{loading ? (
loading categories...
@@ -52,7 +52,7 @@ const CustomSelect: React.FC = ({
options.map((option) => (
handleOptionClick(option)}
>
{option.name}
diff --git a/src/components/dashboard/FileUpload.tsx b/src/components/dashboard/FileUpload.tsx
index 4fbe595..89a7775 100644
--- a/src/components/dashboard/FileUpload.tsx
+++ b/src/components/dashboard/FileUpload.tsx
@@ -6,10 +6,18 @@ interface FileUploadProps {
onDrop: (acceptedFiles: File[]) => void;
remove: (file: File, event: React.MouseEvent) => void;
files: File[];
+ existingImages?: string[];
+ removeExistingImage: (
+ index: number,
+ image: string,
+ event: React.MouseEvent,
+ ) => void;
}
const FileUpload = forwardRef(
- ({ onDrop, remove, files }, ref) => {
+ ({
+ onDrop, remove, files, existingImages, removeExistingImage,
+ }, ref) => {
const { getRootProps, getInputProps, isDragActive } = useDropzone({
onDrop,
accept: {
@@ -22,38 +30,62 @@ const FileUpload = forwardRef(
return (
- {files.length > 0 ? (
- files.map((file) => (
- = ({ toggleSidebar }) => (
-
+
- })
-
);
},
diff --git a/src/components/dashboard/Header.tsx b/src/components/dashboard/Header.tsx
index 3a8161c..7e99d7d 100644
--- a/src/components/dashboard/Header.tsx
+++ b/src/components/dashboard/Header.tsx
@@ -10,7 +10,7 @@ interface HeaderProps {
}
const Header: React.FC{`${file.name.slice(0, 15)}...`}
-
diff --git a/src/components/dashboard/SideBar.tsx b/src/components/dashboard/SideBar.tsx
index 5e838cf..a6b1980 100644
--- a/src/components/dashboard/SideBar.tsx
+++ b/src/components/dashboard/SideBar.tsx
@@ -4,88 +4,99 @@ import { IoBriefcaseOutline, IoSettingsOutline } from "react-icons/io5";
import { AiFillProduct } from "react-icons/ai";
import { MdInsertChartOutlined } from "react-icons/md";
import { FiLogOut } from "react-icons/fi";
-import { NavLink } from "react-router-dom";
+import { NavLink, useLocation } from "react-router-dom";
import { FaCircle } from "react-icons/fa";
interface SidebarProps {
isOpen: boolean;
}
-const SideBar: React.FC = ({ isOpen }) => (
-
= ({ isOpen }) => {
+ const location = useLocation();
+
+ const getLinkClass = (path: string) => (location.pathname === path ? "text-primary" : "text-dark-gray");
+
+ return (
+
-
+
+ {
try {
@@ -23,4 +23,26 @@ const addProduct = createAsyncThunk(
},
);
-export default addProduct;
+export const updateProduct = createAsyncThunk(
+ "updateProduct",
+ async (payload: any, { rejectWithValue }) => {
+ try {
+ const response = await api.patch(
+ `/products/${payload.id}`,
+ payload.data,
+ {
+ headers: {
+ "Content-Type": "multipart/form-data",
+ Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+ },
+ },
+ );
+ const data = await response.data;
+ return data;
+ } catch (err) {
+ const error = err as AxiosError;
+ console.log(error);
+ return rejectWithValue(error.response?.data);
+ }
+ },
+);
diff --git a/src/redux/reducers/productsSlice.ts b/src/redux/reducers/productsSlice.ts
new file mode 100644
index 0000000..5c128b1
--- /dev/null
+++ b/src/redux/reducers/productsSlice.ts
@@ -0,0 +1,68 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import { AxiosError } from "axios";
+
+import api from "../api/api";
+
+export const fetchProducts = createAsyncThunk(
+ "products",
+ async (_, { rejectWithValue }) => {
+ try {
+ const response = await api.get("/products", {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+ },
+ });
+ return response.data.products;
+ } catch (err) {
+ const error = err as AxiosError;
+ return rejectWithValue(error.response?.data);
+ }
+ },
+);
+
+export const deleteProduct = createAsyncThunk(
+ "products/delete",
+ async (id: number, { rejectWithValue }) => {
+ try {
+ const response = await api.delete(`/products/${id}`, {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+ },
+ });
+ return response.data;
+ } catch (err) {
+ return rejectWithValue(err);
+ }
+ },
+);
+
+const productsSlice = createSlice({
+ name: "products",
+ initialState: {
+ loading: false,
+ data: [],
+ error: null,
+ },
+ reducers: {
+ setProducts: (state, action) => {
+ state.data = action.payload;
+ },
+ },
+ extraReducers: (builder) => {
+ builder
+ .addCase(fetchProducts.pending, (state) => {
+ state.loading = true;
+ })
+ .addCase(fetchProducts.fulfilled, (state, action) => {
+ state.loading = false;
+ state.data = action.payload;
+ })
+ .addCase(fetchProducts.rejected, (state, action) => {
+ state.loading = false;
+ // @ts-ignore
+ state.error = action.payload || action.error.message;
+ });
+ },
+});
+
+export default productsSlice.reducer;
diff --git a/src/redux/store.ts b/src/redux/store.ts
index 5eaf138..76b9e7f 100644
--- a/src/redux/store.ts
+++ b/src/redux/store.ts
@@ -7,6 +7,7 @@ import getLinkReducer from "./reducers/getLinkSlice";
import resetReducer from "./reducers/resetPasswordSlice";
import categoriesReducer from "./reducers/categoriesSlice";
import updatePasswordApiSlice from "./api/updatePasswordApiSlice";
+import productsReducer from "./reducers/productsSlice";
const store = configureStore({
reducer: {
@@ -17,6 +18,7 @@ const store = configureStore({
reset: resetReducer,
categories: categoriesReducer,
updatePassword: updatePasswordApiSlice,
+ products: productsReducer,
},
});
diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx
index a768e5d..3aa39f7 100644
--- a/src/routes/AppRoutes.tsx
+++ b/src/routes/AppRoutes.tsx
@@ -12,6 +12,7 @@ import ResetPassword from "../pages/ResetPassword";
import SellerDashboard from "../dashboard/sellers/Index";
import AddProduct from "../dashboard/sellers/AddProduct";
import UpdatePasswordPage from "../pages/passwordUpdatePage";
+import Products from "../dashboard/sellers/Products";
const AppRoutes = () => (
@@ -28,6 +29,8 @@ const AppRoutes = () => (
);
diff --git a/src/schemas/productSchema.ts b/src/schemas/productSchema.ts
index 1ee06e8..0565267 100644
--- a/src/schemas/productSchema.ts
+++ b/src/schemas/productSchema.ts
@@ -1,6 +1,6 @@
import * as yup from "yup";
-const productSchema = yup.object().shape({
+export const productSchema = yup.object().shape({
name: yup.string().required("Name is required"),
price: yup
.number()
@@ -30,4 +30,17 @@ const productSchema = yup.object().shape({
.required("Images are required"),
});
-export default productSchema;
+export const updateProductSchema = yup.object().shape({
+ name: yup.string().optional(),
+ price: yup.number().typeError("Price must be a number").optional(),
+ stockQuantity: yup.number().optional().typeError("Quantity must be a number"),
+ description: yup.string().optional(),
+ categoryID: yup.number().optional().typeError("Category must be a number"),
+ expiryDate: yup.date().typeError("Invalid date format").nullable().optional(),
+ discount: yup
+ .number()
+ .nullable()
+ .typeError("Discount must be a number")
+ .optional(),
+ images: yup.array().of(yup.mixed().optional()).optional(),
+});
- = ({ checked, onChange }) => (
+
+);
+
+export default ToggleSwitch;
diff --git a/src/components/dashboard/products/CategorySelect.tsx b/src/components/dashboard/products/CategorySelect.tsx
new file mode 100644
index 0000000..8f8531f
--- /dev/null
+++ b/src/components/dashboard/products/CategorySelect.tsx
@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { FaAngleDown } from "react-icons/fa";
+
+interface CategorySelectProps {
+ options: string[];
+ defaultValue: string;
+ onSelect: (option: string) => void;
+}
+
+const CategorySelect: React.FC = ({
+ options,
+ defaultValue,
+ onSelect,
+}) => {
+ const [isOpen, setIsOpen] = useState(false);
+ const [selectedOption, setSelectedOption] = useState(defaultValue);
+
+ const handleOptionClick = (option: string) => {
+ setSelectedOption(option);
+ setIsOpen(false);
+ onSelect(option);
+ };
+
+ return (
+ ([]);
+
+ useEffect(() => {
+ dispatch(fetchProducts());
+ }, [dispatch]);
+
+ useEffect(() => {
+ const sorted = [...products].sort(
+ (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
+ );
+ setSortedProducts(sorted);
+ }, [products]);
+
+ const [confirmDeleteModal, setConfirmModal] = useState(false);
+
+ const [currentPage, setCurrentPage] = useState(1);
+ const [itemsPerPage, setItemsPerPage] = useState(5);
+
+ const indexOfLastItem = currentPage * itemsPerPage;
+ const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+ const currentItems = sortedProducts.slice(indexOfFirstItem, indexOfLastItem);
+
+ const handlePageChange = (
+ _event: React.ChangeEvent,
+ page: number,
+ ) => {
+ setCurrentPage(page);
+ };
+
+ const handleItemsPerPageChange = (
+ event: React.ChangeEvent<{ value: unknown }>,
+ ) => {
+ setItemsPerPage(event.target.value as number);
+ setCurrentPage(1);
+ };
+
+ const handleToggle = (id: number) => {
+ console.log("id", id);
+ };
+
+ const handleCancelDelete = () => {
+ setConfirmModal(false);
+ };
+
+ const handleDeleteClick = (product: any) => {
+ setSelectedProduct(product);
+ setConfirmModal(true);
+ };
+
+ const handleConfirmDelete = async () => {
+ if (selectedProduct !== null) {
+ try {
+ setLoadingDelete(true);
+ const response = await dispatch(
+ // @ts-ignore
+ deleteProduct(selectedProduct.id),
+ ).unwrap();
+ setLoadingDelete(false);
+ setConfirmModal(false);
+ dispatch(fetchProducts());
+ toast.success("Product was successfully deleted");
+ } catch (err: any) {
+ setLoadingDelete(false);
+ console.log(err);
+ toast.error(err.message);
+ }
+ }
+ };
+
+ return (
+ ([]);
+ const [removeImages, setRemoveImages] = useState([]);
+
+ const navigate = useNavigate();
useEffect(() => {
dispatch(fetchCategories());
+ dispatch(fetchProducts());
}, [dispatch]);
const {
@@ -40,7 +54,7 @@ const AddProduct: React.FC = () => {
control,
setValue,
} = useForm({
- resolver: yupResolver(productSchema),
+ resolver: yupResolver(id ? updateProductSchema : productSchema),
});
const handleSelect = (option) => {
@@ -48,6 +62,30 @@ const AddProduct: React.FC = () => {
setValue("categoryID", option.id);
};
+ useEffect(() => {
+ if (id && products.length) {
+ const selectedProduct = products.find(
+ (item: any) => item.id === Number(id),
+ );
+ setCategory(selectedProduct.category.name);
+ if (selectedProduct) {
+ setValue("name", selectedProduct.name);
+ setValue("price", selectedProduct.price);
+ setValue("stockQuantity", selectedProduct.stockQuantity);
+ setValue("discount", selectedProduct.discount);
+ setValue("categoryID", selectedProduct.categoryID);
+ setValue("description", selectedProduct.description);
+ const formattedExpiryDate = new Date(selectedProduct.expiryDate)
+ .toISOString()
+ .split("T")[0];
+ // @ts-ignore
+ setValue("expiryDate", formattedExpiryDate);
+ handleSelect(selectedProduct.category);
+ setExistingImages(selectedProduct.images);
+ }
+ }
+ }, [id, products, setValue]);
+
const handleDrop = useCallback((acceptedFiles: File[]) => {
setFiles((prevFiles) => [...prevFiles, ...acceptedFiles]);
}, []);
@@ -74,29 +112,63 @@ const AddProduct: React.FC = () => {
formData.append("images", file);
});
}
-
try {
- setLoading(true);
- // @ts-ignore
- const response = await dispatch(addProduct(formData)).unwrap();
- setLoading(false);
- console.log(response);
- toast.success("Product added successfully");
- setTimeout(() => {
- window.location.reload();
- }, 3000);
+ if (id) {
+ formData.append("removeImages", JSON.stringify(removeImages));
+ setLoading(true);
+ const response = await dispatch(
+ updateProduct({ id: Number(id), data: formData }),
+ ).unwrap();
+ setLoading(false);
+ if (response.status === 201) {
+ toast.success("Your product was updated successfully!");
+ setTimeout(() => {
+ navigate("/dashboard/products");
+ }, 3000);
+ } else {
+ toast.error("Failed to update product");
+ }
+ } else {
+ setLoading(true);
+ // @ts-ignore
+ const response = await dispatch(addProduct(formData)).unwrap();
+ setLoading(false);
+ toast.success("Product added successfully");
+ setTimeout(() => {
+ window.location.reload();
+ }, 3000);
+ }
} catch (err) {
setLoading(false);
const error = err as AxiosError;
- toast.error(error.message);
- console.log(error);
+ toast.error("An error occurred");
}
};
+ const handleRemoveExistingImage = (
+ index: number,
+ image: string,
+ event: React.MouseEvent,
+ ) => {
+ event.stopPropagation();
+ setRemoveImages((prevIndexes) => [...prevIndexes, image]);
+ setExistingImages((prevImages) => prevImages.filter((_, i) => i !== index));
+ };
+
return (
-
-
+
+
-
-
-);
+ );
+};
export default SideBar;
diff --git a/src/components/dashboard/Spinner.tsx b/src/components/dashboard/Spinner.tsx
new file mode 100644
index 0000000..940ec9e
--- /dev/null
+++ b/src/components/dashboard/Spinner.tsx
@@ -0,0 +1,16 @@
+const Spinner = () => (
+
+
+
+);
+
+export default Spinner;
diff --git a/src/components/dashboard/ToggleSwitch.tsx b/src/components/dashboard/ToggleSwitch.tsx
new file mode 100644
index 0000000..c99019b
--- /dev/null
+++ b/src/components/dashboard/ToggleSwitch.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+
+interface ToggleSwitchProps {
+ checked: boolean;
+ onChange: () => void;
+}
+
+const ToggleSwitch: React.FC
- eagles
-
-
+
-
+
+
+ eagles
+
+
+
+
-
-
-
+
+ );
+};
+
+export default CategorySelect;
diff --git a/src/components/dashboard/products/ProductsTable.tsx b/src/components/dashboard/products/ProductsTable.tsx
new file mode 100644
index 0000000..a20b88e
--- /dev/null
+++ b/src/components/dashboard/products/ProductsTable.tsx
@@ -0,0 +1,243 @@
+import React, { useEffect, useState } from "react";
+import { RiDeleteBin5Line } from "react-icons/ri";
+import { FaRegEdit } from "react-icons/fa";
+import { useSelector } from "react-redux";
+import { toast, ToastContainer } from "react-toastify";
+import { Link } from "react-router-dom";
+import Pagination from "@mui/material/Pagination";
+import Stack from "@mui/material/Stack";
+import { MenuItem, TextField } from "@mui/material";
+
+import ConfirmModal from "../ConfirmModal";
+import Spinner from "../Spinner";
+import {
+ deleteProduct,
+ fetchProducts,
+} from "../../../redux/reducers/productsSlice";
+import { useAppDispatch } from "../../../redux/hooks";
+import ToggleSwitch from "../ToggleSwitch";
+
+const ProductsTable: React.FC = () => {
+ const dispatch = useAppDispatch();
+ const products = useSelector((state: any) => state.products.data);
+ const loading = useSelector((state: any) => state.products.loading);
+ const [selectedProduct, setSelectedProduct] = useState(null);
+ const [loadingDelete, setLoadingDelete] = useState(false);
+ const [sortedProducts, setSortedProducts] = useState setIsOpen(!isOpen)}
+ >
+ {selectedOption}
+ {' '}
+
+ {isOpen && (
+
+ {options.map((option) => (
+
+ )}
+ handleOptionClick(option)}
+ >
+ {option}
+
+ ))}
+
+
+ );
+};
+
+export default ProductsTable;
diff --git a/src/dashboard/sellers/AddProduct.tsx b/src/dashboard/sellers/AddProduct.tsx
index 15f1214..498b581 100644
--- a/src/dashboard/sellers/AddProduct.tsx
+++ b/src/dashboard/sellers/AddProduct.tsx
@@ -4,18 +4,24 @@ import { yupResolver } from "@hookform/resolvers/yup";
import { useSelector } from "react-redux";
import { toast, ToastContainer } from "react-toastify";
import { AxiosError } from "axios";
+import { Link, useParams, useNavigate } from "react-router-dom";
+import { FaArrowLeft } from "react-icons/fa";
import Layout from "../../components/layouts/SellerLayout";
import TextInput from "../../components/common/TextInput";
import FileUpload from "../../components/dashboard/FileUpload";
import Button from "../../components/dashboard/Button";
import CustomSelect from "../../components/dashboard/CustomSelect";
-import productSchema from "../../schemas/productSchema";
+import {
+ productSchema,
+ updateProductSchema,
+} from "../../schemas/productSchema";
import AddCategory from "../../components/dashboard/AddCategory";
-import addProduct from "../../redux/api/productsApiSlice";
+import { addProduct, updateProduct } from "../../redux/api/productsApiSlice";
import { useAppDispatch } from "../../redux/hooks";
import { fetchCategories } from "../../redux/reducers/categoriesSlice";
import { RootState } from "../../redux/store";
+import { fetchProducts } from "../../redux/reducers/productsSlice";
export type ErrorType = {
error?: string;
@@ -28,9 +34,17 @@ const AddProduct: React.FC = () => {
const [loading, setLoading] = useState(false);
const categories = useSelector((state: RootState) => state.categories.data);
const dispatch = useAppDispatch();
+ const { id } = useParams();
+
+ const products = useSelector((state: any) => state.products.data);
+ const [existingImages, setExistingImages] = useState
+
+
+
+
+ | + Product name + | ++ Stock Quantity + | ++ Expiry Date + | ++ Price + | ++ Category + | ++ Active + | ++ Actions + | +
|---|---|---|---|---|---|---|
|
+ |
+ ||||||
| + No products found. + | +||||||
|
+ |
+ + {item.stockQuantity} + | ++ {new Date(item.expiryDate).toDateString()} + | ++ {item.price} + | ++ + {item.category.name} + + | +
+ |
+ + + + + + | +
+
+
+
+ {confirmDeleteModal && (
+
+
+
+
+
+
+
+
+
+