Show, Add, Delete user operation
parent
83f01438e8
commit
2213e7187a
@ -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;
|
||||
@ -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;
|
||||
@ -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;
|
||||
@ -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;
|
||||
@ -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;
|
||||
@ -0,0 +1,3 @@
|
||||
button {
|
||||
width: 25%;
|
||||
}
|
||||
@ -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 />
|
||||
</div>
|
||||
<div>
|
||||
<h1>Users</h1>
|
||||
<p>Users page body content</p>
|
||||
<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;
|
||||
};
|
||||
|
||||
export default users;
|
||||
|
||||
Loading…
Reference in New Issue