Skip to content

Comment Modal Animation #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
VialsShiny merged 5 commits into from
Nov 28, 2025
Merged

Comment Modal Animation #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
301fd77
Adding Animation for Comment Modal
VialsShiny Nov 28, 2025
179e950
Adding 'z-99' to the NavBar
VialsShiny Nov 28, 2025
0a6a3e7
Patching Responsive on PostDetails
VialsShiny Nov 28, 2025
8239d67
eslint
VialsShiny Nov 28, 2025
ab8a7a1
eslint fix (2)
VialsShiny Nov 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions frontend/src/components/features/posts/PostDetail.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,9 @@ function PostDetail({
const [newComments, setNewComments] = useState(comments);

useEffect(() => {
if (userLikes[id]) {setLiked(true);}
if (userLikes[id]) {
setLiked(true);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

Expand Down Expand Up @@ -70,7 +72,9 @@ function PostDetail({

const { comment } = FormatForm(event);

if (!comment) {return;}
if (!comment) {
return;
}

fetchData(`${apiUrl}api/posts/${id}/comments`, {
method: 'POST',
Expand All @@ -97,10 +101,10 @@ function PostDetail({
}

return (
<div className="w-full max-h-[85vh] mx-12 flex gap-6 bg-white/80 justify-center md:flex-row flex-col">
<div className="w-full h-fit px-12 py-12 mb-6 lg:mb-0 flex gap-6 bg-white/80 justify-center md:flex-row flex-col">
{/* Post */}
<article
className="flex-1 md:max-w-1/3 max-h-[85vh] bg-white rounded-lg border border-gray-100 shadow-sm overflow-hidden flex flex-col"
className="flex-1 w-full lg:max-w-1/3 h-fit bg-white rounded-lg border border-gray-100 shadow-sm flex flex-col"
aria-labelledby={`cap-${id}`}
>
<div className="flex items-center justify-between px-5 py-4 border-b border-gray-100 bg-white flex-shrink-0">
Expand Down Expand Up @@ -136,7 +140,7 @@ function PostDetail({
<img
src={`${image_url}.webp`}
alt={content.slice(0, 120) || 'post image'}
className="w-full max-h-[50vh] object-contain bg-black border-y border-gray-100 flex-shrink-0"
className="w-full lg:max-h-[50vh] object-contain bg-black border-y border-gray-100 flex-shrink-0"
loading="lazy"
fetchpriority="high"
/>
Expand Down Expand Up @@ -237,7 +241,7 @@ function PostDetail({
<aside
className={`flex flex-col bg-gray-50 border border-gray-100 rounded-lg shadow-sm transition-all duration-300 ease-in-out ${
IsOpen
? 'w-[360px] md:max-w-[40%] max-h-[85vh] opacity-100 visible'
? 'w-[360px] md:max-w-[40%] min-h-full opacity-100 visible'
: 'w-0 max-w-0 h-0 opacity-0 invisible overflow-hidden border-0'
}`}
>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/layout/NavBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const NavBar = () => {

return isDesktop ? (
<nav
className="w-full bg-white border-b border-gray-200 shadow-sm"
className="relative w-full bg-white border-b border-gray-200 shadow-sm z-99"
role="navigation"
aria-label="Navigation principale"
>
Expand Down
143 changes: 75 additions & 68 deletions frontend/src/layout/CommentModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import Box from '@mui/material/Box';
import Modal from '@mui/material/Modal';
import Slide from '@mui/material/Slide';
import { useState } from 'react';
import { fetchData } from '../components/services/Fetch';
import throwError from '../components/services/throwError';
Expand Down Expand Up @@ -34,13 +35,13 @@ async function handleComment(
});

setComment((prev) => [
...prev,
{
comment,
created_at: new Date().toISOString(),
user: username,
user_image_url: user_image_url,
},
...prev,
]);

event.target.reset();
Expand All @@ -63,85 +64,91 @@ export default function CommentsModal({
<Modal
open={isOpen}
onClose={onClose}
closeAfterTransition
slotProps={{
backdrop: {
sx: {
backdropFilter: 'blur(5px)', // optionnel : flou
backdropFilter: 'blur(5px)',
},
},
}}
>
<Box
className="absolute inset-0 px-4 pt-8 md:py-8 md:px-0 flex items-end md:items-center justify-center md:justify-end"
onClick={onClose}
>
<div
className="h-full md:h-full w-full md:w-1/2 bg-white rounded-t-lg md:rounded-l-lg md:rounded-r-none shadow-lg flex flex-col justify-center"
onClick={(e) => e.stopPropagation()}
{/* Ajout de Fade pour l'animation */}
<Slide in={isOpen} direction="left" timeout={400}>
<Box
className="absolute inset-0 px-4 pt-8 md:py-8 md:px-0 flex items-end md:items-center justify-center md:justify-end"
onClick={onClose}
>
{/* Header */}
<div className="flex justify-between items-center p-4 border-b">
<h2 className="text-lg font-bold">Commentaires</h2>
<button
onClick={onClose}
className="text-gray-500 hover:text-gray-800 text-xl font-bold"
>
×
</button>
</div>

{/* Comments list */}
<div className="flex-1 overflow-y-auto p-4 space-y-3">
{newComments.length === 0 && (
<p className="text-gray-400 text-center">
Pas encore de commentaires
</p>
)}
{newComments.map((comment, i) => (
<Comments comment={comment} index={i} key={i} />
))}
</div>

{/* Add comment input */}
{currentUser ? (
<form
action="#"
className="p-4 border-t flex items-center gap-2"
onSubmit={(e) =>
handleComment(
setNewComments,
e,
currentToken,
currentUserName,
currentUserPP,
id,
)
}
>
<input
type="text"
placeholder="Ajouter un commentaire..."
className="flex-1 border rounded-full px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
name="comment"
/>
<div
className="h-full md:h-full w-full md:w-1/2 bg-white rounded-t-lg md:rounded-l-lg md:rounded-r-none shadow-lg flex flex-col justify-center"
onClick={(e) => e.stopPropagation()}
>
{/* Header */}
<div className="flex justify-between items-center p-4 border-b">
<h2 className="text-lg font-bold">Commentaires</h2>
<button
type="submit"
className="bg-blue-500 text-white px-4 py-2 rounded-full text-sm font-semibold hover:bg-blue-600 transition-colors"
onClick={onClose}
className="text-gray-500 hover:text-gray-800 text-xl font-bold"
>
Envoyer
×
</button>
</form>
) : (
<div className="p-4 border-t rounded-md bg-gray-50 text-gray-600 text-sm text-center">
<p>
Vous devez être{' '}
<span className="font-semibold">connecté</span>{' '}
pour accéder à cette fonctionnalité
</p>
</div>
)}
</div>
</Box>

{/* Comments list */}
<div className="flex-1 overflow-y-auto p-4 space-y-3">
{newComments.length === 0 && (
<p className="text-gray-400 text-center">
Pas encore de commentaires
</p>
)}
{newComments.map((comment, i) => (
<Comments comment={comment} index={i} key={i} />
))}
</div>

{/* Add comment input */}
{currentUser ? (
<form
action="#"
className="p-4 border-t flex items-center gap-2"
onSubmit={(e) =>
handleComment(
setNewComments,
e,
currentToken,
currentUserName,
currentUserPP,
id,
)
}
>
<input
type="text"
placeholder="Ajouter un commentaire..."
className="flex-1 border rounded-full px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
name="comment"
/>
<button
type="submit"
className="bg-blue-500 text-white px-4 py-2 rounded-full text-sm font-semibold hover:bg-blue-600 transition-colors"
>
Envoyer
</button>
</form>
) : (
<div className="p-4 border-t rounded-md bg-gray-50 text-gray-600 text-sm text-center">
<p>
Vous devez être{' '}
<span className="font-semibold">
connecté
</span>{' '}
pour accéder à cette fonctionnalité
</p>
</div>
)}
</div>
</Box>
</Slide>
</Modal>
);
}
49 changes: 25 additions & 24 deletions frontend/src/pages/PostDetails.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,22 @@ export default function PostDetails() {
.catch((error) => setError(error));
}, [id, apiUrl]);

if (error)
{return (
<div className="flex flex-col items-center justify-center py-16 text-center">
<p className="text-red-500 font-semibold mb-2">
if (error) {
return (
<div className="flex flex-col items-center justify-center py-16 text-center">
<p className="text-red-500 font-semibold mb-2">
Une erreur est survenue 😢
</p>
<p className="text-gray-600 text-sm">
{error.message || String(error)}
</p>
</div>
);}
</p>
<p className="text-gray-600 text-sm">
{error.message || String(error)}
</p>
</div>
);
}

if (!post) {return <Loader loader="dote" />;}
if (!post) {
return <Loader loader="dote" />;
}

return (
<>
Expand Down Expand Up @@ -78,19 +81,17 @@ export default function PostDetails() {
)}
</Helmet>

<div className="w-full h-fit md:h-[80vh] py-12 md:py-12 flex justify-center items-center">
<PostDetail
author={post.author}
author_image_url={post.author_image_url}
comments={post.comments}
content={post.content}
created_at={post.created_at}
id={post.id}
image_url={post.image_url}
likes={post.likes}
key={post.id}
/>
</div>
<PostDetail
author={post.author}
author_image_url={post.author_image_url}
comments={post.comments}
content={post.content}
created_at={post.created_at}
id={post.id}
image_url={post.image_url}
likes={post.likes}
key={post.id}
/>
</>
);
}
Loading