From 075990cf8a5af295f176262ed7fda451e45d6d7a Mon Sep 17 00:00:00 2001
From: Rok Rejc <rok@rejc.org>
Date: Mon, 16 Jan 2023 12:14:01 +0100
Subject: [PATCH] Display text information (in concordance details) only if it
 is available

---
 .../concordance/ConcordanceDetailsText.js     | 24 +++++--------------
 .../concordance/ConcordanceDetailsTextInfo.js | 15 ++++++++++++
 ...=> ConcordanceDetailsTextInfo.module.scss} |  0
 3 files changed, 21 insertions(+), 18 deletions(-)
 create mode 100644 src/apps/Rsdo.Concordancer.Api/WebApp/src/components/concordance/ConcordanceDetailsTextInfo.js
 rename src/apps/Rsdo.Concordancer.Api/WebApp/src/components/concordance/{ConcordanceDetailsText.module.scss => ConcordanceDetailsTextInfo.module.scss} (100%)

diff --git a/src/apps/Rsdo.Concordancer.Api/WebApp/src/components/concordance/ConcordanceDetailsText.js b/src/apps/Rsdo.Concordancer.Api/WebApp/src/components/concordance/ConcordanceDetailsText.js
index 7a3dfb7..8b9cb6f 100644
--- a/src/apps/Rsdo.Concordancer.Api/WebApp/src/components/concordance/ConcordanceDetailsText.js
+++ b/src/apps/Rsdo.Concordancer.Api/WebApp/src/components/concordance/ConcordanceDetailsText.js
@@ -1,6 +1,6 @@
-import { useTranslation } from 'react-i18next';
+import ConcordanceDetailsTextInfo from './ConcordanceDetailsTextInfo';
 
-import sytles from './ConcordanceDetailsText.module.scss';
+import { useTranslation } from 'react-i18next';
 
 const ConcordanceDetailsText = (props) => {
     // Hooks
@@ -8,22 +8,10 @@ const ConcordanceDetailsText = (props) => {
 
     return (
         <>
-            <div className={sytles.textInfo}>
-                <h5>{t('concordance.detailsTextSource')}</h5>
-                <p>{props.source}</p>
-            </div>
-            <div className={sytles.textInfo}>
-                <h5>{t('concordance.detailsTextYear')}</h5>
-                <p>{props.year}</p>
-            </div>
-            <div className={sytles.textInfo}>
-                <h5>{t('concordance.detailsTextTitle')}</h5>
-                <p>{props.title}</p>
-            </div>
-            <div className={sytles.textInfo}>
-                <h5>{t('concordance.detailsTextAuthor')}</h5>
-                <p>{props.author}</p>
-            </div>
+            <ConcordanceDetailsTextInfo title={t('concordance.detailsTextSource')} value={props.source} />
+            <ConcordanceDetailsTextInfo title={t('concordance.detailsTextYear')} value={props.year} />
+            <ConcordanceDetailsTextInfo title={t('concordance.detailsTextTitle')} value={props.title} />
+            <ConcordanceDetailsTextInfo title={t('concordance.detailsTextAuthor')} value={props.author} />
         </>
     );
 };
diff --git a/src/apps/Rsdo.Concordancer.Api/WebApp/src/components/concordance/ConcordanceDetailsTextInfo.js b/src/apps/Rsdo.Concordancer.Api/WebApp/src/components/concordance/ConcordanceDetailsTextInfo.js
new file mode 100644
index 0000000..7a4a0a4
--- /dev/null
+++ b/src/apps/Rsdo.Concordancer.Api/WebApp/src/components/concordance/ConcordanceDetailsTextInfo.js
@@ -0,0 +1,15 @@
+import styles from './ConcordanceDetailsTextInfo.module.scss';
+
+const ConcordanceDetailsTextInfo = (props) => {
+    var title = props.title;
+    var value = props.value;
+
+    if (value) {
+        return (<div className={styles.textInfo}>
+            <h5>{title}</h5>
+            <p>{value}</p>
+        </div>);
+    }
+};
+
+export default ConcordanceDetailsTextInfo;
\ No newline at end of file
diff --git a/src/apps/Rsdo.Concordancer.Api/WebApp/src/components/concordance/ConcordanceDetailsText.module.scss b/src/apps/Rsdo.Concordancer.Api/WebApp/src/components/concordance/ConcordanceDetailsTextInfo.module.scss
similarity index 100%
rename from src/apps/Rsdo.Concordancer.Api/WebApp/src/components/concordance/ConcordanceDetailsText.module.scss
rename to src/apps/Rsdo.Concordancer.Api/WebApp/src/components/concordance/ConcordanceDetailsTextInfo.module.scss