Use the typescript client for Core API (#273)

* Use the typescript client for Core API

* fix build

Author: devksingh4

package.json

@@ -17,17 +17,18 @@
     "prettier:write": "prettier --write ."
   },
   "dependencies": {
+    "@acm-uiuc/core-client": "^4.1.9",
     "@acm-uiuc/js-shared": "^3.2.0",
     "@azure/msal-browser": "^4.15.0",
     "@azure/msal-react": "^3.0.15",
     "@heroui/react": "2.7.6",
     "@marsidev/react-turnstile": "^1.4.1",
-    "axios": "^0.28.0",
     "framer-motion": "^10.17.9",
     "lottie-react": "^2.3.1",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.45",
     "next": "^14.2.25",
+    "pluralize": "^8.0.0",
     "react": "^18.3.1",
     "react-big-calendar": "^1.13.1",
     "react-dom": "^18.3.1",
@@ -45,6 +46,7 @@
     "@testing-library/react": "^13.3.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^20",
+    "@types/pluralize": "^0.0.33",
     "@types/react": "^18",
     "@types/react-big-calendar": "^1.8.8",
     "@types/react-dom": "^18",

src/app/(main)/calendar/page.tsx

@@ -8,8 +8,9 @@ import { Suspense, useEffect, useState } from 'react';
 import CalendarControls from '@/components/CalendarControls';
 import { View, Views } from 'react-big-calendar';
 import { transformApiDates } from '@/utils/dateutils';
-import { OrganizationName, Organizations } from '@acm-uiuc/js-shared';
+import { AllOrganizationNameList, OrganizationName, Organizations } from '@acm-uiuc/js-shared';
 import { useSearchParams } from 'next/navigation';
+import { eventsApiClient } from '@/utils/api';
 
 const defaultEvent: CalendarEventDetailProps = {
   description: 'N/A',
@@ -30,35 +31,11 @@ const Calendar = () => {
     OrganizationList.includes(host as OrganizationName) ? host : '',
   );
   const [allEvents, setAllEvents] = useState<IEvent[] | null>(null);
-  const [validOrganizations, setValidOrganizations] =
-    useState<string[]>(OrganizationList);
   useEffect(() => {
-    const baseurl = process.env.NEXT_PUBLIC_CORE_API_BASE_URL;
-    if (!baseurl) {
-      return setAllEvents([]);
-    }
-    async function fetcher() {
-      const urls = [
-        `${baseurl}/api/v1/events`,
-      ];
-
-      try {
-        const [eventsResponse] =
-          await Promise.allSettled(urls.map((url) => fetch(url)));
-        if (eventsResponse.status === 'fulfilled') {
-          const eventsData = await eventsResponse.value.json();
-          setAllEvents(transformApiDates(eventsData as IEvent[]));
-        } else {
-          setAllEvents([]); // Handle error for events fetch
-        }
-        setValidOrganizations(OrganizationList);
-      } catch (err) {
-        console.error('Error in processing fetch results:', err);
-        setAllEvents([]); // Fallback error handling for critical failure
-        setValidOrganizations(OrganizationList);
-      }
-    }
-    fetcher();
+    (async () => {
+      const allEvents = await eventsApiClient.apiV1EventsGet()
+      setAllEvents(transformApiDates(allEvents));
+    })();
   }, []);
 
   // Function to handle filter changes, moved from Events.tsx
@@ -112,7 +89,7 @@ const Calendar = () => {
                 className="px-2 border-2 border-gray-300 rounded-md w-full h-full" // Styling for the dropdown
               >
                 <option value="">{filterLabel}</option>
-                {validOrganizations.map((org) => (
+                {AllOrganizationNameList.map((org) => (
                   <option key={org} value={org}>
                     {org}
                   </option>

src/app/(membership)/admin/sync/page.tsx

@@ -17,7 +17,6 @@ import {
 import { Spinner } from '@heroui/spinner';
 
 import Lottie from 'lottie-react';
-import axios from 'axios';
 import Layout from '../../MembershipLayout';
 import successAnimation from '../../success.json';
 import { useSearchParams } from 'next/navigation';

src/app/(membership)/check-membership/page.tsx

@@ -18,22 +18,19 @@ import { Spinner } from '@heroui/spinner';
 // import Lottie from 'lottie-react';
 import dynamic from 'next/dynamic';
 const Lottie = dynamic(() => import('lottie-react'), { ssr: false });
-import axios from 'axios';
 import Layout from '../MembershipLayout';
 import successAnimation from '../success.json';
 import { getUserAccessToken, initMsalClient } from '@/utils/msal';
 import { MembershipPriceString } from "@acm-uiuc/js-shared"
 import { IPublicClientApplication } from '@azure/msal-browser';
-import { syncIdentity } from '@/utils/api';
+import { membershipApiClient, mobileWalletApiClient, syncIdentity } from '@/utils/api';
+import { Configuration, MembershipApi, MobileWalletApi, ResponseError } from '@acm-uiuc/core-client';
 
 interface ErrorCode {
   code?: number | string;
   message: string;
 }
 
-const baseUrl = process.env.NEXT_PUBLIC_CORE_API_BASE_URL;
-const walletApiBaseUrl = process.env.NEXT_PUBLIC_CORE_API_BASE_URL;
-
 const Payment = () => {
   const [netId, setNetId] = useState('');
   const [fullName, setFullName] = useState<string | null>(null);
@@ -108,26 +105,31 @@ const Payment = () => {
     setNetId(netId);
     setIsLoading(true);
     await syncIdentity(accessToken)
-    const url = `${baseUrl}/api/v1/membership`;
-    axios
-      .get(url, { headers: { "x-uiuc-token": accessToken } })
-      .then((response) => {
-        if (response.data.givenName && response.data.surname) {
-          setFullName(`${response.data.givenName} ${response.data.surname}`)
-        }
-        setIsPaidMember(response.data.isPaidMember || false);
-        setIsLoading(false);
-        modalMembershipStatus.onOpen();
-      })
-      .catch((error) => {
-        setIsLoading(false);
+    try {
+      const membershipResponse = await membershipApiClient.apiV1MembershipGet({ xUiucToken: accessToken });
+      if (membershipResponse.givenName && membershipResponse.surname) {
+        setFullName(`${membershipResponse.givenName} ${membershipResponse.surname}`)
+      }
+      setIsPaidMember(membershipResponse.isPaidMember);
+      setIsLoading(false);
+      modalMembershipStatus.onOpen();
+    } catch (e) {
+      console.error(e)
+      if (e instanceof ResponseError) {
         setErrorMessage({
-          code: error?.response?.status || 500,
-          message: error?.message || 'An unknown error occurred',
+          code: e?.response?.status || 500,
+          message: (await e.response.json()).message || 'An unknown error occurred',
         });
-        modalErrorMessage.onOpen();
-      });
-  };
+      } else {
+        setErrorMessage({
+          code: 400,
+          message: 'An unknown error occurred',
+        });
+      }
+      modalErrorMessage.onOpen();
+
+    }
+  }
 
   const handleAddToWallet = async () => {
     setIsWalletLoading(true);
@@ -149,15 +151,9 @@ const Payment = () => {
       modalErrorMessage.onOpen();
       return;
     }
-    let response;
+    let response: Blob | undefined;
     try {
-      response = await axios.get(
-        `${walletApiBaseUrl}/api/v2/mobileWallet/membership`,
-        {
-          headers: { 'Content-Type': 'application/json', 'x-uiuc-token': accessToken },
-          responseType: 'blob',
-        },
-      );
+      response = await mobileWalletApiClient.apiV2MobileWalletMembershipGet({ xUiucToken: accessToken })
       setIsWalletLoading(false);
     } catch (error: any) {
       setIsWalletLoading(false);
@@ -173,8 +169,7 @@ const Payment = () => {
     if (!response) {
       return;
     }
-    const pkpassBlob = response.data;
-    const url = window.URL.createObjectURL(pkpassBlob);
+    const url = window.URL.createObjectURL(response);
     const link = document.createElement('a');
     link.href = url;
     link.setAttribute('download', 'acm_uiuc_membership.pkpass');

src/app/(membership)/membership/page.tsx

@@ -17,14 +17,14 @@ import {
 import { Spinner } from '@heroui/spinner';
 
 import Lottie from 'lottie-react';
-import axios from 'axios';
 import Layout from '../MembershipLayout';
 import successAnimation from '../success.json';
 import { useSearchParams } from 'next/navigation';
-import config from '@/config.json';
 import { type IPublicClientApplication } from "@azure/msal-browser";
 import { getUserAccessToken, initMsalClient } from '@/utils/msal';
 import { MembershipPriceString } from '@acm-uiuc/js-shared';
+import { membershipApiClient } from '@/utils/api';
+import { ResponseError, ValidationError } from '@acm-uiuc/core-client';
 
 
 interface ErrorCode {
@@ -80,57 +80,37 @@ const Payment = () => {
       modalErrorMessage.onOpen();
       return;
     }
-    const url = `${baseUrl}/api/v2/membership/checkout`;
-    axios
-      .get(url, {
-        headers: { "Content-Type": "text/plain", 'x-uiuc-token': accessToken }
-      })
-      .then((response) => {
-        window.location.replace(response.data);
-      })
-      .catch((error) => {
+    try {
+      const response = await membershipApiClient.apiV2MembershipCheckoutGet({
+        xUiucToken: accessToken,
+      });
+      window.location.replace(response)
+    } catch (e) {
+      console.error("Error purchasing membership", e)
+      if (e instanceof ResponseError) {
         setIsLoading(false);
-        if (error.response) {
-          if (error.response.status === 422) {
-            const errorObj = error.response.data;
-            setErrorMessage({
-              code: errorObj.details[0].issue,
-              message: errorObj.details[0].description,
-            });
-            modalErrorMessage.onOpen();
-          }
-          else if (error.response.status === 403) {
-            setErrorMessage({
-              code: 409,
-              message: 'Could not verify NetID.',
-            });
-            modalAlreadyMember.onOpen();
-          } else if (error.response.status === 400) {
-            const errorObj = error.response.data;
-            if ((errorObj.message as string).includes("is already a paid member")) {
-              setErrorMessage({
-                code: 409,
-                message: 'The specified user is already a paid member.',
-              });
-              modalAlreadyMember.onOpen();
-            } else {
-              setErrorMessage({
-                code: errorObj.id,
-                message: errorObj.message,
-              });
-              modalErrorMessage.onOpen();
-            }
-          } else if (error.response.status === 409) {
-            setErrorMessage({
-              code: 500,
-              message:
-                'Internal server error: ' +
-                (error.response.data.message || 'could not process request'),
-            });
-            modalErrorMessage.onOpen();
-          }
+        const responseJson = await e.response.json() as ValidationError;
+        if (responseJson.message.includes("is already a paid member")) {
+          modalErrorMessage.onClose();
+          modalAlreadyMember.onOpen();
+          return;
         }
-      });
+        setErrorMessage({
+          code: responseJson.id ?? 400,
+          message: responseJson.message ?? "An error occurred creating your checkout session."
+        })
+      } else {
+        setErrorMessage({
+          code: 400,
+          message: "An error occurred creating your checkout session."
+        })
+      }
+      modalErrorMessage.onOpen();
+    }
+
+
+
+
   }, [modalAlreadyMember, modalErrorMessage]);
 
   useEffect(() => {