[mobile] update ContextMenu

Author: tsirysndr

mobile/src/Components/ContextMenu/ContextMenu.tsx

@@ -91,14 +91,25 @@ export type ContextMenuProps = {
   onClose: () => void;
   item?: Artist | Album | Track;
   type: 'artist' | 'album' | 'track' | '';
+  onPlayNext: (item: Album | Track) => void;
+  onAddToPlaylist: (item: Album | Track) => void;
+  onDownload: (item: Album | Track) => void;
+  onGoToArtist: (item: Album | Track) => void;
+  onGoToAlbum: (item: Album | Track) => void;
 };
 
-const ContextMenu: FC<ContextMenuProps> = ({
-  isVisible,
-  onClose,
-  item,
-  type,
-}) => {
+const ContextMenu: FC<ContextMenuProps> = props => {
+  const {
+    isVisible,
+    onClose,
+    onAddToPlaylist,
+    onDownload,
+    onGoToAlbum,
+    onGoToArtist,
+    onPlayNext,
+    item,
+    type,
+  } = props;
   const itemCover = {
     artist: (item as Artist)?.picture,
     album: (item as Album)?.cover,
@@ -136,7 +147,7 @@ const ContextMenu: FC<ContextMenuProps> = ({
           </MediaInfo>
         </MetadataRow>
         <Separator />
-        <Action>
+        <Action onPress={() => onPlayNext(item as Album | Track)}>
           <ActionWrapper>
             <IconWrapper>
               <MaterialIcons name="playlist-play" size={31} color="#ab28fc" />
@@ -146,7 +157,7 @@ const ContextMenu: FC<ContextMenuProps> = ({
         </Action>
         {(type === 'track' || type === 'album') && (
           <>
-            <Action>
+            <Action onPress={() => onDownload(item as Album | Track)}>
               <ActionWrapper>
                 <IconWrapper>
                   <MaterialCommunity
@@ -158,7 +169,7 @@ const ContextMenu: FC<ContextMenuProps> = ({
                 <ActionTitle>Download</ActionTitle>
               </ActionWrapper>
             </Action>
-            <Action>
+            <Action onPress={() => onAddToPlaylist(item as Album | Track)}>
               <ActionWrapper>
                 <IconWrapper>
                   <MaterialIcons
@@ -170,15 +181,15 @@ const ContextMenu: FC<ContextMenuProps> = ({
                 <ActionTitle>Add to playlist</ActionTitle>
               </ActionWrapper>
             </Action>
-            <Action>
+            <Action onPress={() => onGoToAlbum(item as Album | Track)}>
               <ActionWrapper>
                 <IconWrapper>
                   <Feather name="disc" size={24} color="#ab28fc" />
                 </IconWrapper>
                 <ActionTitle>Go to Album</ActionTitle>
               </ActionWrapper>
             </Action>
-            <Action>
+            <Action onPress={() => onGoToArtist(item as Album | Track)}>
               <ActionWrapper>
                 <IconWrapper>
                   <SvgMic height={26} width={26} fill="#ab28fc" />

mobile/src/Components/ContextMenu/ContextMenuWithData.tsx

@@ -2,6 +2,7 @@ import React, {FC} from 'react';
 import ContextMenu from './ContextMenu';
 import {useRecoilState} from 'recoil';
 import {contextMenuState} from './ContextMenuState';
+import {Album, Track} from '../../Types';
 
 const ContextMenuWithData: FC = () => {
   const [contextMenu, setContextMenu] = useRecoilState(contextMenuState);
@@ -11,12 +12,38 @@ const ContextMenuWithData: FC = () => {
       visible: false,
     });
   };
+  const onPlayNext = (item: Album | Track) => {
+    onClose();
+    console.log(item);
+  };
+  const onDownload = (item: Album | Track) => {
+    onClose();
+    console.log(item);
+  };
+  const onAddToPlaylist = (item: Album | Track) => {
+    onClose();
+    console.log(item);
+  };
+  const onGoToArtist = (item: Album | Track) => {
+    onClose();
+    console.log(item);
+  };
+  const onGoToAlbum = (item: Album | Track) => {
+    onClose();
+    console.log(item);
+  };
+
   return (
     <ContextMenu
       isVisible={contextMenu.visible}
       onClose={onClose}
       item={contextMenu.item}
       type={contextMenu.type}
+      onPlayNext={onPlayNext}
+      onDownload={onDownload}
+      onAddToPlaylist={onAddToPlaylist}
+      onGoToArtist={onGoToArtist}
+      onGoToAlbum={onGoToAlbum}
     />
   );
 };