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>

www/packages/docs-ui/src/providers/Sidebar/index.tsx

@@ -61,6 +61,7 @@ export type SidebarContextType = {
   shouldHandleHashChange: boolean
   sidebarRef: React.RefObject<HTMLDivElement>
   goBack: () => void
+  resetItems: () => void
 } & SidebarStyleOptions
 
 export const SidebarContext = createContext<SidebarContextType | null>(null)
@@ -75,11 +76,16 @@ export type ActionOptionsType = {
   ignoreExisting?: boolean
 }
 
-export type ActionType = {
+export type ActionType =
-  type: "add" | "update"
+  | {
-  items: SidebarItemType[]
+      type: "add" | "update"
-  options?: ActionOptionsType
+      items: SidebarItemType[]
-}
+      options?: ActionOptionsType
+    }
+  | {
+      type: "replace"
+      replacementItems: SidebarSectionItemsType
+    }
 
 const findItem = (
   section: SidebarItemType[],
@@ -105,8 +111,15 @@ const findItem = (
 
 export const reducer = (
   state: SidebarSectionItemsType,
-  { type, items, options }: ActionType
+  actionData: ActionType
 ) => {
+  if (actionData.type === "replace") {
+    return actionData.replacementItems
+  }
+
+  const { type, options } = actionData
+  let { items } = actionData
+
   const {
     section = SidebarItemSections.TOP,
     parent,
@@ -173,6 +186,7 @@ export type SidebarProviderProps = {
   shouldHandlePathChange?: boolean
   scrollableElement?: Element | Window
   staticSidebarItems?: boolean
+  resetOnCondition?: () => boolean
 } & SidebarStyleOptions
 
 export const SidebarProvider = ({
@@ -186,6 +200,7 @@ export const SidebarProvider = ({
   staticSidebarItems = false,
   disableActiveTransition = false,
   noTitleStyling = false,
+  resetOnCondition,
 }: SidebarProviderProps) => {
   const [items, dispatch] = useReducer(reducer, {
     top: initialItems?.top || [],
@@ -315,6 +330,17 @@ export const SidebarProvider = ({
     router.replace(backItem.path!)
   }
 
+  const resetItems = useCallback(() => {
+    dispatch({
+      type: "replace",
+      replacementItems: {
+        top: initialItems?.top || [],
+        bottom: initialItems?.bottom || [],
+        mobile: initialItems?.mobile || [],
+      },
+    })
+  }, [initialItems])
+
   useEffect(() => {
     if (shouldHandleHashChange) {
       init()
@@ -413,6 +439,12 @@ export const SidebarProvider = ({
     }
   }, [getCurrentSidebar, activePath])
 
+  useEffect(() => {
+    if (resetOnCondition?.()) {
+      resetItems()
+    }
+  }, [resetOnCondition])
+
   return (
     <SidebarContext.Provider
       value={{
@@ -435,6 +467,7 @@ export const SidebarProvider = ({
         shouldHandleHashChange,
         sidebarRef,
         goBack,
+        resetItems,
       }}
     >
       {children}