From ba640704a19cbfbc5f548cfbc7ddf516447cb7e6 Mon Sep 17 00:00:00 2001
From: shantanusoni72 <deltaairways_hill@simplelogin.com>
Date: Sun, 5 Nov 2023 07:44:21 -0500
Subject: [PATCH] add notification toast :)

---
 packages/i18n/src/locales/en.json             |  6 +-
 .../ui/lib/components/TrackInfo/index.tsx     | 55 +++++++++++++------
 2 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/packages/i18n/src/locales/en.json b/packages/i18n/src/locales/en.json
index a142ca28b2..490504e2fc 100644
--- 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
index 6afb52d9ee..023b796cac 100644
--- 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;