Show 'More information' section only if it's not empty

eea · Mar 3, 2023 · 612f035 · 612f035
1 parent e99ad02
commit 612f035
Showing 1 changed file with 50 additions and 44 deletions.
diff --git a/src/components/ItemView/MetadataSection.jsx b/src/components/ItemView/MetadataSection.jsx
@@ -16,59 +16,65 @@ const MetadataSection = (props) => {
 
   return (
     <>
-      <div className="dataset-container metadata-wrapper">
-        <h2>More information</h2>
+      {(!!rod ||
+        (!!organisations && organisations.length > 0) ||
+        (merged_time_coverage_range &&
+          merged_time_coverage_range?.length > 0)) && (
+        <div className="dataset-container metadata-wrapper">
+          <h2>More information</h2>
 
-        <div className="metadata-list">
-          {!!rod && (
-            <div className="metadata-section">
-              <h5>Reporting obligations (ROD)</h5>
-
-              {Array.isArray(rod?.raw) ? (
-                <>
-                  {rod?.raw.map((item, i) => {
-                    return <div key={i}>{item}</div>;
-                  })}
-                </>
-              ) : (
-                <div>{rod?.raw}</div>
-              )}
-            </div>
-          )}
-
-          {!!organisations && organisations.length > 0 && (
-            <div className="metadata-section">
-              <h5>Organisation:</h5>
+          <div className="metadata-list">
+            {!!rod && (
+              <div className="metadata-section">
+                <h5>Reporting obligations (ROD)</h5>
 
-              {organisations.map((item, i) => {
-                return <div key={i}>{item}</div>;
-              })}
-            </div>
-          )}
+                {Array.isArray(rod?.raw) ? (
+                  <>
+                    {rod?.raw.map((item, i) => {
+                      return <div key={i}>{item}</div>;
+                    })}
+                  </>
+                ) : (
+                  <div>{rod?.raw}</div>
+                )}
+              </div>
+            )}
 
-          {merged_time_coverage_range &&
-            merged_time_coverage_range?.length > 0 && (
+            {!!organisations && organisations.length > 0 && (
               <div className="metadata-section">
-                <h5>Temporal coverage:</h5>
+                <h5>Organisation:</h5>
 
-                {merged_time_coverage_range.map((tc, i) => {
-                  const tc_start = tc.start || '';
-                  const tc_end = tc.end || '';
-                  return (
-                    <React.Fragment key={i}>
-                      <span>
-                        {tc_start === tc_end && tc_start}
-                        {tc_start !== tc_end && tc_start + ' - ' + tc_end}
-                      </span>
-                      {i !== merged_time_coverage_range.length - 1 ? ', ' : ' '}
-                    </React.Fragment>
-                  );
+                {organisations.map((item, i) => {
+                  return <div key={i}>{item}</div>;
                 })}
               </div>
             )}
-        </div>
-      </div>
 
+            {merged_time_coverage_range &&
+              merged_time_coverage_range?.length > 0 && (
+                <div className="metadata-section">
+                  <h5>Temporal coverage:</h5>
+
+                  {merged_time_coverage_range.map((tc, i) => {
+                    const tc_start = tc.start || '';
+                    const tc_end = tc.end || '';
+                    return (
+                      <React.Fragment key={i}>
+                        <span>
+                          {tc_start === tc_end && tc_start}
+                          {tc_start !== tc_end && tc_start + ' - ' + tc_end}
+                        </span>
+                        {i !== merged_time_coverage_range.length - 1
+                          ? ', '
+                          : ' '}
+                      </React.Fragment>
+                    );
+                  })}
+                </div>
+              )}
+          </div>
+        </div>
+      )}
       <div className="dataset-container">
         <div className="d-link">
           <Icon className="file pdf" />