fix(table of contents): correctly show all operations

asyncapi · Apr 1, 2024 · 400b4d0 · 400b4d0
1 parent 7b2f685
commit 400b4d0
Showing 1 changed file with 45 additions and 41 deletions.
diff --git a/components/TableOfContents.js b/components/TableOfContents.js
@@ -1,64 +1,68 @@
 import { Text, Indent, IndentationTypes } from '@asyncapi/generator-react-sdk';
 
-import { Header, Link, ListItem } from '../components/common';
-
 import { FormatHelpers } from '../helpers/format';
+import { CommonHelpers } from '../helpers/common';
 
-export function TableOfContents({ asyncapi }) {
-  const serversList = asyncapi.servers().all().map(server => {
-    const serverName = server.id();
-    return (
-      <Indent size={2} type={IndentationTypes.SPACES} key={serverName}>
-        <ListItem>
-          <Link href={`#${FormatHelpers.slugify(serverName)}-server`}>{serverName}</Link>
-        </ListItem>
-      </Indent>
-    );
-  });
+import { Header, Link, ListItem } from './common';
 
-  const operationsList = [];
-  asyncapi.channels().all().map(channel => {
-    const channelName = channel.address();
-    channel.operations().all().forEach(operation => {
-      if (operation.action() === 'publish') {
-        operationsList.push(
-          <Indent size={2} type={IndentationTypes.SPACES} key={`pub-${channelName}`}>
-            <ListItem>
-              <Link href={`#pub-${FormatHelpers.slugify(channelName)}-operation`}>PUB {channelName}</Link>
-            </ListItem>
-          </Indent>
-        );
-      }
-      if (operation.action() === 'subscribe') {
-        operationsList.push(
-          <Indent size={2} type={IndentationTypes.SPACES} key={`sub-${channelName}`}>
-            <ListItem>
-              <Link href={`#sub-${FormatHelpers.slugify(channelName)}-operation`}>SUB {channelName}</Link>
-            </ListItem>
-          </Indent>
-        );
-      }
-    });
-  });
+export function TableOfContents({asyncapi}) {
+  const servers = asyncapi.servers().all();
+  const operations = asyncapi.operations().all();
 
   return (
     <>
       <Header type={2}>Table of Contents</Header>
       <Text>
-        {serversList.length > 0 && (
+        {servers.length > 0 && (
           <>
             <ListItem>
               <Link href="#servers">Servers</Link>
             </ListItem>
-            {serversList}
+            {servers.map((server) => {
+              const serverName = server.id();
+              return (
+                <Indent
+                  size={2}
+                  type={IndentationTypes.SPACES}
+                  key={serverName}
+                >
+                  <ListItem>
+                    <Link href={`#${FormatHelpers.slugify(
+                      serverName)}-server`}>
+                      {serverName}
+                    </Link>
+                  </ListItem>
+                </Indent>
+              );
+            })}
           </>
         )}
-        {operationsList.length > 0 && (
+        {operations.length > 0 && (
           <>
             <ListItem>
               <Link href="#operations">Operations</Link>
             </ListItem>
-            {operationsList}
+            {operations.map((operation) => {
+              const channel = operation.channels().all()[0];
+              const channelAddress = channel?.address() ?? '';
+              const type = CommonHelpers.getOperationType(operation);
+              return (
+                <Indent
+                  size={2}
+                  type={IndentationTypes.SPACES}
+                  key={`${type}-${channelAddress}`}
+                >
+                  <ListItem>
+                    <Link
+                      href={`#${type}-${FormatHelpers.slugify(
+                        channelAddress)}-operation`}
+                    >
+                      {type.toUpperCase()} {channelAddress}
+                    </Link>
+                  </ListItem>
+                </Indent>
+              );
+            })}
           </>
         )}
       </Text>