move addUser(), deleteUser() into usersFetch.js

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";
 

nusmoney_client/src/components/form/Button.jsx

@@ -10,4 +10,5 @@ const Button = (props) => {
         </button>)
 }
 
-export default Button;
+export default Button;
+

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;

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

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

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}`);
                                         }}
                                     >

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;