docs: sort API reference sidebar items and sections (#12032)

www/apps/api-reference/components/Tags/Paths/index.tsx

@@ -2,7 +2,7 @@
 
 import type { OpenAPI } from "types"
 import { findSidebarItem, useSidebar } from "docs-ui"
-import { Fragment, Suspense, useEffect } from "react"
+import { Fragment, Suspense, useEffect, useMemo } from "react"
 import dynamic from "next/dynamic"
 import type { TagOperationProps } from "../Operation"
 import clsx from "clsx"
@@ -10,6 +10,7 @@ import getTagChildSidebarItems from "@/utils/get-tag-child-sidebar-items"
 import { useLoading } from "@/providers/loading"
 import DividedLoading from "@/components/DividedLoading"
 import { Sidebar } from "types"
+import { compareOperations } from "../../../utils/sort-operations-utils"
 
 const TagOperation = dynamic<TagOperationProps>(
   async () => import("../Operation")
@@ -57,26 +58,53 @@ const TagPaths = ({ tag, className, paths }: TagPathsProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [paths, shownSidebar?.sidebar_id])
 
+  const sortedOperations = useMemo(() => {
+    const sortedOperations: {
+      endpointPath: string
+      method: string
+      operation: OpenAPI.Operation
+    }[] = []
+
+    Object.entries(paths).forEach(([endpointPath, operations]) => {
+      Object.entries(operations).forEach(([method, operation]) => {
+        sortedOperations.push({
+          endpointPath,
+          method,
+          operation: operation as OpenAPI.Operation,
+        })
+      })
+    })
+
+    sortedOperations.sort((a, b) => {
+      return compareOperations({
+        httpMethodA: a.method,
+        httpMethodB: b.method,
+        summaryA: a.operation.summary,
+        summaryB: b.operation.summary,
+      })
+    })
+
+    return sortedOperations
+  }, [paths])
+
   return (
     <Suspense>
       <div className={clsx("relative", className)}>
         {loading && <DividedLoading className="mt-7" />}
-        {Object.entries(paths).map(([endpointPath, operations], pathIndex) => (
-          <Fragment key={pathIndex}>
-            {Object.entries(operations).map(
-              ([method, operation], operationIndex) => (
-                <TagOperation
-                  method={method}
-                  operation={operation as OpenAPI.Operation}
-                  tag={tag}
-                  key={`${pathIndex}-${operationIndex}`}
-                  endpointPath={endpointPath}
-                  className={clsx("pt-7")}
-                />
-              )
-            )}
-          </Fragment>
-        ))}
+        {sortedOperations.map(
+          ({ endpointPath, method, operation }, operationIndex) => (
+            <Fragment key={operationIndex}>
+              <TagOperation
+                method={method}
+                operation={operation}
+                tag={tag}
+                key={`${operationIndex}`}
+                endpointPath={endpointPath}
+                className={clsx("pt-7")}
+              />
+            </Fragment>
+          )
+        )}
       </div>
     </Suspense>
   )