add test claim credits page

web/src/api/client.ts

@@ -13,9 +13,9 @@ declare module 'axios' {
   }
 }
 
-function createClient (enableCache = true) {
+function createClient (baseURL: string, enableCache = true) {
   const client = axios.create({
-    baseURL: BASE_URL,
+    baseURL,
     paramsSerializer: function paramsSerializer (params: any): string {
       const usp = new URLSearchParams();
       for (const [key, value] of Object.entries(params)) {
@@ -49,8 +49,9 @@ function createClient (enableCache = true) {
   return client;
 }
 
-export const client = createClient();
-export const clientWithoutCache = createClient(false);
+export const client = createClient(BASE_URL);
+export const clientWithoutCache = createClient(BASE_URL, false);
+export const giftClientWithoutCache = createClient('http://localhost:3000', false);
 
 type CheckReq = (config: AxiosRequestConfig) => boolean;
 

web/src/pages/gift/_components/ClaimCredits/index.tsx

@@ -0,0 +1,48 @@
+import { Button, Container, Typography } from '@mui/material';
+import React, { useState } from 'react';
+import { giftClientWithoutCache } from '@site/src/api/client';
+import { useRequireLogin } from '@site/src/context/user';
+
+export function ClaimCredits () {
+  const [email, setEmail] = useState();
+  const requireLogin = useRequireLogin();
+  const handleClick = async () => {
+    let accessToken: string;
+    try {
+      accessToken = await requireLogin('gift');
+    } catch (e) {
+      console.error('Failed to get the access token.', e);
+      return;
+    }
+
+    const res = await giftClientWithoutCache.post<any, any>(
+      '/api/v1/credits/claim',
+      {},
+      {
+        withCredentials: true,
+        oToken: accessToken,
+      },
+    );
+
+    setEmail(res?.metadata?.email);
+  };
+
+  return (<>
+    <Container maxWidth="sm" sx={{ pt: 6, pb: 12 }}>
+        <Typography variant="h1" mb={4}>
+            My Gift
+        </Typography>
+        <Button
+            variant="contained"
+            onClick={() => {
+              handleClick().catch((err) => {
+                console.error(err);
+                alert('Failed to claim your gift');
+              });
+            }}>
+            Claim
+        </Button>
+        <p>{email}</p>
+    </Container>
+    </>);
+}

web/src/pages/gift/index.tsx

@@ -1,47 +1,11 @@
 import CustomPage from '@site/src/theme/CustomPage';
-import React, { useState } from 'react';
-import { Button, Container, Typography } from '@mui/material';
-import { useAuth0 } from '@auth0/auth0-react';
+import React from 'react';
+import { ClaimCredits } from '@site/src/pages/gift/_components/ClaimCredits';
 
 export default function Page () {
-  const [email, setEmail] = useState();
-  const { isLoading: userValidating, isAuthenticated: userValidated } = useAuth0();
-
-  const handleClick = async () => {
-    if (userValidated) {
-      const res = await fetch('https:/gift.ossinsight.io/api/v1/credits/claim', {
-        method: 'POST',
-      });
-      if (!res.ok) {
-        alert('Failed to claim your gift');
-        return;
-      }
-      const data = await res.json();
-      setEmail(data?.metadata?.email);
-    } else {
-      alert('Please login to claim your gift');
-    }
-  };
-
   return (
     <CustomPage title="Gift for OSS Contributors">
-      <Container maxWidth="sm" sx={{ pt: 6, pb: 12 }}>
-        <Typography variant="h1" mb={4}>
-          My Gift
-        </Typography>
-        <Button
-          disabled={userValidating}
-          variant="contained"
-          onClick={() => {
-            handleClick().catch((err) => {
-              console.error(err);
-              alert('Failed to claim your gift');
-            });
-          }}>
-          Claim
-        </Button>
-        <p>{email}</p>
-      </Container>
+      <ClaimCredits/>
     </CustomPage>
   );
 }