return null if both properties and patternProperties are not defined or empty

Author: theAnuragMishra

library/src/components/Schema.tsx

@@ -113,9 +113,8 @@ export const Schema: React.FunctionComponent<Props> = ({
               </>
             ) : (
               <span
-                className={`break-anywhere text-sm ${
-                  isProperty ? 'italic' : ''
-                }`}
+                className={`break-anywhere text-sm ${isProperty ? 'italic' : ''
+                  }`}
               >
                 {schemaName}
               </span>
@@ -273,55 +272,48 @@ export const Schema: React.FunctionComponent<Props> = ({
 
         {isCircular || !isExpandable ? null : (
           <div
-            className={`rounded p-4 py-2 border bg-gray-100 ${
-              reverse ? 'bg-gray-200' : ''
-            } ${expanded ? 'block' : 'hidden'}`}
+            className={`rounded p-4 py-2 border bg-gray-100 ${reverse ? 'bg-gray-200' : ''
+              } ${expanded ? 'block' : 'hidden'}`}
           >
             <SchemaProperties schema={schema} />
             <SchemaItems schema={schema} />
 
-            {schema
-              .oneOf()
-              ?.map((s, idx) => (
-                <Schema
-                  key={idx}
-                  schema={s}
-                  schemaName={SchemaHelpers.applicatorSchemaName(
-                    idx,
-                    'Adheres to',
-                    'Or to',
-                    s.title() ?? s.id(),
-                  )}
-                />
-              ))}
-            {schema
-              .anyOf()
-              ?.map((s, idx) => (
-                <Schema
-                  key={idx}
-                  schema={s}
-                  schemaName={SchemaHelpers.applicatorSchemaName(
-                    idx,
-                    'Can adhere to',
-                    'Or to',
-                    s.title() ?? s.id(),
-                  )}
-                />
-              ))}
-            {schema
-              .allOf()
-              ?.map((s, idx) => (
-                <Schema
-                  key={idx}
-                  schema={s}
-                  schemaName={SchemaHelpers.applicatorSchemaName(
-                    idx,
-                    'Consists of',
-                    'And of',
-                    s.title() ?? s.id(),
-                  )}
-                />
-              ))}
+            {schema.oneOf()?.map((s, idx) => (
+              <Schema
+                key={idx}
+                schema={s}
+                schemaName={SchemaHelpers.applicatorSchemaName(
+                  idx,
+                  'Adheres to',
+                  'Or to',
+                  s.title() ?? s.id(),
+                )}
+              />
+            ))}
+            {schema.anyOf()?.map((s, idx) => (
+              <Schema
+                key={idx}
+                schema={s}
+                schemaName={SchemaHelpers.applicatorSchemaName(
+                  idx,
+                  'Can adhere to',
+                  'Or to',
+                  s.title() ?? s.id(),
+                )}
+              />
+            ))}
+            {schema.allOf()?.map((s, idx) => (
+              <Schema
+                key={idx}
+                schema={s}
+                schemaName={SchemaHelpers.applicatorSchemaName(
+                  idx,
+                  'Consists of',
+                  'And of',
+                  s.title() ?? s.id(),
+                )}
+              />
+            ))}
             {schema.not() && (
               <Schema schema={schema.not()} schemaName="Cannot adhere to:" />
             )}
@@ -377,15 +369,20 @@ interface SchemaPropertiesProps {
 const SchemaProperties: React.FunctionComponent<SchemaPropertiesProps> = ({
   schema,
 }) => {
-  const properties = schema.properties() ?? {};
-  const patternProperties = schema.patternProperties() ?? {};
+  const properties = Object.entries(schema.properties() ?? {});
+  const patternProperties = Object.entries(schema.patternProperties() ?? {});
+
+  if (!properties.length && !patternProperties.length) {
+    return null;
+  }
 
   const required = schema.required() ?? [];
 
   return (
     <>
-      {Object.entries(properties).map(([propertyName, property]) => (
+      {properties.map(([propertyName, property]) => (
         <Schema
+          key={propertyName}
           schema={property}
           schemaName={propertyName}
           required={required.includes(propertyName)}
@@ -395,21 +392,19 @@ const SchemaProperties: React.FunctionComponent<SchemaPropertiesProps> = ({
             propertyName,
             schema,
           )}
+        />
+      ))}
+
+      {patternProperties.map(([propertyName, property]) => (
+        <Schema
           key={propertyName}
+          schema={property}
+          schemaName={propertyName}
+          isPatternProperty
+          isProperty
+          isCircular={property.isCircular()}
         />
       ))}
-      {Object.entries(patternProperties ?? {}).map(
-        ([propertyName, property]) => (
-          <Schema
-            schema={property}
-            schemaName={propertyName}
-            isPatternProperty
-            isProperty
-            isCircular={property.isCircular()}
-            key={propertyName}
-          />
-        ),
-      )}
     </>
   );
 };