75 lines
2.1 KiB
JavaScript
75 lines
2.1 KiB
JavaScript
import React, { useMemo } from "react";
|
|
import axios from "axios";
|
|
import { useSelector } from "react-redux";
|
|
import { AppBar, Toolbar, IconButton, Badge, Button } from "@material-ui/core";
|
|
import ShoppingCartIcon from "@material-ui/icons/ShoppingCart";
|
|
import ArrowBackIcon from "@material-ui/icons/ArrowBack";
|
|
import { useNavigate, useLocation } from "react-router-dom";
|
|
|
|
const apiUrl = process.env.REACT_APP_API_URL;
|
|
|
|
const selectPosterSelections = (state) => state.posterSelections;
|
|
|
|
const NavBar = () => {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
|
|
const posterSelections = useSelector(selectPosterSelections);
|
|
const selectedPosters = useMemo(() => {
|
|
return Object.values(posterSelections).flat();
|
|
}, [posterSelections]);
|
|
|
|
const totalSelected = selectedPosters.length;
|
|
|
|
const handleBack = () => {
|
|
navigate(-1);
|
|
};
|
|
|
|
const handleCart = () => {
|
|
navigate("/Cart");
|
|
};
|
|
|
|
const handleResetprofile = async () => {
|
|
try {
|
|
await axios.delete(`${apiUrl}/api/delete-csv`, { withCredentials: true });
|
|
navigate("/");
|
|
} catch (error) {
|
|
console.error("Error deleting CSV file:", error);
|
|
}
|
|
};
|
|
|
|
const isPosterSelectorPage = location.pathname !== "/PosterSelector";
|
|
|
|
return (
|
|
<AppBar position="fixed" className="navbar">
|
|
<Toolbar className="toolbar">
|
|
{isPosterSelectorPage ? (
|
|
<IconButton edge="start" className="back-button" onClick={handleBack}>
|
|
<ArrowBackIcon />
|
|
</IconButton>
|
|
) : (
|
|
<IconButton edge="start" className="back-button" disabled>
|
|
{/* Disabled IconButton */}
|
|
</IconButton>
|
|
)}
|
|
<div>
|
|
<Button className="refresh-button" onClick={handleResetprofile}>
|
|
Reset Profile
|
|
</Button>
|
|
<IconButton edge="end" className="cart-button" onClick={handleCart}>
|
|
<Badge
|
|
badgeContent={totalSelected}
|
|
color="secondary"
|
|
overlap="rectangular"
|
|
>
|
|
<ShoppingCartIcon />
|
|
</Badge>
|
|
</IconButton>
|
|
</div>
|
|
</Toolbar>
|
|
</AppBar>
|
|
);
|
|
};
|
|
|
|
export default NavBar;
|