fixes

isolate the queries add another query for multiple submissions fix static paths update routes for /review page
quest-chains · Jan 17, 2023 · 480d93b · 480d93b
1 parent f834897
commit 480d93b
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 57 deletions.
diff --git a/components/ProfileView/QuestsToReview.tsx b/components/ProfileView/QuestsToReview.tsx
@@ -20,7 +20,7 @@ import NextLink from 'next/link';
 
 import { NetworkDisplay } from '@/components/NetworkDisplay';
 import { useQuestsToReviewForAllChains } from '@/hooks/useQuestsToReviewForAllChains';
-import { useWallet } from '@/web3';
+import { AVAILABLE_NETWORK_INFO, useWallet } from '@/web3';
 
 export const QuestsToReview: React.FC = () => {
   const { address } = useWallet();
@@ -86,7 +86,9 @@ const QuestChainStatusView: React.FC<{
   questChain: graphql.QuestChainReviewInfoFragment;
 }> = ({ questChain: chain }) => (
   <NextLink
-    as={`/${chain.chainId}/${chain.address}/review`}
+    as={`/${AVAILABLE_NETWORK_INFO[chain.chainId].urlName}/${
+      chain.address
+    }/review`}
     href={`/[chainId]/[address]/review`}
     passHref
   >

diff --git a/components/QuestChain/QuestChainV1Page.tsx b/components/QuestChain/QuestChainV1Page.tsx
@@ -53,6 +53,7 @@ import { QUESTCHAINS_URL } from '@/utils/constants';
 import { waitUntilBlock } from '@/utils/graphHelpers';
 import { handleError, handleTxLoading } from '@/utils/helpers';
 import { Metadata, uploadFiles, uploadMetadata } from '@/utils/metadata';
+import { getRegisteredStatuses, PoHAPI } from '@/utils/PoH';
 import { ipfsUriToHttp } from '@/utils/uriHelpers';
 import { AVAILABLE_NETWORK_INFO, useWallet } from '@/web3';
 import { getQuestChainContract } from '@/web3/contract';
@@ -66,17 +67,6 @@ import { UploadImageForm } from '../UploadImageForm';
 import { QuestsEditor } from './QuestsEditor';
 import { RolesEditor } from './RolesEditor';
 
-export const PoHAPI =
-  'https://api.thegraph.com/subgraphs/name/kleros/proof-of-humanity-mainnet';
-
-export const getRegisteredStatus = `
-  query GetRegisteredStatus ($id: ID!) {
-    submission(id: $id) {
-      registered
-    }
-  }
-`;
-
 const { Status } = graphql;
 
 enum Mode {
@@ -264,15 +254,17 @@ export const QuestChainV1Page: React.FC<QuestChainV1PageProps> = ({
 
   const getPOH = async () => {
     const statuses: { [addr: string]: boolean } = {};
+    const ids = Object.keys(members);
 
-    Object.keys(members).forEach(async address => {
-      const data = await client
-        .query(getRegisteredStatus, { id: address })
-        .toPromise();
+    const data = await client
+      .query(getRegisteredStatuses, { id: ids })
+      .toPromise();
 
-      const registered = data?.data?.submission?.registered || false;
-
-      statuses[address] = registered;
+    const submissions = data?.data?.submissions;
+    ids.forEach(address => {
+      statuses[address] = submissions.find(
+        (submission: { id: string }) => submission.id === address,
+      );
     });
 
     setStatusesPoH(statuses);
@@ -1013,7 +1005,9 @@ export const QuestChainV1Page: React.FC<QuestChainV1PageProps> = ({
                       </Flex>
                       {numSubmissionsToReview > 0 && (
                         <NextLink
-                          as={`/${questChain.chainId}/${questChain.address}/review`}
+                          as={`/${
+                            AVAILABLE_NETWORK_INFO[questChain.chainId].urlName
+                          }/${questChain.address}/review`}
                           href={`/[chainId]/[address]/review`}
                           passHref
                         >

diff --git a/components/UploadProofButton.tsx b/components/UploadProofButton.tsx
@@ -1,7 +1,7 @@
 import { Box, Flex } from '@chakra-ui/react';
 import { graphql } from '@quest-chains/sdk';
 
-import { UserStatusType } from '@/pages/[chainId]/[address]';
+import { UserStatusType } from '@/pages/[network]/[address]';
 
 import { UploadProof } from './UploadProof';
 

diff --git a/pages/[chainId]/[address]/index.tsx → pages/[network]/[address]/index.tsx b/pages/[chainId]/[address]/index.tsx → pages/[network]/[address]/index.tsx
@@ -12,7 +12,7 @@ import { HeadComponent } from '@/components/Seo';
 import { useLatestQuestChainData } from '@/hooks/useLatestQuestChainData';
 import { useLatestQuestStatusesForChainData } from '@/hooks/useLatestQuestStatusesForChainData';
 import { QUESTCHAINS_URL, SUPPORTED_NETWORKS } from '@/utils/constants';
-import { CHAIN_URL_MAPPINGS } from '@/web3/networks';
+import { AVAILABLE_NETWORK_INFO, CHAIN_URL_MAPPINGS } from '@/web3/networks';
 
 const {
   getQuestChainAddresses,
@@ -108,7 +108,7 @@ const QuestChainPage: React.FC<Props> = ({
   );
 };
 
-type QueryParams = { address: string; chainId: string };
+type QueryParams = { address: string; network: string };
 
 export async function getStaticPaths() {
   const paths: { params: QueryParams }[] = [];
@@ -119,7 +119,7 @@ export async function getStaticPaths() {
 
       paths.push(
         ...addresses.map(address => ({
-          params: { address, chainId },
+          params: { address, network: AVAILABLE_NETWORK_INFO[chainId].urlName },
         })),
       );
     }),
@@ -131,44 +131,41 @@ export async function getStaticPaths() {
 export const getStaticProps = async (
   context: GetStaticPropsContext<QueryParams>,
 ) => {
-  let chainId = context.params?.chainId;
+  let network = context.params?.network;
   const address = context.params?.address;
 
   let questStatuses: graphql.QuestStatusInfoFragment[] = [];
-
   let questChain = null;
 
-  if (chainId && CHAIN_URL_MAPPINGS[chainId]) {
-    chainId = CHAIN_URL_MAPPINGS[chainId];
+  if (network && CHAIN_URL_MAPPINGS[network]) {
+    network = CHAIN_URL_MAPPINGS[network];
   }
 
-  if (address && chainId) {
+  if (address && network) {
     if (ethers.utils.isAddress(address)) {
       try {
         questStatuses = address
-          ? await getStatusesForChain(chainId, address)
+          ? await getStatusesForChain(network, address)
           : [];
-        questChain = address ? await getQuestChainInfo(chainId, address) : null;
+        questChain = address ? await getQuestChainInfo(network, address) : null;
       } catch (error) {
         // eslint-disable-next-line no-console
-        console.error(error);
       }
     } else {
       try {
         const questChainsFromSlug = address
-          ? await getQuestChainsFromSlug(chainId, address)
+          ? await getQuestChainsFromSlug(network, address)
           : null;
 
         questChain = questChainsFromSlug ? questChainsFromSlug[0] : null;
         if (questChain) {
           questStatuses = await getStatusesForChain(
-            chainId,
+            network,
             questChain.address,
           );
         }
       } catch (error) {
         // eslint-disable-next-line no-console
-        console.error(error);
       }
     }
   }

diff --git a/pages/[chainId]/[address]/review.tsx → pages/[network]/[address]/review.tsx b/pages/[chainId]/[address]/review.tsx → pages/[network]/[address]/review.tsx
@@ -1,6 +1,8 @@
 import { ArrowBackIcon } from '@chakra-ui/icons';
 import { Flex, Link as ChakraLink, Spinner, Text } from '@chakra-ui/react';
 import { graphql } from '@quest-chains/sdk';
+import { getQuestChainsFromSlug } from '@quest-chains/sdk/dist/graphql';
+import { ethers } from 'ethers';
 import { GetStaticPropsContext, InferGetStaticPropsType } from 'next';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';
@@ -13,7 +15,7 @@ import { HeadComponent } from '@/components/Seo';
 import { useLatestQuestChainData } from '@/hooks/useLatestQuestChainData';
 import { useLatestQuestStatusesForChainData } from '@/hooks/useLatestQuestStatusesForChainData';
 import { QUESTCHAINS_URL, SUPPORTED_NETWORKS } from '@/utils/constants';
-import { AVAILABLE_NETWORK_INFO, useWallet } from '@/web3';
+import { AVAILABLE_NETWORK_INFO, CHAIN_URL_MAPPINGS, useWallet } from '@/web3';
 
 const { getQuestChainAddresses, getQuestChainInfo, getStatusesForChain } =
   graphql;
@@ -84,7 +86,9 @@ const Review: React.FC<Props> = ({
       />
       <Flex w="full">
         <NextLink
-          as={`/${questChain.chainId}/${questChain.address}`}
+          as={`/${AVAILABLE_NETWORK_INFO[questChain.chainId].urlName}/${
+            questChain.address
+          }`}
           href="/[chainId]/[address]"
           passHref
         >
@@ -129,7 +133,7 @@ const Review: React.FC<Props> = ({
   );
 };
 
-type QueryParams = { address: string; chainId: string };
+type QueryParams = { address: string; network: string };
 
 export async function getStaticPaths() {
   const paths: { params: QueryParams }[] = [];
@@ -140,7 +144,7 @@ export async function getStaticPaths() {
 
       paths.push(
         ...addresses.map(address => ({
-          params: { address, chainId },
+          params: { address, network: AVAILABLE_NETWORK_INFO[chainId].urlName },
         })),
       );
     }),
@@ -152,23 +156,44 @@ export async function getStaticPaths() {
 export const getStaticProps = async (
   context: GetStaticPropsContext<QueryParams>,
 ) => {
+  let network = context.params?.network;
   const address = context.params?.address;
-  const chainId = context.params?.chainId;
 
   let questStatuses: graphql.QuestStatusInfoFragment[] = [];
   let questChain = null;
-  if (chainId && address) {
-    try {
-      questStatuses = address
-        ? await getStatusesForChain(chainId, address)
-        : [];
-      questChain = address ? await getQuestChainInfo(chainId, address) : null;
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error(
-        `Could not fetch quest chains/statuses for address ${address}`,
-        error,
-      );
+
+  if (network && CHAIN_URL_MAPPINGS[network]) {
+    network = CHAIN_URL_MAPPINGS[network];
+  }
+
+  if (address && network) {
+    if (ethers.utils.isAddress(address)) {
+      try {
+        questStatuses = address
+          ? await getStatusesForChain(network, address)
+          : [];
+        questChain = address ? await getQuestChainInfo(network, address) : null;
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+      }
+    } else {
+      try {
+        const questChainsFromSlug = address
+          ? await getQuestChainsFromSlug(network, address)
+          : null;
+
+        questChain = questChainsFromSlug ? questChainsFromSlug[0] : null;
+        if (questChain) {
+          questStatuses = await getStatusesForChain(
+            network,
+            questChain.address,
+          );
+        }
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+      }
     }
   }
 

diff --git a/pages/profile/[address].tsx b/pages/profile/[address].tsx
@@ -20,13 +20,10 @@ import { UserActionsNeeded } from '@/components/ProfileView/UserActionsNeeded';
 import { UserBadges } from '@/components/ProfileView/UserBadges';
 import { UserProgress } from '@/components/ProfileView/UserProgress';
 import { UserRoles } from '@/components/ProfileView/UserRoles';
-import {
-  getRegisteredStatus,
-  PoHAPI,
-} from '@/components/QuestChain/QuestChainV1Page';
 import { HeadComponent } from '@/components/Seo';
 import { useENS } from '@/hooks/useENS';
 import { QUESTCHAINS_URL } from '@/utils/constants';
+import { getRegisteredStatus, PoHAPI } from '@/utils/PoH';
 import { formatAddress, getAddressUrl, useWallet } from '@/web3';
 
 type Props = InferGetStaticPropsType<typeof getServerSideProps>;

diff --git a/utils/PoH.tsx b/utils/PoH.tsx
@@ -0,0 +1,19 @@
+export const PoHAPI =
+  'https://api.thegraph.com/subgraphs/name/kleros/proof-of-humanity-mainnet';
+
+export const getRegisteredStatus = `
+query GetRegisteredStatus ($id: ID!) {
+  submission(id: $id) {
+    registered
+  }
+}
+`;
+
+export const getRegisteredStatuses = `
+query GetRegisteredStatuses ($id: [ID!]) {
+  submissions(where: { id_in: $id }) {
+    registered
+    id
+  }
+}
+`;