From 518e1834aa0321c89661954083a33392b6fd0b47 Mon Sep 17 00:00:00 2001
From: Harsh Mittal <harshmittal1750@gmail.com>
Date: Sun, 28 Jul 2024 21:32:56 +0530
Subject: [PATCH] Refactor:perfromanxce, optimization , disabled button if
 revoked

---
 src/app/_components/ManageAttestation.tsx | 53 ++++++++---------------
 src/app/_components/RevokeAttestation.tsx |  8 ++--
 src/hooks/usePGPKeyServer.ts              |  6 +--
 src/lib/formatKey.ts                      | 13 ++++++
 src/lib/formatTime.ts                     | 10 +++++
 src/lib/graphql/queries.ts                |  1 +
 6 files changed, 50 insertions(+), 41 deletions(-)
 create mode 100644 src/lib/formatKey.ts
 create mode 100644 src/lib/formatTime.ts

diff --git a/src/app/_components/ManageAttestation.tsx b/src/app/_components/ManageAttestation.tsx
index bd5abad..28d3cc3 100644
--- a/src/app/_components/ManageAttestation.tsx
+++ b/src/app/_components/ManageAttestation.tsx
@@ -10,13 +10,14 @@ import {
   TableBody,
   TableCell,
 } from "@/components/ui/table";
