refactor: move locale switching logic out of state

makeswift · Feb 19, 2024 · 3b25c9a · 3b25c9a
1 parent f87b369
commit 3b25c9a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 14 deletions.
diff --git a/.changeset/nasty-mirrors-perform.md b/.changeset/nasty-mirrors-perform.md
@@ -0,0 +1,5 @@
+---
+'@makeswift/runtime': patch
+---
+
+Moves locale switching logic out of the redux middleware state and closer to Next.js logic.
diff --git a/packages/runtime/src/components/hooks/useRouterLocaleSync.ts b/packages/runtime/src/components/hooks/useRouterLocaleSync.ts
@@ -0,0 +1,16 @@
+import { useRouter } from 'next/router'
+
+import { useEffect } from 'react'
+import { setLocale } from '../../state/actions'
+import { useDispatch } from '../../runtimes/react/hooks/use-dispatch'
+
+export const useRouterLocaleSync = () => {
+  const router = useRouter()
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    if (!router.locale) return
+
+    dispatch(setLocale(new Intl.Locale(router.locale)))
+  }, [router.locale])
+}
diff --git a/packages/runtime/src/components/page/Page.tsx b/packages/runtime/src/components/page/Page.tsx
@@ -13,6 +13,7 @@ import { useIsInBuilder } from '../../react'
 import deepEqual from '../../utils/deepEqual'
 import { MakeswiftPageDocument } from '../../next'
 import { Page as PageType, Site } from '../../api'
+import { useRouterLocaleSync } from '../hooks/useRouterLocaleSync'
 
 const SnippetLocation = {
   Body: 'BODY',
@@ -165,6 +166,8 @@ export function Page({ document: page }: Props): JSX.Element {
 
   const documentId = baseLocalizedPage?.elementTreeId ?? page.id
 
+  useRouterLocaleSync()
+
   return (
     <>
       <Head>

diff --git a/packages/runtime/src/state/react-builder-preview.ts b/packages/runtime/src/state/react-builder-preview.ts
@@ -45,7 +45,6 @@ import {
   changePathnameComplete,
   elementFromPointChange,
   setBreakpoints,
-  setLocale,
 } from './actions'
 import { ActionTypes } from './actions'
 import { createPropController } from '../prop-controllers/instances'
@@ -496,11 +495,6 @@ export function messageChannelMiddleware(
       const breakpoints = ReactPage.getBreakpoints(state)
       messageChannel.port1.postMessage(setBreakpoints(breakpoints))
 
-      const routerLocale = Router.locale
-      if (routerLocale != null) {
-        messageChannel.port1.postMessage(setLocale(new Intl.Locale(routerLocale)))
-      }
-
       Router.events.on('routeChangeStart', () => {
         messageChannel.port1.postMessage(changePathnameStart())
       })
@@ -519,6 +513,7 @@ export function messageChannelMiddleware(
           case ActionTypes.HANDLE_WHEEL:
           case ActionTypes.HANDLE_POINTER_MOVE:
           case ActionTypes.ELEMENT_FROM_POINT_CHANGE:
+          case ActionTypes.SET_LOCALE:
             messageChannel.port1.postMessage(action)
             break
 
@@ -550,14 +545,6 @@ export function messageChannelMiddleware(
             window.getSelection()?.removeAllRanges()
             break
 
-          case ActionTypes.SET_LOCALE: {
-            const { pathname: currentPathname, query } = Router
-            const pathname = (action.payload.pathname ?? currentPathname).replace(/^\//, '/')
-
-            Router.replace({ pathname, query }, undefined, { locale: action.payload.locale })
-            break
-          }
-
           case ActionTypes.CHANGE_PATHNAME: {
             const pathname = action.payload.pathname.replace(/^\//, '/')
             const currentPathname = Router.asPath.replace(/^\//, '/')