Merge pull request #1122 from jeffvli/properly-handle-context-menu-close

fix(context menu): Properly handle click outside, and show initial rating

src/renderer/features/context-menu/context-menu-provider.tsx

@@ -103,19 +103,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
     const { t } = useTranslation();
     const [opened, setOpened] = useState(false);
 
-    const [contextMenuRef, setContextMenuRef] = useState<HTMLDivElement | null>(null);
+    const clickOutsideRef = useClickOutside(() => setOpened(false), ['mousedown', 'touchstart']);
-    const [ratingsRef, setRatingsRef] = useState<HTMLDivElement | null>(null);
-    const [rating, setRating] = useState<number>(0);
-
-    useEffect(() => {
-        setRating(0);
-    }, [opened]);
-
-    const clickOutsideRef = useClickOutside(
-        () => setOpened(false),
-        ['mousedown', 'touchstart'],
-        [contextMenuRef, ratingsRef],
-    );
 
     const viewport = useViewportSize();
     const server = useCurrentServer();
@@ -132,6 +120,24 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
         yPos: 0,
     });
 
+    const [rating, setRating] = useState<number>(0);
+
+    useEffect(() => {
+        if (opened && ctx.data.length > 0) {
+            if (ctx.data.length === 1) {
+                setRating(ctx.data[0].userRating ?? 0);
+            } else {
+                const firstRating = ctx.data[0].userRating ?? 0;
+                const allSameRating = ctx.data.every(
+                    (item) => (item.userRating ?? 0) === firstRating,
+                );
+                setRating(allSameRating ? firstRating : 0);
+            }
+        } else {
+            setRating(0);
+        }
+    }, [ctx.data, opened]);
+
     const handlePlayQueueAdd = usePlayQueueAdd();
     const navigate = useNavigate();
 
@@ -882,7 +888,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
                 leftIcon: <Icon icon="star" />,
                 onClick: () => {},
                 rightIcon: (
-                    <Group ref={setRatingsRef as any}>
+                    <Group>
                         <Rating
                             onChange={(e) => {
                                 handleUpdateRating(e);
@@ -950,7 +956,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
                 <AnimatePresence>
                     {opened && (
                         <ContextMenu minWidth={125} ref={mergedRef} xPos={ctx.xPos} yPos={ctx.yPos}>
-                            <Stack gap={0} ref={setContextMenuRef}>
+                            <Stack gap={0}>
                                 <Stack gap={0} onClick={closeContextMenu}>
                                     {ctx.menuItems?.map((item) => {
                                         return (