rl-core-front 0.18.7 → 0.18.9

package/src/hooks/use-tab-state.ts

@@ -1,8 +1,16 @@
 "use client";
 
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useSyncExternalStore,
+} from "react";
 
 import { safeStorage } from "#core/_utils/storage";
+import { useIsHydrated } from "#core/hooks/use-is-hydrated";
+import { useStoredValue } from "#core/hooks/use-stored-value";
 
 const STORAGE_PREFIX = "tab:";
 const DEFAULT_PARAM = "tab";
@@ -28,11 +36,30 @@ export interface UseTabStateResult<T extends string> {
 const readFromUrl = (param: string): string | null =>
   new URLSearchParams(window.location.search).get(param);
 
+/** Quem lê a querystring, para saber que ela mudou por aqui. */
+const urlListeners = new Set<() => void>();
+
+const subscribeUrl = (onChange: () => void): (() => void) => {
+  urlListeners.add(onChange);
+  // O "voltar" do navegador também troca a aba, e esse não passa por aqui.
+  window.addEventListener("popstate", onChange);
+  return () => {
+    urlListeners.delete(onChange);
+    window.removeEventListener("popstate", onChange);
+  };
+};
+
 /** Troca só o próprio parâmetro, preservando o resto — o `?filter=` da listagem mora ao lado. */
 const writeToUrl = (param: string, value: string): void => {
   const params = new URLSearchParams(window.location.search);
   params.set(param, value);
   window.history.replaceState(null, "", `${window.location.pathname}?${params.toString()}`);
+
+  // `replaceState` não dispara evento nenhum: sem este aviso, a tela ficaria
+  // na aba antiga até o próximo render por outro motivo.
+  for (const listener of urlListeners) {
+    listener();
+  }
 };
 
 /**
@@ -61,10 +88,25 @@ export function useTabState<T extends string>(
   defaultTab: T = tabs[0],
   { param = DEFAULT_PARAM }: UseTabStateOptions = {},
 ): UseTabStateResult<T> {
-  const [tab, setStoredTab] = useState<T>(defaultTab);
+  // As duas memórias são de fora do React — a querystring e o armazenamento —,
+  // e por isso são lidas no próprio render, e não copiadas para um estado
+  // dentro de um efeito: no primeiro render do Next não há `window`, e a
+  // leitura do cliente entra assim que ele hidrata, sem um quadro na aba
+  // errada.
+  const urlTab = useSyncExternalStore(
+    subscribeUrl,
+    () => readFromUrl(param),
+    () => null,
+  );
+  const storedTab = useStoredValue(`${STORAGE_PREFIX}${storageKey}`);
+
+  const isTab = (value: string | null): value is T =>
+    value !== null && (tabs as readonly string[]).includes(value);
+
+  const tab: T = isTab(urlTab) ? urlTab : isTab(storedTab) ? storedTab : defaultTab;
 
   // Por `ref` porque a lista costuma nascer dentro do render (filtrada por
-  // permissão, por exemplo): como dependência, ela refaria a hidratação a cada
+  // permissão, por exemplo): como dependência, ela refaria o `setTab` a cada
   // render.
   const known = useRef(tabs);
 
@@ -72,43 +114,35 @@ export function useTabState<T extends string>(
     known.current = tabs;
   });
 
-  const isTab = useCallback((value: string | null): value is T => {
-    return value !== null && (known.current as readonly string[]).includes(value);
-  }, []);
+  const hydrated = useIsHydrated();
 
-  // Hidrata uma vez, no cliente: no primeiro render do Next não há `window`,
-  // e ler ali faria o servidor e o navegador desenharem abas diferentes.
+  // A URL passa a dizer onde a tela está, venha a aba de onde vier — sem isso,
+  // copiar o link depois de cair na aba do storage levaria à padrão. Lista
+  // vazia (nenhuma aba permitida) não tem o que dizer.
   //
-  // `useLayoutEffect`, e não `useEffect`: o passivo roda depois da pintura, e
-  // o F5 mostrava a aba padrão por um quadro antes de pular para a certa.
-  // O de layout corre antes de o navegador desenhar — a primeira imagem já é
-  // a aba salva. No servidor o React o ignora, que é o que se quer.
-  useLayoutEffect(() => {
-    const fromUrl = readFromUrl(param);
-    const fromStorage = safeStorage.get(`${STORAGE_PREFIX}${storageKey}`);
-    const resolved = isTab(fromUrl) ? fromUrl : isTab(fromStorage) ? fromStorage : defaultTab;
-
-    setStoredTab(resolved);
-
-    // A URL passa a dizer onde a tela está, venha a aba de onde vier — sem
-    // isso, copiar o link depois de cair na aba do storage levaria à padrão.
-    // Lista vazia (nenhuma aba permitida) não tem o que dizer.
-    if (resolved !== undefined && fromUrl !== resolved) {
-      writeToUrl(param, resolved);
+  // Só depois de hidratar: antes disso o armazenamento ainda não foi lido, e
+  // escrever aqui gravaria a aba padrão na URL — que manda sobre o storage e
+  // apagaria justamente a aba que se quer restaurar.
+  useEffect(() => {
+    if (!hydrated) {
+      return;
+    }
+    if (tab !== undefined && readFromUrl(param) !== tab) {
+      writeToUrl(param, tab);
     }
-  }, [storageKey, defaultTab, isTab, param]);
+  }, [hydrated, tab, param]);
 
   const setTab = useCallback(
     (next: string): void => {
-      if (!isTab(next)) {
+      if (!(known.current as readonly string[]).includes(next)) {
         return;
       }
 
-      setStoredTab(next);
+      // Escrever nos dois já avisa quem lê: a aba vem da URL e do storage.
       writeToUrl(param, next);
       safeStorage.set(`${STORAGE_PREFIX}${storageKey}`, next);
     },
-    [storageKey, isTab, param],
+    [storageKey, param],
   );
 
   return { tab, setTab };

package/src/hooks/use-table-view.ts

@@ -1,8 +1,9 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 
 import { safeStorage } from "#core/_utils/storage";
+import { useStoredValue } from "#core/hooks/use-stored-value";
 
 const STORAGE_PREFIX = "view:";
 
@@ -14,6 +15,9 @@ export interface UseTableViewResult {
   setView: (next: TableView) => void;
 }
 
+const isTableView = (value: string | null): value is TableView =>
+  value === "list" || value === "grid";
+
 /**
  * Guarda em qual formato a pessoa deixou a listagem, por `storageKey`.
  *
@@ -26,28 +30,22 @@ export function useTableView(
   storageKey?: string,
   defaultView: TableView = "list",
 ): UseTableViewResult {
-  const [view, setStoredView] = useState<TableView>(defaultView);
-
-  useEffect(() => {
-    if (!storageKey) {
-      return;
-    }
-    const raw = safeStorage.get(`${STORAGE_PREFIX}${storageKey}`);
+  const key = storageKey ? `${STORAGE_PREFIX}${storageKey}` : undefined;
+  const stored = useStoredValue(key);
+  const [sessionView, setSessionView] = useState<TableView>(defaultView);
 
-    if (raw === "list" || raw === "grid") {
-      setStoredView(raw);
-    }
-  }, [storageKey]);
+  const view = key ? (isTableView(stored) ? stored : defaultView) : sessionView;
 
   const setView = useCallback(
     (next: TableView) => {
-      setStoredView(next);
-
-      if (storageKey) {
-        safeStorage.set(`${STORAGE_PREFIX}${storageKey}`, next);
+      if (!key) {
+        setSessionView(next);
+        return;
       }
+      // Escrever já avisa quem lê a chave — o estado vem do armazenamento.
+      safeStorage.set(key, next);
     },
-    [storageKey],
+    [key],
   );
 
   return { view, setView };