From 65e6426e9c065d288e8899cc7f930f305a95d4da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chlo=C3=A9=20JACOB?= <chloe.jacob4@etu.unistra.fr>
Date: Sun, 19 Mar 2023 19:31:15 +0100
Subject: [PATCH] update post dropdown + delete post
---
src/components/Post.tsx | 230 ++++++++++++++++++++--------------------
1 file changed, 115 insertions(+), 115 deletions(-)
diff --git a/src/components/Post.tsx b/src/components/Post.tsx
index 10d19f5..0b55868 100644
--- a/src/components/Post.tsx
+++ b/src/components/Post.tsx
@@ -36,72 +36,73 @@ type PostProps = {
const Post = ({ post, postid, username, location, time_post, img, caption, isLiked, likes, comments, comment_post, inFeed }: PostProps) => {
-const dispatch = useAppDispatch();
-const [dropdownOpen, setDropdownOpen] = useState(false);
-const [setnavigateToPost] = useState(false);
+ const dispatch = useAppDispatch();
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+ const [navigateToPost, setnavigateToPost] = useState(false);
-// Réccupérer le lien du post
-async function copyLink(text: string) {
- if ('clipboard' in navigator) {
- return await navigator.clipboard.writeText(text);
- } else {
- return document.execCommand('copy', true, text);
+ // Réccupérer le lien du post
+ async function copyLink(text: string) {
+ if ('clipboard' in navigator) {
+ return await navigator.clipboard.writeText(text);
+ } else {
+ return document.execCommand('copy', true, text);
+ }
}
-}
-return <>
-{/* A POST */}
-<div className="border rounded-xl bg-white dark:bg-darkblue overflow-hidden">
- {/* HEADER POST */}
- <div className="flex justify-between p-4 items-center">
- <div className="flex items-center gap-4">
- <div>
- <div className="bg-gray-400 flex items-center justify-center rounded-full overflow-hidden w-12 h-12">
- {/* <img src="/src/assets/images/pp_user.png" alt="" /> */}
- <p className="uppercase text-white text-xl">{username.charAt(0)}</p>
- </div>
- </div>
+ return <>
+ {/* A POST */}
+ <div className="border rounded-xl bg-white dark:bg-darkblue overflow-hidden">
+ {/* HEADER POST */}
+ <div className="flex justify-between p-4 items-center">
+ <div className="flex items-center gap-4">
<div>
- <p className="font-bold">{username}</p>
- {location &&
- <div className="flex items-center gap-1">
- <FontAwesomeIcon className="text-[14px]" icon={faLocationDot} />
- <p className="text-sm mt-[2px]">{location}, {time_post}</p>
- </div>
- }
+ <div className="bg-gray-400 flex items-center justify-center rounded-full overflow-hidden w-12 h-12">
+ {/* <img src="/src/assets/images/pp_user.png" alt="" /> */}
+ <p className="uppercase text-white text-xl">{username.charAt(0)}</p>
+ </div>
</div>
- {!post.owner.isFollowedByViewer && (
- <button className="bg-gray-400 text-white font-bold h-10 rounded-md py-2 px-4" onClick={() => {
+ <div>
+ <p className="font-bold">{username}</p>
+ {location &&
+ <div className="flex items-center gap-1">
+ <FontAwesomeIcon className="text-[14px]" icon={faLocationDot} />
+ <p className="text-sm mt-[2px]">{location}, {time_post}</p>
+ </div>
+ }
+ </div>
+ {/* btn follow */}
+ {!post.owner.isFollowedByViewer && !post.owner.isViewer && (
+ <button className="bg-gray-400 text-white font-bold h-10 rounded-md py-2 px-4" onClick={() => {
if (inFeed) {
dispatch(followUserFeedAsync(post.id, post.owner.id));
} else {
dispatch(followUserPostAsync(post.owner.id));
}
- }}
- >follow</button>
- )}
- </div>
- <div className="relative">
- {/* ICON */}
- <div role="button" tabIndex={0} className="w-5 md:w-10 flex justify-center items-center cursor-pointer" onClick={() => setDropdownOpen(!dropdownOpen)} onKeyDown={(event) => event.key === 'Enter' && setDropdownOpen(!dropdownOpen)}>
- <FontAwesomeIcon className="text-[22px]" icon={faEllipsisVertical} />
- </div>
+ }}>follow</button>
+ )}
+ </div>
+ <div className="relative">
+ {/* ICON */}
+ <div role="button" tabIndex={0} className="w-5 md:w-10 flex justify-center items-center cursor-pointer" onClick={() => setDropdownOpen(!dropdownOpen)} onKeyDown={(event) => event.key === 'Enter' && setDropdownOpen(!dropdownOpen)}>
+ <FontAwesomeIcon className="text-[22px]" icon={faEllipsisVertical} />
+ </div>
- {/* DROPDOWN */}
- <div className={`absolute bg-white dark:bg-darkblue rounded border w-32 right-0 mt-4 overflow-hidden ${dropdownOpen ? '' : 'hidden'}`}>
- {/* DELETE POST */}
- {post.owner.isViewer && (
- <button className="hover:bg-gray-200 p-2 dark:hover:bg-gray-700 font-bold text-blue-500 w-full text-left"
- onClick={() => {
- dispatch(deletePostAsync(post.id));
- }}
- >
- Supprimer
- </button>
- )}
- {/* FOLLOW / UNFOLLOW */}
- {post.owner.isFollowedByViewer ? (
+ {/* DROPDOWN */}
+ <div className={`absolute bg-white dark:bg-darkblue rounded border w-32 right-0 mt-4 overflow-hidden ${dropdownOpen ? '' : 'hidden'}`}>
+ {/* DELETE POST */}
+ {post.owner.isViewer && (
+ <button className="hover:bg-gray-200 p-2 dark:hover:bg-gray-700 font-bold text-blue-500 w-full text-left"
+ onClick={() => {
+ dispatch(deletePostAsync(post.id));
+ window.history.go(-1); return false;
+ }}
+ >
+ Supprimer
+ </button>
+ )}
+ {/* FOLLOW / UNFOLLOW */}
+ {!post.owner.isViewer && (post.owner.isFollowedByViewer ? (
<button className="hover:bg-gray-200 dark:hover:bg-gray-700 p-2 font-bold text-red-500 w-full text-left"
onClick={() => {
if (inFeed) {
@@ -113,75 +114,74 @@ return <>
>
Unfollow
</button>
- ) : (
+ ) : (
<button className="hover:bg-gray-200 p-2 dark:hover:bg-gray-700 font-bold text-blue-500 w-full text-left"
- onClick={() => {
- if (inFeed) {
- dispatch(followUserFeedAsync(post.id, post.owner.id));
- } else {
- dispatch(followUserPostAsync(post.owner.id));
- }
- }}
+ onClick={() => {
+ if (inFeed) {
+ dispatch(followUserFeedAsync(post.id, post.owner.id));
+ } else {
+ dispatch(followUserPostAsync(post.owner.id));
+ }
+ }}
>
Follow
</button>
- )
- }
- {/* SEE PUBLICATION */}
- {inFeed &&
- <button className="hover:bg-gray-200 dark:hover:bg-gray-700 p-2 w-full text-left">
- <Link to={`/post/${postid}`}>Voir la publication</Link>
+ ))}
+ {/* SEE PUBLICATION */}
+ {inFeed &&
+ <button className="hover:bg-gray-200 dark:hover:bg-gray-700 p-2 w-full text-left">
+ <Link to={`/post/${postid}`}>Voir la publication</Link>
+ </button>
+ }
+ {/* COPY LINK */}
+ <button className="hover:bg-gray-200 dark:hover:bg-gray-700 p-2 w-full text-left" onClick={() => {
+ copyLink(window.location.origin.toString() + '/post/' + postid);
+ }}
+ >Copier le lien</button>
+ </div>
+ </div>
+
+ </div>
+ {/* IMAGE POST */}
+ <div className="flex justify-center items-center">
+ <img src={img.src} alt="" />
+ </div>
+ {/* BIO POST */}
+ <div className="p-4">
+ {caption && <p className="mb-3">{caption}</p>}
+ <div className="flex gap-2">
+ {isLiked ? (
+ <button className={`px-4 py-1 bg-${isLiked ? 'blue-500' : 'gray-400'} rounded-full flex items-center gap-2`}
+ onClick={() => {
+ dispatch(unlikePostAsync(postid));
+ }}
+ >
+ <FontAwesomeIcon className="text-[20px]" icon={faHeart} />
+ <span className="mt-1">{likes}</span>
</button>
- }
- {/* COPY LINK */}
- <button className="hover:bg-gray-200 dark:hover:bg-gray-700 p-2 w-full text-left" onClick={() => {
- copyLink(window.location.origin.toString() + '/post/' + postid);
+ ) : (
+ <button className={`px-4 py-1 bg-${isLiked ? 'blue-500' : 'gray-400'} rounded-full flex items-center gap-2`}
+ onClick={() => {
+ dispatch(likepostAsync(postid));
}}
- >Copier le lien</button>
- </div>
- </div>
-
- </div>
- {/* IMAGE POST */}
- <div className="flex justify-center items-center">
- <img src={img.src} alt="" />
- </div>
- {/* BIO POST */}
- <div className="p-4">
- {caption && <p className="mb-3">{caption}</p>}
- <div className="flex gap-2">
- {isLiked ? (
- <button className={`px-4 py-1 bg-${isLiked ? 'blue-500' : 'gray-400'} rounded-full flex items-center gap-2`}
- onClick={() => {
- dispatch(unlikePostAsync(postid));
- }}
- >
+ >
<FontAwesomeIcon className="text-[20px]" icon={faHeart} />
- <span className="mt-1">{likes}</span>
- </button>
- ) : (
- <button className={`px-4 py-1 bg-${isLiked ? 'blue-500' : 'gray-400'} rounded-full flex items-center gap-2`}
- onClick={() => {
- dispatch(likepostAsync(postid));
- }}
- >
- <FontAwesomeIcon className="text-[20px]" icon={faHeart} />
- <span className="mt-1">{likes}</span>
- </button>
- )}
+ <span className="mt-1">{likes}</span>
+ </button>
+ )}
- <button type="button" className="px-4 flex items-center gap-2">
- <FontAwesomeIcon className="text-[20px]" icon={faCommentDots} />
- <span className="mt-1">{comments}</span>
- </button>
- </div>
- </div>
- {/* COMMENTS POST */}
- <div className={`border-t-${comments > 0 ? '[0.8px] p-4' : '0' } flex flex-col gap-4`}>
- <Comment tab_comments={comment_post}></Comment>
- </div>
-</div>
-</>;
+ <button type="button" className="px-4 flex items-center gap-2">
+ <FontAwesomeIcon className="text-[20px]" icon={faCommentDots} />
+ <span className="mt-1">{comments}</span>
+ </button>
+ </div>
+ </div>
+ {/* COMMENTS POST */}
+ <div className={`border-t-${comments > 0 ? '[0.8px] p-4' : '0' } flex flex-col gap-4`}>
+ <Comment tab_comments={comment_post}></Comment>
+ </div>
+ </div>
+ </>;
};
export default Post;
\ No newline at end of file
--
GitLab