Add edit user info function

+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import authService from "../service/auth";
 // components
-import Bottombar from "../components/Bottombar";
 import Topbar from "../components/Topbar";
+import Bottombar from "../components/Bottombar";
 
 function Settings() {
+  const navigate = useNavigate();
+  const [editSuccess, setEditSuccess] = useState(0);
+  const [userinfo, setUserinfo] = useState({
+    username: "",
+    country: "",
+    city: "",
+    email: "",
+  });
+
+  // useEffect(() => {
+  //     navigate("/login", { replace: true });
+  // }, [ navigate]);
+
+  const logout = () => {
+    return;
+  };
+
+  const onChange = (e) => {
+    setUserinfo((orgState) => ({
+      ...orgState,
+      [e.target.id]: e.target.value,
+    }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (userinfo.country.length > 2) {
+      alert("Please use alpha-2 country code");
+      return;
+    }
+    const response = await authService.handleUserEdit(userinfo);
+    setEditSuccess(response);
+  };
+
   return (
-    <>
-      <Topbar />
     <div>
-        <h1>Settings page</h1>
-        <div>username</div>
-        <div>email</div>
-        <div>birthday</div>
+      <Topbar />
+      <h3>Edit Your information</h3>
+      <form className="authForm" onSubmit={(e) => handleSubmit(e)}>
+        <label htmlFor="username">
+          <input
+            placeholder="username"
+            onChange={(e) => onChange(e)}
+            value={userinfo.username}
+            type="text"
+            id="username"
+          />
+        </label>
+        <label htmlFor="country">
+          <input
+            placeholder="Please use Alpha-2 Country Code"
+            onChange={(e) => onChange(e)}
+            value={userinfo.country.toUpperCase()}
+            type="text"
+            id="country"
+          />
+        </label>
+        <label htmlFor="city">
+          <input
+            placeholder="City Name (lower case)"
+            onChange={(e) => onChange(e)}
+            value={userinfo.city.toLowerCase()}
+            type="text"
+            id="city"
+          />
+        </label>
+        <label htmlFor="email">
+          <input
+            placeholder="Change email"
+            onChange={(e) => onChange(e)}
+            value={userinfo.email}
+            type="email"
+            id="email"
+          />
+        </label>
+        <label htmlFor="submit">
+          <input type="submit" id="submit" />
+        </label>
+      </form>
+
       <br />
-        <button>notification</button>
+
+      <div>
+        Want to logout? <button onClick={() => logout()}>Logout</button>
       </div>
       <Bottombar />
-    </>
+    </div>
   );
 }
 

+// components
+import Topbar from "../components/Topbar";
+import Bottombar from "../components/Bottombar";
+
 function Tweet() {
-  return <div>Tweet</div>;
+  return (
+    <div>
+      <Topbar />
+
+      <div>tweet</div>
+
+      <Bottombar />
+    </div>
+  );
 }
 
 export default Tweet;

@@ -33,9 +33,38 @@ const handleLogin = async ({ email, password }) => {
   }
 };
 
+const handleUserEdit = async ({ username, country, city, email }) => {
+  const token = JSON.parse(sessionStorage.getItem("user-token")).token;
+  try {
+    const response = await axios.put(
+      "http://localhost:8080/api/users/edit",
+      {
+        username,
+        country: country.toUpperCase(),
+        city: city.toLowerCase(),
+        email,
+      },
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+
+    if (response.status === 200) {
+      return "success";
+    } else {
+      return "fail";
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+
 const authService = {
   handleSignup,
   handleLogin,
+  handleUserEdit,
 };
 
 export default authService;

+const bcrypt = require("bcryptjs");
+// handles "exception" inside of async express routes
+const asyncHandler = require("express-async-handler");
+const User = require("../models/userModel");
+const { jwtGenerator } = require("../config/jwt");
+
+// @desc Signup new user
+// @route POST /api/users
+// @access Public
+const signupUser = asyncHandler(async (req, res) => {
+  const { username, country, city, email, password } = req.body;
+  if (!username || !country || !city || !email || !password) {
+    res.status(400);
+    throw new Error("Please fill in all fields");
+  }
+
+  // Check if user already exists
+  const userExists = await User.findOne({ email });
+  if (userExists) {
+    res.status(400);
+    throw new Error("User with the email already exists");
+  }
+
+  // Hash password (bcrypt)
+  const salt = await bcrypt.genSalt(10);
+  const hashedPassword = await bcrypt.hash(password, salt);
+
+  // Create/Build user
+  const user = await User.create({
+    username,
+    country,
+    city,
+    email,
+    password: hashedPassword,
+  });
+
+  // Send response
+  if (user) {
+    // 201: Resource successfully created
+    res.status(201).json({
+      _id: user.id,
+      username: user.username,
+      country: user.country,
+      city: user.city,
+      email: user.email,
+      token: jwtGenerator(user._id),
+    });
+  } else {
+    res.status(400);
+    throw new Error("Invalid user data");
+  }
+});
+
+// @desc Login user
+// @route POST /api/users/login
+// @access Public
+const loginUser = asyncHandler(async (req, res) => {
+  const { email, password } = req.body;
+
+  // Check email & password
+  const userInDB = await User.findOne({ email });
+  const validPassword = await bcrypt.compare(password, userInDB.password);
+  if (userInDB && validPassword) {
+    res.status(200).json({
+      token: jwtGenerator(userInDB._id),
+    });
+  } else {
+    res.status(400);
+    throw new Error("Invalid credentials");
+  }
+});
+
+// @desc Get all users
+// @route GET /api/users/all
+// @access Public
+const getAllusers = asyncHandler(async (req, res) => {
+  const users = await User.find()
+    .select("-password")
+    .select("-createdAt")
+    .select("-email");
+
+  res.status(200).json(users);
+});
+
+// @desc Get user
+// @route GET /api/users/self
+// @access Private
+const getSelf = asyncHandler(async (req, res) => {
+  res.status(200).json(req.user);
+});
+
+// @desc Edit user
+// @route PUT /api/users/edit
+// @access Private
+const editUser = asyncHandler(async (req, res) => {
+  const {username, country, city, email} = req.body;
+  console.log(username);
+  res.json({});
+});
+
+module.exports = {
+  signupUser,
+  loginUser,
+  getAllusers,
+  getSelf,
+  editUser,
+};

@@ -89,9 +89,37 @@ const getSelf = asyncHandler(async (req, res) => {
   res.status(200).json(req.user);
 });
 
+// @desc Edit user
+// @route PUT /api/users/edit
+// @access Private
+const editUser = asyncHandler(async (req, res) => {
+  const { username, country, city, email } = req.body;
+  const change = {};
+  if (username.length) {
+    change["username"] = username;
+  }
+  if (country.length) {
+    change["country"] = country;
+  }
+  if (city.length) {
+    change["city"] = city;
+  }
+  if (email.length) {
+    change["email"] = email;
+  }
+  try {
+    await User.findByIdAndUpdate(req.user._id, change);
+    res.send();
+  } catch (err) {
+    res.status(400);
+    throw new Error("Something went wrong from mongoDB");
+  }
+});
+
 module.exports = {
   signupUser,
   loginUser,
   getAllusers,
   getSelf,
+  editUser,
 };

-const bcrypt = require("bcryptjs");
 const jwt = require("jsonwebtoken");
 const axios = require("axios").default;
 const User = require("../models/userModel");

@@ -5,6 +5,7 @@ const {
   loginUser,
   getAllusers,
   getSelf,
+  editUser,
 } = require("../actions/userActions");
 const { authHandler } = require("../middleware/authMiddleware");
 
@@ -13,5 +14,6 @@ router.post("/", signupUser);
 router.post("/login", loginUser);
 router.get("/all", authHandler, getAllusers);
 router.get("/self", authHandler, getSelf);
+router.put("/edit", authHandler, editUser);
 
 module.exports = router;