Change curl import to post-toast

src-web/components/RequestPane.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import type { CSSProperties } from 'react';
-import { memo, useCallback, useMemo, useState } from 'react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
 import { createGlobalState } from 'react-use';
 import { useCancelHttpResponse } from '../hooks/useCancelHttpResponse';
 import { useIsResponseLoading } from '../hooks/useIsResponseLoading';
@@ -39,7 +39,8 @@ import { HeadersEditor } from './HeadersEditor';
 import { UrlBar } from './UrlBar';
 import { UrlParametersEditor } from './UrlParameterEditor';
 import { useCurlToRequest } from '../hooks/useCurlToRequest';
-import { useConfirm } from '../hooks/useConfirm';
+import { useToast } from './ToastContext';
+import { Icon } from './core/Icon';
 
 interface Props {
   style: CSSProperties;
@@ -230,7 +231,7 @@ export const RequestPane = memo(function RequestPane({
   );
 
   const importCurl = useCurlToRequest();
-  const confirm = useConfirm();
+  const toast = useToast();
 
   const isLoading = useIsResponseLoading(activeRequestId ?? null);
   const { updateKey } = useRequestUpdateKey(activeRequestId ?? null);
@@ -250,15 +251,15 @@ export const RequestPane = memo(function RequestPane({
               if (!command.startsWith('curl ')) {
                 return;
               }
-              const confirmed = await confirm({
-                id: 'paste-curl',
-                title: 'Import from Curl?',
-                description: 'Do you want to overwrite the current request with the Curl command?',
-                confirmText: 'Overwrite',
-              });
-              if (confirmed) {
               importCurl.mutate({ requestId: activeRequestId, command });
-              }
+              toast.show({
+                render: () => [
+                  <>
+                    <Icon icon="info" />
+                    <span>Curl command imported</span>
+                  </>,
+                ],
+              });
             }}
             onSend={handleSend}
             onCancel={handleCancel}

src-web/components/Workspace.tsx

@@ -6,7 +6,7 @@ import type {
   MouseEvent as ReactMouseEvent,
   ReactNode,
 } from 'react';
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useWindowSize } from 'react-use';
 import { useActiveRequest } from '../hooks/useActiveRequest';
 import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
@@ -34,7 +34,7 @@ import { Sidebar } from './Sidebar';
 import { SidebarActions } from './SidebarActions';
 import { WorkspaceHeader } from './WorkspaceHeader';
 import { useClipboardText } from '../hooks/useClipboardText';
-import { Portal } from './Portal';
+import { useToast } from './ToastContext';
 
 const side = { gridArea: 'side' };
 const head = { gridArea: 'head' };
@@ -56,7 +56,24 @@ export default function Workspace() {
   const moveState = useRef<{ move: (e: MouseEvent) => void; up: (e: MouseEvent) => void } | null>(
     null,
   );
-  const isCurlInClipboard = !!useClipboardText()?.startsWith('curl ');
+  const clipboardText = useClipboardText();
+  const toast = useToast();
+
+  useEffect(() => {
+    const isCurlInClipboard = clipboardText?.startsWith('curl ');
+    if (!isCurlInClipboard) {
+      return;
+    }
+
+    toast.show({
+      render: () => (
+        <div>
+          <p>Curl command detected?</p>
+          <Button color="primary">Import</Button>
+        </div>
+      ),
+    });
+  }, [clipboardText, toast]);
 
   const unsub = () => {
     if (moveState.current !== null) {
@@ -127,10 +144,6 @@ export default function Workspace() {
   }
 
   return (
-    <>
-      <Portal name="toast">
-        {isCurlInClipboard && <div className="static right-0 left-0 w-32 h-10">Import</div>}
-      </Portal>
     <div
       style={styles}
       className={classNames(
@@ -182,8 +195,8 @@ export default function Workspace() {
         <div className="m-auto">
           <Banner color="warning" className="max-w-[30rem]">
             The active workspace{' '}
-              <InlineCode className="text-orange-800">{activeWorkspaceId}</InlineCode> was not
-              found. Select a workspace from the header menu or report this bug to <FeedbackLink />
+            <InlineCode className="text-orange-800">{activeWorkspaceId}</InlineCode> was not found.
+            Select a workspace from the header menu or report this bug to <FeedbackLink />
           </Banner>
         </div>
       ) : activeRequest == null ? (
@@ -208,7 +221,6 @@ export default function Workspace() {
         <HttpRequestLayout activeRequest={activeRequest} style={body} />
       )}
     </div>
-    </>
   );
 }
 

src-web/hooks/useClipboardText.ts

@@ -4,10 +4,6 @@ import { readText } from '@tauri-apps/plugin-clipboard-manager';
 export function useClipboardText() {
   return useQuery({
     queryKey: [],
-    queryFn: async () => {
-      const text = await readText();
-      console.log('READ CLIPBOARD', text);
-      return text;
-    },
+    queryFn: () => readText(),
   }).data;
 }