From cb5f5e0064493a6bc8b608728dd9cee2ac8a97ca Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Mon, 30 May 2022 14:59:04 +0100
Subject: [PATCH] Use JSX for toaster message

---
 apps/remix-ide/src/app/files/fileManager.ts        | 4 ++--
 libs/remix-ui/helper/src/lib/helper-components.tsx | 6 ++++++
 libs/remix-ui/toaster/src/lib/toaster.tsx          | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/remix-ide/src/app/files/fileManager.ts b/apps/remix-ide/src/app/files/fileManager.ts
index aa02851c3e..e7ae4763df 100644
--- a/apps/remix-ide/src/app/files/fileManager.ts
+++ b/apps/remix-ide/src/app/files/fileManager.ts
@@ -4,7 +4,7 @@ import * as packageJson from '../../../../../package.json'
 import Registry from '../state/registry'
 import { EventEmitter } from 'events'
 import { RemixAppManager } from '../../../../../libs/remix-ui/plugin-manager/src/types'
-import { fileChangedToastMsg, storageFullMessage } from '@remix-ui/helper'
+import { fileChangedToastMsg, recursivePasteToastMsg, storageFullMessage } from '@remix-ui/helper'
 import helper from '../../lib/helper.js'
 
 /*
@@ -275,7 +275,7 @@ class FileManager extends Plugin {
 
       const provider = this.fileProviderOf(src)
       if (provider.isSubDirectory(src, dest)) {
-        this.call('notification', 'toast', 'File(s) to paste is an ancestor of the destination folder')
+        this.call('notification', 'toast', recursivePasteToastMsg())
       } else {
         await this.inDepthCopy(src, dest)
       }
diff --git a/libs/remix-ui/helper/src/lib/helper-components.tsx b/libs/remix-ui/helper/src/lib/helper-components.tsx
index e04e162ffc..c290f7bdf9 100644
--- a/libs/remix-ui/helper/src/lib/helper-components.tsx
+++ b/libs/remix-ui/helper/src/lib/helper-components.tsx
@@ -78,3 +78,9 @@ export const storageFullMessage = () => (
     </span>
   </div>
 )
+
+export const recursivePasteToastMsg = () => (
+  <div>
+    File(s) to paste is an ancestor of the destination folder
+  </div>
+)
diff --git a/libs/remix-ui/toaster/src/lib/toaster.tsx b/libs/remix-ui/toaster/src/lib/toaster.tsx
index 22014d8f7f..571a0c4afa 100644
--- a/libs/remix-ui/toaster/src/lib/toaster.tsx
+++ b/libs/remix-ui/toaster/src/lib/toaster.tsx
@@ -49,7 +49,7 @@ export const Toaster = (props: ToasterProps) => {
         }
       })
     }
-  }, [props.message, state.message])
+  }, [props.message])
 
   useEffect(() => {
     if (state.hiding) {