refactor(web-devtools): error-display

Author: tractorss

web-devtools/src/app/(main)/dispute-template/page.tsx

@@ -26,6 +26,8 @@ import ReactMarkdown from "components/ReactMarkdown";
 import FetchDisputeRequestInput, { DisputeRequest } from "./FetchDisputeRequestInput";
 import FetchFromIDInput from "./FetchFromIdInput";
 import CustomContextInputs from "./CustomContextInputs";
+import { debounceErrorToast } from "utils/debounceErrorToast";
+import { isEmpty } from "utils/isEmtpy";
 
 const Container = styled.div`
   height: auto;
@@ -193,12 +195,14 @@ const DisputeTemplateView = () => {
           if (customContext) initialContext = { ...initialContext, ...customContext };
 
           const fetchData = async () => {
+            if (isEmpty(disputeTemplateInput)) return;
             try {
               const data = dataMappingsInput ? await executeActions(JSON.parse(dataMappingsInput), initialContext) : {};
               const finalDisputeDetails = populateTemplate(disputeTemplateInput, data);
               setDisputeDetails(finalDisputeDetails);
-            } catch (e) {
+            } catch (e: any) {
               console.error(e);
+              debounceErrorToast(e?.message);
               setDisputeDetails(undefined);
             } finally {
               setLoading(false);

web-devtools/src/hooks/queries/useDisputeTemplateFromId.ts

@@ -5,6 +5,7 @@ import { isUndefined } from "utils/isUndefined";
 
 import { graphql } from "src/graphql-generated";
 import { DisputeTemplateQuery } from "src/graphql-generated/graphql";
+import { isEmpty } from "utils/isEmtpy";
 
 const disputeTemplateQuery = graphql(`
   query DisputeTemplate($id: ID!) {
@@ -18,7 +19,7 @@ const disputeTemplateQuery = graphql(`
 `);
 
 export const useDisputeTemplateFromId = (templateId?: string) => {
-  const isEnabled = !isUndefined(templateId);
+  const isEnabled = !isUndefined(templateId) && !isEmpty(templateId);
   const { graphqlBatcher } = useGraphqlBatcher();
 
   return useQuery<DisputeTemplateQuery>({

web-devtools/src/utils/isEmtpy.ts

@@ -0,0 +1 @@
+export const isEmpty = (str: string): boolean => str.trim() === "";