fixing hydration issue

2026-01-08 06:02:12 -05:00
parent 1b348c3ee7
commit 72d8f559c9
4 changed files with 276 additions and 242 deletions
@@ -395,82 +395,88 @@ const canonicalPlatform = normalizePlatformKey(platform);
  // -----------------------------
  const lastHydrateKeyRef = useRef<string>("");

-  useEffect(() => {
-    const controller = new AbortController();
+useEffect(() => {
+  const controller = new AbortController();

-    async function hydrateSelected() {
-      const ids = (Object.values(build).filter(Boolean) as string[])
-        .map(String)
-        .sort();
+  async function hydrateSelected() {
+    const ids = (Object.values(build).filter(Boolean) as string[])
+      .map(String)
+      .sort();

-      const key = ids.join(",");
-      if (key === lastHydrateKeyRef.current) return;
-      lastHydrateKeyRef.current = key;
+    const key = ids.join(",");

-      if (ids.length === 0) {
-        setParts([]);
-        setError(null);
-        setLoading(false);
-        return;
-      }
-
-      setLoading(true);
+    // If nothing selected, reset
+    if (ids.length === 0) {
+      lastHydrateKeyRef.current = "";
+      setParts([]);
      setError(null);
-
-      try {
-        const res = await fetch(
-          `${API_BASE_URL}/api/v1/catalog/products/by-ids`,
-          {
-            method: "POST",
-            signal: controller.signal,
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ ids }),
-          }
-        );
-
-        if (!res.ok) throw new Error(`Failed to hydrate parts (${res.status})`);
-
-        const data: GunbuilderProductFromApi[] = await res.json();
-
-        // Map products by id for quick lookup
-        const byId = new Map<string, GunbuilderProductFromApi>();
-        for (const p of data) byId.set(String(p.id), p);
-
-        // Build the hydrated parts by iterating the BUILD STATE (slot -> id)
-        const hydrated: Part[] = Object.entries(build)
-          .filter(([, id]) => Boolean(id))
-          .map(([slot, id]) => {
-            const p = byId.get(String(id));
-            if (!p) return null;
-
-            const buyUrl = p.buyUrl ?? undefined;
-
-            return {
-              id: String(p.id),
-              categoryId: slot as any, // slot is the source of truth
-              name: p.name,
-              brand: p.brand,
-              price: p.price ?? 0,
-              imageUrl: p.imageUrl ?? undefined,
-              affiliateUrl: buyUrl,
-              url: buyUrl,
-              notes: undefined,
-            } as Part;
-          })
-          .filter((x): x is Part => x !== null);
-
-        setParts(hydrated);
-      } catch (err: any) {
-        if (err?.name === "AbortError") return;
-        setError(err?.message ?? "Failed to hydrate selected parts");
-      } finally {
-        setLoading(false);
-      }
+      setLoading(false);
+      return;
    }

-    hydrateSelected();
-    return () => controller.abort();
-  }, [build]);
+    // Only skip if we *successfully* hydrated this key previously
+    if (key === lastHydrateKeyRef.current) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await fetch(
+        `${API_BASE_URL}/api/v1/catalog/products/by-ids`,
+        {
+          method: "POST",
+          signal: controller.signal,
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ ids }),
+        }
+      );
+
+      if (!res.ok) throw new Error(`Failed to hydrate parts (${res.status})`);
+
+      const data: GunbuilderProductFromApi[] = await res.json();
+
+      const byId = new Map<string, GunbuilderProductFromApi>();
+      for (const p of data) byId.set(String(p.id), p);
+
+      const hydrated: Part[] = Object.entries(build)
+        .filter(([, id]) => Boolean(id))
+        .map(([slot, id]) => {
+          const p = byId.get(String(id));
+          if (!p) return null;
+
+          const buyUrl = p.buyUrl ?? undefined;
+
+          return {
+            id: String(p.id),
+            categoryId: slot as any,
+            name: p.name,
+            brand: p.brand,
+            price: p.price ?? 0,
+            imageUrl: p.imageUrl ?? undefined,
+            affiliateUrl: buyUrl,
+            url: buyUrl,
+          } as Part;
+        })
+        .filter((x): x is Part => x !== null);
+
+      setParts(hydrated);
+
+      // ✅ Mark key as hydrated ONLY after success
+      lastHydrateKeyRef.current = key;
+    } catch (err: any) {
+      if (err?.name === "AbortError") {
+        // ✅ Do NOT lock the key on abort; allow retry
+        return;
+      }
+      setError(err?.message ?? "Failed to hydrate selected parts");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  hydrateSelected();
+  return () => controller.abort();
+}, [build]);

  // -----------------------------
  // Persist build to localStorage