Show Recent Mints in Claim Modal (#92)

* Set claimIds based on which gitpoaps have been claimed

* Add status to claim modal story

* add explanatory comment

src/components/github/GitHub.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { rem } from 'polished';
 import { GoMarkGithub } from 'react-icons/go';
@@ -13,7 +13,7 @@ import { showNotification } from '@mantine/notifications';
 import { NotificationFactory } from '../../notifications';
 import { DisconnectPopover } from '../DisconnectPopover';
 import { useClaimModalContext } from '../ClaimModal/ClaimModalContext';
-import { useOpenClaimsQuery } from '../../graphql/generated-gql';
+import { ClaimStatus, useOpenClaimsQuery } from '../../graphql/generated-gql';
 
 const Content = styled.div`
   display: flex;
@@ -49,6 +49,18 @@ export const GitHub = ({ className }: Props) => {
 
   const userClaims = result.data?.userClaims;
 
+  // useOpenClaimsQuery includes all claimed GitPOAPs from the previous month
+  // This side effect adds the ids of those claimed GitPOAPs to the claimedIds list
+  useEffect(() => {
+    if (userClaims) {
+      setClaimedIds(
+        userClaims
+          .filter((userClaim) => userClaim.claim.status === ClaimStatus.Claimed)
+          .map((userClaim) => userClaim.claim.id),
+      );
+    }
+  }, [userClaims]);
+
   const renderGitHubButton = useCallback(() => {
     /* Not connected to GitHub */
     if (!isLoggedIntoGitHub) {

src/graphql/generated-gql.tsx

@@ -3753,6 +3753,7 @@ export type OpenClaimsQuery = {
     claim: {
       __typename?: 'Claim';
       id: number;
+      status: ClaimStatus;
       pullRequestEarned?: {
         __typename?: 'GithubPullRequest';
         repo: {
@@ -4575,6 +4576,7 @@ export const OpenClaimsDocument = gql`
             }
           }
         }
+        status
         gitPOAP {
           id
         }

src/graphql/operations.graphql

@@ -168,6 +168,7 @@ query openClaims($githubId: Float!) {
           }
         }
       }
+      status
       gitPOAP {
         id
       }

src/stories/modals/ClaimModal.stories.tsx

@@ -5,7 +5,7 @@ import badgeImg1 from '../assets/gitPOAPs/badge1.png';
 import badgeImg2 from '../assets/gitPOAPs/badge2.png';
 import badgeImg3 from '../assets/gitPOAPs/badge3.png';
 import badgeImg4 from '../assets/gitPOAPs/badge4.png';
-import { OpenClaimsQuery } from '../../graphql/generated-gql';
+import { ClaimStatus, OpenClaimsQuery } from '../../graphql/generated-gql';
 
 type UserClaim = Exclude<OpenClaimsQuery['userClaims'], null | undefined>[number];
 const claims: UserClaim[] = [
@@ -20,6 +20,7 @@ const claims: UserClaim[] = [
           },
         },
       },
+      status: ClaimStatus.Unclaimed,
       gitPOAP: {
         id: 1,
       },
@@ -41,6 +42,7 @@ const claims: UserClaim[] = [
           },
         },
       },
+      status: ClaimStatus.Unclaimed,
       gitPOAP: {
         id: 2,
       },
@@ -62,6 +64,7 @@ const claims: UserClaim[] = [
           },
         },
       },
+      status: ClaimStatus.Claimed,
       gitPOAP: {
         id: 3,
       },
@@ -83,6 +86,7 @@ const claims: UserClaim[] = [
           },
         },
       },
+      status: ClaimStatus.Unclaimed,
       gitPOAP: {
         id: 4,
       },