From 934e07a99cd2371ec3093c48e558631ab26f931f Mon Sep 17 00:00:00 2001
From: DewanaGustavus <76590469+DewanaGustavus@users.noreply.github.com>
Date: Wed, 15 Nov 2023 20:48:48 +0700
Subject: [PATCH] feat: user balance withdraw
---
src/App.tsx | 2 +
src/api/Balance.ts | 26 +++++++++
src/components/Navbar.tsx | 4 +-
src/pages/Balance.tsx | 108 ++++++++++++++++++++++++++++++++++++++
src/utils/Balance.ts | 13 +++++
5 files changed, 151 insertions(+), 2 deletions(-)
create mode 100644 src/api/Balance.ts
create mode 100644 src/pages/Balance.tsx
create mode 100644 src/utils/Balance.ts
diff --git a/src/App.tsx b/src/App.tsx
index db3177f..c523cd3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,7 @@ import Register from './pages/Register'
import NotFound from './pages/NotFound'
import Logout from './utils/Logout'
import { isLoggedIn } from './utils/LocalStorage'
+import Balance from './pages/Balance'
function App() {
@@ -14,6 +15,7 @@ function App() {
<>
<Navbar/>
<Routes>
+ <Route path='/Balance' element={<Balance/>}/>
<Route path='/Logout' element={<Logout/>}/>
<Route path='*' element={<NotFound/>}/>
</Routes>
diff --git a/src/api/Balance.ts b/src/api/Balance.ts
new file mode 100644
index 0000000..b4c9a47
--- /dev/null
+++ b/src/api/Balance.ts
@@ -0,0 +1,26 @@
+import axios from "axios";
+
+const REST_URL = "http://localhost:5000"; // TODO : using env
+
+export async function fetchBalance(username : string) {
+ try {
+ const API_URL = REST_URL + `/user/balance/${username}`;
+ const response = await axios.get<number>(API_URL);
+ return response;
+ } catch(err) {
+ alert(err);
+ throw err;
+ }
+}
+
+export async function withdraw(username : string, withdrawBalance : number) {
+ try {
+ const API_URL = REST_URL + "/user/balance";
+ const data = {username : username, topupBalance : -withdrawBalance};
+ const response = await axios.post<string>(API_URL, data);
+ return response;
+ } catch(err) {
+ alert(err);
+ throw err;
+ }
+}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 3cc6c46..86abc11 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -26,8 +26,8 @@ const NAV_ITEMS: Array<NavItem> = [
href: '/',
},
{
- label: 'Transfer',
- href: 'Transfer',
+ label: 'Balance',
+ href: 'Balance',
},
{
label: 'History',
diff --git a/src/pages/Balance.tsx b/src/pages/Balance.tsx
new file mode 100644
index 0000000..1657201
--- /dev/null
+++ b/src/pages/Balance.tsx
@@ -0,0 +1,108 @@
+import {
+ Box,
+ Button,
+ Flex,
+ FormControl,
+ FormLabel,
+ Heading,
+ Input,
+ Stack,
+ Text,
+ useColorModeValue
+} from '@chakra-ui/react'
+import {useEffect, useState} from 'react'
+import { getBalance, withdrawFunction } from '../utils/Balance';
+import { getUser } from '../utils/LocalStorage';
+
+export default function Balance() {
+ const username = getUser();
+ const [balance, setBalance] = useState(0);
+ const [withdrawBalance, setWithdrawBalance] = useState(0);
+
+ function handleSubmit() {
+ if(!username) {
+ alert("Perlu login");
+ return;
+ }
+ const response = withdrawFunction(username, withdrawBalance);
+ response.then((success) => {
+ if(success) {
+ setBalance(balance - withdrawBalance);
+ alert("Penarikan saldo sukses");
+ }else {
+ alert("Penarikan saldo gagal");
+ }
+ });
+ }
+
+ useEffect(() => {
+ if(!username) {
+ alert("Perlu login");
+ return;
+ }
+ getBalance(username).then((res) => {
+ console.log(res);
+ setBalance(res.data);
+ });
+ }, []);
+
+ return (
+ <Flex
+ h={'95vh'}
+ align={'center'}
+ justify={'center'}
+ bg={useColorModeValue('red.800', 'white')}>
+ <Stack spacing={8} mx={'auto'} maxW={'lg'} py={12} px={6}
+ bg={useColorModeValue('white', 'gray.700')}
+ minW={'70vh'}
+ >
+ <Stack align={'center'}>
+ <Heading fontSize={'4xl'}>Saldo</Heading>
+ </Stack>
+ <Box
+ rounded={'lg'}
+ bg={useColorModeValue('white', 'gray.700')}
+ boxShadow={'lg'}
+ pl={8}
+ pr={8}
+ >
+ <Heading fontSize={'lg'}>Saldo Kamu</Heading>
+ <Text fontSize={'lg'} pt={3} pl={1}>{balance}</Text>
+ </Box>
+ <Box
+ rounded={'lg'}
+ bg={useColorModeValue('white', 'gray.700')}
+ boxShadow={'lg'}
+ pl={8}
+ pr={8}
+ >
+ <form onSubmit={handleSubmit}>
+ <Stack spacing={4}>
+ <FormControl id="withdraw">
+ <FormLabel>Tarik Saldo</FormLabel>
+ <Input name="withdraw" type="number"
+ value={withdrawBalance}
+ min={0}
+ max={balance}
+ onChange={(e) => setWithdrawBalance(parseInt(e.target.value))}
+ borderColor={"black"}
+ />
+ </FormControl>
+ <Button
+ bg={'blue.400'}
+ color={'white'}
+ _hover={{
+ bg: 'blue.500',
+ }}
+ type="submit">
+ Tarik
+ </Button>
+ </Stack>
+ </form>
+ </Box>
+ </Stack>
+ </Flex>
+ )
+}
+
+
\ No newline at end of file
diff --git a/src/utils/Balance.ts b/src/utils/Balance.ts
new file mode 100644
index 0000000..c854d5c
--- /dev/null
+++ b/src/utils/Balance.ts
@@ -0,0 +1,13 @@
+import { fetchBalance, withdraw } from "../api/Balance";
+
+
+export async function getBalance(username : string) {
+ const balance = await fetchBalance(username);
+ return balance;
+}
+
+export async function withdrawFunction(username : string, withdrawBalance : number) {
+ const response = await withdraw(username, withdrawBalance);
+ const success = (response.data === "success");
+ return success;
+}
--
GitLab