Hints

frontend/src/Helper/Generics/GenericCardMenu.tsx

@@ -4,6 +4,7 @@ import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import DefaultValues from '../../Styles/DefaultValues.module.scss'
+import GenericHoverPopover from './GenericHoverPopover';
 
 type Props = {
     handleOpenEdit: () => void;
@@ -24,7 +25,9 @@ export default function GenericCardMenu({ handleOpenDelete, handleOpenEdit }: Pr
 
     return (
         <>
-            <MoreVertIcon onClick={handleClick} fontSize="medium" style={{ cursor: "pointer", color: DefaultValues.secondaryText }} />
+            <GenericHoverPopover tooltipText={"Options"}>
+                <MoreVertIcon onClick={handleClick} fontSize="medium" style={{ cursor: "pointer", color: DefaultValues.secondaryText }} />
+            </GenericHoverPopover>
             <Popover open={open} anchorEl={anchorEl} onClose={handleClose} anchorOrigin={{ vertical: 'bottom', horizontal: 'left', }}>
                 <MenuList>
                     <MenuItem onClick={() => { handleOpenEdit(); handleClose(); }}>

frontend/src/Helper/Generics/GenericHoverPopover.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+type Props = {
+    children: React.ReactElement;
+    tooltipText: String;
+}
+
+export default function GenericHoverPopover({children, tooltipText}: Props) {
+
+    const renderTooltip = (props: any) => (
+        <Tooltip id="button-tooltip" {...props}>
+          {tooltipText}
+        </Tooltip>
+      );
+
+    return (
+        <div>
+            <OverlayTrigger
+                placement="right"
+                delay={{ show: 500, hide: 0 }}
+                overlay={renderTooltip}
+            >
+                {children}
+            </OverlayTrigger>
+        </div>
+
+    )
+}

frontend/src/Helper/Generics/GenericLike.tsx

@@ -13,7 +13,7 @@ type Props = {
     isComment: boolean;
 }
 
-export default function GenericLike({ contentID, likeCount, isLikedByLoggedInUser, isComment}: Props) {
+export default function GenericLike({ contentID, likeCount, isLikedByLoggedInUser, isComment }: Props) {
 
     const [isLiked, setIsLiked] = useState<boolean>(isLikedByLoggedInUser);
     const [currentLikeCount, setCurrentLikeCount] = useState<number>(likeCount);
@@ -26,7 +26,8 @@ export default function GenericLike({ contentID, likeCount, isLikedByLoggedInUse
         setIsRefresh(!isRefresh);
     }
 
-    function handleClick(event: any) {
+    function handleOpen(event: any) {
+        console.log("we here")
         setAnchorEl(event.currentTarget);
     }
 
@@ -36,26 +37,26 @@ export default function GenericLike({ contentID, likeCount, isLikedByLoggedInUse
         // update like state
         setIsLiked(newIsLiked);
     }
-    
-    function updateLikeCount(newCount: number){
+
+    function updateLikeCount(newCount: number) {
         setCurrentLikeCount(newCount);
     }
 
     useEffect(() => {
         async function didUserLikeContent() {
-            
-            const handlerObject: GenericHandlerType = isComment ? 
-            {
-                data: JSON.stringify({ commentID: contentID, uid: currentUid }),
-                methodType: "POST",
-                path: "didUserLikeComment",
-            } 
-            : 
-            {                 
-                data: JSON.stringify({ contentID: contentID, uid: currentUid }),
-                methodType: "POST",
-                path: "didUserLikeContent",
-            }
+
+            const handlerObject: GenericHandlerType = isComment ?
+                {
+                    data: JSON.stringify({ commentID: contentID, uid: currentUid }),
+                    methodType: "POST",
+                    path: "didUserLikeComment",
+                }
+                :
+                {
+                    data: JSON.stringify({ contentID: contentID, uid: currentUid }),
+                    methodType: "POST",
+                    path: "didUserLikeContent",
+                }
 
             try {
                 let answer = (await GenericHandler(handlerObject));
@@ -75,16 +76,16 @@ export default function GenericLike({ contentID, likeCount, isLikedByLoggedInUse
     return (
         <div style={{ cursor: 'pointer', float: "right", display: "flex", marginRight: "1%" }}>
             <p>{currentLikeCount || "0"}</p>
-            {isLiked ? <FavoriteIcon style={{ marginLeft: "2%" }} onClick={handleClick}></FavoriteIcon> : <></>}
-            {!isLiked ? <FavoriteBorderIcon style={{ marginLeft: "2%" }} onClick={handleClick}></FavoriteBorderIcon> : <></>}
+            {isLiked ? <FavoriteIcon style={{ marginLeft: "2%" }} onMouseEnter={handleOpen}></FavoriteIcon> : <></>}
+            {!isLiked ? <FavoriteBorderIcon style={{ marginLeft: "2%" }} onMouseEnter={handleOpen}></FavoriteBorderIcon> : <></>}
             {anchorEl && <GenericLikeMenu
                 anchorEl={anchorEl}
                 closeMenu={closeMenu}
                 contentID={contentID}
                 isComment={isComment}
-                currentUid={currentUid} 
-                likeType={likeType} 
-                refresh={refresh} 
+                currentUid={currentUid}
+                likeType={likeType}
+                refresh={refresh}
                 updateLikeCount={updateLikeCount} />}
         </div>
     );