learn-co-curriculum · yuxiShi1229 · Aug 17, 2024 · Aug 17, 2024 · Aug 17, 2024 · Aug 17, 2024
diff --git a/.canvas b/.canvas
diff --git a/.gitignore b/.gitignore
@@ -64,3 +64,5 @@ __pycache__
 instance
 .vscode
 package-lock.json
+
+.env
diff --git a/Pipfile b/Pipfile
@@ -13,6 +13,8 @@ sqlalchemy-serializer = "*"
 flask-restful = "*"
 flask-cors = "*"
 faker = "*"
+flask-bcrypt = "*"
+python-dotenv = "*"
 
 [requires]
 python_full_version = "3.8.13"
diff --git a/Pipfile.lock b/Pipfile.lock
diff --git a/client/package.json b/client/package.json
@@ -7,13 +7,17 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "ajv": "^8.17.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "5.0.1",
+    "recharts": "^2.12.7",
     "web-vitals": "^2.1.4"
   },
-  "devDependencies": {"@babel/plugin-proposal-private-property-in-object":"^7.21.11"},
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",

diff --git a/client/public/index.html b/client/public/index.html
@@ -29,7 +29,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Reciplease</title>
+    <title>FlatPay</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/client/src/Routes.js b/client/src/Routes.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Switch, Route, Redirect } from 'react-router-dom';
+import Transactions from './components/Transaction/Transactions';
+import CreditPage from './pages/CreditPage';
+import DebitPage from './pages/DebitPage';
+import StatsPage from './pages/StatsPage';
+import FriendshipPage from './pages/FriendshipPage';
+
+function Routes({ currentUser }) {
+  if (!currentUser) return <Redirect to="/" />;
+
+  return (
+    <Switch>
+      <Route exact path="/">
+        <Transactions currentUser={currentUser} />
+      </Route>
+      <Route path="/credit">
+        <CreditPage currentUser={currentUser} />
+      </Route>
+      <Route path="/debit">
+        <DebitPage currentUser={currentUser} />
+      </Route>
+      <Route path="/stats">
+        <StatsPage currentUser={currentUser} />
+      </Route>
+      <Route path="/friendship">
+        <FriendshipPage currentUser={currentUser} />
+      </Route>
+    </Switch>
+  );
+}
+
+export default Routes;
diff --git a/client/src/components/App.js b/client/src/components/App.js
@@ -1,8 +1,54 @@
-import React, { useEffect, useState } from "react";
-import { Switch, Route } from "react-router-dom";
+import React, { useState, useEffect } from 'react';
+import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
+import NavBar from './NavBar';
+import UserPanel from './UserPanel/UserPanel';
+import CreditPage from '../pages/CreditPage';
+import DebitPage from '../pages/DebitPage';
+import StatsPage from '../pages/StatsPage';
+import FriendshipPage from '../pages/FriendshipPage';
 
 function App() {
-  return <h1>Project Client</h1>;
+  const [currentUser, setCurrentUser] = useState(null);
+
+  useEffect(() => {
+    fetch('/check_session')
+      .then(res => {
+        if (res.status === 200) {
+          res.json().then(data => setCurrentUser(data));
+        }
+      });
+  }, []);
+
+  return (
+    <Router>
+      <div className="App">
+        <h1>FlatPay</h1>
+        <NavBar currentUser={currentUser} setCurrentUser={setCurrentUser} />
+        <Switch>
+          <Route exact path="/">
+            <UserPanel currentUser={currentUser} setCurrentUser={setCurrentUser} />
+          </Route>
+          {currentUser && (
+            <>
+              <Route path="/credit">
+                <CreditPage currentUser={currentUser} />
+              </Route>
+              <Route path="/debit">
+                <DebitPage currentUser={currentUser} />
+              </Route>
+              <Route path="/stats">
+                <StatsPage currentUser={currentUser} />
+              </Route>
+              <Route path="/friendship">
+                <FriendshipPage currentUser={currentUser} />
+              </Route>
+            </>
+          )}
+          <Redirect to="/" />
+        </Switch>
+      </div>
+    </Router>
+  );
 }
 
-export default App;
+export default App;
diff --git a/client/src/components/NavBar.js b/client/src/components/NavBar.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Link, useHistory } from 'react-router-dom';
+
+function NavBar({ currentUser, setCurrentUser }) {
+  const history = useHistory();
+
+  const handleLogout = () => {
+    fetch('/logout', { method: 'DELETE' })
+      .then(() => {
+        setCurrentUser(null);
+        history.push('/');
+      });
+  };
+
+  if (!currentUser) return null;
+
+  return (
+    <nav>
+      <Link to="/">Home</Link>
+      <Link to="/credit">Credit</Link>
+      <Link to="/debit">Debit</Link>
+      <Link to="/stats">Stats</Link>
+      <Link to="/friendship">Friends</Link>
+      <button onClick={handleLogout}>Logout</button>
+    </nav>
+  );
+}
+
+export default NavBar;
diff --git a/client/src/components/Transaction/Payment.js b/client/src/components/Transaction/Payment.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function Payment() {
+  return (
+    <div>Send Payment</div>
+  )
+}
diff --git a/client/src/components/Transaction/TransactionRequest.js b/client/src/components/Transaction/TransactionRequest.js
@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react';
+
+function TransactionRequest({ createRequest, currentUser }) {
+
+  const [amount, setAmount] = useState('');
+  const [selectedUser, setSelectedUser] = useState('');
+  const [year, setYear] = useState(new Date().getFullYear());
+  const [users, setUsers] = useState([]);
+  const [userRole, setUserRole] = useState('sender'); 
+
+
+  useEffect(() => {
+    fetch('/users')
+
+      .then(res => res.json())
+      .then(data => setUsers(data.filter(user => user.id !== currentUser.id)));
+  }, [currentUser.id]);
+
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    const requestData = {
+      amount: parseFloat(amount),
+      year: parseInt(year),
+      [userRole === 'sender' ? 'requestee' : 'requestor']: parseInt(selectedUser),
+      [userRole === 'sender' ? 'requestor' : 'requestee']: currentUser.id
+    };
+    createRequest(requestData);
+    setAmount('');
+    setSelectedUser('');
+    setYear(new Date().getFullYear());
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <h3>New Transaction:</h3>
+
+      <div>
+        <label>
+          <input
+            type="radio"
+            value="sender"
+            checked={userRole === 'sender'}
+            onChange={() => setUserRole('sender')}
+          />
+          Payment
+        </label>
+        <label>
+          <input
+            type="radio"
+            value="receiver"
+            checked={userRole === 'receiver'}
+            onChange={() => setUserRole('receiver')}
+          />
+          Request
+        </label>
+      </div>
+
+
+      <select value={selectedUser} onChange={(e) => setSelectedUser(e.target.value)} required>
+        <option value="">Select a User</option>
+        {users.map(user => (
+          <option key={user.id} name = "user" value={user.id}>
+            {user.username}
+          </option>
+        ))}
+      </select>
+
+      <input
+        type="number"
+        value={amount}
+        onChange={(e) => setAmount(e.target.value)}
+        placeholder="Amount"
+        required
+      />
+
+      <input
+        type="number"
+        value={year}
+        onChange={(e) => setYear(e.target.value)}
+        placeholder="Year"
+        min="1900"
+        max="2099"
+        step="1"
+        required
+      />
+
+      <button type="submit">Add Transaction</button>
+    </form>
+  );
+}
+
+export default TransactionRequest;
-Original file line number
+Diff line change
@@ Expand Up / @@ -64,3 +64,5 @@ __pycache__ @@
     instance
     .vscode
     package-lock.json
+    .env