From ef1843a61f1f0967265d8e47aad04c0887672443 Mon Sep 17 00:00:00 2001 From: yikth Date: Mon, 14 Sep 2020 16:07:33 +0800 Subject: [PATCH] move addUser(), deleteUser() into usersFetch.js --- nusmoney_client/src/App.js | 2 +- .../src/components/form/Button.jsx | 3 +- .../src/components/form/FormContainer.jsx | 25 +------- nusmoney_client/src/components/userAdd.jsx | 24 -------- nusmoney_client/src/components/userDelete.jsx | 26 +-------- nusmoney_client/src/components/userList.jsx | 3 +- nusmoney_client/src/logic/usersFetch.js | 55 ++++++++++++++++++ nusmoney_client/src/logos/brand-logo.png | Bin 0 -> 3781 bytes nusmoney_client/src/{ => logos}/logo.svg | 0 9 files changed, 64 insertions(+), 74 deletions(-) create mode 100644 nusmoney_client/src/logic/usersFetch.js create mode 100644 nusmoney_client/src/logos/brand-logo.png rename nusmoney_client/src/{ => logos}/logo.svg (100%) diff --git a/nusmoney_client/src/App.js b/nusmoney_client/src/App.js index b2ffc51..df57a4f 100644 --- a/nusmoney_client/src/App.js +++ b/nusmoney_client/src/App.js @@ -1,6 +1,6 @@ import React from "react"; import { BrowserRouter, Route, Switch } from "react-router-dom"; -import logo from "./logo.svg"; +import logo from "./logos/brand-logo.png"; import "bootstrap/dist/css/bootstrap.min.css"; import "./App.css"; diff --git a/nusmoney_client/src/components/form/Button.jsx b/nusmoney_client/src/components/form/Button.jsx index 69f0cc0..a7df120 100644 --- a/nusmoney_client/src/components/form/Button.jsx +++ b/nusmoney_client/src/components/form/Button.jsx @@ -10,4 +10,5 @@ const Button = (props) => { ) } -export default Button; \ No newline at end of file +export default Button; + diff --git a/nusmoney_client/src/components/form/FormContainer.jsx b/nusmoney_client/src/components/form/FormContainer.jsx index e5fde1c..61954c4 100644 --- a/nusmoney_client/src/components/form/FormContainer.jsx +++ b/nusmoney_client/src/components/form/FormContainer.jsx @@ -3,6 +3,7 @@ import React, { Component } from "react"; import Input from "./Input"; import Button from "./Button"; import uuid from "uuid"; +import apiFetch from '../../logic/usersFetch'; class FormContainer extends Component { constructor(props) { @@ -38,7 +39,7 @@ class FormContainer extends Component { e.preventDefault(); let userData = this.state.newUser; console.log("Form submit"); - this.addUser(userData); + apiFetch.addUser(userData); } handleClearForm(e) { @@ -55,28 +56,6 @@ class FormContainer extends Component { }); } - addUser(bodyData) { - console.log(bodyData); - // setup automatic proxy in package.json. - // thus eliminating the need to type "http://localhost:7000" - // "proxy" : "http://localhost:7000" - fetch(`/users`, { - method: "POST", - body: JSON.stringify(bodyData), - headers: { "Content-type": "application/json; charset=UTF-8" }, - }) - .then((res) => res.text()) - .then((data) => { - console.log(data); - return true; - }) - .catch((err) => { - console.log(err); - - return false; - }); - } - handleInput(e) { let value = e.target.value; let name = e.target.name; diff --git a/nusmoney_client/src/components/userAdd.jsx b/nusmoney_client/src/components/userAdd.jsx index b5f8186..2374e7d 100644 --- a/nusmoney_client/src/components/userAdd.jsx +++ b/nusmoney_client/src/components/userAdd.jsx @@ -26,30 +26,6 @@ class UserAdd extends Component { callAPIServer() {} - addUser(bodyData) { - console.log(bodyData); - // setup automatic proxy in package.json. - // thus eliminating the need to type "http://localhost:7000" - // "proxy" : "http://localhost:7000" - fetch(`/users`, { - method: "POST", - body: JSON.stringify(bodyData), - headers: { "Content-type": "application/json; charset=UTF-8" }, - }) - .then((res) => res.text()) - .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 diff --git a/nusmoney_client/src/components/userDelete.jsx b/nusmoney_client/src/components/userDelete.jsx index 984e57c..40c0c99 100644 --- a/nusmoney_client/src/components/userDelete.jsx +++ b/nusmoney_client/src/components/userDelete.jsx @@ -1,4 +1,5 @@ import React, { Component } from "react"; +import apiFetch from '../logic/usersFetch'; import uuid from "uuid"; @@ -35,36 +36,13 @@ class UserDelete extends Component { alert(`User Id ${this.state.value} was submitted`); event.preventDefault(); - this.deleteUser(this.state.value); + apiFetch.deleteUser(this.state.value); } - callAPIServer() { } - deleteUser(id) { - - // setup automatic proxy in package.json. - // thus eliminating the need to type "http://localhost:7000" - // "proxy" : "http://localhost:7000" - fetch(`/users/${id}`, { - method: "DELETE" - }) - .then((res) => res.json()) - .then((data) => { - console.log(data); - //alert(`Deleted user ${id}`); - //this.setState({ items: data }); - //console.log(this.state.user); - }) - .catch((err) => { - console.log(err); - alert(`Fail to delete user ${id}`); - return err; - }); - } - componentDidMount() { // react lifecycle method componentDidMount() // will execute the callAPIServer() methods afteer the component mounts diff --git a/nusmoney_client/src/components/userList.jsx b/nusmoney_client/src/components/userList.jsx index a499241..ad5711f 100644 --- a/nusmoney_client/src/components/userList.jsx +++ b/nusmoney_client/src/components/userList.jsx @@ -1,6 +1,7 @@ import React, { Component } from "react"; import { Container, ListGroup, ListGroupItem, Button } from "reactstrap"; import { CSSTransition, TransitionGroup } from "react-transition-group"; +import deleteUser from '../logic/usersFetch'; import uuid from "uuid"; @@ -75,7 +76,7 @@ class UserList extends Component { color="danger" size="sm" onClick={() => { - this.deleteUser(user_id); + deleteUser(user_id); console.log(`Delete ${user_id}`); }} > diff --git a/nusmoney_client/src/logic/usersFetch.js b/nusmoney_client/src/logic/usersFetch.js new file mode 100644 index 0000000..343ede6 --- /dev/null +++ b/nusmoney_client/src/logic/usersFetch.js @@ -0,0 +1,55 @@ + +class userFetch{ + + addUser = (bodyData) => { + console.log(bodyData); + // setup automatic proxy in package.json. + // thus eliminating the need to type "http://localhost:7000" + // "proxy" : "http://localhost:7000" + fetch(`/users`, { + method: "POST", + body: JSON.stringify(bodyData), + headers: { "Content-type": "application/json; charset=UTF-8" }, + }) + .then((res) => res.text()) + .then((data) => { + console.log(data); + + //this.setState({ items: data }); + //console.log(this.state.user); + + return true; + }) + .catch((err) => { + console.log(err); + + return false; + }); + } + + deleteUser = (id) => { + // setup automatic proxy in package.json. + // thus eliminating the need to type "http://localhost:7000" + // "proxy" : "http://localhost:7000" + fetch(`/users/${id}`, { + method: "DELETE" + }) + .then((res) => res.json()) + .then((data) => { + console.log(data); + //alert(`Deleted user ${id}`); + //this.setState({ items: data }); + //console.log(this.state.user); + return true; + }) + .catch((err) => { + console.log(err); + alert(`Fail to delete user ${id}`); + return false; + }); + } +} + +const apiFetch = new userFetch(); + +export default apiFetch; \ No newline at end of file diff --git a/nusmoney_client/src/logos/brand-logo.png b/nusmoney_client/src/logos/brand-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..29a091106e70a88398f1b98caa748fa5cb8ceb20 GIT binary patch literal 3781 zcmbtXdo)!09{0F{4F)fvII$XW<#GE>(^q>?f9o+A4k51jY?q74(`mMER@89qH`F_5y&u@(~ zILOb`#KHt2WGeL+ha$wOMTk3_G=eXTTkm;zm?!&&CC^IuE;%J~RSfcqPKb)3rE!t6 zn9!KW=(NP2V%!lLE|ZGAW~bhJ(c&2&9%FX-S3AmhQhrKpssTAd?i6Vlq!ina;Fm8H zE4H|lnXU129m}r{G%#iEYQoHRM*nCqFPI)!zx7;2Iz{{Lc$;>}a@Kxp&+#6z&Xdkn zeRscfTZ^o|t_^^Fw_|3a)1 z^to|uX6ISnD`CPPy-U`;El9BSSlf|q7if^G3~xK;xw!wu*0u(w=5_Dswu;jm2h;;^ z-Zl1LX%Wi{{;`Ssd+fA3d&~z4 zuj78y+2{FNW>^X0WYm%IMN&EPE>835uAeAER`yImqY$3?j>eQo@p}N5prTy!;A9y4 z*^OZzJM69-aWdM;Q@#{Ig`SL4Fv$DZJ!;{7%8-*$PoC|6X^3|o{vzW$i@lH+!Qo_> zeGahe6Z|T{oxPaC#Knh9x#XD>B~^KV7{qO`{plVp5ao^z~GXv_L5 zE_saEdF$9^e)h7I^`vtFL1PA1*MDTs1(%!m)o+ymA zz~~9!_A0$20E7~qII2XEf)=St^#orA3GXb7Lzp1 z&~nkX_W@BcW+a_6N>fh4F+e40jLIc{lc-(uL}+s`1`-ijTn=&lre}J5oC3}ro3C=U zHzFwi_2yzWAbtzGY-N38YY0CNN5QTQOqJjOHd*j@=Q>; zQ#eG_t?$|em{U%BM4zzI$pnD1AYE`Oq)58g+<;38*J_6xWne#wvK1`I&QBl@aXrBB zHx^OnX!ZCrBS-%}z6WNzJcO3JUnK|9R8yEL#B(3Rs{(d8GILG(BxZYVTI(F*JUCO(A)V{{ zFIc@waqhUE{n9O6+ctP<)nHdcYOBTI)4@}lNA5zeH+iSJZw&t)Mpr0#mHdZ`GoDIS z#8}VH^8Vh@AQXSs%y+G^VPN7%X`Tao4u>NqI7H4)vNeGB;s==NMBd&;p_rmX);?i6 zp~~gGm_-bUS`pT)XyS?KwW3&7{GMl)vERapCyvH;Qw)imDsuag3!Y_rjDW-z^;w^p zfuNs!LD);PWE+q}K+~y^WTgP}u+X?=yFiIRMW!-u3hORA!7p3pQP+%dBBV5pjN7_M z7mvD=81nw%T}azkOMJ{I(L?L7w$aZ5z=5@(Jq|0OrKY7@8VqUx7^}yJ>?h8%JjrZd z2x*6)U3d1*5%L}dT^(!HnuU<+nspHV(~ z?K1EHiCcT*zydEIr;14UV0V2D)=0?ObaBcLFjY!k_l$8MY%1;g@n`H!;a8?Mbu!c9 zgryHa`kJu#*)uYo3Q5${6R;RGk?~@zbeJIsqM&m5qEhI+gS-=t%0A(pKm*VzpRoG} zN8-s<@=n~I#Hvj_+1pjJNDcD?T45E8Toe)UWnKVe1pZbCa%Lk6MQZ0pWSSV?-$p@wmxG4FtAdlh1m04|L@BK;T%Rnri zg4E_Ar|aH0gZhwJS_uJiIE`67CQ+xm5zrgTtRaX;`7=O`EHB<0UOg3yl}Z~6R~3%* z#UsBBNh;G2oU(`wDMwlPQyr+l(!GL6xiP_uM{qJK$;Jv@Hf@<3g&8E=3(=&F?$U5z zHf%e<0;mq?thKBEX=TDC@jV>vyV4`C(qX6~&p!B^$Bd%L<==GQ)Rm+s$g2XRjxyJ@ z_AWlufeZ1_+9g4;4N@eQyaJJfLe-LuGQQ;v_*F@6zrv=-`Tv&HvKXK&G+9_Iml4n1 zi-$ihl7eW26DbWg`5;(M9~%@tvNSGYv9o7-+{UrmYOe9{ZQ3%CONu2>Ec{rx@$e3; zX}E^;IOdH_{=Z^b#3PQzJTcl_Pt7G@+^|xGU3ndE2(s?LRCm<)-^cbJYYU2oYYPxV zwPhi$B%NlJu!(A3)9!=iypG&AjU{5CX|2Mj-hxV=7Z%)zBEPSk*{xBU_W|An__1Ri zm8QRsx4;*KuC`b}BdUXb(ot7ukL_u&XKxx?rl;i~tH};bD|-X+9(;84ey)0t5lanY=Qr(7C#6E0%GZ+E=0YwbHb z5VT;o(ahly%a3=t!$wS3Ywu_u?b!Ddf)PRKxi|#UcZm>3??s7_-b?RT!BF2=!SFA{ uDnS2ZtTjwt=f1(+vINm}f&E=ukpYSs*5nbivqlU5OOez!NPNmWg82`RQc?u~ literal 0 HcmV?d00001 diff --git a/nusmoney_client/src/logo.svg b/nusmoney_client/src/logos/logo.svg similarity index 100% rename from nusmoney_client/src/logo.svg rename to nusmoney_client/src/logos/logo.svg