feat(web): better-refetching

Author: tractorss

web/src/components/ActionButton/Modal/ChallengeItemModal.tsx

@@ -138,15 +138,16 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
                   value: depositRequired,
                 });
 
-                wrapWithToast(async () => await walletClient.writeContract(request), publicClient).then((res) => {
-                  console.log({ res });
-                  refetch();
-                  toggleModal();
-                });
+                wrapWithToast(async () => await walletClient.writeContract(request), publicClient)
+                  .then((res) => {
+                    console.log({ res });
+                    refetch();
+                    toggleModal();
+                  })
+                  .finally(() => setIsChallengingItem(false));
               }
             })
-            .catch((err) => console.log(err))
-            .finally(() => setIsChallengingItem(false));
+            .catch((err) => console.log(err));
         }}
       />
     </ReStyledModal>

web/src/components/ActionButton/Modal/RemoveModal.tsx

@@ -114,15 +114,16 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
                   value: depositRequired,
                 });
 
-                wrapWithToast(async () => await walletClient.writeContract(request), publicClient).then((res) => {
-                  console.log({ res });
-                  refetch();
-                  toggleModal();
-                });
+                wrapWithToast(async () => await walletClient.writeContract(request), publicClient)
+                  .then((res) => {
+                    console.log({ res });
+                    refetch();
+                    toggleModal();
+                  })
+                  .finally(() => setIsRemovingItem(false));
               }
             })
-            .catch((err) => console.log(err))
-            .finally(() => setIsRemovingItem(false));
+            .catch((err) => console.log(err));
         }}
       />
     </ReStyledModal>

web/src/components/ActionButton/index.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@kleros/ui-components-library";
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { Address } from "viem";
 import { COURT_SITE } from "consts/index";
 import { Status } from "consts/status";
@@ -10,6 +10,7 @@ import { useToggle } from "react-use";
 import Modal, { getModalButtonText } from "./Modal";
 import ExecuteButton from "./ExecuteButton";
 import { useCurateV2ChallengePeriodDuration } from "hooks/contracts/generated";
