Fix poster download name files

src/components/Cart.js

@@ -13,6 +13,7 @@ const Cart = () => {
         posters.map((poster) => ({
           movieId,
           posterId: typeof poster === "string" ? poster : poster.posterId,
+          watchedDate: poster.watchedDate,
         }))
     );
   });

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));
     }
   };
 

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">

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 },
   };
 };
 

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: {

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;