feat: user balance withdraw

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>

src/api/Balance.ts

+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;
+    }
+}

src/components/Navbar.tsx

@@ -26,8 +26,8 @@ const NAV_ITEMS: Array<NavItem> = [
     href: '/',
   },
   {
-    label: 'Transfer',
-    href: 'Transfer',
+    label: 'Balance',
+    href: 'Balance',
   },
   {
     label: 'History',

src/pages/Balance.tsx

+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

src/utils/Balance.ts

+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;
+}