Display text information (in concordance details) only if it is available

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}>
+            <ConcordanceDetailsTextInfo title={t('concordance.detailsTextSource')} value={props.source} />
-                <h5>{t('concordance.detailsTextSource')}</h5>
+            <ConcordanceDetailsTextInfo title={t('concordance.detailsTextYear')} value={props.year} />
-                <p>{props.source}</p>
+            <ConcordanceDetailsTextInfo title={t('concordance.detailsTextTitle')} value={props.title} />
-            </div>
+            <ConcordanceDetailsTextInfo title={t('concordance.detailsTextAuthor')} value={props.author} />
-            <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>
         </>
     );
 };

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;