Hugyouu/Letterboxd-Diary-Posters-Picker
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Card updates

Browse Source
This commit is contained in:
Hugo Pierret
2024-11-30 14:30:56 +01:00
parent 0c5b2b4bbc
commit d127beed48
3 changed files with 98 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package-lock.json generated
View File

@@ -14805,6 +14805,7 @@
"version": "0.453.0",
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.453.0.tgz",
"integrity": "sha512-kL+RGZCcJi9BvJtzg2kshO192Ddy9hv3ij+cPrVPWSRzgCWCVazoQJxOjAwgK53NomL07HB7GPHW120FimjNhQ==",
"license": "ISC",
"peerDependencies": {
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
}

119
src/components/Cart.js
View File

@@ -1,7 +1,8 @@
import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { removePoster } from '../services/action';
import DeleteIcon from '@material-ui/icons/Delete';
import React, { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { removePoster } from "../services/action";
import DeleteIcon from "@material-ui/icons/Delete";
import { Camera } from "lucide-react";
const apiUrl = process.env.REACT_APP_API_URL;
@@ -10,11 +11,11 @@ const Cart = () => {
const selectedPosters = useSelector((state) => {
const selections = state.posterSelections;
return Object.entries(selections).flatMap(([movieId, posters]) =>
posters.map((posterId) => ({ movieId, posterId }))
posters.map((posterId) => ({ movieId, posterId }))
);
});
const [downloadFormat, setDownloadFormat] = useState('zip');
const [downloadFormat, setDownloadFormat] = useState("zip");
const handleRemovePoster = (movieId, posterId) => {
dispatch(removePoster(movieId, posterId));
@@ -23,9 +24,9 @@ const Cart = () => {
const handleDownload = async () => {
try {
const response = await fetch(`${apiUrl}/api/download-posters`, {
method: 'POST',
method: "POST",
headers: {
'Content-Type': 'application/json',
"Content-Type": "application/json",
},
body: JSON.stringify({
posters: selectedPosters,
@@ -33,70 +34,94 @@ const Cart = () => {
}),
});
if (!response.ok) throw new Error('Download failed');
if (!response.ok) throw new Error("Download failed");
const contentType = response.headers.get('content-type');
if (contentType && contentType.includes('application/zip')) {
const contentType = response.headers.get("content-type");
if (contentType && contentType.includes("application/zip")) {
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
const link = document.createElement("a");
link.href = url;
link.download = 'posters.zip';
link.download = "posters.zip";
document.body.appendChild(link);
link.click();
link.remove();
window.URL.revokeObjectURL(url);
} else {
throw new Error('Invalid response format');
throw new Error("Invalid response format");
}
} catch (error) {
console.error('Failed to download posters:', error);
console.error("Failed to download posters:", error);
}
};
const totalSlots = 4;
const posterSlots = [...Array(totalSlots)].map((_, index) => {
if (index < selectedPosters.length) {
return selectedPosters[index];
}
return null;
});
return (
<div className="cart-container">
<div className="poster-grid">
{selectedPosters.map((poster) => (
<div key={`${poster.movieId}-${poster.posterId}`} className="poster-card">
<div className="cart-container">
<div className="poster-grid">
{posterSlots.map((poster, index) => (
<div
key={
poster ? `${poster.movieId}-${poster.posterId}` : `empty-${index}`
}
className="poster-card"
>
{poster ? (
<>
<img
src={`https://image.tmdb.org/t/p/w500${poster.posterId}`}
alt="Movie poster"
className="poster-image"
src={`https://image.tmdb.org/t/p/w500${poster.posterId}`}
alt="Movie poster"
className="poster-image"
/>
<div className="delete-overlay">
<button
className="delete-button"
onClick={() => handleRemovePoster(poster.movieId, poster.posterId)}
className="delete-button"
onClick={() =>
handleRemovePoster(poster.movieId, poster.posterId)
}
>
<DeleteIcon />
</button>
</div>
</>
) : (
<div className="empty-poster">
<Camera size={48} />
<p>Emplacement disponible</p>
</div>
))}
</div>
<div className="action-panel">
<h2>Download Options</h2>
<select
value={downloadFormat}
onChange={(e) => setDownloadFormat(e.target.value)}
className="format-select"
>
<option value="zip">ZIP</option>
<option value="tar">TAR</option>
<option value="7z">7Z</option>
</select>
<button
className="download-button"
onClick={handleDownload}
disabled={selectedPosters.length === 0}
>
Download Selected
</button>
</div>
)}
</div>
))}
</div>
<div className="action-panel">
<h2>Download Options</h2>
<select
value={downloadFormat}
onChange={(e) => setDownloadFormat(e.target.value)}
className="format-select"
>
<option value="zip">ZIP</option>
<option value="tar">TAR</option>
<option value="7z">7Z</option>
</select>
<button
className="download-button"
onClick={handleDownload}
disabled={selectedPosters.length === 0}
>
Download Selected
</button>
</div>
</div>
);
};
export default Cart;
export default Cart;

26
src/styles/scss/_cart.scss
View File

@@ -54,6 +54,30 @@
}
}
}
.empty-poster {
width: 100%;
height: 100%;
background-color: #f5f6fa10;
border: 2px #95a5a6;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #7f8c8d;
svg {
margin-bottom: 1rem;
color: #95a5a6;
}
p {
font-size: 0.875rem;
text-align: center;
padding: 0 1rem;
}
}
}
.action-panel {
@@ -102,4 +126,4 @@
}
}
}
}
}