add notification toast :)

nukeop · Nov 5, 2023 · ba64070 · ba64070
1 parent d240aa6
commit ba64070
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 18 deletions.
diff --git a/packages/i18n/src/locales/en.json b/packages/i18n/src/locales/en.json
@@ -365,7 +365,11 @@
     "play-next": "Play next",
     "play-now": "Play now",
     "playlist-toast-body": "{{artist}} - {{track}} has been added to playlist.",
-    "playlist-toast-title": "Track added to playlist"
+    "playlist-toast-title": "Track added to playlist",
+    "track-toast-clipboard-success-title": "Copied to clipboard!",
+    "track-toast-clipboard-success-subtitle": "Track name successfully copied to clipboard.",
+    "track-toast-clipboard-error-title": "Failed to copy!",
+    "track-toast-clipboard-error-subtitle": "Oof, something went wrong."
   },
   "track-table": {
     "add-selected-tracks-to-queue": "Add selected to queue",

diff --git a/packages/ui/lib/components/TrackInfo/index.tsx b/packages/ui/lib/components/TrackInfo/index.tsx
@@ -1,18 +1,13 @@
 import React from 'react';
 import { Icon } from 'semantic-ui-react';
 import { Tooltip } from '@nuclear/ui';
+import * as ActionToast from '../../../../app/app/actions/toasts'
+import { useDispatch } from 'react-redux'
+import { useTranslation } from 'react-i18next';
 
 import Cover from '../Cover';
 import styles from './styles.scss';
 
-const CopyTextToClipboard = async (track) => {
-  try {
-    await navigator.clipboard.writeText(track);
-  } catch (err) {
-    // alert("Failed to copy"); // Will add notification toast here
-  }
-};
-
 export type TrackInfoProps = {
   cover?: string;
   track: string;
@@ -35,17 +30,42 @@ const TrackInfo: React.FC<TrackInfoProps> = ({
   removeFromFavorites,
   isFavorite = false,
   hasTracks = false
-}) => (
-  <div className={styles.track_info}>
-    <Cover cover={cover} />
-    {
-      hasTracks &&
+}) => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation('track-popup');
+
+  const CopyTextToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(track);
+      dispatch(ActionToast.
+        success(t('track-toast-clipboard-success-title'),
+          t('track-toast-clipboard-success-subtitle'),
+          null,
+          {}
+        )
+      );
+    } catch (err) {
+      dispatch(ActionToast.
+        error(t('track-toast-clipboard-error-title'),
+          t('track-toast-clipboard-error-subtitle'),
+          null,
+          {}
+        )
+      );
+    }
+  };
+
+  return (
+    <div className={styles.track_info}>
+      <Cover cover={cover} />
+      {
+        hasTracks &&
         <>
           <div className={styles.artist_part}>
             <Tooltip
               content='Click to copy'
               trigger={
-                <div id='track_name' className={styles.track_name} onClick={() => CopyTextToClipboard(track)}>
+                <div data-testid='track_name' id='track_name' className={styles.track_name} onClick={() => CopyTextToClipboard()}>
                   {track}
                 </div>
               }
@@ -65,8 +85,9 @@ const TrackInfo: React.FC<TrackInfoProps> = ({
             />
           </div>
         </>
-    }
-  </div>
-);
+      }
+    </div>
+  );
+}
 
 export default TrackInfo;