From 953b13d0f08d505ede652c094792aeee212d1a88 Mon Sep 17 00:00:00 2001 From: yikth Date: Fri, 11 Sep 2020 18:27:44 +0800 Subject: [PATCH] move fetch() within userList.js --- nusmoney_client/package-lock.json | 42 +++++++++++---- nusmoney_client/package.json | 1 + nusmoney_client/src/App.css | 25 ++++++++- nusmoney_client/src/App.js | 40 ++------------- nusmoney_client/src/components/userList.js | 59 +++++++++++++++++++--- 5 files changed, 112 insertions(+), 55 deletions(-) diff --git a/nusmoney_client/package-lock.json b/nusmoney_client/package-lock.json index ce2e30e..6bba023 100644 --- a/nusmoney_client/package-lock.json +++ b/nusmoney_client/package-lock.json @@ -4551,11 +4551,12 @@ } }, "dom-helpers": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz", - "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz", + "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", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", - "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==", + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", + "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", - "react-lifecycles-compat": "^3.0.4" + "prop-types": "^15.6.2" } }, "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": { diff --git a/nusmoney_client/package.json b/nusmoney_client/package.json index b98a8b3..608d9b8 100644 --- a/nusmoney_client/package.json +++ b/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": { diff --git a/nusmoney_client/src/App.css b/nusmoney_client/src/App.css index c956185..b47d4e6 100644 --- a/nusmoney_client/src/App.css +++ b/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; +} \ No newline at end of file diff --git a/nusmoney_client/src/App.js b/nusmoney_client/src/App.js index b3708ee..232e075 100644 --- a/nusmoney_client/src/App.js +++ b/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: [] }; - } - - 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; - }); + this.state = { serverResponse: "" }; } 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 {
logo

- Welcome to FintechSG React Course + Welcome to FintechSG NUSBank

{/*

{this.state.serverResponse}

*/}
+

-
-
    - {this.state.user.map(({ user_id, name, mail, nric}) => ( -
  • - {user_id} {name} {nric} {mail} -
    • - ))} -
-
); } diff --git a/nusmoney_client/src/components/userList.js b/nusmoney_client/src/components/userList.js index 16c5064..36885d9 100644 --- a/nusmoney_client/src/components/userList.js +++ b/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 ( - + - {name} {nric} {mail} + {user_id} {name} {nric} {mail} {mobile} ))}