+import { useQueryClient } from "@tanstack/react-query";
 
 const StyledKlerosIcon = styled(KlerosIcon)`
   path {
@@ -22,10 +23,11 @@ interface IActionButton {
   registryAddress: Address;
   itemId: string;
   isItem: boolean;
-  refetch: () => void;
 }
 
-const ActionButton: React.FC<IActionButton> = ({ status, registryAddress, itemId, isItem, refetch }) => {
+const ActionButton: React.FC<IActionButton> = ({ status, registryAddress, itemId, isItem }) => {
+  const queryClient = useQueryClient();
+
   const [isModalOpen, toggleModal] = useToggle(false);
 
   const { data: requests, isLoading } = useItemRequests(`${itemId}@${registryAddress}`);
@@ -40,6 +42,11 @@ const ActionButton: React.FC<IActionButton> = ({ status, registryAddress, itemId
     return !latestRequest.resolved && Date.now() / 1000 - latestRequest.submissionTime > challengePeriodDuration;
   }, [latestRequest, challengePeriodDuration]);
 
+  const refetch = useCallback(() => {
+    queryClient.invalidateQueries(["refetchOnBlock", `itemDetailsQuery${itemId}@${registryAddress}`]);
+    queryClient.invalidateQueries(["refetchOnBlock", `registryDetailsQuery${registryAddress}`]);
+  }, [itemId, registryAddress, queryClient]);
+
   let ButtonComponent: JSX.Element | null = useMemo(() => {
     if (status === Status.Disputed)
       return (

web/src/components/InformationCards/ItemInformationCard/index.tsx

@@ -82,7 +82,6 @@ interface IItemInformationCard extends ItemDetails {
   className?: string;
   policyURI: string;
   registryAddress: Address;
-  refetch: () => void;
 }
 
 const ItemInformationCard: React.FC<IItemInformationCard> = ({
@@ -95,7 +94,6 @@ const ItemInformationCard: React.FC<IItemInformationCard> = ({
   props,
   registryAddress,
   latestRequestSubmissionTime,
-  refetch = () => {},
 }) => {
   return (
     <>
@@ -124,7 +122,6 @@ const ItemInformationCard: React.FC<IItemInformationCard> = ({
               itemId: itemID,
               registryAddress,
               isItem: true,
-              refetch,
             }}
           />
         </BottomInfo>

web/src/components/InformationCards/RegistryInformationCard/index.tsx

@@ -48,7 +48,6 @@ interface IInformationCard
   itemId: string;
   parentRegistryAddress: string;
   className?: string;
-  refetch: () => void;
 }
 
 const RegistryInformationCard: React.FC<IInformationCard> = ({
@@ -64,7 +63,6 @@ const RegistryInformationCard: React.FC<IInformationCard> = ({
   itemId,
   parentRegistryAddress,
   latestRequestSubmissionTime,
-  refetch = () => {},
 }) => (
   <StyledCard {...{ className }}>
     <TopInfo
@@ -90,7 +88,6 @@ const RegistryInformationCard: React.FC<IInformationCard> = ({
           registryAddress: parentRegistryAddress as `0x${string}`,
           itemId,
           isItem: false,
-          refetch,
         }}
       />
     </BottomInfo>

web/src/pages/AllLists/ItemDisplay/index.tsx

@@ -8,19 +8,14 @@ import ItemInformationCard from "components/InformationCards/ItemInformationCard
 const ItemDisplay: React.FC = () => {
   const { itemId } = useParams();
   const [, listAddress] = itemId?.split("@");
-  const { data: itemDetails, refetch: refetchItemDetails } = useItemDetailsQuery(itemId);
-  const { data: registryDetails, refetch: refetchRegistryDetails } = useRegistryDetailsQuery(listAddress);
+  const { data: itemDetails } = useItemDetailsQuery(itemId);
+  const { data: registryDetails } = useRegistryDetailsQuery(listAddress);
 
-  const refetch = () => {
-    refetchItemDetails();
-    refetchRegistryDetails();
-  };
   return (
     <div>
       <ItemInformationCard
         {...itemDetails?.item}
         policyURI={registryDetails?.registry.policyURI ?? ""}
-        refetch={refetch}
         registryAddress={listAddress}
       />
 

web/src/pages/AllLists/RegistryDetails/index.tsx

@@ -15,15 +15,8 @@ const RegistryDetails: React.FC = () => {
   const [listAddress, itemId] = id?.split("-");
   const [, registryAddress] = itemId.split("@");
 
-  const { data: itemDetails, refetch: refetchItemDetails } = useItemDetailsQuery(itemId?.toLowerCase());
-  const { data: registryDetails, refetch: refetchRegistryDetails } = useRegistryDetailsQuery(
-    listAddress?.toLowerCase()
-  );
-
-  const refetch = () => {
-    refetchItemDetails();
-    refetchRegistryDetails();
-  };
+  const { data: itemDetails } = useItemDetailsQuery(itemId?.toLowerCase());
+  const { data: registryDetails } = useRegistryDetailsQuery(listAddress?.toLowerCase());
 
   const {
     title,
@@ -59,7 +52,6 @@ const RegistryDetails: React.FC = () => {
           status,
           disputed,
           itemId: registryAsitemId,
-          refetch,
           registerer,
           latestRequestSubmissionTime,
         }}

web/src/pages/SubmitList/ListParameters/ListPreview/ListPageDisplay.tsx

@@ -32,7 +32,6 @@ const ListPageDisplay: React.FC = () => {
         parentRegistryAddress=""
         registerer={{ id: "" }}
         itemId=""
-        refetch={() => {}}
         title={previewData.title}
         description={previewData.description}
         status={Status.Registered}