move fetch() within userList.js

nusmoney_client/package-lock.json

@@ -4551,11 +4551,12 @@
       }
     },
     "dom-helpers": {
-      "version": "3.4.0",
+      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
-      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
       "requires": {
-        "@babel/runtime": "^7.1.2"
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
       }
     },
     "dom-serializer": {
@@ -10678,14 +10679,14 @@
       }
     },
     "react-transition-group": {
-      "version": "2.9.0",
+      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
-      "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
       "requires": {
-        "dom-helpers": "^3.4.0",
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
         "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2",
+        "prop-types": "^15.6.2"
-        "react-lifecycles-compat": "^3.0.4"
       }
     },
     "reactstrap": {
@@ -10698,6 +10699,27 @@
         "prop-types": "^15.5.8",
         "react-popper": "^1.3.6",
         "react-transition-group": "^2.3.1"
+      },
+      "dependencies": {
+        "dom-helpers": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+          "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+          "requires": {
+            "@babel/runtime": "^7.1.2"
+          }
+        },
+        "react-transition-group": {
+          "version": "2.9.0",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
+          "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+          "requires": {
+            "dom-helpers": "^3.4.0",
+            "loose-envify": "^1.4.0",
+            "prop-types": "^15.6.2",
+            "react-lifecycles-compat": "^3.0.4"
+          }
+        }
       }
     },
     "read-pkg": {

nusmoney_client/package.json

@@ -10,6 +10,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.3",
+    "react-transition-group": "^4.4.1",
     "reactstrap": "^8.5.1"
   },
   "scripts": {

nusmoney_client/src/App.css

@@ -15,7 +15,7 @@
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  min-height: 60vh;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -41,3 +41,26 @@
     transform: rotate(360deg);
   }
 }
+
+
+.remove-btn {
+  margin-right: 0.5rem;
+}
+
+.fade-enter{
+  opacity: 0.01;
+}
+
+.fade-enter-active{
+  opacity: 1;
+  transition: opacity 1000ms ease-in;
+}
+
+.fade-exit {
+  opacity: 1;
+}
+
+.fade-exit-active {
+  opacity: 0.01;
+  transition: opacity 1000ms ease-in;
+}

nusmoney_client/src/App.js

@@ -7,37 +7,13 @@ import UserList from "./components/userList";
 class App extends React.Component {
     constructor(props) {
         super(props);
-        this.state = { serverResponse: "", user: [] };
+        this.state = { serverResponse: "" };
-    }
-
-    callAPIServer() {
-/*         let bodyData = {
-            limit: 12,
-        }; */
-
-        // setup automatic proxy in package.json.
-        // thus eliminating the need to type "http://localhost:7000"
-        // "proxy" : "http://localhost:7000"
-        fetch("/users?limit=18", {
-            method: "GET",
-            /* body: JSON.stringify(bodyData), */
-            headers: { "Content-type": "application/json; charset=UTF-8" },
-        }).then((res) => res.json())
-            .then((data) => {
-                console.log(data);
-                this.setState({ serverResponse: JSON.stringify(data), user: data });
-                console.log(this.state.user);
-            })
-            .catch((err) => {
-              console.log(err);
-              return err;
-            });
     }
 
     componentDidMount() {
         // react lifecycle method componentDidMount()
         // will execute the callAPIServer() methods afteer the component mounts
-        this.callAPIServer();
+        console.log("App Mounted");
     }
 
     render() {
@@ -46,20 +22,12 @@ class App extends React.Component {
                 <header className="App-header">
                     <img src={logo} className="App-logo" alt="logo" />
                     <h1 className="App-title">
-                        Welcome to FintechSG React Course
+                        Welcome to FintechSG NUSBank
                     </h1>
                     {/* <h2 className="App-intro">{this.state.serverResponse}</h2> */}
                 </header>
+                <br></br>
                 <UserList />
-                <div className="App-list">
-                    <ul>
-                        {this.state.user.map(({ user_id, name, mail, nric}) => (
-                            <li key={user_id}>
-                                {user_id} {name} {nric} {mail}
-                            </li>
-                        ))}
-                    </ul>
-                </div>
             </div>
         );
     }

nusmoney_client/src/components/userList.js

@@ -7,17 +7,60 @@ import uuid from "uuid";
 class UserList extends Component {
     state = {
         items: [
-            { id: uuid(), name: "Hell1", mail: "bb", nric: "" },
+            {
-            { id: uuid(), name: "Hell2", mail: "aa", nric: "" },
+                user_id: uuid(),
+                name: "Hell1",
+                mail: "bb",
+                nric: "",
+                mobile: "",
+            },
+            {
+                user_id: uuid(),
+                name: "Hell2",
+                mail: "aa",
+                nric: "",
+                mobile: "",
+            },
         ],
     };
 
+    callAPIServer() {
+        /*         let bodyData = {
+                    limit: 12,
+                }; */
+
+        // setup automatic proxy in package.json.
+        // thus eliminating the need to type "http://localhost:7000"
+        // "proxy" : "http://localhost:7000"
+        fetch("/users?limit=18", {
+            method: "GET",
+            /* body: JSON.stringify(bodyData), */
+            headers: { "Content-type": "application/json; charset=UTF-8" },
+        })
+            .then((res) => res.json())
+            .then((data) => {
+                console.log(data);
+                this.setState({ items: data });
+                //console.log(this.state.user);
+            })
+            .catch((err) => {
+                console.log(err);
+                return err;
+            });
+    }
+
+    componentDidMount() {
+        // react lifecycle method componentDidMount()
+        // will execute the callAPIServer() methods afteer the component mounts
+        this.callAPIServer();
+    }
+
     render() {
         // destructure {}
         const { items } = this.state;
 
         return (
-            <Container>
+            <Container className="App-list">
                 <Button
                     color="dark"
                     style={{ marginBottom: "2em" }}
@@ -28,7 +71,7 @@ class UserList extends Component {
                                 items: [
                                     ...state.items,
                                     {
-                                        id: uuid(),
+                                        user_id: uuid(),
                                         name: name,
                                         mail: "b@ccd",
                                         nric: "SSS",
@@ -43,9 +86,9 @@ class UserList extends Component {
 
                 <ListGroup>
                     <TransitionGroup className="user-list">
-                        {items.map(({ id, name, mail, nric }) => (
+                        {items.map(({ user_id, name, mail, nric, mobile }) => (
                             <CSSTransition
-                                key={id}
+                                key={user_id}
                                 timeout={500}
                                 /* className="fade" */
                             >
@@ -55,12 +98,12 @@ class UserList extends Component {
                                         color="danger"
                                         size="sm"
                                         onClick={() => {
-                                            console.log(`Delete ${id}`);
+                                            console.log(`Delete ${user_id}`);
                                         }}
                                     >
                                         &times;
                                     </Button>
-                                    {name} {nric} {mail}
+                                    {user_id} {name} {nric} {mail} {mobile}
                                 </ListGroupItem>
                             </CSSTransition>
                         ))}