Add users page

+import dateFormat from "dateformat";
 import "../styles/box.scss";
 
 function UserBox({ user }) {
+  const { country, city, createdAt, email, username } = user;
+  const dateTime = dateFormat(createdAt);
+
   return (
     <div className="userBox">
-      <h1>{user.username}</h1>
-      <p>user info</p>
-      <div>chat!(chatting functionality)</div>
+      <h1>{username}</h1>
+      <div>
+        <p>Country : {country}</p>
+        <p>City : {city}</p>
+        <br />
+        <p>Joined at : {dateTime}</p>
+        <p>email : {email}</p>
+      </div>
     </div>
   );
 }

-import axios from "axios";
+import "../styles/box.scss";
 import { useState, useEffect } from "react";
 // components
 import Bottombar from "../components/Bottombar";
 import Topbar from "../components/Topbar";
 import UserBox from "../components/UserBox";
+import authService from "../service/auth";
 
 const Userroom = () => {
-  const [users, setUsers] = useState(null);
+  const [users, setUsers] = useState([]);
 
-  if (!users) return null;
+  useEffect(() => {
+    async function fetchData() {
+      const usersData = await authService.handleGetAllUser();
+      setUsers(usersData);
+    }
+    fetchData();
+  }, []);
 
   return (
     <div>
       <Topbar />
       <h1>User Room</h1>
 
-      <div>
-        {Array.isArray(users)
-          ? users.map((user, i) => {
-              return <UserBox key={i} user={user} />;
-            })
-          : ""}
+      <div className="usersBox">
+        {!users
+          ? ""
+          : users.map((user, index) => {
+              return <UserBox key={index} user={user} />;
+            })}
       </div>
 
       <Bottombar />

@@ -72,11 +72,21 @@ const handleGetUser = async (userId) => {
   }
 };
 
+const handleGetAllUser = async () => {
+  try {
+    const response = await axios.get("http://localhost:8080/api/users/all");
+    return response.data;
+  } catch (err) {
+    console.log(err);
+  }
+};
+
 const authService = {
   handleSignup,
   handleLogin,
   handleUserEdit,
   handleGetUser,
+  handleGetAllUser,
 };
 
 export default authService;

-.userBox,
-.chatBox {
-  margin: 0.3rem 1rem;
-  border: 0.2rem black solid;
-  border-radius: 10px;
+.usersBox {
+  margin-top: 10vh;
 }
-
 .userBox {
+  margin: 1rem;
+  border: 0.2rem black solid;
+  border-radius: 10px;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
+  font-size: 1.4rem;
 
   * {
     padding: 0.3rem 0.5rem;