fix: address Chip's review — secure auth, wire TanStack Query, fix UX issues

Must-fix: - Exclude JWT token from Zustand persist (partialize) to prevent localStorage XSS exfiltration — token now lives in memory only - Wire all pages through TanStack Query hooks (usePurchases, useProduct, useProducts, usePriceHistory, useCoupons, usePriceAlerts) with proper loading skeletons and error states - Add mock interceptor in api.ts (VITE_MOCK_API=true) so mock data flows through the same fetch path — single flag to switch to live API Should-fix: - Wire theme toggle to DOM (dark class on <html>) - Fix AccountLinking form inputs (controlled with value/onChange) - Remove unused err in catch blocks (Login, Register) - Bump remaining min-h-10 touch targets to min-h-12 (48px) Build: 128KB initial JS, Recharts 498KB lazy chunk. 5/5 tests pass. Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-03-18 11:54:06 +00:00
parent 5563b5f145
commit d0185fd93d
14 changed files with 307 additions and 62 deletions
@@ -1,10 +1,24 @@
 import { useParams, Link } from 'react-router-dom'
-import { mockProducts } from '../lib/mock-data.ts'
+import { useProduct } from '../hooks/useApi.ts'
 import { StoreIcon } from '../components/StoreIcon.tsx'

 export function StoreComparison() {
  const { productId } = useParams<{ productId: string }>()
-  const product = mockProducts.find((p) => p.id === productId)
+  const { data: product, isLoading } = useProduct(productId ?? '')
+
+  if (isLoading) {
+    return (
+      <div className="animate-pulse">
+        <div className="h-4 w-20 rounded bg-gray-200" />
+        <div className="mt-4 h-8 w-48 rounded bg-gray-200" />
+        <div className="mt-4 space-y-3">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="h-20 rounded-xl bg-gray-200" />
+          ))}
+        </div>
+      </div>
+    )
+  }

  if (!product) {
    return (