From c7af7ac1c84a3dc3879c504024790573c458d7e3 Mon Sep 17 00:00:00 2001
From: Guryash <gmat224@aucklanduni.ac.nz>
Date: Sun, 22 Dec 2024 18:03:34 +1300
Subject: [PATCH] feat: change user info to tanstack query

---
 web/src/api/apiRequests.ts                  | 18 ++++++++--
 web/src/hooks/api/useUpdateUserInfo.ts      | 38 +++++++++++++++++++++
 web/src/hooks/api/useUserMetaData.ts        | 10 ------
 web/src/main.tsx                            |  3 --
 web/src/screens/ReturnScreen.tsx            |  2 +-
 web/src/screens/SignUpInformationScreen.tsx | 32 ++++++++++-------
 web/src/types/types.ts                      |  5 +++
 7 files changed, 78 insertions(+), 30 deletions(-)
 delete mode 100644 web/src/hooks/api/useUserMetaData.ts

diff --git a/web/src/api/apiRequests.ts b/web/src/api/apiRequests.ts
index f30772a8..23b2c73b 100644
--- a/web/src/api/apiRequests.ts
+++ b/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");
diff --git a/web/src/hooks/api/useUpdateUserInfo.ts b/web/src/hooks/api/useUpdateUserInfo.ts
index e69de29b..24fd3f36 100644
--- a/web/src/hooks/api/useUpdateUserInfo.ts
+++ b/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
+      ),
+  });
+};
diff --git a/web/src/hooks/api/useUserMetaData.ts b/web/src/hooks/api/useUserMetaData.ts
deleted file mode 100644
index ade49ef3..00000000
--- a/web/src/hooks/api/useUserMetaData.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// import { useQuery } from "@tanstack/react-query";
-// import { getUserMetaData } from "../../api/apiRequests";
-// import { AttendanceList } from "../../types/types";
-
-// export const useUserMetaData = () => {
-//   return useQuery<AttendanceList[], Error>({
-//     queryKey: ["userMetatdata"],
-//     queryFn: () => getUserMetaData(),
-//   });
-// };
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 2e5d3ab2..64bd4d23 100644
--- a/web/src/main.tsx
+++ b/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";
diff --git a/web/src/screens/ReturnScreen.tsx b/web/src/screens/ReturnScreen.tsx
index b09943bc..47bd3564 100644
--- a/web/src/screens/ReturnScreen.tsx
+++ b/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 (
diff --git a/web/src/screens/SignUpInformationScreen.tsx b/web/src/screens/SignUpInformationScreen.tsx
index 0db5b616..71c79206 100644
--- a/web/src/screens/SignUpInformationScreen.tsx
+++ b/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}
diff --git a/web/src/types/types.ts b/web/src/types/types.ts
index a9dc12a9..d2669c00 100644
--- a/web/src/types/types.ts
+++ b/web/src/types/types.ts
@@ -163,3 +163,8 @@ export interface AnswerList {
   questionId: number;
   answer: string;
 }
+
+export interface UserMetaData {
+  bIsUserInfoComplete: boolean;
+  bIsMembershipPaymentComplete: boolean;
+}
\ No newline at end of file