From b7dfc9734d529ffbe9b247e16b07dfe5120f21ce Mon Sep 17 00:00:00 2001
From: Hugo Pierret <hugo.pierret.hp@gmail.com>
Date: Sun, 22 Dec 2024 14:32:44 +0100
Subject: [PATCH] Fix poster download name files

---
 src/components/Cart.js           | 1 +
 src/components/PosterGallery.js  | 7 +++++--
 src/components/PosterSelector.js | 7 ++++---
 src/services/action.js           | 4 ++--
 src/services/store.js            | 4 ++--
 src/styles/scss/_cart.scss       | 2 +-
 6 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/Cart.js b/src/components/Cart.js
index 6bda3a5..8dfa2b0 100644
--- a/src/components/Cart.js
+++ b/src/components/Cart.js
@@ -13,6 +13,7 @@ const Cart = () => {
         posters.map((poster) => ({
           movieId,
           posterId: typeof poster === "string" ? poster : poster.posterId,
+          watchedDate: poster.watchedDate,
         }))
     );
   });
diff --git a/src/components/PosterGallery.js b/src/components/PosterGallery.js
index d585cd7..bbf35e7 100644
--- a/src/components/PosterGallery.js
+++ b/src/components/PosterGallery.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { useParams } from "react-router-dom";
+import { useLocation, useParams } from "react-router-dom";
 import axios from "axios";
 import { useSelector, useDispatch } from "react-redux";
 import { selectPoster, deselectPoster } from "../services/action";
@@ -16,10 +16,13 @@ import {
 import CheckIcon from "@material-ui/icons/Check";
 import NavBar from "./NavBar";
 import {Dialog} from "@mui/material";
+import matchers from "@testing-library/jest-dom/matchers";
 
 const apiUrl = process.env.REACT_APP_API_URL;
 
 const PosterGallery = () => {
+  const location = useLocation();
+  const { watchedDate } = location.state || {};
   const { movieName, movieYear } = useParams();
   const [posters, setPosters] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -77,7 +80,7 @@ const PosterGallery = () => {
     if (isPosterSelected) {
       dispatch(deselectPoster(movieName, movieYear, posterId));
     } else {
-      dispatch(selectPoster(movieName, movieYear, posterId));
+      dispatch(selectPoster(movieName, movieYear, posterId, watchedDate));
     }
   };
 
diff --git a/src/components/PosterSelector.js b/src/components/PosterSelector.js
index f3400ff..718e492 100644
--- a/src/components/PosterSelector.js
+++ b/src/components/PosterSelector.js
@@ -107,9 +107,10 @@ const PosterSelector = () => {
     }
   };
 
-  const handleMovieClick = (movieName, movieYear) => {
+  const handleMovieClick = (movieName, movieYear, watchedDate) => {
     navigate(
-      `/posters/${encodeURIComponent(movieName)}/${encodeURIComponent(movieYear)}`
+      `/posters/${encodeURIComponent(movieName)}/${encodeURIComponent(movieYear)}`,
+      {state: {watchedDate}}
     );
   };
 
@@ -168,7 +169,7 @@ const PosterSelector = () => {
                   <ListItem
                     button
                     key={index}
-                    onClick={() => handleMovieClick(movie.Name, movie.Year)}
+                    onClick={() => handleMovieClick(movie.Name, movie.Year, movie["Watched Date"])}
                     className="movie-item"
                   >
                     <Grid container alignItems="center">
diff --git a/src/services/action.js b/src/services/action.js
index 994a577..df1181e 100644
--- a/src/services/action.js
+++ b/src/services/action.js
@@ -4,11 +4,11 @@ export const REMOVE_POSTER = "REMOVE_POSTER";
 
 export const REMOVE_ALL_POSTERS = "REMOVE_ALL_POSTERS";
 
-export const selectPoster = (movieName, movieYear, posterId) => {
+export const selectPoster = (movieName, movieYear, posterId, watchedDate) => {
   const movieId = `${movieName}-${movieYear}`;
   return {
     type: SELECT_POSTER,
-    payload: { movieId, posterId },
+    payload: { movieId, posterId, watchedDate },
   };
 };
 
diff --git a/src/services/store.js b/src/services/store.js
index f1eb2a1..402ca73 100644
--- a/src/services/store.js
+++ b/src/services/store.js
@@ -6,10 +6,10 @@ import {DESELECT_POSTER, REMOVE_ALL_POSTERS, REMOVE_POSTER, SELECT_POSTER} from
 const posterSelectionReducer = (state = {}, action) => {
   switch (action.type) {
     case SELECT_POSTER: {
-        const { movieId, posterId } = action.payload;
+        const { movieId, posterId, watchedDate } = action.payload;
         return {
             ...state,
-            [movieId]: [...(state[movieId] || []), posterId],
+            [movieId]: [...(state[movieId] || []), { posterId, watchedDate }],
         };
     }
       case DESELECT_POSTER: {
diff --git a/src/styles/scss/_cart.scss b/src/styles/scss/_cart.scss
index 6ad75df..12a473d 100644
--- a/src/styles/scss/_cart.scss
+++ b/src/styles/scss/_cart.scss
@@ -101,7 +101,7 @@
       border-radius: 4px;
     }
 
-    .download-button {
+    .download-button, .clear-button {
       width: 100%;
       padding: 0.75rem;
       background-color: #00a346;