-import RevokeAttestationPage from "./RevokeAttestation";
-
+import RevokeAttestation from "./RevokeAttestation";
+import { useCallback, useMemo } from "react";
+import { formatKey } from "@/lib/formatKey";
+import { formatTime } from "@/lib/formatTime";
 const ManageAttestation: NextPage = () => {
   const { attestations, loading, error } = useGetAttestations();
-  console.log(attestations);
 
-  const renderTableHeader = () => {
+  const renderTableHeader = useMemo(() => {
     if (attestations && attestations.length > 0) {
       return (
         <TableRow>
@@ -29,16 +30,17 @@ const ManageAttestation: NextPage = () => {
         </TableRow>
       );
     }
-    return null;
-  };
+    return <></>;
+  }, [attestations]);
 
-  const renderTableRows = () => {
+  const renderTableRows = useCallback(() => {
     return attestations?.map((attestation: any) => (
       <TableRow key={attestation.id}>
         <TableCell className="text-right">
-          <RevokeAttestationPage
+          <RevokeAttestation
             uid={attestation.id}
             schemaId={attestation.schema.id}
+            isRevoked={attestation.revoked}
           />
         </TableCell>
         {Object.entries(attestation).map(([key, value], index) => (
@@ -59,44 +61,25 @@ const ManageAttestation: NextPage = () => {
         ))}
       </TableRow>
     ));
-  };
-
-  const formatKey = (key: string): string => {
-    // Replace underscores with spaces and split camelCase words with a space
-    const result = key
-      .replace(/([A-Z])/g, " $1") // Insert space before each uppercase letter
-      .replace(/_/g, " ") // Replace underscores with spaces
-      .trim(); // Remove leading and trailing spaces
+  }, [attestations]);
 
-    // Capitalize the first letter of each word
-    return result
-      .split(" ")
-      .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-      .join(" ");
-  };
+  if (loading) {
+    return <p>Loading...</p>;
+  }
 
-  const formatTime = (timestamp: number, timeType: string) => {
-    if (timestamp === 0 && timeType === "revocationTime") {
-      return "No Previous revocation";
-    }
-    if (timestamp === 0 && timeType === "expirationTime") {
-      return "No Expiration";
-    }
-    const date = new Date(timestamp * 1000); // Convert from seconds to milliseconds
-    return date.toLocaleString(); // Format the date as a human-readable string
-  };
+  if (error) {
+    return <p>{error.message}</p>;
+  }
 
   return (
     <div>
-      {loading && <p>Loading...</p>}
-      {error && <p>{error.message}</p>}
       <Table>
         <TableCaption>
           {attestations
             ? "A list of your attestations"
             : "Please connect wallet"}
         </TableCaption>
-        <TableHeader>{renderTableHeader()}</TableHeader>
+        <TableHeader>{renderTableHeader}</TableHeader>
         <TableBody>{renderTableRows()}</TableBody>
       </Table>
     </div>
diff --git a/src/app/_components/RevokeAttestation.tsx b/src/app/_components/RevokeAttestation.tsx
index 97761cb..3aeadee 100644
--- a/src/app/_components/RevokeAttestation.tsx
+++ b/src/app/_components/RevokeAttestation.tsx
@@ -1,12 +1,14 @@
 import { Button } from "@/components/ui/button";
 import useRevokeAttestation from "@/hooks/useRevokeOnChainAttestation";
 
-const RevokeAttestationPage = ({
+const RevokeAttestation = ({
   uid,
   schemaId,
+  isRevoked,
 }: {
   uid: string;
   schemaId: string;
+  isRevoked: boolean;
 }) => {
   const { revokeAttestation, loading, error, success } = useRevokeAttestation();
 
@@ -20,7 +22,7 @@ const RevokeAttestationPage = ({
         variant={"outline"}
         className="bg-red-500 text-white"
         onClick={handleRevoke}
-        disabled={loading}
+        disabled={loading || isRevoked}
       >
         Revoke
       </Button>
@@ -33,4 +35,4 @@ const RevokeAttestationPage = ({
   );
 };
 
-export default RevokeAttestationPage;
+export default RevokeAttestation;
diff --git a/src/hooks/usePGPKeyServer.ts b/src/hooks/usePGPKeyServer.ts
index 84deda4..735c222 100644
--- a/src/hooks/usePGPKeyServer.ts
+++ b/src/hooks/usePGPKeyServer.ts
@@ -30,7 +30,7 @@ import { useAttestationVerification } from "./useAttestationVerification";
 const EAS_CONTRACT_ADDRESS = "0xC2679fBD37d54388Ce493F1DB75320D236e1815e"; // Sepolia v0.26
 const SCHEMA_REGISTRY_ADDRESS = "0x0a7E2Ff54e76B8E6659aedc9103FB21c038050D0"; // Sepolia 0.26
 
-const graphqlFetch = async (query: string, variables: any) => {
+const urqlFetch = async (query: string, variables: any) => {
   //TODO: it should be an environment variable
   const response = await fetch("https://sepolia.easscan.org/graphql", {
     method: "POST",
@@ -136,7 +136,7 @@ export const usePGPKeyServer = () => {
       }
     `;
 
-      const result = await graphqlFetch(query, {
+      const result = await urqlFetch(query, {
         selfSchemaId: SELF_ATTESTATION_SCHEMA_UID,
         thirdPartySchemaId: THIRD_PARTY_ATTESTATION_SCHEMA_UID,
         publicKeyOrFingerprint: encodeURIComponent(publicKeyOrFingerprint),
@@ -201,7 +201,7 @@ export const usePGPKeyServer = () => {
       }
     `;
 
-      const result = await graphqlFetch(query, { attester: attesterAddress });
+      const result = await urqlFetch(query, { attester: attesterAddress });
       const attestationCount = result.data.attestationCount.aggregate.count;
       return Math.min(100, attestationCount * 5); // 5 points per attestation, max 100
     },
diff --git a/src/lib/formatKey.ts b/src/lib/formatKey.ts
new file mode 100644
index 0000000..f459f0d
--- /dev/null
+++ b/src/lib/formatKey.ts
@@ -0,0 +1,13 @@
+export const formatKey = (key: string): string => {
+  // Replace underscores with spaces and split camelCase words with a space
+  const result = key
+    .replace(/([A-Z])/g, " $1") // Insert space before each uppercase letter
+    .replace(/_/g, " ") // Replace underscores with spaces
+    .trim(); // Remove leading and trailing spaces
+
+  // Capitalize the first letter of each word
+  return result
+    .split(" ")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(" ");
+};
diff --git a/src/lib/formatTime.ts b/src/lib/formatTime.ts
new file mode 100644
index 0000000..5b07ec9
--- /dev/null
+++ b/src/lib/formatTime.ts
@@ -0,0 +1,10 @@
+export const formatTime = (timestamp: number, timeType: string) => {
+  if (timestamp === 0 && timeType === "revocationTime") {
+    return "No Previous revocation";
+  }
+  if (timestamp === 0 && timeType === "expirationTime") {
+    return "No Expiration";
+  }
+  const date = new Date(timestamp * 1000); // Convert from seconds to milliseconds
+  return date.toLocaleString(); // Format the date as a human-readable string
+};
diff --git a/src/lib/graphql/queries.ts b/src/lib/graphql/queries.ts
index 1aaaa09..a26472d 100644
--- a/src/lib/graphql/queries.ts
+++ b/src/lib/graphql/queries.ts
@@ -9,6 +9,7 @@ export const ATTESTATIONS_FOR_SPECIFIC_ATTESTER = gql`
       revocable
       revocationTime
       expirationTime
+      revoked
       schema {
         id
       }