import axios from "axios";
import { useState } from "react";
const AddUserData: React.FC<{ getUserAxios: () => void }> = ({
  getUserAxios,
}) => {
  const [Name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassWord] = useState("");
  const [userId, setUserId] = useState(1);
  const getUserData = () => {
    const newUserData = {
      id:userId,
      Name,
      email,
      password,
    };
    axios({
      method: "post",
      url: "http://localhost:3001/addNewUser",
      data: newUserData,
    })
      .then(function (response) {
        console.log(response);
        setTimeout(() => {
          getUserAxios();
        }, 1000);
      })
      .catch(function (error) {
        console.log(error);
      });
    setName("");
    setEmail("");
    setPassWord("");
     setUserId((prevUserId) => prevUserId + 1);
  };
  return (
    <>
      <form>
        <div className="input-group mb-3">
          <span className="input-group-text" id="basic-addon1">
            🙂
          </span>
          <input
            type="text"
            className="form-control"
            placeholder="User Firstname"
            aria-label="User Firstname"
            aria-describedby="basic-addon1"
            value={Name}
            onChange={(e) => setName(e.target.value)}
          />
        </div>
        <div className="input-group mb-3">
          <span className="input-group-text" id="basic-addon1">
            🔑
          </span>
          <input
            type="text"
            className="form-control"
            placeholder="User Lastname"
            aria-label="User Lastname"
            aria-describedby="basic-addon1"
            value={password}
            onChange={(e) => setPassWord(e.target.value)}
          />
        </div>
        <div className="input-group mb-3">
          <span className="input-group-text" id="basic-addon2">
            💌
          </span>
          <input
            type="text"
            className="form-control"
            placeholder="Users Email"
            aria-label="Users Email"
            aria-describedby="basic-addon2"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>
        <button
          type="button"
          className="btn btn-primary mx-2"
          onClick={getUserData}
        >
          Add
        </button>
        <button type="button" className="btn btn-secondary">
          Cancel
        </button>
      </form>
    </>
  );
};
export default AddUserData;

import axios from "axios";
import { useEffect, useState } from "react";
import AddUserData from "../AddUserData/AddUserData";
import { UserType } from "../store/stype-store";
const UserDataTable = () => {
  const [users, setUsers] = useState <UserType[]>([]);
  const getUserAxios = () => {
    axios
      .get("http://localhost:3001/usersData")
      .then((res) => {
        console.log("Response from axios", res.data);
        const { allUsers } = res.data;
        console.log("allUsers from axios", allUsers);
        setUsers(allUsers);
      })
      .catch((err) => {
        console.log("err from axios", err.message);
      });
  };
  useEffect(() => {
    getUserAxios();
  }, []);
  const userMap = users.map((user: UserType, index) => {
    return (
      <tr key={user.id}>
        <th scope="row">{index}</th>
        <td>{user.Name}</td>
        <td>{user.password}</td>
        <td>{user.email}</td>
      </tr>
    );
  });
  return (
    <>
      <div className="col-lg-7 p-3 p-lg-5 pt-lg-3 ">
        <table className="table table-striped">
          <thead>
            <tr>
              <th scope="col">ID</th>
              <th scope="col">Name</th>
              <th scope="col">Password</th>
              <th scope="col">E-Mail</th>
            </tr>
          </thead>
          <tbody>{userMap}</tbody>
        </table>
      </div>
      <div className="col-lg-4 p-3 p-lg-5 pt-lg-3">
        <AddUserData getUserAxios={getUserAxios} />
      </div>
    </>
  );
};
export default UserDataTable;

const express = require("express");
const cors = require("cors");
const app = express();
const port = 3001;
app.use(express.json());
app.use(
  cors({
    origin: "*",
  })
);
let previousUserData = [
  {
    id: 1,
    Name: "RAHUL",
    password: "1w2e2w",
    email: "affj@gmail.com",
  },
  {
    id:2,
    Name: "CHAHUL",
    password: "1w2e2w",
    email: "affj@gmail.com",
  },
];
app.get("/usersData", (req, res) => {
  res.send({ status: 200, allUsers: previousUserData });
});
app.post("/addNewUser", (req, res) => {
  const { id, Name, password, email } = req.body;
  if (Name && password && email) {
    previousUserData = [...previousUserData, { id, Name, password, email }];
    res.send({ status: 200, msg: "user added", allUsers: previousUserData });
  } else {
    res.send({ status: 500, msg: "something went wrong" });
  }
});
app.listen(port, () => {
  console.log("Server started on port " + port);
});

const getNextId = () => previousUserData.length;
// or if you want a better guarantee
// const getNextId = () => Math.max(...previousUserData.map(({ id }) => id)) + 1;
app.post("/addNewUser", (req, res) => {
  const { Name, password, email } = req.body;
  if (Name && password && email) {
    previousUserData.push({
      id: getNextId(),
      Name,
      password,
      email,
    });
    res.json({ msg: "user added", allUsers: previousUserData });
  } else {
    res.status(500).send({ msg: "something went wrong" });
  }
});