refactor(web): update-spam-api-call

Author: tractorss

web/src/hooks/useSpamEvidence.ts

@@ -1,21 +1,19 @@
 import { useQuery } from "@tanstack/react-query";
-import { request } from "graphql-request";
+import { gql, request } from "graphql-request";
 
 import { isKlerosNeo, isKlerosUniversity, isTestnetDeployment } from "src/consts";
-import { graphql } from "src/graphql";
 import { isUndefined } from "src/utils";
 
-const spamEvidenceQuery = graphql(`
-  query SpamEvidences($deployment: CourtV2Deployment!) {
-    courtv2EvidenceSpamsByDeployment(deployment: $deployment) {
-      disputeEvidenceIndex
-      dispute
+const spamEvidenceQuery = gql`
+  query SpamEvidences($deployment: CourtV2Deployment!, $evidenceGroupId: String!) {
+    courtv2EvidenceSpamsByGroupId(deployment: $deployment, evidenceGroupId: $evidenceGroupId) {
+      evidenceIds
     }
   }
-`);
+`;
 
 type SpamEvidences = {
-  courtv2EvidenceSpamsByDeployment: { disputeEvidenceIndex: string; dispute: string }[];
+  courtv2EvidenceSpamsByGroupId: { evidenceIds: string[] };
 };
 
 const getAtlasDeployment = () => {
@@ -31,10 +29,10 @@ const getAtlasDeployment = () => {
 };
 const atlasUri = import.meta.env.REACT_APP_ATLAS_URI;
 
-export const useSpamEvidence = () => {
-  const isEnabled = !isUndefined(atlasUri);
+export const useSpamEvidence = (evidenceGroupId: string) => {
+  const isEnabled = !isUndefined(atlasUri) && !isUndefined(evidenceGroupId);
 
-  const variables = { deployment: getAtlasDeployment() };
+  const variables = { deployment: getAtlasDeployment(), evidenceGroupId };
   return useQuery<SpamEvidences>({
     queryKey: [`evidenceSpamQuery`],
     enabled: isEnabled,

web/src/pages/Cases/CaseDetails/Evidence/index.tsx

@@ -85,7 +85,7 @@ const Evidence: React.FC = () => {
   const [search, setSearch] = useState<string>();
   const [debouncedSearch, setDebouncedSearch] = useState<string>();
   const [showSpam, setShowSpam] = useState(false);
-  const { data: spamEvidences } = useSpamEvidence();
+  const { data: spamEvidences } = useSpamEvidence(disputeData?.dispute?.externalDisputeId?.toString());
 
   const { data } = useEvidences(disputeData?.dispute?.externalDisputeId?.toString(), debouncedSearch);
 
@@ -100,23 +100,11 @@ const Evidence: React.FC = () => {
     latestEvidence.scrollIntoView({ behavior: "smooth" });
   }, [ref]);
 
-  const flattenedSpamEvidences = useMemo(
-    () =>
-      spamEvidences?.courtv2EvidenceSpamsByDeployment.reduce<string[]>((acc, current) => {
-        if (current.dispute === id) {
-          acc.push(current.disputeEvidenceIndex);
-          return acc;
-        }
-        return acc;
-      }, []),
-    [id, spamEvidences]
-  );
-
   const isSpam = useCallback(
     (evidenceId: string) => {
-      return Boolean(flattenedSpamEvidences?.includes(evidenceId));
+      return Boolean(spamEvidences?.courtv2EvidenceSpamsByGroupId.evidenceIds?.includes(evidenceId));
     },
-    [flattenedSpamEvidences]
+    [spamEvidences]
   );
 
   const evidences = useMemo(() => {
@@ -131,38 +119,44 @@ const Evidence: React.FC = () => {
       <EvidenceSearch {...{ search, setSearch, evidenceGroup: disputeData?.dispute?.externalDisputeId }} />
       <ScrollButton small Icon={DownArrow} text="Scroll to latest" onClick={scrollToLatest} />
       {evidences?.realEvidences ? (
-        evidences?.realEvidences.map(
-          ({ evidence, sender, timestamp, transactionHash, name, description, fileURI, evidenceIndex }) => (
-            <EvidenceCard
-              key={timestamp}
-              index={parseInt(evidenceIndex)}
-              sender={sender?.id}
-              {...{ evidence, timestamp, transactionHash, name, description, fileURI }}
-            />
-          )
-        )
-      ) : (
-        <SkeletonEvidenceCard />
-      )}
-      {evidences?.spamEvidences.length !== 0 ? (
         <>
-          <Divider />
-          {showSpam ? (
-            evidences?.spamEvidences.map(
-              ({ evidence, sender, timestamp, transactionHash, name, description, fileURI, evidenceIndex }) => (
-                <EvidenceCard
-                  key={timestamp}
-                  index={parseInt(evidenceIndex)}
-                  sender={sender?.id}
-                  {...{ evidence, timestamp, transactionHash, name, description, fileURI }}
-                />
-              )
+          {evidences?.realEvidences.map(
+            ({ evidence, sender, timestamp, transactionHash, name, description, fileURI, evidenceIndex }) => (
+              <EvidenceCard
+                key={timestamp}
+                index={parseInt(evidenceIndex)}
+                sender={sender?.id}
+                {...{ evidence, timestamp, transactionHash, name, description, fileURI }}
+              />
             )
-          ) : (
-            <SpamLabel onClick={() => setShowSpam(true)}>Show likely spam</SpamLabel>
           )}
+          {spamEvidences && evidences?.spamEvidences.length !== 0 ? (
+            <>
+              <Divider />
+              {showSpam ? (
+                <>
+                  <SpamLabel onClick={() => setShowSpam(false)}>Hide spam</SpamLabel>
+                  {evidences?.spamEvidences.map(
+                    ({ evidence, sender, timestamp, transactionHash, name, description, fileURI, evidenceIndex }) => (
+                      <EvidenceCard
+                        key={timestamp}
+                        index={parseInt(evidenceIndex)}
+                        sender={sender?.id}
+                        {...{ evidence, timestamp, transactionHash, name, description, fileURI }}
+                      />
+                    )
+                  )}
+                </>
+              ) : (
+                <SpamLabel onClick={() => setShowSpam(true)}>Show likely spam</SpamLabel>
+              )}
+            </>
+          ) : null}
         </>
-      ) : null}
+      ) : (
+        <SkeletonEvidenceCard />
+      )}
+
       {data && data.evidences.length === 0 ? <StyledLabel>There is no evidence submitted yet</StyledLabel> : null}
     </Container>
   );