Fix poster selection and cart

src/components/NavBar.js

@@ -1,17 +1,20 @@
-import React from "react";
+import React, { useMemo } from "react";
 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 selectPosterSelections = (state) => state.posterSelections;
+
 const NavBar = ({ onRefreshFiles }) => {
     const navigate = useNavigate();
     const location = useLocation();
-    const selectedPosters = useSelector((state) => {
-        const selections = state.posterSelections;
-        return Object.values(selections).flat();
-    });
+
+    const posterSelections = useSelector(selectPosterSelections);
+    const selectedPosters = useMemo(() => {
+        return Object.values(posterSelections).flat();
+    }, [posterSelections]);
 
     const totalSelected = selectedPosters.length;
 
@@ -29,20 +32,39 @@ const NavBar = ({ onRefreshFiles }) => {
         <AppBar position="fixed" className="navbar">
             <Toolbar className="toolbar">
                 {isPosterSelectorPage ? (
-                    <IconButton edge="start" className="back-button" onClick={handleBack}>
+                    <IconButton
+                        edge="start"
+                        className="back-button"
+                        onClick={handleBack}
+                    >
                         <ArrowBackIcon />
                     </IconButton>
                 ) : (
-                    <IconButton edge="start" className="back-button" disabled>
-                        {/* Un IconButton vide et désactivé */}
+                    <IconButton
+                        edge="start"
+                        className="back-button"
+                        disabled
+                    >
+                        {/* Disabled IconButton */}
                     </IconButton>
                 )}
                 <div>
-                    <Button className="refresh-button" onClick={onRefreshFiles}>
+                    <Button
+                        className="refresh-button"
+                        onClick={onRefreshFiles}
+                    >
                         Refresh Files
                     </Button>
-                    <IconButton edge="end" className="cart-button" onClick={handleCart}>
-                        <Badge badgeContent={totalSelected} color="secondary">
+                    <IconButton
+                        edge="end"
+                        className="cart-button"
+                        onClick={handleCart}
+                    >
+                        <Badge
+                            badgeContent={totalSelected}
+                            color="secondary"
+                            overlap="rectangular"
+                        >
                             <ShoppingCartIcon />
                         </Badge>
                     </IconButton>
@@ -52,4 +74,4 @@ const NavBar = ({ onRefreshFiles }) => {
     );
 };
 
-export default NavBar;
+export default NavBar;