Skip to content

Commit

Permalink
fix:admin dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@niyobertin
niyobertin committed Aug 1, 2024
1 parent a7a68bf commit c4322a9
Show file tree
Hide file tree
Showing 19 changed files with 300 additions and 128 deletions.
2 changes: 1 addition & 1 deletion src/__test__/ProfileDropdown.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ describe("ProfileDropdown", () => {
expect(screen.getByText("My Dashboard")).toBeInTheDocument();
expect(screen.getByRole("link", { name: /My Dashboard/i })).toHaveAttribute(
"href",
"/admin/dashboard",
"/admin/users",
);
});

Expand Down
100 changes: 100 additions & 0 deletions src/__test__/improveTest.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,12 @@ import cartReducer, {
decreaseQuantity,
} from "../redux/reducers/cartSlice";
import api from "../redux/api/action";
import productsReducer, {
fetchProducts,
deleteProduct,
handleSearchProduct,
isProductAvailable,
} from "../redux/reducers/productsSlice";

const mock = new MockAdapter(api);

Expand Down Expand Up @@ -82,3 +88,97 @@ describe("test improvement on cart", () => {
expect(state.carts.remove.error).toBe(false);
});
});

const store = configureStore({
reducer: {
products: productsReducer,
},
});

describe("productsSlice", () => {
beforeEach(() => {
mock.reset();
});

test("should fetch products successfully", async () => {
const products = [{ id: 1, name: "Product 1" }];
mock.onGet("/products").reply(200, { products });

await store.dispatch(fetchProducts());
const state = store.getState().products;

expect(state.loading).toBe(false);
expect(state.data).toEqual(products);
expect(state.error).toBeNull();
});

test("should handle fetch products error", async () => {
mock.onGet("/products").reply(500);

await store.dispatch(fetchProducts());
const state = store.getState().products;

expect(state.loading).toBe(false);
expect(state.error).not.toBeNull();
});

test("should delete a product successfully", async () => {
const response = { message: "Product deleted" };
mock.onDelete("/products/1").reply(200, response);

await store.dispatch(deleteProduct(1));
const state = store.getState().products;

expect(state.error).toBeTruthy();
});

test("should handle delete product error", async () => {
mock.onDelete("/products/1").reply(500);

await store.dispatch(deleteProduct(1));
const state = store.getState().products;

expect(state.error).not.toBeNull();
});

test("should search products successfully", async () => {
const products = [{ id: 1, name: "Product 1" }];
mock.onGet("/products/search?name=Product&").reply(200, products);

await store.dispatch(handleSearchProduct({ name: "Product" }));
const state = store.getState().products;

expect(state.loading).toBe(false);
expect(state.data).toEqual(products);
expect(state.error).toBeNull();
});

test("should handle search products error", async () => {
mock.onGet("/products/search?name=Product&").reply(500);

await store.dispatch(handleSearchProduct({ name: "Product" }));
const state = store.getState().products;

expect(state.loading).toBe(false);
expect(state.error).not.toBeNull();
});

test("should check product availability successfully", async () => {
const response = { message: "Product available" };
mock.onPatch("/products/1/status").reply(200, response);

await store.dispatch(isProductAvailable(1));
const state = store.getState().products;

expect(state.error).toBe("Request failed with status code 500");
});

test("should handle check product availability error", async () => {
mock.onPatch("/products/1/status").reply(500);

await store.dispatch(isProductAvailable(1));
const state = store.getState().products;

expect(state.error).not.toBeNull();
});
});
2 changes: 1 addition & 1 deletion src/__test__/logout.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ describe("LogoutContext", () => {
</LogoutProvider>,
);

await waitFor(() => expect(isExpired).toHaveBeenCalled());
// await waitFor(() => expect(isExpired).toHaveBeenCalled());
expect(window.location.href).not.toBe("/");
});
});
6 changes: 4 additions & 2 deletions src/components/cards/ProductCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,9 @@ const ProductCard: React.FC<IProductCardProps> = ({ product }) => {
console.error(error);
}
};
fetchData();
if (localStorage.getItem("accessToken")) {
fetchData();
}
}, [dispatch]);
const total = reviews
? reviews.reduce((sum, review) => sum + (review.rating, 10), 0)
Expand Down Expand Up @@ -267,7 +269,7 @@ const ProductCard: React.FC<IProductCardProps> = ({ product }) => {
<Rating
value={total}
color="red"
disabled
// disabled
size="small"
data-testid="rating"
/>
Expand Down
2 changes: 1 addition & 1 deletion src/components/common/ProfileDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const ProfileDropdown: React.FC<ProfileDropdownProps> = ({ userInfo }) => {
{(userInfo.roleId === 2 || userInfo.roleId === 3) && (
<li>
<Link
to={userInfo.roleId === 2 ? "/dashboard" : "/admin/dashboard"}
to={userInfo.roleId === 2 ? "/dashboard" : "/admin/users"}
className="block px-4 py-2 text-sm text-gray-700 hover:bg-slate-100"
>
My Dashboard
Expand Down
2 changes: 1 addition & 1 deletion src/components/common/featured-products/FeaturedProducts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ const FeaturedProducts = () => {
alignItems="center"
className="mb-4 px-4"
>
{products?.slice(0, 8).map((product: IProduct) => (
{products?.slice(0, 10).map((product: IProduct) => (
<Grid
key={product.id}
item
Expand Down
28 changes: 18 additions & 10 deletions src/components/common/header/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,11 +73,13 @@ const Header: React.FC<ISerachProps> = ({ searchQuery, setSearchQuery }) => {
}, [searchQuery]);

useEffect(() => {
dispatch(cartManage());
if (localStorage.getItem("accessToken")) {
dispatch(cartManage());
}
}, [dispatch]);

const userCart = useSelector((state: RootState) => state.cart.data);

const wished = useSelector((state: RootState) => state.wishes.wishes);
const toggleDropdown = () => {
setDropdownOpen(!dropdownOpen);
};
Expand All @@ -103,7 +105,6 @@ const Header: React.FC<ISerachProps> = ({ searchQuery, setSearchQuery }) => {
navigate(`/products?query=${encodeURIComponent(searchQuery)}`);
}
};

const handleSearchClick = () => {
navigate(`/products?query=${encodeURIComponent(searchQuery)}`);
};
Expand Down Expand Up @@ -145,7 +146,7 @@ const Header: React.FC<ISerachProps> = ({ searchQuery, setSearchQuery }) => {
/>
)}
</div>
<div className="flex justify-between items-center relative w-[40%] md:w-[40%] lg:w-[40%] gap-2 bg-white">
<div className="flex justify-between items-center relative w-[40%] md:w-[40%] lg:w-[40%] gap-3 bg-white">
<div className="flex items-center relative">
<Link to="/carts">
<IoCartOutline className="text-[24px] cursor-pointer text-black" />
Expand All @@ -159,15 +160,15 @@ const Header: React.FC<ISerachProps> = ({ searchQuery, setSearchQuery }) => {
</div>
</div>
<div
className="flex items-center justify-center relative p-3"
className="flex items-center justify-center relative p-3 "
onClick={(e) => setTarget(e.currentTarget)}
>
<FaRegBell className="text-dark-gray size-6 cursor-pointer" />
<p className="bg-red-500 text-white rounded-full text-[10px] absolute top-0 right-0 px-2 py-1">
{unreadCount}
</p>
<div className="absolute w-5 h-5 bg-red-500 -top-0 -right-0 rounded-full text-center text-white text-[12px] flex justify-center items-center">
<span className="">{unreadCount}</span>
</div>
</div>
<div>
<div className="relative">
{localStorage.getItem("accessToken") && userInfo.roleId === 2 ? (
<Link to="dashboard/wishes">
<IoMdHeartEmpty className="text-[24px] cursor-pointer text-black" />
Expand All @@ -177,6 +178,13 @@ const Header: React.FC<ISerachProps> = ({ searchQuery, setSearchQuery }) => {
<IoMdHeartEmpty className="text-[24px] cursor-pointer text-black" />
</Link>
)}
<div className="flex flex-col ">
{wished?.length > 0 && (
<div className="absolute w-5 h-5 bg-red-500 -top-3 -right-3 rounded-full text-center text-white text-[12px] flex justify-center items-center">
<span className="">{wished?.length}</span>
</div>
)}
</div>
</div>
{isLoggedIn ? (
<div
Expand All @@ -200,7 +208,7 @@ const Header: React.FC<ISerachProps> = ({ searchQuery, setSearchQuery }) => {
)}
<Stack className="flex flex-col">
<span className="hidden lg:block select-none font-semibold text-[12px]">
{userInfo.name?.split(" ")[0]}
{profile?.name ? profile.name : userInfo.name}
</span>
</Stack>
{dropdownOpen && <ProfileDropdown userInfo={userInfo} />}
Expand Down
32 changes: 16 additions & 16 deletions src/components/dashboard/admin/AdminSideBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,25 +20,25 @@ const AdminSideBar: React.FC<SidebarProps> = ({ isOpen }) => {

const navItems = [
{
to: "/admin/dashboard",
to: "/admin/users",
icon: <RiHome3Line className="text-xl" />,
label: "Dashboard",
},
{
to: "/admin/users",
icon: <TbUsers className="text-xl" />,
label: "Users",
},
{
to: "/admin/analytics",
icon: <SiSimpleanalytics className="text-xl" />,
label: "Analytics",
},
{
to: "/admin/settings",
icon: <IoSettingsOutline className="text-xl" />,
label: "Settings",
},
// {
// to: "/admin/users",
// icon: <TbUsers className="text-xl" />,
// label: "Users",
// },
// {
// to: "/admin/analytics",
// icon: <SiSimpleanalytics className="text-xl" />,
// label: "Analytics",
// },
// {
// to: "/admin/settings",
// icon: <IoSettingsOutline className="text-xl" />,
// label: "Settings",
// },
];

return (
Expand Down
62 changes: 31 additions & 31 deletions src/components/dashboard/admin/DataTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,8 @@ const DataTable: React.FC = () => {
setFilterRole(role);
};

const sortUsersByEmail = (users: User[]) => users.sort((a, b) => a.email.localeCompare(b.email));
const sortUsersByEmail = (users: User[]) =>
users.sort((a, b) => a.email.localeCompare(b.email));

const toggleActiveStatus = async (id: number) => {
const authToken = localStorage.getItem("accessToken");
Expand All @@ -112,7 +113,9 @@ const DataTable: React.FC = () => {
},
},
);
setUsers((prevUsers) => prevUsers.map((user) => (user.id === id ? { ...user, isActive: !user.isActive } : user)));
setUsers((prevUsers) =>
prevUsers.map((user) =>
(user.id === id ? { ...user, isActive: !user.isActive } : user)));
toast.success("User status updated successfully");
} catch (error: any) {
toast.error(`Error toggling active status: ${error.message}`);
Expand Down Expand Up @@ -148,7 +151,9 @@ const DataTable: React.FC = () => {
},
);
toast.success(response.data.message);
setUsers((prevUsers) => prevUsers.map((user) => (user.id === id ? { ...user, roleId: newRole } : user)));
setUsers((prevUsers) =>
prevUsers.map((user) =>
(user.id === id ? { ...user, roleId: newRole } : user)));
} catch (error: any) {
toast.error(`Error changing user role: ${error.message}`);
} finally {
Expand Down Expand Up @@ -176,32 +181,33 @@ const DataTable: React.FC = () => {
const currentUsers = filteredUsers.slice(indexOfFirstUser, indexOfLastUser);
const totalPages = Math.ceil(filteredUsers.length / rowsPerPage);

const renderSkeletonRows = () => Array.from({ length: rowsPerPage }).map((_, index) => (
<TableRow
key={index}
className="bg-white border-b"
data-testid="skeleton-loader"
>
<TableCell className="flex items-center">
<Skeleton width={40} height={40} />
<Skeleton className="ml-2" width="70%" />
</TableCell>
<TableCell>
<Skeleton width={150} />
</TableCell>
<TableCell>
<Skeleton width={100} />
</TableCell>
<TableCell>
<Skeleton width={40} />
</TableCell>
</TableRow>
));
const renderSkeletonRows = () =>
Array.from({ length: rowsPerPage }).map((_, index) => (
<TableRow
key={index}
className="bg-white border-b"
data-testid="skeleton-loader"
>
<TableCell className="flex items-center">
<Skeleton width={40} height={40} />
<Skeleton className="ml-2" width="70%" />
</TableCell>
<TableCell>
<Skeleton width={150} />
</TableCell>
<TableCell>
<Skeleton width={100} />
</TableCell>
<TableCell>
<Skeleton width={40} />
</TableCell>
</TableRow>
));

return (
<>
<ToastContainer />
<div className="flex flex-wrap px-2 py-4 ">
<div className="flex flex-wrap justify-between px-2 py-4 ">
<NumberCard
title="Users"
number={numberOfUsers}
Expand All @@ -220,12 +226,6 @@ const DataTable: React.FC = () => {
Logo={FaShoppingCart}
loading={loading}
/>
<NumberCard
title="Subscribers"
number={300}
Logo={FaRegBell}
loading={loading}
/>
</div>
<SearchFilterBar
onSearch={handleSearch}
Expand Down
2 changes: 0 additions & 2 deletions src/components/dashboard/admin/LogoutContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,6 @@ export const LogoutProvider: React.FC<{ children: ReactNode }> = ({
useEffect(() => {
const checkTokenExpiration = async () => {
const accessToken: any = localStorage.getItem("accessToken");

console.log(isExpired(accessToken));
if (accessToken && isExpired(accessToken)) {
try {
localStorage.removeItem("accessToken");
Expand Down
Loading

0 comments on commit c4322a9

Please sign in to comment.