React query, refetch on window focus

Author: pycanis

apps/web/package.json

@@ -13,6 +13,7 @@
 		"@astrojs/react": "^4.2.1",
 		"@repo/shared": "workspace:*",
 		"@tailwindcss/vite": "^4.0.14",
+		"@tanstack/react-query": "^5.71.1",
 		"astro": "^5.5.3",
 		"axios": "^1.8.3",
 		"bech32": "^2.0.0",

apps/web/src/containers/Claim.tsx

@@ -1,38 +1,49 @@
-import { ClaimStatus, type Claims } from "@repo/shared";
+import { ClaimStatus } from "@repo/shared";
+import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
 import { bech32 } from "bech32";
 import { Layers } from "lucide-react";
 import queryString from "query-string";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo } from "react";
 import { getClaimsByIds } from "../api/claims";
 import { PaymentInfo } from "../components/PaymentInfo";
 import { PaymentWait } from "../components/PaymentWait";
 import { getBitcoinFiatValue } from "../utils/getBitcoinFiatValue";
 import { formatCurrency, formatNumber } from "../utils/numbers";
+import { QUERY_KEYS } from "../utils/queryKeys";
 import { subscribeSSE } from "../utils/sse";
 import { useBitcoinExchangeRate } from "../utils/useBitcoinExchangeRate";
 import { SuccessIcon } from "./SuccessIcon";
 import { WaitIcon } from "./WaitIcon";
 
