chore: resolve code duplicate issue

KhudaDad414 · Oct 5, 2023 · f689c8e · f689c8e
1 parent 7fd77f8
commit f689c8e
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 396 deletions.
diff --git a/apps/studio/src/components/Content.tsx b/apps/studio/src/components/Content.tsx
@@ -1,7 +1,6 @@
 import SplitPane from './SplitPane';
 import { Editor } from './Editor/Editor';
 import { Navigation } from './Navigation';
-import { Navigationv3 } from './Navigationv3';
 import { Template } from './Template';
 import { VisualiserTemplate } from './Visualiser';
 
@@ -43,9 +42,7 @@ export const Content: FunctionComponent<ContentProps> = () => { // eslint-disabl
         localStorage.setItem(splitPosLeft, String(size));
       }, 100)}
     >
-      {
-        isV3 ? <Navigationv3 /> : <Navigation />
-      }
+      <Navigation isV3={isV3}/>
       <Editor />
     </SplitPane>
   );

diff --git a/apps/studio/src/components/Navigation.tsx b/apps/studio/src/components/Navigation.tsx
@@ -9,6 +9,7 @@ import type { AsyncAPIDocumentInterface } from '@asyncapi/parser/cjs';
 
 interface NavigationProps {
   className?: string;
+  isV3?:boolean;
 }
 
 interface NavigationSectionProps {
@@ -67,6 +68,142 @@ const ServersNavigation: React.FunctionComponent<NavigationSectionProps> = ({
   );
 };
 
+const ChannelsNavigation: React.FunctionComponent<NavigationSectionProps> = ({
+  document,
+  hash,
+}) => {
+  const { navigationSvc } = useServices();
+
+  const channels = document.channels().all().map(
+    (channel) => {
+      return  <li
+        key={channel.id()}
+        className={`p-2 pl-3 text-white cursor-pointer text-xs border-t border-gray-700 hover:bg-gray-900 ${
+          hash === `channels-${channel.id()}` ? 'bg-gray-800' : ''
+        }`}
+        onClick={() =>
+          navigationSvc.scrollTo(
+            `/channels/${(channel.id() ?? '').replace(/\//g, '~1')}`,
+            `channels-${channel.id()}`,
+          )
+        }
+      >
+        <div className="flex flex-row">
+          <div className="flex-none">
+            <span className="mr-3 text-xs uppercase text-blue-500 font-bold">
+              {channel.id()}
+            </span>
+          </div>
+          <span className="truncate">{channel.address()}</span>
+        </div>
+      </li>
+    },
+  );
+
+  return (
+    <>
+      <div
+        className={`p-2 pl-3 text-white cursor-pointer hover:bg-gray-900 ${
+          hash === 'channels' ? 'bg-gray-800' : ''
+        }`}
+        onClick={() =>
+          navigationSvc.scrollTo(
+            '/channels',
+            'channels',
+          )
+        }
+      >
+        Channels
+      </div>
+      <ul>{channels}</ul>
+    </>
+  );
+};
+
+const V3OperationsNavigation: React.FunctionComponent<NavigationSectionProps> = ({
+  document,
+  hash,
+}) => {
+  const { navigationSvc } = useServices();
+
+  const operations = document.operations().all().map(
+    (operation) => {
+      const operations: React.ReactNode[] = [];
+      if (operation.isReceive()) {
+        operations.push(
+          <li
+            key={operation.id()}
+            className={`p-2 pl-3 text-white cursor-pointer text-xs border-t border-gray-700 hover:bg-gray-900 ${
+              hash === `operation-receive-${operation.id()}` ? 'bg-gray-800' : ''
+            }`}
+            onClick={() =>
+              navigationSvc.scrollTo(
+                `/operations/${(operation.id() ?? '').replace(/\//g, '~1')}`,
+                `operation-receive-${operation.id()}`,
+              )
+            }
+          >
+            <div className="flex flex-row">
+              <div className="flex-none">
+                <span className="mr-3 text-xs uppercase text-blue-500 font-bold">
+                  Receive
+                </span>
+              </div>
+              <span className="truncate">{operation.id()}</span>
+            </div>
+          </li>
+        );
+      }
+      if (operation.isSend()) {
+        operations.push(
+          <li
+            key={`${operation.id()}-send`}
+            className={`p-2 pl-3 text-white cursor-pointer text-xs border-t border-gray-700 hover:bg-gray-900 ${
+              hash === `operation-send-${operation.id()}` ? 'bg-gray-800' : ''
+            }`}
+            onClick={() =>
+              navigationSvc.scrollTo(
+                `/operations/${(operation.id() ?? '').replace(/\//g, '~1')}`,
+                `operation-send-${operation.id()}`,
+              )
+            }
+          >
+            <div className="flex flex-row">
+              <div className="flex-none">
+                <span className="mr-3 text-xs uppercase text-green-600 font-bold">
+                  Send
+                </span>
+              </div>
+              <span className="truncate">{operation.id()}</span>
+            </div>
+          </li>,
+        );
+      }
+
+      return operations;
+    },
+  );
+
+  return (
+    <>
+      <div
+        className={`p-2 pl-3 text-white cursor-pointer hover:bg-gray-900 ${
+          hash === 'operations' ? 'bg-gray-800' : ''
+        }`}
+        onClick={() =>
+          navigationSvc.scrollTo(
+            '/operations',
+            'operations',
+          )
+        }
+      >
+        Operations
+      </div>
+      <ul>{operations}</ul>
+    </>
+  );
+};
+
 const OperationsNavigation: React.FunctionComponent<NavigationSectionProps> = ({
   document,
   hash,
@@ -250,6 +387,7 @@ const SchemasNavigation: React.FunctionComponent<NavigationSectionProps> = ({
 
 export const Navigation: React.FunctionComponent<NavigationProps> = ({
   className = '',
+  isV3 = false
 }) => {
   const [hash, setHash] = useState(window.location.hash);
 
@@ -306,13 +444,28 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
             />
           </li>
         )}
+        { isV3 &&
         <li className="mb-4">
-          <OperationsNavigation
+          <ChannelsNavigation
             document={document}
             rawSpec={rawSpec}
             hash={hash}
           />
         </li>
+        }
+        <li className="mb-4">
+          { isV3 
+            ? <V3OperationsNavigation 
+              document={document}
+              rawSpec={rawSpec}
+              hash={hash} /> 
+            : <OperationsNavigation
+              document={document}
+              rawSpec={rawSpec}
+              hash={hash}
+            />
+          }
+        </li>
         {!components.messages().isEmpty() && (
           <li className="mb-4">
             <MessagesNavigation