From 301fd77470ddc7ad2a24509ecfcf5cc1891480ee Mon Sep 17 00:00:00 2001
From: Drake <150128459+VialsShiny@users.noreply.github.com>
Date: Fri, 28 Nov 2025 13:54:49 +0100
Subject: [PATCH 1/5] Adding Animation for Comment Modal

---
 frontend/src/layout/CommentModal.jsx | 161 ++++++++++++++-------------
 1 file changed, 84 insertions(+), 77 deletions(-)

diff --git a/frontend/src/layout/CommentModal.jsx b/frontend/src/layout/CommentModal.jsx
index 484b2f0..65f1b1a 100644
--- a/frontend/src/layout/CommentModal.jsx
+++ b/frontend/src/layout/CommentModal.jsx
@@ -1,11 +1,12 @@
 import Box from '@mui/material/Box';
 import Modal from '@mui/material/Modal';
-import { useState } from 'react';
-import { fetchData } from '../components/services/Fetch';
+import Slide from '@mui/material/Slide';
+import {useState} from 'react';
+import {fetchData} from '../components/services/Fetch';
 import throwError from '../components/services/throwError';
 import FormatForm from '../components/utils/FormatForm';
-import { useAuth } from '../providers/AuthProviders';
-import { Comments } from './../components/ui/Comments';
+import {useAuth} from '../providers/AuthProviders';
+import {Comments} from './../components/ui/Comments';
 
 async function handleComment(
     setComment,
@@ -13,14 +14,14 @@ async function handleComment(
     token,
     username,
     user_image_url,
-    id,
+    id
 ) {
     event.preventDefault();
     const apiUrl = import.meta.env.VITE_API_URL;
 
-    const { comment } = FormatForm(event);
+    const {comment} = FormatForm(event);
 
-    if (!comment) {return;}
+    if (!comment) return;
 
     fetchData(`${apiUrl}api/posts/${id}/comments`, {
         method: 'POST',
@@ -28,19 +29,19 @@ async function handleComment(
             'Content-Type': 'application/json',
             Authorization: `Bearer ${token}`,
         },
-        body: JSON.stringify({ comment: comment }),
+        body: JSON.stringify({comment: comment}),
     }).catch((error) => {
         throwError(error);
     });
 
     setComment((prev) => [
-        ...prev,
         {
             comment,
             created_at: new Date().toISOString(),
             user: username,
             user_image_url: user_image_url,
         },
+        ...prev,
     ]);
 
     event.target.reset();
@@ -53,7 +54,7 @@ export default function CommentsModal({
     postId = 0,
 }) {
     const [newComments, setNewComments] = useState(comments);
-    const { currentUser } = useAuth();
+    const {currentUser} = useAuth();
     const currentToken = localStorage.getItem('token') ?? '';
     const currentUserName = currentUser?.username;
     const currentUserPP = currentUser?.image_url;
@@ -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>
     );
 }

From 179e9505b1c6316258350ca480781167372b5203 Mon Sep 17 00:00:00 2001
From: Drake <150128459+VialsShiny@users.noreply.github.com>
Date: Fri, 28 Nov 2025 14:13:15 +0100
Subject: [PATCH 2/5] Adding 'z-99' to the NavBar

---
 frontend/src/components/layout/NavBar.jsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/layout/NavBar.jsx b/frontend/src/components/layout/NavBar.jsx
index 44b49e2..10c99ab 100644
--- a/frontend/src/components/layout/NavBar.jsx
+++ b/frontend/src/components/layout/NavBar.jsx
@@ -1,11 +1,11 @@
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useState } from 'react';
-import { FiHome, FiLogIn, FiLogOut, FiUserPlus } from 'react-icons/fi';
-import { Link } from 'react-router-dom';
-import { useAuth } from '../../providers/AuthProviders';
+import {useState} from 'react';
+import {FiHome, FiLogIn, FiLogOut, FiUserPlus} from 'react-icons/fi';
+import {Link} from 'react-router-dom';
+import {useAuth} from '../../providers/AuthProviders';
 
 export const NavBar = () => {
-    const { currentUser, setCurrentUser, isAuthenticate } = useAuth();
+    const {currentUser, setCurrentUser, isAuthenticate} = useAuth();
     const [isAuthenticated, setIsAuthenticated] = useState(isAuthenticate);
     const isDesktop = useMediaQuery('(min-width:1024px)');
 
@@ -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"
         >
@@ -66,7 +66,7 @@ export const NavBar = () => {
                                     onClick={() => {
                                         handleLogOut(
                                             currentUser,
-                                            isAuthenticate,
+                                            isAuthenticate
                                         );
                                     }}
                                 >

From 0a6a3e775379551b6dcf60c6789ff847cb3dd92f Mon Sep 17 00:00:00 2001
From: Drake <150128459+VialsShiny@users.noreply.github.com>
Date: Fri, 28 Nov 2025 14:14:17 +0100
Subject: [PATCH 3/5] Patching Responsive on PostDetails

---
 .../components/features/posts/PostDetail.jsx  | 40 ++++++------
 frontend/src/pages/PostDetails.jsx            | 61 ++++++++++---------
 2 files changed, 53 insertions(+), 48 deletions(-)

diff --git a/frontend/src/components/features/posts/PostDetail.jsx b/frontend/src/components/features/posts/PostDetail.jsx
index fde3084..96083be 100644
--- a/frontend/src/components/features/posts/PostDetail.jsx
+++ b/frontend/src/components/features/posts/PostDetail.jsx
@@ -1,14 +1,14 @@
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { memo, useEffect, useState } from 'react';
-import { useAuth } from '../../../providers/AuthProviders';
+import {memo, useEffect, useState} from 'react';
+import {useAuth} from '../../../providers/AuthProviders';
 import MobileOverlay from '../../layout/MobileOverlay';
-import { fetchData } from '../../services/Fetch';
+import {fetchData} from '../../services/Fetch';
 import throwError from '../../services/throwError';
 import ActionButtonsPost from '../../ui/ActionButtonsPost';
-import { Comments } from '../../ui/Comments';
-import { DiffDate } from '../../utils/DiffDate';
+import {Comments} from '../../ui/Comments';
+import {DiffDate} from '../../utils/DiffDate';
 import FormatForm from '../../utils/FormatForm';
-import { handleLikes } from '../../utils/HandleLikes';
+import {handleLikes} from '../../utils/HandleLikes';
 
 function PostDetail({
     author = 'default_user',
@@ -32,7 +32,7 @@ function PostDetail({
     const [IsOpen, setIsOpen] = useState(isDesktop);
     const authorPP = author_image_url;
 
-    const { currentUser } = useAuth();
+    const {currentUser} = useAuth();
     const currentToken = localStorage.getItem('token');
     const currentUserName = currentUser.username;
     const currentUserPP = currentUser.image_url;
@@ -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
     }, []);
 
@@ -64,13 +66,15 @@ function PostDetail({
         token,
         username,
         user_image_url,
-        id,
+        id
     ) {
         event.preventDefault();
 
-        const { comment } = FormatForm(event);
+        const {comment} = FormatForm(event);
 
-        if (!comment) {return;}
+        if (!comment) {
+            return;
+        }
 
         fetchData(`${apiUrl}api/posts/${id}/comments`, {
             method: 'POST',
@@ -78,7 +82,7 @@ function PostDetail({
                 'Content-Type': 'application/json',
                 Authorization: `Bearer ${token}`,
             },
-            body: JSON.stringify({ comment: comment }),
+            body: JSON.stringify({comment: comment}),
         }).catch((error) => {
             throwError(error);
         });
@@ -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">
@@ -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"
                     />
@@ -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'
                     }`}
                 >
@@ -294,7 +298,7 @@ function PostDetail({
                                         currentToken,
                                         currentUserName,
                                         currentUserPP,
-                                        id,
+                                        id
                                     );
                                 }}
                             >
@@ -372,7 +376,7 @@ function PostDetail({
                                         currentToken,
                                         currentUserName,
                                         currentUserPP,
-                                        id,
+                                        id
                                     )
                                 }
                             >
diff --git a/frontend/src/pages/PostDetails.jsx b/frontend/src/pages/PostDetails.jsx
index 7806224..e3337c3 100644
--- a/frontend/src/pages/PostDetails.jsx
+++ b/frontend/src/pages/PostDetails.jsx
@@ -1,12 +1,12 @@
-import { useEffect, useState } from 'react';
-import { Helmet } from 'react-helmet';
-import { useParams } from 'react-router-dom';
+import {useEffect, useState} from 'react';
+import {Helmet} from 'react-helmet';
+import {useParams} from 'react-router-dom';
 import PostDetail from '../components/features/posts/PostDetail';
-import { fetchData } from '../components/services/Fetch';
-import { Loader } from '../components/ui/Loader';
+import {fetchData} from '../components/services/Fetch';
+import {Loader} from '../components/ui/Loader';
 
 export default function PostDetails() {
-    const { id } = useParams();
+    const {id} = useParams();
     const [post, setPost] = useState(null);
     const [error, setError] = useState();
     const apiUrl = import.meta.env.VITE_API_URL;
@@ -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 (
         <>
@@ -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}
+            />
         </>
     );
 }

From 8239d6774e0696bc48ac9390325a0569616fd892 Mon Sep 17 00:00:00 2001
From: Drake <150128459+VialsShiny@users.noreply.github.com>
Date: Fri, 28 Nov 2025 14:15:46 +0100
Subject: [PATCH 4/5] eslint

---
 frontend/src/components/layout/NavBar.jsx | 12 ++++++------
 frontend/src/layout/CommentModal.jsx      | 20 ++++++++++----------
 frontend/src/pages/PostDetails.jsx        | 12 ++++++------
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/layout/NavBar.jsx b/frontend/src/components/layout/NavBar.jsx
index 10c99ab..44bde52 100644
--- a/frontend/src/components/layout/NavBar.jsx
+++ b/frontend/src/components/layout/NavBar.jsx
@@ -1,11 +1,11 @@
 import useMediaQuery from '@mui/material/useMediaQuery';
-import {useState} from 'react';
-import {FiHome, FiLogIn, FiLogOut, FiUserPlus} from 'react-icons/fi';
-import {Link} from 'react-router-dom';
-import {useAuth} from '../../providers/AuthProviders';
+import { useState } from 'react';
+import { FiHome, FiLogIn, FiLogOut, FiUserPlus } from 'react-icons/fi';
+import { Link } from 'react-router-dom';
+import { useAuth } from '../../providers/AuthProviders';
 
 export const NavBar = () => {
-    const {currentUser, setCurrentUser, isAuthenticate} = useAuth();
+    const { currentUser, setCurrentUser, isAuthenticate } = useAuth();
     const [isAuthenticated, setIsAuthenticated] = useState(isAuthenticate);
     const isDesktop = useMediaQuery('(min-width:1024px)');
 
@@ -66,7 +66,7 @@ export const NavBar = () => {
                                     onClick={() => {
                                         handleLogOut(
                                             currentUser,
-                                            isAuthenticate
+                                            isAuthenticate,
                                         );
                                     }}
                                 >
diff --git a/frontend/src/layout/CommentModal.jsx b/frontend/src/layout/CommentModal.jsx
index 65f1b1a..8122bee 100644
--- a/frontend/src/layout/CommentModal.jsx
+++ b/frontend/src/layout/CommentModal.jsx
@@ -1,12 +1,12 @@
 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 { useState } from 'react';
+import { fetchData } from '../components/services/Fetch';
 import throwError from '../components/services/throwError';
 import FormatForm from '../components/utils/FormatForm';
-import {useAuth} from '../providers/AuthProviders';
-import {Comments} from './../components/ui/Comments';
+import { useAuth } from '../providers/AuthProviders';
+import { Comments } from './../components/ui/Comments';
 
 async function handleComment(
     setComment,
@@ -14,14 +14,14 @@ async function handleComment(
     token,
     username,
     user_image_url,
-    id
+    id,
 ) {
     event.preventDefault();
     const apiUrl = import.meta.env.VITE_API_URL;
 
-    const {comment} = FormatForm(event);
+    const { comment } = FormatForm(event);
 
-    if (!comment) return;
+    if (!comment) {return;}
 
     fetchData(`${apiUrl}api/posts/${id}/comments`, {
         method: 'POST',
@@ -29,7 +29,7 @@ async function handleComment(
             'Content-Type': 'application/json',
             Authorization: `Bearer ${token}`,
         },
-        body: JSON.stringify({comment: comment}),
+        body: JSON.stringify({ comment: comment }),
     }).catch((error) => {
         throwError(error);
     });
@@ -54,7 +54,7 @@ export default function CommentsModal({
     postId = 0,
 }) {
     const [newComments, setNewComments] = useState(comments);
-    const {currentUser} = useAuth();
+    const { currentUser } = useAuth();
     const currentToken = localStorage.getItem('token') ?? '';
     const currentUserName = currentUser?.username;
     const currentUserPP = currentUser?.image_url;
@@ -118,7 +118,7 @@ export default function CommentsModal({
                                         currentToken,
                                         currentUserName,
                                         currentUserPP,
-                                        id
+                                        id,
                                     )
                                 }
                             >
diff --git a/frontend/src/pages/PostDetails.jsx b/frontend/src/pages/PostDetails.jsx
index e3337c3..fe833ca 100644
--- a/frontend/src/pages/PostDetails.jsx
+++ b/frontend/src/pages/PostDetails.jsx
@@ -1,12 +1,12 @@
-import {useEffect, useState} from 'react';
-import {Helmet} from 'react-helmet';
-import {useParams} from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { Helmet } from 'react-helmet';
+import { useParams } from 'react-router-dom';
 import PostDetail from '../components/features/posts/PostDetail';
-import {fetchData} from '../components/services/Fetch';
-import {Loader} from '../components/ui/Loader';
+import { fetchData } from '../components/services/Fetch';
+import { Loader } from '../components/ui/Loader';
 
 export default function PostDetails() {
-    const {id} = useParams();
+    const { id } = useParams();
     const [post, setPost] = useState(null);
     const [error, setError] = useState();
     const apiUrl = import.meta.env.VITE_API_URL;

From ab8a7a1eef4f9475c096524e502bdf617732694e Mon Sep 17 00:00:00 2001
From: Drake <150128459+VialsShiny@users.noreply.github.com>
Date: Fri, 28 Nov 2025 14:17:23 +0100
Subject: [PATCH 5/5] eslint fix (2)

---
 .../components/features/posts/PostDetail.jsx  | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/features/posts/PostDetail.jsx b/frontend/src/components/features/posts/PostDetail.jsx
index 96083be..f645a10 100644
--- a/frontend/src/components/features/posts/PostDetail.jsx
+++ b/frontend/src/components/features/posts/PostDetail.jsx
@@ -1,14 +1,14 @@
 import useMediaQuery from '@mui/material/useMediaQuery';
-import {memo, useEffect, useState} from 'react';
-import {useAuth} from '../../../providers/AuthProviders';
+import { memo, useEffect, useState } from 'react';
+import { useAuth } from '../../../providers/AuthProviders';
 import MobileOverlay from '../../layout/MobileOverlay';
-import {fetchData} from '../../services/Fetch';
+import { fetchData } from '../../services/Fetch';
 import throwError from '../../services/throwError';
 import ActionButtonsPost from '../../ui/ActionButtonsPost';
-import {Comments} from '../../ui/Comments';
-import {DiffDate} from '../../utils/DiffDate';
+import { Comments } from '../../ui/Comments';
+import { DiffDate } from '../../utils/DiffDate';
 import FormatForm from '../../utils/FormatForm';
-import {handleLikes} from '../../utils/HandleLikes';
+import { handleLikes } from '../../utils/HandleLikes';
 
 function PostDetail({
     author = 'default_user',
@@ -32,7 +32,7 @@ function PostDetail({
     const [IsOpen, setIsOpen] = useState(isDesktop);
     const authorPP = author_image_url;
 
-    const {currentUser} = useAuth();
+    const { currentUser } = useAuth();
     const currentToken = localStorage.getItem('token');
     const currentUserName = currentUser.username;
     const currentUserPP = currentUser.image_url;
@@ -66,11 +66,11 @@ function PostDetail({
         token,
         username,
         user_image_url,
-        id
+        id,
     ) {
         event.preventDefault();
 
-        const {comment} = FormatForm(event);
+        const { comment } = FormatForm(event);
 
         if (!comment) {
             return;
@@ -82,7 +82,7 @@ function PostDetail({
                 'Content-Type': 'application/json',
                 Authorization: `Bearer ${token}`,
             },
-            body: JSON.stringify({comment: comment}),
+            body: JSON.stringify({ comment: comment }),
         }).catch((error) => {
             throwError(error);
         });
@@ -298,7 +298,7 @@ function PostDetail({
                                         currentToken,
                                         currentUserName,
                                         currentUserPP,
-                                        id
+                                        id,
                                     );
                                 }}
                             >
@@ -376,7 +376,7 @@ function PostDetail({
                                         currentToken,
                                         currentUserName,
                                         currentUserPP,
-                                        id
+                                        id,
                                     )
                                 }
                             >