From c8680588db26194271a0d0a22c3ce43461cf738d Mon Sep 17 00:00:00 2001 From: ValantineSuh Date: Mon, 25 Mar 2024 13:02:54 +0100 Subject: [PATCH] Faked the send money API --- power-pay-frontend/package-lock.json | 91 +++++++++++++++++++++ power-pay-frontend/package.json | 11 +-- power-pay-frontend/src/component/okpage.tsx | 57 +++++++++++++ power-pay-frontend/src/main.tsx | 3 +- power-pay-frontend/src/okpage.tsx | 26 ------ 5 files changed, 156 insertions(+), 32 deletions(-) create mode 100644 power-pay-frontend/src/component/okpage.tsx delete mode 100644 power-pay-frontend/src/okpage.tsx diff --git a/power-pay-frontend/package-lock.json b/power-pay-frontend/package-lock.json index 5d2ad625..47669edb 100644 --- a/power-pay-frontend/package-lock.json +++ b/power-pay-frontend/package-lock.json @@ -8,6 +8,7 @@ "name": "power-pay-frontend", "version": "0.0.0", "dependencies": { + "axios": "^1.6.8", "react": "^18.2.0", "react-dom": "^18.2.0" }, @@ -1649,6 +1650,11 @@ "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==", "dev": true }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, "node_modules/autoprefixer": { "version": "10.4.18", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.18.tgz", @@ -1686,6 +1692,16 @@ "postcss": "^8.1.0" } }, + "node_modules/axios": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz", + "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -1857,6 +1873,17 @@ "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", "dev": true }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/commander": { "version": "11.1.0", "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz", @@ -1939,6 +1966,14 @@ "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", "dev": true }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/didyoumean": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", @@ -2495,6 +2530,25 @@ "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", "dev": true }, + "node_modules/follow-redirects": { + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/foreground-child": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz", @@ -2511,6 +2565,19 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fraction.js": { "version": "4.3.7", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", @@ -3098,6 +3165,25 @@ "node": ">=8.6" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/minimatch": { "version": "9.0.3", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz", @@ -3628,6 +3714,11 @@ "node": ">= 0.8.0" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", diff --git a/power-pay-frontend/package.json b/power-pay-frontend/package.json index c421d177..89600014 100644 --- a/power-pay-frontend/package.json +++ b/power-pay-frontend/package.json @@ -14,6 +14,7 @@ "preview": "vite preview" }, "dependencies": { + "axios": "^1.6.8", "react": "^18.2.0", "react-dom": "^18.2.0" }, @@ -23,15 +24,15 @@ "@typescript-eslint/eslint-plugin": "^7.0.2", "@typescript-eslint/parser": "^7.0.2", "@vitejs/plugin-react": "^4.2.1", + "autoprefixer": "^10.4.18", "eslint": "^8.56.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", "gh-pages": "^6.1.1", - "typescript": "^5.2.2", - "sass": "^1.71.1", - "vite": "^5.1.4", - "tailwindcss":"^3.4.1", "postcss": "^8.4.35", - "autoprefixer": "^10.4.18" + "sass": "^1.71.1", + "tailwindcss": "^3.4.1", + "typescript": "^5.2.2", + "vite": "^5.1.4" } } \ No newline at end of file diff --git a/power-pay-frontend/src/component/okpage.tsx b/power-pay-frontend/src/component/okpage.tsx new file mode 100644 index 00000000..07793a41 --- /dev/null +++ b/power-pay-frontend/src/component/okpage.tsx @@ -0,0 +1,57 @@ +//faking the API +import React, { useEffect, useState } from 'react'; +import axios from 'axios'; + +const OKpage: React.FC = () => { + const baseURL = 'http://localhost:5000'; // specifying the base URL with the desired port + const api = axios.create({ + baseURL, + timeout: 5000, + }); + + // Mock function to simulate a succesful API call + const mockSend_MoneyAPI = async ( + senderPhoneNumber: string, + recipientPhoneNumber: string, + amount: number + ) => { + try { + const response = await api.post('/send_money', { + senderPhoneNumber, + recipientPhoneNumber, + amount }); + return response.data; + } catch (error) { + throw error; + } + } + + // Handle API call when component mounts + useEffect(() => { + mockSend_MoneyAPI('12347656', '1234567890', 100) + .then((response) => { + console.log("Mock API Response", response); + }) + .catch((error) => { + console.error("Mock API Error", error); + }); + }, []); +} + + +//building the ok page for successful transfer +const OKPage = () => { + return ( +
+
+

Success!

+

+

The money was successfully transfered.

+

+
+ +
+ ); +}; + +export default OKPage; \ No newline at end of file diff --git a/power-pay-frontend/src/main.tsx b/power-pay-frontend/src/main.tsx index b0445aea..18ee77bd 100644 --- a/power-pay-frontend/src/main.tsx +++ b/power-pay-frontend/src/main.tsx @@ -3,9 +3,10 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.tsx' import './index.css' - +import './component/okpage.tsx' ReactDOM.createRoot(document.getElementById('root')!).render( + {/* */} , ) diff --git a/power-pay-frontend/src/okpage.tsx b/power-pay-frontend/src/okpage.tsx deleted file mode 100644 index af64a1e4..00000000 --- a/power-pay-frontend/src/okpage.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { border } from "@chakra-ui/react"; - - -//faking the API - - - - - - -//building the ok page for successful transfer -const OKPage = () => { - return ( -
-
-

Success!

-

-

The money was successfully transfered.

-

-
- -
- ); -}; - -export default OKPage; \ No newline at end of file