[t5] small improvements (#17)

* Add 'You' in request history.

* Add home page content to make it complete.

* Make error message more informative.

* Modify README to make it clearer.

* Add more.

* Remove YOU as it's not always the current user.

README.md

@@ -4,40 +4,56 @@ This is an application which contains a connected flask backend to a react front
 
 ## How to build and run locally
 #### Build
-1. in backend dir, run ```python3 -m venv env```
+1. In backend dir, run ```python3 -m venv env```
 2. **activate:** `source env/bin/activate`
-3. `pip install -r requirements.txt`
-4. Return to the base directory and run: `npm install` before running the scripts below.
-5. Steps
+3. Run `pip install -r requirements.txt` to install necessary Python requirements.
+4. Return to the base directory and run: `npm install` before going to the ***Run backend*** and ***Run web app*** steps below.
 
 #### Run backend
-1. `flask run`(preferred) or  `npm run start-backend`, or `python3 server.py` directly
+1. `flask run`(preferred), or  `npm run start-backend`, or `python3 server.py` directly
 2. Open [http://localhost:5000](http://localhost:5000) to view it in the browser.
 
 #### Run web app
 1. `npm start`
 2. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
 ## Features
-This client shows a subset of our **EasyMoney** service, i.e. it can be used to build a personal money management tool that serves just like online banking, c2c money service, for example. More features can be added to emphasize the social interactions 
+This client shows a subset of our **[EasyMoney](https://github.com/howieraem/COMS4156-ASE)** service, i.e. it can be used to build a personal money management tool that serves just like online banking, c2c money service, for example. More features can be added to emphasize the social interactions 
 1. **Authentication**: login/signup/logout are available in this client. It's the First step in user workflow.
 2. **Transfer**: transfers are like one-way payment from the user to someone else. Transactions are executed immediately. No actions taken on the receiver side.
 3. **Request**: requests are pending once sent, and receiver needs to take actions, i.e. accept/decline, to make the transaction or decline the request, respectively.
 4. **User Profile**: a simple profile page for viewing user profile details, making deposit/withdrawing money.
+5. **Feed**: display all the transactions in which the current user is involved.
 
 ## Testings
 We use manual testing to demonstrate the workflow between this client and our service.
-1. First setup and run 1) service, 2) backend, 3) front-end. (NOTE: if service is deployed to EB, then no
-need for step 1)
-1. **Authentication workflow**: first visit the website(localhost:3000), then click on the login button on the nav bar, and then you can login with exisitng credentials. On the bottom there's signup link, and you can follow it to register. The auth feature uses our auth service to register/login.
-2. **Money transfer workflow**: after logged in, click on the transfer button on the nav bar, and use the search bar to find the person you want to transfer money from, type in other details like amount and descriptions, and then hit send.
-3. **Money request workflow**: similar to transfer, except that there's a new section which contains cards of items, and each item is a pending request sent to YOU. You can either accept or decline the request, and balance would be updated accordingly.
+1. First follow ***How to build and run locally*** to set up the client and then visit [http://localhost:3000](http://localhost:3000)
+2. **Authentication Workflow**:
+   1. Click on the login button in the nav bar. The auth feature uses our auth service to register/login. 
+   2. If you're new to the website, click the signup link at the bottom, and you can fill in information to register.
+   3. If you've already signed up, login with exisitng credentials.
+3. **Deposite/Withdraw Workflow**:
+   1. Click on the profile button in the nav bar.
+   2. Fill in the amount of money you want to deposit to/withdraw from your account, and then hit the button.
+   3. You should see your balance immediately changed in the profile page.
+4. **Money Transfer Workflow**
+   1. After logging in, click on the transfer button in the nav bar
+   2. Use the search bar to find the person you want to transfer money from, type in other details like amount, descriptions, and category, and then hit make transfer.
+   3. If transfer is successfully completed, a successful banner will pop up; otherwise, a failed notice with specific error message will pop up.
+5. **Money Request Workflow**
+   1. Fill in the request similar to the steps in ***Money Transfer Workflow***
+   2. Now there's a new section which contains cards of items, and each item is a pending request.
+   3. If you send the request, there will be no accept/decline button on your side. You can just view the pending requests sent BY YOU.
+   4. If you receive the request, you can view the pending requests sending TO YOU. There will be accept/decline button for you to accept or decline the request, and balance will be updated accordingly as soon as you hit either button.
+6. **Feed Workflow**:
+   1. Click on the feed button in the nav bar.
+   2. You should see your transactions displayed in feed.
 
 
 ## Some Common Issues
-1. failed to activate python env
-   1. *try use conda instead. Run conda deactivate, then conda activate, then conda install xx to install missing dependencies.*
-2. some requirements are missing?
-   1. *try use conda, or manually install the missing packages*
-3. cannot run `flask run`?
-   1. *You should configure by `export FLASK_APP = server.py` and then build* 
+1. Failed to activate python env?
+   1. Try use **conda** instead. Run `conda deactivate`, then `conda activate`, then `conda install xx` to install missing dependencies.
+2. Some requirements are missing?
+   1. Try use **conda**, or manually install the missing packages.
+3. Cannot run `flask run`?
+   1. You should configure by `export FLASK_APP = server.py` and then build. 

src/App.js

@@ -20,8 +20,8 @@ function App() {
     <BrowserRouter>
       <MyNavbar userData={userData}/> 
       <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/home" element={<Home />} />
+        <Route path="/" element={<Home userData={userData}/>} />
+        <Route path="/home" element={<Home userData={userData}/>} />
         <Route path="/feed" element={<Feed userData={userData}/>} />
         <Route path="/request" element={<RequestPage userData={userData}/>} />
         <Route path="/transfer" element={<TransferPage userData={userData} />} />

src/components/Home.js

@@ -1,5 +1,25 @@
 import React from 'react'
-const Home = () => (
-    <></>
-)
+import {Container} from "react-bootstrap";
+const Home = (props) => {
+
+    return (
+        <Container>
+            <br/>
+            <h1>Welcome to Zenmo!</h1>
+            <br/>
+            <h4>This is a money management and payment tool with which you can:</h4>
+            <ul>
+                <li>deposit and withdraw money</li>
+                <li>make immediate money transfer</li>
+                <li>handle money requests</li>
+                <li>view transaction feed</li>
+            </ul>
+            <h4>You'll love it  : )</h4>
+            <br/>
+            {props?.userData?.token ?
+                <h4><em>Click on the Nav bar items to begin.</em></h4> : <h4><em>Please log in first!</em></h4>
+            }
+        </Container>
+    )
+};
 export default Home

src/components/MyNavbar.js

@@ -13,7 +13,7 @@ const MyNavbar = (props) => {
 
       <Navbar bg="light" variant="light">
       <Container>
-        <Navbar.Brand>Zenmo</Navbar.Brand>
+        <Navbar.Brand as={Link} to="/home">Zenmo</Navbar.Brand>
         <Nav className="me-auto">
           {username && (
             <>

src/components/Request/RequestEntry.js

@@ -130,7 +130,7 @@ const RequestEntry = (props) => {
             <Card className={visible}>
                 <Card.Title>
                     <Row>
-                        <Col md={2}>
+                        <Col md={3}>
                             <Badge pill bg="warning" text="dark" 
                                 onMouseEnter={() => setLoadTo(true)}
                                 data-for="requestToolTip" 

src/components/TransferPage.js

@@ -12,6 +12,7 @@ const TransferPage = (props) => {
     const onDescription = (e) => setDescription(e.target.value);
     const onCategory = (e) => setCategory(e.target.value);
     const [notice, setNotice] = useState("");
+    const [success, setSuccess] = useState("");
     const [toUid, setToUid] = useState("");
     const formRef = useRef(null);
 
@@ -38,20 +39,32 @@ const TransferPage = (props) => {
                 }),
             });
             if (res.status === 200) {
-                setNotice("Transfer completed successfully");
+                setSuccess("Transfer completed successfully");
                 setAmount(0.);  // prevents user making duplicate transfer by mistake
             } else {
-                setNotice("Transfer failed due to some invalid operations");
+                let resJson = await res.json();
+                let errorFields = resJson.errorFields;
+                let errorMsg = "";
+                for (let i = 0; i < errorFields.length; i++) {
+                    errorMsg += errorFields[i] + " ";
+                }
+                setNotice(errorMsg);
             }
             formRef.current.reset();
         } catch (err) {
             console.log(err);
         }
     };
 
+    const noticeBanner = ( notice &&
+        <>Transfer failed. Error fields:&nbsp;
+            <span>{notice}</span>
+        </>
+    );
+
     return (
         <Container>
-            <NoticeBanner children={notice}/>            
+            <NoticeBanner children={success || noticeBanner}/>
             <Card className="shadow">
                 <Card.Body>
                     <div className="mb-3 mt-md-4">