Fixed a supsension error

src/modules/manager/domains/components/EmailTemplateEditor.tsx

@@ -1,6 +1,6 @@
 import Joi from "joi";
 import React, { useEffect } from "react";
-import { Navigate } from "react-router-dom";
+import { Navigate, useParams } from "react-router-dom";
 import { toast } from "react-toastify";
 import { useTranslation } from "react-i18next";
 import { Namespaces } from "../../../../i18n/i18n";
@@ -25,6 +25,8 @@ const EmailTemplateEditor: React.FC<EmailTemplateEditorProps> = ({
   currentMailType,
 }) => {
   const { t } = useTranslation<typeof Namespaces.Common>();
+  const paramsData = useParams<{ domainId: string }>();
+  const finalDomainId = domainId || paramsData.domainId;
 
   const labelName = t("Subject");
   const labelDefinition = t("Definition");
@@ -53,7 +55,7 @@ const EmailTemplateEditor: React.FC<EmailTemplateEditorProps> = ({
   useEffect(() => {
     const loadTemplate = async () => {
       try {
-        if (!domainId) return;
+        if (!finalDomainId || !currentMailType) return;
 
         // Reset form state while loading
         form.setState({
@@ -66,7 +68,7 @@ const EmailTemplateEditor: React.FC<EmailTemplateEditorProps> = ({
           },
         });
 
-        const domainIdValue = BigInt(domainId);
+        const domainIdValue = BigInt(finalDomainId);
         var mailTemplate = await mailTemplatesService.getTemplate(
           MakeGeneralIdRef(domainIdValue),
           currentMailType,
@@ -89,13 +91,13 @@ const EmailTemplateEditor: React.FC<EmailTemplateEditorProps> = ({
     };
 
     void loadTemplate();
-  }, [domainId, currentMailType]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [finalDomainId, currentMailType]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const doSubmit = async (buttonName: string) => {
     try {
       const { subject, definition } = form.state.data;
-      if (!domainId) return;
+      if (!finalDomainId) return;
-      const domainGeneralIdRef = MakeGeneralIdRef(BigInt(domainId));
+      const domainGeneralIdRef = MakeGeneralIdRef(BigInt(finalDomainId));
       const subjectStr = typeof subject === "string" ? subject : "";
       const definitionStr = typeof definition === "string" ? definition : "";
       const response = await mailTemplatesService.postTemplate(

src/modules/manager/domains/components/MailTemplatesTab.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from "react";
+import React, { useEffect, useState, useCallback, Suspense } from "react";
 import { useParams } from "react-router-dom";
 import mailTemplatesService from "../serrvices/mailTemplatesService";
 import HOCEmailTemplateEditor from "./EmailTemplateEditor";
@@ -11,22 +11,62 @@ interface MailType {
   description: string;
 }
 
-const MailTemplatesTab: React.FC = () => {
+const MailTemplatesTabContent: React.FC<{
+  types: MailType[];
+  currentMailType: string;
+  domainId: string | undefined;
+  onClick: (e: React.MouseEvent<HTMLElement>) => void;
+}> = ({ types, currentMailType, domainId, onClick }) => {
   const { t: tMail } = useTranslation(Namespaces.MailTypes);
+
+  return (
+    <div className="two-column-grid">
+      <div className="fit-content-width">
+        <ul className="mail-types">
+          {types.map((x) => {
+            return (
+              <li
+                key={x.mailType}
+                value={x.mailType}
+                onClick={onClick}
+                className={currentMailType === x.mailType ? "selected" : ""}
+              >
+                {tMail(x.mailType)}
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+      <div>
+        {domainId && currentMailType ? (
+          <HOCEmailTemplateEditor
+            domainId={domainId}
+            currentMailType={currentMailType}
+          />
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+const MailTemplatesTab: React.FC = () => {
   const [loaded, setLoaded] = useState(false);
   const [currentMailType, setCurrentMailType] = useState("");
   const [types, setTypes] = useState<MailType[]>([]);
 
   useEffect(() => {
     const loadTypes = async () => {
+      try {
         const response = await mailTemplatesService.getTypes(0, 10, "", true);
-      if (response) {
+        const nextTypes = (response?.data as MailType[]) ?? [];
-        const nextTypes = response.data as MailType[];
         setTypes(nextTypes);
 
         if (nextTypes.length > 0) {
           setCurrentMailType(nextTypes[0].mailType);
         }
+      } catch (ex) {
+        console.error(ex);
+      } finally {
         setLoaded(true);
       }
     };
@@ -54,30 +94,14 @@ const MailTemplatesTab: React.FC = () => {
 
   return (
     <Loading loaded={loaded}>
-      <div className="two-column-grid">
+      <Suspense fallback={<div>Loading...</div>}>
-        <div className="fit-content-width">
+        <MailTemplatesTabContent
-          <ul className="mail-types">
+          types={types}
-            {types.map((x) => {
-              return (
-                <li
-                  key={x.mailType}
-                  value={x.mailType}
-                  onClick={onClick}
-                  className={currentMailType === x.mailType ? "selected" : ""}
-                >
-                  {tMail(x.mailType)}
-                </li>
-              );
-            })}
-          </ul>
-        </div>
-        <div>
-          <HOCEmailTemplateEditor
-            domainId={domainId}
           currentMailType={currentMailType}
+          domainId={domainId}
+          onClick={onClick}
         />
-        </div>
+      </Suspense>
-      </div>
     </Loading>
   );
 };