Show, Add, Delete user operation

nusmoney_client/src/components/form/Button.jsx

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+const Button = (props) => {
+    console.log(props.style);
+    return(
+        <button 
+            style= {props.style} 
+            onClick= {props.action}>    
+            {props.title} 
+        </button>)
+}
+
+export default Button;

nusmoney_client/src/components/form/FormContainer.jsx

@@ -0,0 +1,151 @@
+import React, { Component } from "react";
+
+import Input from "./Input";
+import Button from "./Button";
+import uuid from "uuid";
+
+class FormContainer extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            newUser: {
+                user_id: uuid(),
+                name: "",
+                mail: "",
+                nric: "",
+                mobile: "",
+            },
+        };
+        //
+        this.handleFormSubmit = this.handleFormSubmit.bind(this);
+        this.handleClearForm = this.handleClearForm.bind(this);
+
+        this.handleInput = this.handleInput.bind(this);
+    }
+
+    ButtonStyle = {
+        width: "100%",
+        backgroundColor: "#F6F6F6",
+        color: "#404040",
+        padding: "8px 15px",
+        boxSizing: "content-box",
+        position: "fixed",
+        bottom: "0",
+    };
+
+    handleFormSubmit(e) {
+        e.preventDefault();
+        let userData = this.state.newUser;
+        console.log("Form submit");
+        this.addUser(userData);
+    }
+
+    handleClearForm(e) {
+        e.preventDefault();
+        console.log("Clear Form");
+        this.setState({
+            newUser: {
+                user_id: uuid(),
+                name: "",
+                mail: "",
+                nric: "",
+                mobile: "",
+            },
+        });
+    }
+
+    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;
+        this.setState(
+            (prevState) => {
+                return {
+                    newUser: {
+                        ...prevState.newUser,
+                        [name]: value,
+                    },
+                };
+            },
+            () => console.log(this.state.newUser)
+        );
+    }
+
+    render() {
+        return (
+            <form className="container">
+                <Input
+                    type={"text"}
+                    title={"ID"}
+                    name={"user_id"}
+                    value={this.state.newUser.user_id}
+                    placeholder={"Enter your id"}
+                    handleChange={this.handleInput}
+                />
+                {/* user id */}
+                <Input
+                    type={"text"}
+                    title={"Full Name"}
+                    name={"name"}
+                    value={this.state.newUser.name}
+                    placeholder={"Enter your name"}
+                    handleChange={this.handleInput}
+                />
+                {/* Name of the user */}
+                <Input
+                    type={"text"}
+                    title={"Email"}
+                    name={"mail"}
+                    value={this.state.newUser.mail}
+                    placeholder={"Enter your email"}
+                    handleChange={this.handleInput}
+                />
+                <Input
+                    type={"text"}
+                    title={"NRIC"}
+                    name={"nric"}
+                    value={this.state.newUser.nric}
+                    placeholder={"Enter your NRIC"}
+                    handleChange={this.handleInput}
+                />
+                <Input
+                    type={"text"}
+                    title={"Mobile"}
+                    name={"mobile"}
+                    value={this.state.newUser.mobile}
+                    placeholder={"Enter your mobile number"}
+                    handleChange={this.handleInput}
+                />
+                {/* Name of the user */}
+                <Button action={this.handleClearForm} title="Clear" />
+                {/* Clear the form */}
+                <Button action={this.handleFormSubmit} title="Submit" />
+                {/*Submit */}
+            </form>
+        );
+    }
+}
+
+export default FormContainer;

nusmoney_client/src/components/form/Input.jsx

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+
+// stateless functional components
+const Input = (props) => {
+    return (
+        <div className="form-group">
+            <label htmlFor={props.name} className="form-label">
+                {props.title}
+            </label>
+            <input
+                className="form-input"
+                id={props.name}
+                name={props.name}
+                type={props.type}
+                value={props.value}
+                onChange={props.handleChange}
+                placeholder={props.placeholder}
+            />
+        </div>
+    )
+}
+
+export default Input;

nusmoney_client/src/components/userAdd.jsx

@@ -0,0 +1,67 @@
+import React, { Component } from "react";
+
+import uuid from "uuid";
+
+import FormContainer from './form/FormContainer';
+
+class UserAdd extends Component {
+    state = {
+        items: [
+            {
+                user_id: uuid(),
+                name: "Hell1",
+                mail: "bb",
+                nric: "",
+                mobile: "",
+            },
+            {
+                user_id: uuid(),
+                name: "Hell2",
+                mail: "aa",
+                nric: "",
+                mobile: "",
+            },
+        ],
+    };
+
+    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
+        this.callAPIServer();
+    }
+
+    render() {
+        // destructure {}
+        const { items } = this.state;
+
+        return <div><p>User Add</p><FormContainer /></div>;
+    }
+}
+
+export default UserAdd;

