fix: fetch results cached st not getting latest data

src/contexts/Maci.tsx

@@ -22,7 +22,7 @@ import { getSemaphoreProof } from "~/utils/semaphore";
 
 import type { IVoteArgs, MaciContextType, MaciProviderProps } from "./types";
 import type { Signer } from "ethers";
-import type { Attestation } from "~/utils/fetchAttestations";
+import type { Attestation } from "~/utils/types";
 
 export const MaciContext = createContext<MaciContextType | undefined>(undefined);
 

src/features/applications/components/ApplicationsToApprove.tsx

@@ -1,6 +1,6 @@
 import { ClockIcon } from "lucide-react";
 import Link from "next/link";
-import { useMemo } from "react";
+import { useMemo, useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";
 import { FiAlertCircle } from "react-icons/fi";
 import { z } from "zod";
@@ -17,9 +17,11 @@ import { ProjectAvatar } from "~/features/projects/components/ProjectAvatar";
 import { useIsAdmin } from "~/hooks/useIsAdmin";
 import { useIsCorrectNetwork } from "~/hooks/useIsCorrectNetwork";
 import { useMetadata } from "~/hooks/useMetadata";
-import { type Attestation } from "~/utils/fetchAttestations";
+import { fetchApprovedApplications } from "~/utils/fetchAttestationsWithoutCache";
 import { formatDate } from "~/utils/time";
 
+import type { Attestation } from "~/utils/types";
+
 import { useApproveApplication } from "../hooks/useApproveApplication";
 import { useApprovedApplications } from "../hooks/useApprovedApplications";
 
@@ -130,7 +132,9 @@ export const ApplicationItem = ({
         </div>
 
         <div className="flex-[2]">
-          {isApproved ? <Badge variant="success">Approved</Badge> : <Badge variant="pending">Pending</Badge>}
+          {isApproved && <Badge variant="success">Approved</Badge>}
+
+          {!isApproved && <Badge variant="pending">Pending</Badge>}
         </div>
       </div>
     </Link>
@@ -146,18 +150,35 @@ type TApplicationsToApprove = z.infer<typeof ApplicationsToApproveSchema>;
 export const ApplicationsToApprove = (): JSX.Element => {
   const applications = useApplications();
   const approved = useApprovedApplications();
-  const approve = useApproveApplication({});
+  const approve = useApproveApplication();
+  const [refetchedData, setRefetchedData] = useState<Attestation[]>();
 
   const approvedById = useMemo(
     () =>
-      approved.data?.reduce((map, x) => {
+      [...(approved.data ?? []), ...(refetchedData ?? [])].reduce((map, x) => {
         map.set(x.refUID, true);
         return map;
       }, new Map<string, boolean>()),
-    [approved.data],
+    [approved.data, refetchedData],
   );
 
-  const applicationsToApprove = applications.data?.filter((application) => !approvedById?.get(application.id));
+  const applicationsToApprove = applications.data?.filter((application) => !approvedById.get(application.id));
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const ret = await fetchApprovedApplications();
+      setRefetchedData(ret);
+    };
+
+    /// delay refetch data for 5 seconds
+    const timeout = setTimeout(() => {
+      fetchData();
+    }, 5000);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [approve.isPending, approve.isSuccess]);
 
   return (
     <div className="flex w-full justify-center dark:text-white">
@@ -207,7 +228,7 @@ export const ApplicationsToApprove = (): JSX.Element => {
             <ApplicationItem
               key={item.id}
               {...item}
-              isApproved={approvedById?.get(item.id)}
+              isApproved={approvedById.get(item.id)}
               isLoading={applications.isLoading}
             />
           ))}

src/features/applications/components/ReviewBar.tsx

@@ -1,22 +1,55 @@
-import { useMemo } from "react";
+import { useMemo, useCallback, useState, useEffect } from "react";
 import { FiAlertCircle } from "react-icons/fi";
 
 import { StatusBar } from "~/components/StatusBar";
+import { Button } from "~/components/ui/Button";
+import { Spinner } from "~/components/ui/Spinner";
 import { useIsAdmin } from "~/hooks/useIsAdmin";
+import { useIsCorrectNetwork } from "~/hooks/useIsCorrectNetwork";
+import { fetchApprovedApplications } from "~/utils/fetchAttestationsWithoutCache";
 
-import { useApprovedApplications } from "../hooks/useApprovedApplications";
+import type { Attestation } from "~/utils/types";
 
-import { AdminButtonsBar } from "./AdminButtonsBar";
+import { useApproveApplication } from "../hooks/useApproveApplication";
+import { useApprovedApplications } from "../hooks/useApprovedApplications";
 
 interface IReviewBarProps {
   projectId: string;
 }
 
 export const ReviewBar = ({ projectId }: IReviewBarProps): JSX.Element => {
   const isAdmin = useIsAdmin();
+  const { isCorrectNetwork, correctNetwork } = useIsCorrectNetwork();
+
   const rawReturn = useApprovedApplications([projectId]);
+  const [refetchedData, setRefetchedData] = useState<Attestation[]>();
+
+  const approved = useMemo(
+    () => (rawReturn.data && rawReturn.data.length > 0) || (refetchedData && refetchedData.length > 0),
+    [rawReturn.data, refetchedData],
+  );
+
+  const approve = useApproveApplication();
 
-  const approved = useMemo(() => rawReturn.data && rawReturn.data.length > 0, [rawReturn]);
+  const onClick = useCallback(() => {
+    approve.mutate([projectId]);
+  }, [approve, projectId]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const ret = await fetchApprovedApplications([projectId]);
+      setRefetchedData(ret);
+    };
+
+    /// delay refetch data for 5 seconds
+    const timeout = setTimeout(() => {
+      fetchData();
+    }, 5000);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [approve.isPending, approve.isSuccess, projectId]);
 
   return (
     <div className="mb-4 w-full">
@@ -39,7 +72,15 @@ export const ReviewBar = ({ projectId }: IReviewBarProps): JSX.Element => {
         />
       )}
 
-      {isAdmin && !approved && <AdminButtonsBar projectId={projectId} />}
+      {isAdmin && !approved && (
+        <div className="my-3 flex justify-end gap-2">
+          <Button suppressHydrationWarning disabled={!isCorrectNetwork} size="auto" variant="primary" onClick={onClick}>
+            {approve.isPending && <Spinner className="mr-2 h-4 w-4" />}
+
+            {!approve.isPending && !isCorrectNetwork ? `Connect to ${correctNetwork.name}` : "Approve application"}
+          </Button>
+        </div>
+      )}
     </div>
   );
 };

src/features/applications/hooks/useApplicationByTxHash.ts

@@ -1,7 +1,7 @@
 import { api } from "~/utils/api";
 
 import type { UseTRPCQueryResult } from "@trpc/react-query/shared";
-import type { Attestation } from "~/utils/fetchAttestations";
+import type { Attestation } from "~/utils/types";
 
 export function useApplicationByTxHash(transactionId: string): UseTRPCQueryResult<Attestation, unknown> {
   return api.projects.getByTransactionId.useQuery({ transactionId });

src/features/applications/hooks/useApplications.ts

@@ -1,7 +1,7 @@
 import { api } from "~/utils/api";
 
 import type { UseTRPCQueryResult } from "@trpc/react-query/shared";
-import type { Attestation } from "~/utils/fetchAttestations";
+import type { Attestation } from "~/utils/types";
 
 export function useApplications(): UseTRPCQueryResult<Attestation[], unknown> {
   return api.applications.list.useQuery({});

src/features/applications/hooks/useApprovedApplications.ts

@@ -1,7 +1,7 @@
 import { api } from "~/utils/api";
 
 import type { UseTRPCQueryResult } from "@trpc/react-query/shared";
-import type { Attestation } from "~/utils/fetchAttestations";
+import type { Attestation } from "~/utils/types";
 
 export function useApprovedApplications(ids?: string[]): UseTRPCQueryResult<Attestation[], unknown> {
   return api.applications.approvals.useQuery({ ids });

src/features/projects/components/ProjectDetails.tsx

@@ -5,7 +5,10 @@ import { Navigation } from "~/components/ui/Navigation";
 import { ProjectAvatar } from "~/features/projects/components/ProjectAvatar";
 import { ProjectBanner } from "~/features/projects/components/ProjectBanner";
 import { VotingWidget } from "~/features/projects/components/VotingWidget";
-import { type Attestation } from "~/utils/fetchAttestations";
+import { useAppState } from "~/utils/state";
+import { EAppState } from "~/utils/types";
+
+import type { Attestation } from "~/utils/types";
 
 import { useProjectMetadata } from "../hooks/useProjects";
 
@@ -30,6 +33,8 @@ const ProjectDetails = ({
   const { bio, websiteUrl, payoutAddress, github, twitter, fundingSources, profileImageUrl, bannerImageUrl } =
     metadata.data ?? {};
 
+  const appState = useAppState();
+
   return (
     <div className={clsx("relative dark:text-white", disabled && "opacity-30")}>
       <div className="mb-7">
@@ -47,7 +52,7 @@ const ProjectDetails = ({
       <div className="flex items-center justify-between">
         <h3>{attestation?.name}</h3>
 
-        <VotingWidget projectId={projectId} />
+        {appState === EAppState.VOTING && <VotingWidget projectId={projectId} />}
       </div>
 
       <ProjectContacts author={payoutAddress} github={github} twitter={twitter} website={websiteUrl} />

src/features/projects/components/ProjectItem.tsx

@@ -4,11 +4,12 @@ import { Button } from "~/components/ui/Button";
 import { Heading } from "~/components/ui/Heading";
 import { Skeleton } from "~/components/ui/Skeleton";
 import { config } from "~/config";
-import { type Attestation } from "~/utils/fetchAttestations";
 import { formatNumber } from "~/utils/formatNumber";
 import { useAppState } from "~/utils/state";
 import { EAppState } from "~/utils/types";
 
+import type { Attestation } from "~/utils/types";
+
 import { useProjectMetadata } from "../hooks/useProjects";
 import { EProjectState } from "../types";
 

src/features/projects/hooks/useProjects.ts

@@ -8,7 +8,7 @@ import { api } from "~/utils/api";
 
 import type { UseTRPCInfiniteQueryResult, UseTRPCQueryResult } from "@trpc/react-query/shared";
 import type { Ballot } from "~/features/ballot/types";
-import type { Attestation } from "~/utils/fetchAttestations";
+import type { Attestation } from "~/utils/types";
 
 interface IUseSearchProjectsProps {
   filterOverride?: Partial<Filter>;

src/hooks/useProfile.ts

@@ -3,7 +3,7 @@ import { type Address } from "viem";
 import { api } from "~/utils/api";
 
 import type { UseTRPCQueryResult } from "@trpc/react-query/shared";
-import type { Attestation } from "~/utils/fetchAttestations";
+import type { Attestation } from "~/utils/types";
 
 import { useMetadata } from "./useMetadata";
 

src/hooks/useResults.ts

@@ -5,7 +5,7 @@ import { EAppState } from "~/utils/types";
 
 import type { UseTRPCInfiniteQueryResult, UseTRPCQueryResult } from "@trpc/react-query/shared";
 import type { IGetPollData } from "maci-cli/sdk";
-import type { Attestation } from "~/utils/fetchAttestations";
+import type { Attestation } from "~/utils/types";
 
 export function useResults(
   pollData?: IGetPollData,

src/server/api/routers/applications.ts

@@ -2,7 +2,8 @@ import { z } from "zod";
 
 import { config, eas } from "~/config";
 import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
-import { createDataFilter, fetchAttestations } from "~/utils/fetchAttestations";
+import { fetchAttestations } from "~/utils/fetchAttestations";
+import { createDataFilter } from "~/utils/fetchAttestationsUtils";
 
 export const FilterSchema = z.object({
   limit: z.number().default(3 * 8),

src/server/api/routers/profile.ts

@@ -3,7 +3,8 @@ import { z } from "zod";
 
 import { eas } from "~/config";
 import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
-import { fetchAttestations, createDataFilter } from "~/utils/fetchAttestations";
+import { fetchAttestations } from "~/utils/fetchAttestations";
+import { createDataFilter } from "~/utils/fetchAttestationsUtils";
 
 export const profileRouter = createTRPCRouter({
   get: publicProcedure.input(z.object({ id: z.string() })).query(async ({ input }) =>

src/server/api/routers/projects.ts

@@ -4,9 +4,12 @@ import { z } from "zod";
 import { config, eas } from "~/config";
 import { type Filter, FilterSchema, OrderBy, SortOrder } from "~/features/filter/types";
 import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
-import { fetchAttestations, createDataFilter, createSearchFilter, type Attestation } from "~/utils/fetchAttestations";
+import { fetchAttestations } from "~/utils/fetchAttestations";
+import { createDataFilter, createSearchFilter } from "~/utils/fetchAttestationsUtils";
 import { fetchMetadata } from "~/utils/fetchMetadata";
 
+import type { Attestation } from "~/utils/types";
+
 export const projectsRouter = createTRPCRouter({
   count: publicProcedure.query(async () =>
     fetchAttestations([eas.schemas.approval], {

src/server/api/routers/voters.ts

@@ -2,12 +2,8 @@ import { z } from "zod";
 
 import { config, eas } from "~/config";
 import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
-import {
-  fetchAttestations,
-  createDataFilter,
-  fetchApprovedVoter,
-  fetchApprovedVoterAttestations,
-} from "~/utils/fetchAttestations";
+import { fetchAttestations, fetchApprovedVoter, fetchApprovedVoterAttestations } from "~/utils/fetchAttestations";
+import { createDataFilter } from "~/utils/fetchAttestationsUtils";
 
 export const FilterSchema = z.object({
   limit: z.number().default(3 * 8),