frontend: demo page posts + gets backend

src/main/frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useState} from 'react';
+import {useCallback, useEffect, useState} from 'react';
 import {Button} from "@/components/ui/button";
 import {
     Table,
@@ -12,53 +12,76 @@ import {
 import "@/index.css";
 
 function App() {
-  const [accounts, setAccounts] = useState<Account[]>([]);
+    const [accounts, setAccounts] = useState<Account[]>([]);
 
-  useEffect(() => {
-    console.log("mounted"); // TODO remove
+    const getFakeAccounts = useCallback(() => {
+        fetch("http://localhost:8080/accounts")
+            .then(response => response.json())
+            .then(data => setAccounts(data))
+            .catch(error => console.error(error));
+    }, [accounts]);
 
-    fetch("http://localhost:8080/accounts")
-        .then(response => response.json())
-        .then(data => setAccounts(data))
-        .catch(error => console.error(error));
+    const postFakeAccount = () => {
+        fetch("http://localhost:8080/account", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                "acctId": 12,
+                "userType": 0,
+                "username": "test",
+                "password": "password",
+                "email": "[email protected]",
+                "phoneNumber": "123-456-7890",
+            })
+        }).then(response => response.json())
+            .then(data => console.log(data))
+            .then(() => getFakeAccounts())
+            .catch(error => console.error(error));
+    };
 
-    return () => {
-      console.log("unmounted"); // TODO remove
-    }
-  }, []);
+    useEffect(() => {
+        console.log("mounted"); // TODO remove
 
+        getFakeAccounts();
+
+        return () => {
+          console.log("unmounted"); // TODO remove
+        }
+    }, []);
 
     return (
-    <div className={"flex m-auto w-fit h-screen justify-center flex-col items-center"}>
-        <h1>Commerce Bank Frontend</h1>
-        <Button  className="my-6">This does nothing</Button>
-        <Table>
-            <TableCaption>list of Accounts in DB</TableCaption>
-            <TableHeader>
-                <TableRow>
-                    <TableHead>Id</TableHead>
-                    <TableHead>Type</TableHead>
-                    <TableHead>username</TableHead>
-                    <TableHead>Password</TableHead>
-                    <TableHead>email</TableHead>
-                    <TableHead>phoneNumber</TableHead>
-                </TableRow>
-            </TableHeader>
-            <TableBody>
-                {accounts.map((account) => (
-                    <TableRow key={account.acctId}>
-                        <TableCell>{account.acctId}</TableCell>
-                        <TableCell>{account.userType}</TableCell>
-                        <TableCell>{account.username}</TableCell>
-                        <TableCell>{account.password}</TableCell>
-                        <TableCell>{account.email}</TableCell>
-                        <TableCell>{account.phoneNumber}</TableCell>
+        <div className={"flex m-auto w-fit h-full justify-center flex-col items-center"}>
+            <h1>Commerce Bank Frontend</h1>
+            <Button className="my-6" onClick={postFakeAccount}>This creates a fake class</Button>
+            <Table>
+                <TableCaption>list of Accounts in DB</TableCaption>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead>Id</TableHead>
+                        <TableHead>Type</TableHead>
+                        <TableHead>username</TableHead>
+                        <TableHead>Password</TableHead>
+                        <TableHead>email</TableHead>
+                        <TableHead>phoneNumber</TableHead>
                     </TableRow>
-                ))}
-            </TableBody>
-        </Table>
-    </div>
-  )
+                </TableHeader>
+                <TableBody>
+                    {accounts.map((account) => (
+                        <TableRow key={account.acctId}>
+                            <TableCell>{account.acctId}</TableCell>
+                            <TableCell>{account.userType}</TableCell>
+                            <TableCell>{account.username}</TableCell>
+                            <TableCell>{account.password}</TableCell>
+                            <TableCell>{account.email}</TableCell>
+                            <TableCell>{account.phoneNumber}</TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </div>
+    )
 }
 
 export default App