From 448186f374be7e425c977ebbdd15fe70df205eba Mon Sep 17 00:00:00 2001 From: Jarrod Flesch <30633324+JarrodMFlesch@users.noreply.github.com> Date: Thu, 18 Jul 2024 12:59:27 -0400 Subject: [PATCH] chore: use href for locale switching, warns user before leaving (#7215) Opts to use links instead of router.replace when switching locales. The main benefit is now the user will be warned if they have changes and want to switch locales. Before it would switch locales and they would lose any unsaved changes in the locale they came from. --- packages/ui/src/elements/Autosave/index.tsx | 6 ++-- packages/ui/src/elements/Localizer/index.tsx | 21 ++++-------- test/helpers.ts | 34 ++++++++++---------- 3 files changed, 27 insertions(+), 34 deletions(-) diff --git a/packages/ui/src/elements/Autosave/index.tsx b/packages/ui/src/elements/Autosave/index.tsx index 02fe04c66..2cf2c59f1 100644 --- a/packages/ui/src/elements/Autosave/index.tsx +++ b/packages/ui/src/elements/Autosave/index.tsx @@ -43,7 +43,7 @@ export const Autosave: React.FC = ({ } = useConfig() const { docConfig, getVersions, versions } = useDocumentInfo() const { reportUpdate } = useDocumentEvents() - const { dispatchFields, setSubmitted } = useForm() + const { dispatchFields, setModified, setSubmitted } = useForm() const submitted = useFormSubmitted() const versionsConfig = docConfig?.versions @@ -80,7 +80,7 @@ export const Autosave: React.FC = ({ // Store locale in ref so the autosave func // can always retrieve the most to date locale localeRef.current = locale - + console.log(modifiedRef.current, modified) // When debounced fields change, autosave useEffect(() => { const abortController = new AbortController() @@ -131,6 +131,7 @@ export const Autosave: React.FC = ({ if (res.status === 200) { const newDate = new Date() setLastSaved(newDate.getTime()) + setModified(false) reportUpdate({ id, entitySlug, @@ -216,6 +217,7 @@ export const Autosave: React.FC = ({ reportUpdate, serverURL, setSubmitted, + setModified, versionsConfig?.drafts, debouncedFields, submitted, diff --git a/packages/ui/src/elements/Localizer/index.tsx b/packages/ui/src/elements/Localizer/index.tsx index 14e26ce4c..db7141897 100644 --- a/packages/ui/src/elements/Localizer/index.tsx +++ b/packages/ui/src/elements/Localizer/index.tsx @@ -1,11 +1,9 @@ 'use client' import { getTranslation } from '@payloadcms/translations' -import { useRouter } from 'next/navigation.js' import React from 'react' import { useConfig } from '../../providers/Config/index.js' import { useLocale } from '../../providers/Locale/index.js' -import { useRouteCache } from '../../providers/RouteCache/index.js' import { useSearchParams } from '../../providers/SearchParams/index.js' import { useTranslation } from '../../providers/Translation/index.js' import { Popup, PopupList } from '../Popup/index.js' @@ -24,8 +22,6 @@ export const Localizer: React.FC<{ const { i18n } = useTranslation() const locale = useLocale() const { stringifyParams } = useSearchParams() - const router = useRouter() - const { clearRouteCache } = useRouteCache() if (localization) { const { locales } = localization @@ -43,18 +39,13 @@ export const Localizer: React.FC<{ return ( { - router.replace( - stringifyParams({ - params: { - locale: localeOption.code, - }, - }), - ) - clearRouteCache() - close() - }} + onClick={close} > {localeOptionLabel} {localeOptionLabel !== localeOption.code && ` (${localeOption.code})`} diff --git a/test/helpers.ts b/test/helpers.ts index 1e4c3935b..268c00562 100644 --- a/test/helpers.ts +++ b/test/helpers.ts @@ -30,20 +30,20 @@ type LoginArgs = { const random = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min const networkConditions = { - 'Slow 3G': { - download: ((500 * 1000) / 8) * 0.8, - upload: ((500 * 1000) / 8) * 0.8, - latency: 400 * 5, - }, 'Fast 3G': { download: ((1.6 * 1000 * 1000) / 8) * 0.9, - upload: ((750 * 1000) / 8) * 0.9, latency: 1000, + upload: ((750 * 1000) / 8) * 0.9, + }, + 'Slow 3G': { + download: ((500 * 1000) / 8) * 0.8, + latency: 400 * 5, + upload: ((500 * 1000) / 8) * 0.8, }, 'Slow 4G': { download: ((4 * 1000 * 1000) / 8) * 0.8, - upload: ((3 * 1000 * 1000) / 8) * 0.8, latency: 1000, + upload: ((3 * 1000 * 1000) / 8) * 0.8, }, } @@ -53,10 +53,10 @@ const networkConditions = { * @param serverURL */ export async function ensureAutoLoginAndCompilationIsDone({ - page, - serverURL, customAdminRoutes, customRoutes, + page, + serverURL, }: { customAdminRoutes?: Config['admin']['routes'] customRoutes?: Config['routes'] @@ -65,7 +65,7 @@ export async function ensureAutoLoginAndCompilationIsDone({ }): Promise { const { admin: { - routes: { login: loginRoute, createFirstUser: createFirstUserRoute }, + routes: { createFirstUser: createFirstUserRoute, login: loginRoute }, }, routes: { admin: adminRoute }, } = getAdminRoutes({ customAdminRoutes, customRoutes }) @@ -97,8 +97,8 @@ export async function ensureAutoLoginAndCompilationIsDone({ */ export async function throttleTest({ context, - page, delay, + page, }: { context: BrowserContext delay: 'Fast 3G' | 'Slow 3G' | 'Slow 4G' @@ -108,9 +108,9 @@ export async function throttleTest({ await cdpSession.send('Network.emulateNetworkConditions', { downloadThroughput: networkConditions[delay].download, - uploadThroughput: networkConditions[delay].upload, latency: networkConditions[delay].latency, offline: false, + uploadThroughput: networkConditions[delay].upload, }) await page.route('**/*', async (route) => { @@ -123,7 +123,7 @@ export async function throttleTest({ } export async function firstRegister(args: FirstRegisterArgs): Promise { - const { page, serverURL, customAdminRoutes, customRoutes } = args + const { customAdminRoutes, customRoutes, page, serverURL } = args const { routes: { admin: adminRoute }, @@ -139,11 +139,11 @@ export async function firstRegister(args: FirstRegisterArgs): Promise { } export async function login(args: LoginArgs): Promise { - const { page, serverURL, data = devUser, customAdminRoutes, customRoutes } = args + const { customAdminRoutes, customRoutes, data = devUser, page, serverURL } = args const { admin: { - routes: { login: loginRoute, createFirstUser: createFirstUserRoute }, + routes: { createFirstUser: createFirstUserRoute, login: loginRoute }, }, routes: { admin: adminRoute }, } = getAdminRoutes({ customAdminRoutes, customRoutes }) @@ -236,7 +236,7 @@ export async function openDocControls(page: Page): Promise { export async function changeLocale(page: Page, newLocale: string) { await page.locator('.localizer >> button').first().click() await page - .locator(`.localizer .popup.popup--active .popup-button-list button`, { + .locator(`.localizer .popup.popup--active .popup-button-list__button`, { hasText: newLocale, }) .first() @@ -349,8 +349,8 @@ export function describeIfInCIOrHasLocalstack(): jest.Describe { type AdminRoutes = Config['admin']['routes'] export function getAdminRoutes({ - customRoutes, customAdminRoutes, + customRoutes, }: { customAdminRoutes?: AdminRoutes customRoutes?: Config['routes']