feat: change user info to tanstack query

web/src/api/apiRequests.ts

@@ -8,6 +8,7 @@ import {
   stripeSessionStatus,
   SubmitUpdateUserInfoOrNewUser,
   UpdateUserInfoOrNewUser,
+  UserMetaData,
 } from "../types/types";
 
 const apiClient = axios.create({
@@ -23,17 +24,28 @@ export const getUserMetaData = async (): Promise<AxiosResponse> => {
     },
   });
   console.log("getUserMetatdat");
-  console.log(response);
+  console.log(response.data);
   return response;
 };
 
 // Update user info
-export const updateUserInfo = async (data: object): Promise<AxiosResponse> => {
+export const updateUserInfo = async (name:string, universityId: string, upi: string, yearOfStudy:string, fieldOfStudy:string, isDomestic: string, institution: string ): Promise<AxiosResponse> => {
+  // console.log(data)
+  const data = {
+    name,
+    universityId,
+    upi,
+    yearOfStudy,
+    fieldOfStudy,
+    isDomestic,
+    institution
+  }
+
   const response = await apiClient.post("/api/user/update-user-info", data, {
     headers: {
       "Content-Type": "application/json",
     },
-    data: { data },
+    data,
   });
 
   console.log("update user info");

web/src/hooks/api/useUpdateUserInfo.ts

@@ -0,0 +1,38 @@
+import { useMutation } from "@tanstack/react-query";
+import { updateUserInfo } from "../../api/apiRequests";
+import { AxiosResponse } from "axios";
+
+export const useUpdateUserInfo = () => {
+  return useMutation<
+    AxiosResponse,
+    Error,
+    {
+      name: string;
+      universityId: string;
+      upi: string;
+      yearOfStudy: string;
+      fieldOfStudy: string;
+      isDomestic: string;
+      institution: string;
+    }
+  >({
+    mutationFn: ({
+      name,
+      universityId,
+      upi,
+      yearOfStudy,
+      fieldOfStudy,
+      isDomestic,
+      institution,
+    }) =>
+      updateUserInfo(
+        name,
+        universityId,
+        upi,
+        yearOfStudy,
+        fieldOfStudy,
+        isDomestic,
+        institution
+      ),
+  });
+};

web/src/main.tsx

@@ -69,10 +69,8 @@ SuperTokens.init({
   getRedirectionURL: async (context) => {
     if (context.action === "SUCCESS" && context.newSessionCreated) {
       let redirectionURL = "/";
-
       try {
         const userMetadata = await getUserMetaData();
-
         if (userMetadata.status === 200) {
           if (userMetadata.data!.bIsUserInfoComplete === false) {
             redirectionURL = "/signup/information";
@@ -94,7 +92,6 @@ SuperTokens.init({
           "There was error after logging in. Please contact the AUIS admin for further assistance."
         );
       }
-
       return redirectionURL;
     } else if (context.action === "TO_AUTH") {
       return "/signup";

web/src/screens/ReturnScreen.tsx

@@ -42,7 +42,7 @@ export default function ReturnScreen() {
 
   if (sessionStatusHookStatus === "success") {
     if (status === "open") {
-      return <Navigate to="/checkout/payment" />;
+      return <Navigate to="/checkout/payment" />; // switch to useNavigate TODO
     }
     if (status === "complete") {
       return (

web/src/screens/SignUpInformationScreen.tsx

@@ -5,6 +5,8 @@ import TextQuestion from "@components/forms/TextQuestion";
 import DropdownQuestion from "@components/forms/DropdownQuestion";
 import { useState } from "react";
 import { updateUserInfo } from "../api/apiRequests";
+import { useUpdateUserInfo } from "../hooks/api/useUpdateUserInfo";
+import LoadingSpinner from "@components/navigation/LoadingSpinner";
 
 const SignUpSchema = z.object({
   name: z.string().max(40).min(1),
@@ -47,19 +49,11 @@ export default function SignUpInformationScreen({
 
   const [formError, setFormError] = useState(false);
 
-  const sendSignUpData = async (data: object) => {
-    try {
-      const response = await updateUserInfo(data);
-
-      if (response.status === 200) {
-        window.location.href = "/membership";
-      } else {
-        // Form Submission Failed
-        setFormError(true);
-      }
-    } catch (error) {
-      setFormError(true);
-    }
+  const {status, mutateAsync} = useUpdateUserInfo()
+
+  const sendSignUpData = async (data: SignUpSchemaType) => {
+
+    mutateAsync(data)
   };
 
   const onSubmit: SubmitHandler<SignUpSchemaType> = (data) => {
@@ -92,6 +86,18 @@ export default function SignUpInformationScreen({
     { id: 3, text: "None" },
   ];
 
+  if (status === "success"){
+    window.location.href = "/membership";
+  }
+
+  if (status === "error"){
+    setFormError(true);
+  }
+
+  if (status === "pending"){
+    return <LoadingSpinner/>
+  }
+
   return (
     <div className="from-AUIS-dark-teal to-AUIS-teal min-h-[calc(100vh)] bg-gradient-to-b">
       {navbar}

web/src/types/types.ts

@@ -163,3 +163,8 @@ export interface AnswerList {
   questionId: number;
   answer: string;
 }
+
+export interface UserMetaData {
+  bIsUserInfoComplete: boolean;
+  bIsMembershipPaymentComplete: boolean;
+}