refactor: texts for geomaps in more info modal

Author: andreishket

vis/js/templates/modals/infomodal/subcomponents/StandardGeomapInfo.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, PropsWithChildren } from "react";
 import { Modal } from "react-bootstrap";
 
 import { queryConcatenator } from "@/js/utils/data";
@@ -20,29 +20,46 @@ export const StandardGeomapInfo: FC<StandardGeomapInfoProps> = ({ params }) => {
   const queryAfterConcatenate = queryConcatenator([query, queryAdvanced]);
   const saveCustomTitle = customTitle && unescapeHTML(customTitle);
 
+  const hasQuery = queryAfterConcatenate.length > 0;
+  const hasCustomTitle = Boolean(saveCustomTitle);
+
   return (
     <>
       <Modal.Header closeButton>
         <Modal.Title id="info-title">What's this?</Modal.Title>
       </Modal.Header>
       <Modal.Body id="info-body">
-        {(!!saveCustomTitle || !!query || !!queryAdvanced) && (
-          <p>
-            This geo map presents you with an overview of{" "}
-            <strong className="hs-strong">
-              {saveCustomTitle ? saveCustomTitle : queryAfterConcatenate}
-            </strong>
-          </p>
+        {hasQuery && !hasCustomTitle && (
+          <OverviewParagraph>{queryAfterConcatenate}</OverviewParagraph>
+        )}
+        {!hasQuery && hasCustomTitle && (
+          <OverviewParagraph>{saveCustomTitle}</OverviewParagraph>
+        )}
+        {!hasQuery && !hasCustomTitle && (
+          <OverviewParagraph>{null}</OverviewParagraph>
         )}
-        {!!saveCustomTitle && (
-          <p>
-            This map has a custom title and was created using the following
-            query:{" "}
-            <strong className="hs-strong">{queryAfterConcatenate}</strong>
-          </p>
+        {hasQuery && hasCustomTitle && (
+          <>
+            <OverviewParagraph>{saveCustomTitle}</OverviewParagraph>
+            <CustomTitleParagraph>{queryAfterConcatenate}</CustomTitleParagraph>
+          </>
         )}
         <AboutSoftware />
       </Modal.Body>
     </>
   );
 };
+
+const OverviewParagraph: FC<PropsWithChildren> = ({ children }) => (
+  <p>
+    This geo map presents you with an overview of{" "}
+    <strong className="hs-strong">{children}</strong>.
+  </p>
+);
+
+const CustomTitleParagraph: FC<PropsWithChildren> = ({ children }) => (
+  <p>
+    This map has a custom title and was created using the following query:{" "}
+    <strong className="hs-strong">{children}</strong>
+  </p>
+);