references for leaf types

Author: miguelgrinberg

src/CollapsingType.tsx

@@ -1,8 +1,9 @@
 import { useCallback } from 'react';
-import { useSchema } from './SchemaContext';
+import { useSchema, useSchemaContext } from './SchemaContext';
 import Details from './Details';
 import CollapsingDetails from './CollapsingDetails';
 import Type from './Type';
+import References from './References';
 
 import { BaseType } from './metamodel';
 
@@ -14,6 +15,8 @@ type Props = {
 
 export default function CollapsingType({ header, namespace, name }: Props) {
   const schema = useSchema();
+  const { references } = useSchemaContext();
+  const typeName = `${namespace}::${name}`
 
   const renderType = useCallback(() => {
     for (const type of schema.types) {
@@ -22,10 +25,13 @@ export default function CollapsingType({ header, namespace, name }: Props) {
         return <Type type={bt} />;
       }
     }
+    if (references[typeName]) {
+      return <References typeName={typeName} />;
+    }
     return <Details value="No additional info" />
   }, [name, namespace, schema.types]);
 
   return (
-    <CollapsingDetails header={header} value=<code>{`${namespace}::${name}` }</code> cb={renderType} />
+    <CollapsingDetails header={header} value=<code>{typeName}</code> cb={renderType} />
   );
 }

src/References.tsx

@@ -0,0 +1,49 @@
+import { useSchemaContext } from './SchemaContext';
+import CollapsingDetails from './CollapsingDetails';
+import CollapsingEndpoint from './CollapsingEndpoint';
+import CollapsingType from './CollapsingType';
+
+type Props = {
+  typeName: string;
+}
+
+export default function References({ typeName }: Props) {
+  const { references } = useSchemaContext();
+  let refCount = 0;
+
+  if (references[typeName] !== undefined) {
+    if (references[typeName].endpoints) {
+      refCount += references[typeName].endpoints.length;
+    }
+    if (references[typeName].types) {
+      refCount += references[typeName].types.length;
+    }
+  }
+
+  return (
+    <>
+      {typeName in references && (references[typeName].endpoints || references[typeName].types) &&
+        <CollapsingDetails header="References" value={`${refCount}`}>
+          {references[typeName].endpoints &&
+            <>
+              {references[typeName].endpoints.map(endpointName => {
+                const comment = endpointName.split(' ').slice(1).join(' ');
+                const name = endpointName.split(' ')[0];
+                return <CollapsingEndpoint key={name} header={comment} name={name} />;
+              })}
+            </>
+          }
+          {references[typeName].types &&
+            <>
+              {references[typeName].types.map(typeName => {
+                const comment = typeName.split(' ').slice(1).join(' ');
+                const [namespace, name] = typeName.split(' ')[0].split('::')
+                return <CollapsingType key={typeName} header={comment} namespace={namespace} name={name} />;
+              })}
+            </>
+          }
+        </CollapsingDetails>
+      }
+    </>
+  );
+}

src/SchemaContext.tsx

@@ -28,7 +28,10 @@ const crossReference = (schema: Model): Record<string, Record<string, string[]>>
     if (!('endpoints' in refs[typeName])) {
       refs[typeName].endpoints = [];
     }
-    refs[typeName].endpoints.push(`${source.name} ${comment}`);
+    const ref = `${source.name} ${comment}`
+    if (refs[typeName].endpoints.indexOf(ref) == -1) {
+      refs[typeName].endpoints.push(ref);
+    }
   }
 
   const addTypeReference = (source: TypeName, type: TypeName, comment: string) => {
@@ -39,7 +42,10 @@ const crossReference = (schema: Model): Record<string, Record<string, string[]>>
     if (refs[typeName].types === undefined) {
       refs[typeName].types = [];
     }
-    refs[typeName].types.push(`${source.namespace}::${source.name} ${comment}`);
+    const ref = `${source.namespace}::${source.name} ${comment}`;
+    if (refs[typeName].types.indexOf(ref) == -1) {
+      refs[typeName].types.push(ref);
+    }
   }
 
   const addValueOfReferences = (source: TypeName, valueOf: ValueOf, comment: string) => {

src/Type.tsx

@@ -9,6 +9,8 @@ import Request from './Request';
 import Response from './Response';
 import Enum from './Enum';
 import TypeAlias from './TypeAlias';
+import References from './References';
+
 import { useSchemaContext } from './SchemaContext';
 
 import { BaseType, Interface as InterfaceType, Request as RequestType, Response as ResponseType, Enum as EnumType, TypeAlias as TypeAliasType } from './metamodel';
@@ -20,16 +22,6 @@ type Props = {
 export default function Type({ type }: Props) {
   const { references } = useSchemaContext();
   const typeName = `${type.name.namespace}::${type.name.name}`;
-  let refCount = 0;
-
-  if (references[typeName] !== undefined) {
-    if (references[typeName].endpoints) {
-      refCount += references[typeName].endpoints.length;
-    }
-    if (references[typeName].types) {
-      refCount += references[typeName].types.length;
-    }
-  }
 
   return (
     <>
@@ -66,28 +58,7 @@ export default function Type({ type }: Props) {
             <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/>
           </svg>
         </a> />
-      {typeName in references && (references[typeName].endpoints || references[typeName].types) &&
-        <CollapsingDetails header="References" value={`${refCount}`}>
-          {references[typeName].endpoints &&
-            <>
-              {references[typeName].endpoints.map(endpointName => {
-                const comment = endpointName.split(' ').slice(1).join(' ');
-                const name = endpointName.split(' ')[0];
-                return <CollapsingEndpoint key={name} header={comment} name={name} />;
-              })}
-            </>
-          }
-          {references[typeName].types &&
-            <>
-              {references[typeName].types.map(typeName => {
-                const comment = typeName.split(' ').slice(1).join(' ');
-                const [namespace, name] = typeName.split(' ')[0].split('::')
-                return <CollapsingType key={`${namespace}::${name}`} header={comment} namespace={namespace} name={name} />;
-              })}
-            </>
-          }
-        </CollapsingDetails>
-      }
+      {references[typeName] && <References typeName={typeName} />}
     </>
   );
 }