+const queryClient = new QueryClient();
+
 export const Claim = () => {
+	return (
+		<QueryClientProvider client={queryClient}>
+			<ClaimComponent />
+		</QueryClientProvider>
+	);
+};
+
+export const ClaimComponent = () => {
 	const id = queryString.parse(window.location.search).id as string | undefined;
-	const [claim, setClaim] = useState<Claims | null>(null);
 	const { usdExchangeRate, fetchExchangeRate } = useBitcoinExchangeRate();
 
+	const { data: claims = [], refetch } = useQuery({
+		queryKey: [QUERY_KEYS.GET_CLAIMS, [id]],
+		queryFn: () => getClaimsByIds([id as string]),
+		enabled: !!id,
+		refetchOnWindowFocus: true,
+	});
+
+	const claim = useMemo(() => claims[0], [claims]);
+
 	const withdrawLink = `https://stackorange.com/api/payments/withdraw/${id}`;
+
 	const withdrawLinkLnurl = bech32
 		.encode("lnurl", bech32.toWords(Buffer.from(withdrawLink, "utf8")), 1023)
 		.toUpperCase();
 
-	useEffect(() => {
-		if (!id) {
-			return;
-		}
-
-		getClaimsByIds([id]).then((claims) => {
-			setClaim(claims[0]);
-		});
-	}, [id]);
-
 	useEffect(() => {
 		if (!claim || claim.status !== ClaimStatus.PAID) {
 			return;
@@ -44,15 +55,15 @@ export const Claim = () => {
 			`${import.meta.env.PUBLIC_API_URL || ""}/api/payments/${claim.id}`,
 			({ paymentId }) => {
 				if (paymentId === claim.id) {
-					setClaim((prev) => (prev ? { ...prev, status: ClaimStatus.CLAIMED } : null));
+					refetch();
 				}
 			},
 		);
 
 		return () => {
 			eventSource.close();
 		};
-	}, [claim, fetchExchangeRate]);
+	}, [claim, fetchExchangeRate, refetch]);
 
 	if (!claim) {
 		return null;

apps/web/src/containers/CreateClaim.tsx

@@ -1,49 +1,59 @@
-import { ClaimStatus, type Claims, LAST_UNPAID_CLAIM_ID_KEY } from "@repo/shared";
+import { ClaimStatus, LAST_ACTIVE_CLAIM_ID_KEY } from "@repo/shared";
+import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
 import { motion } from "motion/react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import useLocalStorageState from "use-local-storage-state";
 import { getClaimsByIds } from "../api/claims";
 import { Steps } from "../components/Steps";
+import { QUERY_KEYS } from "../utils/queryKeys";
 import { Form } from "./CreateClaimForm/Form";
 import { Payment } from "./Payment";
 import { PaymentSuccess } from "./PaymentSuccess";
 
+const queryClient = new QueryClient();
+
 export const CreateClaim = () => {
-	const [unpaidClaimId, setUnpaidClaimId] = useLocalStorageState<string>(LAST_UNPAID_CLAIM_ID_KEY);
-	const [claim, setClaim] = useState<Claims | null>(null);
+	return (
+		<QueryClientProvider client={queryClient}>
+			<CreateClaimComponent />
+		</QueryClientProvider>
+	);
+};
+
+export const CreateClaimComponent = () => {
+	const [activeClaimId, setActiveClaimId] = useLocalStorageState<string>(LAST_ACTIVE_CLAIM_ID_KEY);
+
+	const { data: claims = [] } = useQuery({
+		queryKey: [QUERY_KEYS.GET_CLAIMS, [activeClaimId]],
+		queryFn: () => getClaimsByIds([activeClaimId as string]),
+		enabled: !!activeClaimId,
+		refetchOnWindowFocus: true,
+	});
+
 	const [step, setStep] = useState(1);
 
+	const claim = useMemo(() => claims[0], [claims]);
+
 	useEffect(() => {
-		if (!unpaidClaimId) {
+		if (!claim) {
 			return;
 		}
 
-		getClaimsByIds([unpaidClaimId]).then((claims) => {
-			const claim = claims[0];
-
-			if (!claim) {
-				return;
-			}
+		if (claim.status !== ClaimStatus.AWAITING_PAYMENT) {
+			setStep(4);
 
-			if (claim.status !== ClaimStatus.AWAITING_PAYMENT) {
-				setClaim(claim);
-				setStep(4);
-
-				return;
-			}
+			return;
+		}
 
-			setClaim(claim);
-			setStep(3);
-		});
-	}, [unpaidClaimId]);
+		setStep(3);
+	}, [claim]);
 
 	const handlePaymentSuccess = () => {
-		setUnpaidClaimId("");
 		setStep(4);
 	};
 
 	const handlePaymentCancel = () => {
-		setUnpaidClaimId("");
+		setActiveClaimId("");
 		setStep(1);
 	};
 

apps/web/src/containers/CreateClaimForm/Form.tsx

@@ -1,4 +1,4 @@
-import { ClaimChannel, HISTORY_CLAIM_IDS_KEY, LAST_UNPAID_CLAIM_ID_KEY } from "@repo/shared";
+import { ClaimChannel, HISTORY_CLAIM_IDS_KEY, LAST_ACTIVE_CLAIM_ID_KEY } from "@repo/shared";
 import { motion } from "motion/react";
 import type { Dispatch, SetStateAction } from "react";
 import { FormProvider, type SubmitHandler, useForm } from "react-hook-form";
@@ -23,7 +23,7 @@ type Props = {
 
 export const Form = ({ currentStep, setStep }: Props) => {
 	const [__, setPastClaimIds] = useLocalStorageState<string[]>(HISTORY_CLAIM_IDS_KEY);
-	const [_, setUnpaidClaimId] = useLocalStorageState<string>(LAST_UNPAID_CLAIM_ID_KEY);
+	const [_, setActiveClaimId] = useLocalStorageState<string>(LAST_ACTIVE_CLAIM_ID_KEY);
 
 	const methods = useForm<FormValues>({
 		defaultValues: { channel: ClaimChannel.EMAIL },
@@ -43,7 +43,7 @@ export const Form = ({ currentStep, setStep }: Props) => {
 		}
 
 		setStep((step) => step + 1);
-		setUnpaidClaimId(claim.id);
+		setActiveClaimId(claim.id);
 		setPastClaimIds((pastClaimIds) => [...(pastClaimIds || []), claim.id]);
 	};
 

apps/web/src/utils/queryKeys.ts

@@ -0,0 +1,3 @@
+export const QUERY_KEYS = {
+	GET_CLAIMS: "GET_CLAIMS",
+};

packages/shared/src/constants.ts

@@ -1,3 +1,3 @@
-export const LAST_UNPAID_CLAIM_ID_KEY = "LAST_UNPAID_CLAIM_ID_KEY";
+export const LAST_ACTIVE_CLAIM_ID_KEY = "LAST_ACTIVE_CLAIM_ID_KEY";
 export const HISTORY_CLAIM_IDS_KEY = "HISTORY_CLAIM_IDS_KEY";
 export const ROUTING_FEE_PERCENT = 0.1;