Merge pull request #367 from Aymanhki/obaid

Share Post Button
Aymanhki · Apr 3, 2024 · b69c570 · b69c570
2 parents 72748a5 + 456d20a
commit b69c570
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 6 deletions.
diff --git a/epoch_frontend/src/modules/Feed.js b/epoch_frontend/src/modules/Feed.js
@@ -8,7 +8,7 @@ import {
     getAllHashtagPosts,
     getFavoritePosts,
     deletePost
-} from '../services/post.js'
+} from '../services/post.js';
 import {useRef} from "react";
 import {useInView} from "react-intersection-observer";
 import { useCallback } from 'react';

diff --git a/epoch_frontend/src/modules/Post.js b/epoch_frontend/src/modules/Post.js
@@ -10,6 +10,7 @@ import ArrowCircleUpSharpIcon from '@mui/icons-material/ArrowCircleUpSharp';
 import ArrowCircleDownSharpIcon from '@mui/icons-material/ArrowCircleDownSharp';
 import {favoritePost, removeFavoritePost, votePost, removeVotePost} from "../services/post";
 import ForumOutlinedIcon from '@mui/icons-material/ForumOutlined';
+import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined';
 
 export default function Post({post, postViewer, isInFavorites, setShowDeletePostPopup, setPostToDelete, setShowFavoritedByList, setShowVoteByList, favoritedByUsernameList, voteByUsernameList, setFavoritedByUsernameList, setVoteByUsernameList, showPostPopup, setShowPostPopup, setReleaseMonth, setReleaseDay, setReleaseYear, setReleaseHour, setReleaseMinute, setReleaseSecond, setFileBlob, setPostToEditId, setPostToEditCaption, setPostToEdit}) {
     const captionCharLimit = 240;
@@ -36,6 +37,8 @@ export default function Post({post, postViewer, isInFavorites, setShowDeletePost
     const [voteResult, setVoteResult] = useState(0);
     const [localFinalFavoritedByUsernameList, setLocalFinalFavoritedByUsernameList] = useState(favoritedByUsernameList);
     const [localFinalVoteByUsernameList, setLocalFinalVoteByUsernameList] = useState(voteByUsernameList);
+    const [copiedMessage, setCopiedMessage] = useState('');
+
 
 
     useEffect(() => {
@@ -63,6 +66,28 @@ export default function Post({post, postViewer, isInFavorites, setShowDeletePost
         }
     }, [showPostPopup]);
 
+
+    const handleShare = () => {
+        const shareURL = `${window.location.origin}/epoch/comments/${post.post_id}`;
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(shareURL)
+                .then(() => {
+                    setCopiedMessage('Copied!');
+                    setTimeout(() => {
+                        setCopiedMessage('');
+                    }, 3000); 
+                })
+                .catch((error) => {
+                    console.error('Error copying URL:', error);
+                });
+        } else {
+            setCopiedMessage(shareURL); 
+            setTimeout(() => {
+                setCopiedMessage('');
+            }, 2000); 
+        }
+    };
+
     const handleProfilePhotoClick = (imageUrl) => {
         setOverlayImageUrl(imageUrl);
         setShowOverlay(true);
@@ -696,8 +721,20 @@ export default function Post({post, postViewer, isInFavorites, setShowDeletePost
                                 }
                             }}>
                                 {favoritedByCount}</button>
-                        </div>)}
+                    </div>)}
+
+
 
+                    {postViewer && (
+                        <div className={'share-button-wrapper'}>
+                            <ShareOutlinedIcon className={'share-button'} onClick={handleShare}></ShareOutlinedIcon>
+                            {copiedMessage && (
+                                <div className={'copied-message'}>
+                                    {copiedMessage}
+                                </div>
+                            )}
+                        </div>
+                    )}
 
                 </div>
 

diff --git a/epoch_frontend/src/pages/profile.js b/epoch_frontend/src/pages/profile.js
@@ -134,7 +134,7 @@ function Profile() {
                             });
                     }
 
-                    setIsLoading(false);
+                    // setIsLoading(false);
 
                 })
                 .catch(error => {
@@ -156,7 +156,7 @@ function Profile() {
                         setRedirectToLogin(true);
                     }
 
-                    setIsLoading(false);
+                    // setIsLoading(false);
                 });
         }
         else
@@ -181,7 +181,7 @@ function Profile() {
                     });
             }
 
-            setIsLoading(false);
+            // setIsLoading(false);
         }
     }, [setIsLoading, setIsCurrentUser, updateUser, user, username]);
 

diff --git a/epoch_frontend/src/styles/Post.css b/epoch_frontend/src/styles/Post.css
@@ -167,7 +167,7 @@
 
 .post-footer {
     display: grid;
-    grid-template-columns: 1fr auto 1fr;
+    grid-template-columns: 1fr auto 1fr auto;
     margin-top: 1rem;
     padding-top: 1rem;
     border-top: 0.1rem solid #000000;
@@ -304,6 +304,25 @@
     font-weight: bold;
 }
 
+.share-button{
+
+    padding: 0.4rem;
+    border-radius: 50%;
+    cursor: pointer;
+    border: none;
+    background-color: #ffffff;
+    color: #222222;
+    box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.5);
+    font-weight: bold;
+    margin-right: 5px;
+}
+
+.share-button:hover {
+    background-color: #1e446d;
+    color: #ffffff;
+    font-weight: bold;
+}
+
 .see-more {
     color: darkblue;
     text-decoration: underline;