Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from "react";
- import $ from "jquery";
- import UserStore from "../../stores/UserStore";
- import * as UserActions from "../../actions/UserActions";
- import AddUser from "./AddUser";
- $.DataTable = require("datatables.net");
- class UserList extends Component {
- constructor() {
- super();
- this.getUsers = this.getUsers.bind(this);
- this.state = {
- users: UserStore.getAll()
- };
- this.loadUsers();
- }
- componentDidMount() {
- $(document).ready(function() {
- $("#example").DataTable({
- ordering: true
- });
- });
- }
- componentWillMount() {
- UserStore.on("change", this.getUsers);
- }
- componentWillUnmount() {
- UserStore.removeListener("change", this.getUsers);
- }
- getUsers() {
- console.log(" get users called");
- this.setState({
- users: UserStore.getAll()
- });
- }
- loadUsers() {
- UserActions.getUsersList();
- }
- render() {
- const userlistitem = this.state.users.map((user, index) => (
- <tr key={index}>
- <th scope="row">{index}</th>
- <td>{user.name}</td>
- <td>{user.username}</td>
- <td>{user.email}</td>
- <td>{user.dob}</td>
- <td>{user.address}</td>
- <td>{user.mobile}</td>
- <td>{user.branch}</td>
- </tr>
- ));
- return (
- <div
- style={{
- marginTop: 80,
- marginLeft: 150,
- marginRight: 150
- }}
- >
- <div className="card text-white bg-info mb-3">
- <div className="card-body">
- <div className="d-flex justify-content-between">
- <h5>User List</h5>
- <div>
- <button
- style={{
- marginTop: 10
- }}
- type="button"
- className="btn btn-light "
- data-toggle="modal"
- data-target="#exampleModalCenter"
- >
- Add New User
- </button>
- </div>
- </div>
- </div>
- </div>
- <table id="example" className="table table-bordered table-striped ">
- <thead className="thead-dark">
- <tr>
- <th scope="col">#</th>
- <th scope="col">Name</th>
- <th scope="col">User Name</th>
- <th scope="col">Email</th>
- <th scope="col">DOB</th>
- <th scope="col">Address</th>
- <th scope="col">Mobile</th>
- <th scope="col">Branch</th>
- </tr>
- </thead>
- <tbody>{userlistitem}</tbody>
- </table>
- <AddUser />
- </div>
- );
- }
- }
- export default UserList;
- import React, { Component } from "react";
- import DatePicker from "react-datepicker";
- import "react-datepicker/dist/react-datepicker.css";
- import "../../css/datepicker.css";
- import * as UserActions from "../../actions/UserActions";
- class AddUser extends Component {
- constructor(props) {
- super(props);
- this.state = {
- branch: "",
- name: "",
- username: "",
- mobile: "",
- email: "",
- address: "",
- dob: new Date()
- };
- this.handleInputChange = this.handleInputChange.bind(this);
- this.handledatepickerchange = this.handledatepickerchange.bind(this);
- }
- handleInputChange(event) {
- const target = event.target;
- const value = target.value;
- const name = target.name;
- this.setState({ [name]: value });
- }
- handledatepickerchange(event) {
- this.setState({ dob: event });
- }
- createUser = () => {
- console.log("this is:", this);
- const user = {
- branch: this.state.branch,
- name: this.state.name,
- username: this.state.username,
- mobile: this.state.mobile,
- email: this.state.email,
- address: this.state.address,
- dob: this.state.dob
- };
- UserActions.createNewUser(user);
- this.setState({
- branch: "",
- name: "",
- username: "",
- mobile: "",
- email: "",
- address: "",
- dob: new Date()
- });
- };
- render() {
- return (
- <div
- className="modal fade"
- id="exampleModalCenter"
- tabIndex="-1"
- role="dialog"
- aria-labelledby="exampleModalCenterTitle"
- aria-hidden="true"
- >
- <div className="modal-dialog modal-dialog-centered" role="document">
- <div className="modal-content">
- <div className="modal-header">
- <h5 className="modal-title" id="exampleModalCenterTitle">
- Add New User
- </h5>
- <button
- type="button"
- className="close"
- data-dismiss="modal"
- aria-label="Close"
- >
- <span aria-hidden="true">×</span>
- </button>
- </div>
- <div className="modal-body">
- <div className="input-group mb-3">
- <input
- name="name"
- type="text"
- className="form-control"
- placeholder="Name"
- aria-label="Name"
- aria-describedby="button-addon2"
- value={this.state.name}
- onChange={this.handleInputChange}
- />
- </div>
- <div className="input-group mb-3">
- <input
- name="username"
- type="text"
- className="form-control"
- placeholder="User Name"
- aria-label="User Name"
- aria-describedby="button-addon2"
- value={this.state.username}
- onChange={this.handleInputChange}
- />
- </div>
- <div className="input-group mb-3">
- <input
- name="email"
- type="email"
- className="form-control"
- placeholder="Email"
- aria-label="Email"
- aria-describedby="button-addon2"
- value={this.state.email}
- onChange={this.handleInputChange}
- />
- </div>
- <div className="input-group mb-3">
- <input
- name="address"
- type="text"
- className="form-control"
- placeholder="Address"
- aria-label="Address"
- aria-describedby="button-addon2"
- value={this.state.address}
- onChange={this.handleInputChange}
- />
- </div>
- <div className="input-group mb-3">
- <input
- name="branch"
- type="text"
- className="form-control"
- placeholder="Branch"
- aria-label="Branch"
- aria-describedby="button-addon2"
- value={this.state.branch}
- onChange={this.handleInputChange}
- />
- </div>
- <div className="input-group mb-3">
- <DatePicker
- name="dob"
- type="text"
- className="form-control"
- placeholder="DOB"
- aria-label="DOB"
- aria-describedby="button-addon2"
- selected={this.state.dob}
- onChange={this.handledatepickerchange}
- />
- <p
- style={{
- marginTop: "5px",
- fontWeight: "200",
- marginLeft: "10px"
- }}
- >
- Date of Birth(dd/mm/yyyy)
- </p>
- </div>
- <div className="input-group mb-3">
- <input
- name="mobile"
- type="number"
- className="form-control"
- placeholder="Mobile No."
- aria-label="Mobile No."
- aria-describedby="button-addon2"
- value={this.state.mobile}
- onChange={this.handleInputChange}
- />
- </div>
- </div>
- <div className="modal-footer">
- <br />
- <br />
- <button
- type="button"
- className="btn btn-secondary"
- data-dismiss="modal"
- >
- Close
- </button>
- <button
- type="button"
- className="btn btn-primary"
- data-dismiss="modal"
- onClick={this.createUser}
- >
- Save
- </button>
- </div>
- </div>
- </div>
- </div>
- );
- }
- }
- export default AddUser;
- import dispatcher from "../dispatcher/dispatcher";
- import { BASE_URL } from "../utils/AppConstants";
- export function getUsersList() {
- console.log("getting the data! ");
- fetch(BASE_URL + "/users")
- .then(res => res.json())
- .then(
- result => {
- console.log("res " + result);
- dispatcher.dispatch({ type: "RECEIVE_USERS", users: result });
- },
- // Note: it's important to handle errors here instead of a catch() block so that
- // we don't swallow exceptions from actual bugs in components.
- error => {
- // here manage error and close loading;
- console.log("getting error " + error);
- }
- );
- }
- export function createNewUser(user) {
- console.log("post the data!");
- fetch(BASE_URL + "/saveuser", {
- method: "POST",
- headers: {
- Accept: "application/json",
- "Content-Type": "application/json"
- },
- body: JSON.stringify(user)
- })
- .then(res => res.json())
- .then(
- result => {
- dispatcher.dispatch({ type: "CREATE_USER", newUser: user });
- },
- // Note: it's important to handle errors here instead of a catch() block so that
- // we don't swallow exceptions from actual bugs in components.
- error => {
- // here manage error and close loading;
- console.log("getting error " + error);
- }
- );
- }
- import { EventEmitter } from "events";
- import dispatcher from "../dispatcher/dispatcher";
- class UserStore extends EventEmitter {
- constructor() {
- super();
- dispatcher.register(this.handleActions.bind(this));
- this.users = [
- {
- branch: "19",
- name: "Javcbvcsim11",
- username: "zxcv",
- mobile: "5645654",
- email: "demo@gmail.com111",
- address: "Demo vcbvcbAddress1",
- dob: "2020-11-06T00:00:00.000+0000"
- }
- ];
- }
- createUser(newUser) {
- this.users.push(newUser);
- console.log("new users lenght " + this.users.lenght);
- this.emit("change");
- }
- getAll() {
- return this.users;
- }
- handleActions(action) {
- switch (action.type) {
- case "RECEIVE_USERS": {
- this.users = action.users;
- this.emit("change");
- break;
- }
- case "CREATE_USER": {
- this.createUser(action.newUser);
- break;
- }
- }
- }
- }
- export default new UserStore();
Add Comment
Please, Sign In to add comment