Fix: fix the fake api

power-pay-frontend/src/components/fake_api.tsx

@@ -1,61 +1,63 @@
-import axios, { AxiosError, AxiosResponse } from 'axios';
+import React, { useState } from 'react';
+import axios from 'axios';
 
-export interface ApiResponse {
-  phone: string;
-  amount: string;
-}
-
-export interface ErrorResponse {
-  message: string;
-}
-
-const FakeApi = () => {
+const FakeApi: React.FC = () => {
   const baseURL = 'http://localhost:5000';
-  const api = axios.create({
-    baseURL,
+  const api = axios.create({ 
+    baseURL, 
     timeout: 5000,
   });
 
+  const [recipientPhoneNumber, setRecipientPhoneNumber] = useState('');
+  const [amount, setAmount] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+
   const mockSend_MoneyAPI = async (
-    recipientPhoneNumber: string,
+    recipientPhoneNumber: string, 
     amount: number
-  ): Promise<ApiResponse | undefined> => {
+  ) => {
     try {
       if (!recipientPhoneNumber || !amount) {
-        throw new Error("Please fill in all fields");
-      }
-
-      const response: AxiosResponse<ApiResponse> = await api.post('/UserInfo', {
-        recipientPhoneNumber,
-        amount,
-      });
-
-      console.log("Transaction Successful");
-      console.log("Recipient Phone Number:", recipientPhoneNumber);
-      console.log("Amount:", amount);
-
-      return response.data;
-    } catch (error) {
-      if (axios.isAxiosError(error)) {
-        const axiosError = error as AxiosError<ErrorResponse>;
-        if (axiosError.response) {
-          // Server returned an error response
-          console.log(axiosError.response.data.message || "An error occurred while processing the transaction.");
-        } else if (axiosError.request) {
-          // No response received, possibly due to network issues
-          console.log("Network error. Please check your internet connection.");
-        } else {
-          // Something else went wrong
-          console.log("An error occurred while processing the transaction.");
-        }
+        setErrorMessage("Please fill in all fields");
       } else {
-        // Non-Axios errors
-        console.log("An error occurred while processing the transaction.");
+        console.log("Transaction Successful");
+        console.log("Recipient Phone Number:", recipientPhoneNumber);
+        console.log("Amount:", amount);
+        setErrorMessage('');
+        await api.post('/UserInfo', { 
+          recipientPhoneNumber, 
+          amount 
+        });
       }
+    } catch (error) {
+      setErrorMessage("An error occurred while processing the transaction.");
+      console.error("Error:", error);
     }
-  };
-
-  return mockSend_MoneyAPI; // Return the function directly
+  }
+
+  const handleSendMoney = () => {
+    mockSend_MoneyAPI(recipientPhoneNumber, parseInt(amount));
+  }
+
+  return (
+    <div>
+      <p>FAKED API</p>
+      <input
+        type="text"
+        value={recipientPhoneNumber}
+        onChange={(e) => setRecipientPhoneNumber(e.target.value)}
+        placeholder="Recipient Phone Number"
+      />
+      <input
+        type="text"
+        value={amount}
+        onChange={(e) => setAmount(e.target.value)}
+        placeholder="Amount"
+      />
+      <button onClick={handleSendMoney}>Send Money</button>
+      {errorMessage && <p>{errorMessage}</p>}
+    </div>
+  );
 };
 
 export default FakeApi;