nusmoney_client/src/components/userDelete.jsx

@@ -0,0 +1,96 @@
+import React, { Component } from "react";
+
+import uuid from "uuid";
+
+class UserDelete extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: "",
+            isGoing: true,
+            numberOfGuests: 2,
+        };
+
+        this.handleInputChange = this.handleInputChange.bind(this);
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+
+    // Handling Multiple Inputs 
+    handleInputChange(event) {
+        const target = event.target;
+        const value =
+            target.type === "checkbox" ? target.checked : target.value;
+        const name = target.name;
+        this.setState({
+            [name]: value,
+        });
+    }
+
+    //
+    handleChange(event) {
+        this.setState({ value: event.target.value });
+    }
+    handleSubmit(event) {
+        alert(`User Id  ${this.state.value} was submitted`);
+        event.preventDefault();
+
+        this.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
+        this.callAPIServer();
+    }
+
+    render() {
+        // destructure {}
+        const { items } = this.state;
+
+        return (
+            <div><p>User Delete</p>
+                <form onSubmit={this.handleSubmit}>
+                <label>
+                    User Id:
+                    <input
+                        type="text"
+                        value={this.state.value}
+                        onChange={this.handleChange}
+                    />
+                </label>
+                <input type="submit" value="Submit" />
+                </form>
+            </div>
+        );
+    }
+}
+
+export default UserDelete;

nusmoney_client/src/components/userList.jsx

@@ -32,7 +32,7 @@ class UserList extends Component {
         // setup automatic proxy in package.json.
         // thus eliminating the need to type "http://localhost:7000"
         // "proxy" : "http://localhost:7000"
-        fetch("/users?limit=18", {
+        fetch("/users?limit=0", {
             method: "GET",
             /* body: JSON.stringify(bodyData), */
             headers: { "Content-type": "application/json; charset=UTF-8" },
@@ -49,53 +49,6 @@ class UserList 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);
-                
-                //this.setState({ items: data });
-                //console.log(this.state.user);
-            })
-            .catch((err) => {
-                console.log(err);
-                
-                return err;
-            });
-    }
-
-    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
@@ -108,35 +61,6 @@ class UserList extends Component {
 
         return (
             <Container className="App-list">
-                <Button
-                    color="dark"
-                    style={{ marginBottom: "2em" }}
-                    onClick={() => {
-                        this.addUser( {
-                            name: "Hello World",
-                            nric: "S12345",
-                            mobile: "919191",
-                            mail: "grant@anb"
-                        });
-/*                         const name = prompt("Enter name");
-                        if (name) {
-                            this.setState((state) => ({
-                                items: [
-                                    ...state.items,
-                                    {
-                                        user_id: uuid(),
-                                        name: name,
-                                        mail: "b@ccd",
-                                        nric: "SSS",
-                                    },
-                                ],
-                            }));
-                        } */
-                    }}
-                >
-                    Add User
-                </Button>
-
                 <ListGroup>
                     <TransitionGroup className="user-list">
                         {items.map(({ user_id, name, mail, nric, mobile }) => (

nusmoney_client/src/components/users.css

@@ -0,0 +1,3 @@
+button {
+    width: 25%;
+}

nusmoney_client/src/components/users.jsx

@@ -1,14 +1,40 @@
-import React from 'react';
+import React from "react";
+import ReactDOM from "react-dom";
 import UserList from "./userList";
+import UserAdd from "./userAdd";
+import UserDelete from "./userDelete";
+import "./users.css";
 
 const users = () => {
     return (
         <div>
             <h1>Users</h1>
             <p>Users page body content</p>
-           <UserList />
+            <button
+                onClick={() =>
+                    ReactDOM.render(
+                        <UserList />,
+                        document.getElementById("workspace")
+                    )
+                }
+            >
+                Show
+            </button>
+            <button onClick={() =>
+                    ReactDOM.render(
+                        <UserAdd />,
+                        document.getElementById("workspace")
+                    )
+                }>Add</button>
+            <button onClick={() =>
+                    ReactDOM.render(
+                        <UserDelete />,
+                        document.getElementById("workspace")
+                    )
+                }>Delete</button>
+            <section id="workspace" />
         </div>
     );
-}
+};
 
 export default users;