[v4] refactor useMenuActions to setMenu, useFocusedRouteActions…

… to `setFocusedRoute` (#3281)

refactor `useMenuActions` to `setMenu`, `useFocusedRouteActions` to `setFocusedRoute`

.changeset/wild-plums-brake.md

@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': minor
+---
+
+refactor `useMenuActions` to `setMenu`, `useFocusedRouteActions` to `setFocusedRoute`

packages/nextra-theme-docs/src/components/navbar/navbar.client.tsx

@@ -12,12 +12,7 @@ import { useFSRoute } from 'nextra/hooks'
 import { ArrowRightIcon, MenuIcon } from 'nextra/icons'
 import type { MenuItem, PageItem } from 'nextra/normalize-pages'
 import type { ReactElement, ReactNode } from 'react'
-import {
-  useConfig,
-  useMenu,
-  useMenuActions,
-  useThemeConfig
-} from '../../stores'
+import { setMenu, useConfig, useMenu, useThemeConfig } from '../../stores'
 import { Anchor } from '../anchor'
 
 const classes = {
@@ -117,7 +112,6 @@ export function ClientNavbar({
 
   const activeRoute = useFSRoute()
   const menu = useMenu()
-  const { setMenu } = useMenuActions()
 
   return (
     <>

packages/nextra-theme-docs/src/components/sidebar.tsx

@@ -8,15 +8,15 @@ import { useFSRoute } from 'nextra/hooks'
 import { ArrowRightIcon, ExpandIcon } from 'nextra/icons'
 import type { Item, MenuItem, PageItem } from 'nextra/normalize-pages'
 import type { FocusEventHandler, ReactElement } from 'react'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import scrollIntoView from 'scroll-into-view-if-needed'
 import {
+  setFocusedRoute,
+  setMenu,
   useActiveAnchor,
   useConfig,
   useFocusedRoute,
-  useFocusedRouteActions,
   useMenu,
-  useMenuActions,
   useThemeConfig
 } from '../stores'
 import { Anchor } from './anchor'
@@ -223,6 +223,10 @@ function Separator({ title }: { title: string }): ReactElement {
   )
 }
 
+const handleClick = () => {
+  setMenu(false)
+}
+
 function File({
   item,
   anchors,
@@ -236,16 +240,11 @@ function File({
   // It is possible that the item doesn't have any route - for example an external link.
   const active = item.route && [route, route + '/'].includes(item.route + '/')
   const activeSlug = useActiveAnchor()
-  const { setMenu } = useMenuActions()
 
   if (item.type === 'separator') {
     return <Separator title={item.title} />
   }
 
-  const handleClick = () => {
-    setMenu(false)
-  }
-
   return (
     <li className={cn(classes.list, { active })}>
       <Anchor
@@ -288,26 +287,21 @@ interface MenuProps {
   level: number
 }
 
+const handleFocus: FocusEventHandler = event => {
+  const route =
+    event.target.getAttribute('href') ||
+    event.target.getAttribute('data-href') ||
+    ''
+  setFocusedRoute(route)
+}
+
 function Menu({
   directories,
   anchors,
   className,
   onlyCurrentDocs,
   level
 }: MenuProps): ReactElement {
-  const { setFocused } = useFocusedRouteActions()
-
-  const handleFocus: FocusEventHandler = useCallback(
-    event => {
-      const route =
-        event.target.getAttribute('href') ||
-        event.target.getAttribute('data-href') ||
-        ''
-      setFocused(route)
-    },
-    [setFocused]
-  )
-
   return (
     <ul className={cn(classes.list, className)}>
       {directories.map(item => {
@@ -334,18 +328,14 @@ function Menu({
 }
 
 export function MobileNav({ toc }: SidebarProps) {
-  const {
-    normalizePagesResult: { directories }
-  } = useConfig()
+  const { directories } = useConfig().normalizePagesResult
 
   const menu = useMenu()
-  const { setMenu } = useMenuActions()
-
   const pathname = usePathname()
 
   useEffect(() => {
     setMenu(false)
-  }, [pathname, setMenu])
+  }, [pathname])
 
   const anchors = useMemo(() => (toc || []).filter(v => v.depth === 2), [toc])
   const sidebarRef = useRef<HTMLDivElement>(null!)

packages/nextra-theme-docs/src/stores/active-anchor.ts

@@ -1,3 +1,4 @@
+import type { Dispatch } from 'react'
 import { create } from 'zustand'
 
 const useActiveAnchorStore = create<{
@@ -9,6 +10,6 @@ const useActiveAnchorStore = create<{
 export const useActiveAnchor = () =>
   useActiveAnchorStore(state => state.activeSlug)
 
-export function setActiveSlug(activeSlug: string) {
+export const setActiveSlug: Dispatch<string> = (activeSlug: string) => {
   useActiveAnchorStore.setState({ activeSlug })
 }

packages/nextra-theme-docs/src/stores/focused-route.ts

@@ -3,20 +3,13 @@ import { create } from 'zustand'
 
 const useFocusedRouteStore = create<{
   focused: string
-  actions: {
-    setFocused: Dispatch<string>
-  }
-}>(set => ({
-  focused: '',
-  actions: {
-    setFocused(focused) {
-      set({ focused })
-    }
-  }
+}>(() => ({
+  focused: ''
 }))
 
 export const useFocusedRoute = () =>
   useFocusedRouteStore(state => state.focused)
 
-export const useFocusedRouteActions = () =>
-  useFocusedRouteStore(state => state.actions)
+export const setFocusedRoute: Dispatch<string> = focused => {
+  useFocusedRouteStore.setState({ focused })
+}

packages/nextra-theme-docs/src/stores/index.ts

@@ -1,5 +1,5 @@
 export { useActiveAnchor, setActiveSlug } from './active-anchor'
 export { useConfig, ConfigProvider } from './config'
-export { useFocusedRoute, useFocusedRouteActions } from './focused-route'
-export { useMenu, useMenuActions } from './menu'
+export { useFocusedRoute, setFocusedRoute } from './focused-route'
+export { useMenu, setMenu } from './menu'
 export { ThemeConfigProvider, useThemeConfig } from './theme-config'

packages/nextra-theme-docs/src/stores/menu.ts

@@ -3,23 +3,17 @@ import { create } from 'zustand'
 
 const useMenuStore = create<{
   hasMenu: boolean
-  actions: {
-    setMenu: Dispatch<SetStateAction<boolean>>
-  }
-}>(set => ({
-  hasMenu: false,
-  actions: {
-    setMenu(fn) {
-      set(state => {
-        const hasMenu = typeof fn === 'function' ? fn(state.hasMenu) : fn
-        // Lock background scroll when menu is opened
-        document.body.classList.toggle('_overflow-hidden', hasMenu)
-        return { hasMenu }
-      })
-    }
-  }
+}>(() => ({
+  hasMenu: false
 }))
 
 export const useMenu = () => useMenuStore(state => state.hasMenu)
 
-export const useMenuActions = () => useMenuStore(state => state.actions)
+export const setMenu: Dispatch<SetStateAction<boolean>> = fn => {
+  useMenuStore.setState(state => {
+    const hasMenu = typeof fn === 'function' ? fn(state.hasMenu) : fn
+    // Lock background scroll when menu is opened
+    document.body.classList.toggle('_overflow-hidden', hasMenu)
+    return { hasMenu }
+  })
+}