docs: fix sidebar not updating when api reference path changes (#8409)

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

@@ -32,7 +32,7 @@ const Tags = () => {
   const [expand, setExpand] = useState<string>("")
   const { baseSpecs, setBaseSpecs } = useBaseSpecs()
   const { addItems } = useSidebar()
-  const { area } = useArea()
+  const { area, prevArea } = useArea()
 
   const { data } = useSWR<ExpandedDocument>(
     loadData && !baseSpecs
@@ -63,6 +63,11 @@ const Tags = () => {
 
   useEffect(() => {
     if (baseSpecs) {
+      if (prevArea !== area) {
+        setBaseSpecs(null)
+        return
+      }
+
       addItems(
         baseSpecs.tags?.map((tag) => {
           const tagPathName = getSectionId([tag.name.toLowerCase()])

www/apps/api-reference/providers/area.tsx

@@ -1,11 +1,12 @@
 "use client"
 
 import type { Area } from "@/types/openapi"
-import { useSearch } from "docs-ui"
+import { usePrevious, useSearch } from "docs-ui"
 import { createContext, useContext, useEffect, useState } from "react"
 
 type AreaContextType = {
   area: Area
+  prevArea: Area | undefined
   setArea: (value: Area) => void
 }
 
@@ -18,6 +19,7 @@ type AreaProviderProps = {
 
 const AreaProvider = ({ area: passedArea, children }: AreaProviderProps) => {
   const [area, setArea] = useState<Area>(passedArea)
+  const prevArea = usePrevious(area)
   const { defaultFilters, setDefaultFilters } = useSearch()
 
   useEffect(() => {
@@ -30,6 +32,7 @@ const AreaProvider = ({ area: passedArea, children }: AreaProviderProps) => {
     <AreaContext.Provider
       value={{
         area,
+        prevArea,
         setArea,
       }}
     >

www/apps/api-reference/providers/base-specs.tsx

@@ -5,7 +5,7 @@ import { ReactNode, createContext, useContext, useState } from "react"
 
 type BaseSpecsContextType = {
   baseSpecs: ExpandedDocument | null
-  setBaseSpecs: (value: ExpandedDocument) => void
+  setBaseSpecs: React.Dispatch<React.SetStateAction<ExpandedDocument | null>>
   getSecuritySchema: (securityName: string) => SecuritySchemeObject | null
 }
 

www/apps/api-reference/providers/sidebar.tsx

@@ -2,9 +2,12 @@
 import {
   SidebarProvider as UiSidebarProvider,
   usePageLoading,
+  usePrevious,
   useScrollController,
 } from "docs-ui"
 import { config } from "../config"
+import { usePathname } from "next/navigation"
+import { useCallback } from "react"
 
 type SidebarProviderProps = {
   children?: React.ReactNode
@@ -13,6 +16,13 @@ type SidebarProviderProps = {
 const SidebarProvider = ({ children }: SidebarProviderProps) => {
   const { isLoading, setIsLoading } = usePageLoading()
   const { scrollableElement } = useScrollController()
+  const pathname = usePathname()
+  const prevPathname = usePrevious(pathname)
+
+  const resetOnCondition = useCallback(
+    () => prevPathname !== undefined && prevPathname !== pathname,
+    [pathname, prevPathname]
+  )
 
   return (
     <UiSidebarProvider
@@ -21,6 +31,7 @@ const SidebarProvider = ({ children }: SidebarProviderProps) => {
       shouldHandleHashChange={true}
       scrollableElement={scrollableElement}
       initialItems={config.sidebar}
+      resetOnCondition={resetOnCondition}
     >
       {children}
     </UiSidebarProvider>