Build UserRoom page

@@ -22,10 +22,17 @@
     "eject": "react-scripts eject"
     "eject": "react-scripts eject"
   },
   },
   "eslintConfig": {
   "eslintConfig": {
-    "extends": ["react-app", "react-app/jest"]
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
   },
   },
   "browserslist": {
   "browserslist": {
-    "production": [">0.2%", "not dead", "not op_mini all"],
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
     "development": [
     "development": [
       "last 1 chrome version",
       "last 1 chrome version",
       "last 1 firefox version",
       "last 1 firefox version",

-function UserBox() {
-  return <div>UserBox</div>;
+import "../styles/box.scss";
+
+function UserBox({ user }) {
+  return (
+    <div className="userBox">
+      <h1>{user.username}</h1>
+      <p>user info</p>
+      <div>chat!</div>
+    </div>
+  );
 }
 }
 
 
 export default UserBox;
 export default UserBox;

@@ -8,13 +8,15 @@ import Signup from "./routes/signup";
 import Login from "./routes/login";
 import Login from "./routes/login";
 import Userroom from "./routes/userroom";
 import Userroom from "./routes/userroom";
 import Settings from "./routes/settings";
 import Settings from "./routes/settings";
+// styles
+import "./styles/layout.scss";
 
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 const root = ReactDOM.createRoot(document.getElementById("root"));
 
 
 root.render(
 root.render(
   <BrowserRouter>
   <BrowserRouter>
     <Routes>
     <Routes>
-      <Route path="/" element={<App />} /> // App = chatroom
+      <Route path="/" element={<App />} />
       <Route path="/login" element={<Login />} />
       <Route path="/login" element={<Login />} />
       <Route path="/signup" element={<Signup />} />
       <Route path="/signup" element={<Signup />} />
       <Route path="/userroom" element={<Userroom />} />
       <Route path="/userroom" element={<Userroom />} />

+import { Link } from "react-router-dom";
 import { useState } from "react";
 import { useState } from "react";
 // lib
 // lib
-import { handleLogin } from "../lib/auth";
-// styles
-import { Link } from "react-router-dom";
-import "../styles/layout.scss";
+import { handleLogin } from "../service/auth";
 
 
 function Login() {
 function Login() {
   const [email, setEmail] = useState("");
   const [email, setEmail] = useState("");

 import { Link } from "react-router-dom";
 import { Link } from "react-router-dom";
-// styles
-import "../styles/layout.scss";
 
 
 function Signup() {
 function Signup() {
   const handleSubmit = (e) => {
   const handleSubmit = (e) => {

+import axios from "axios";
+import { useState, useEffect } from "react";
 // components
 // components
 import Bottombar from "../components/Bottombar";
 import Bottombar from "../components/Bottombar";
 import Topbar from "../components/Topbar";
 import Topbar from "../components/Topbar";
 import UserBox from "../components/UserBox";
 import UserBox from "../components/UserBox";
 
 
-function Userroom() {
+const Userroom = () => {
+  const [users, setUsers] = useState(null);
+
+  useEffect(() => {
+    axios.get("/api/users/all/").then((response) => {
+      setUsers(response.data);
+    });
+  }, []);
+
+  if (!users) return null;
+
   return (
   return (
     <div>
     <div>
       <Topbar />
       <Topbar />
       <h1>User Room</h1>
       <h1>User Room</h1>
+
       <div>
       <div>
-        <UserBox />
-        <UserBox />
-        <UserBox />
-        <UserBox />
+        {Array.isArray(users)
+          ? users.map((user, i) => {
+              return <UserBox key={i} user={user} />;
+            })
+          : ""}
       </div>
       </div>
+
       <Bottombar />
       <Bottombar />
     </div>
     </div>
   );
   );
-}
+};
 
 
 export default Userroom;
 export default Userroom;

@@ -2,4 +2,21 @@
 .bottombar {
 .bottombar {
   display: flex;
   display: flex;
   flex-direction: row;
   flex-direction: row;
+  align-items: center;
+  font-size: 1.3rem;
+
+  a {
+    font-size: 2rem;
+  }
+
+  * {
+    padding: 0.3rem 0.5rem;
+  }
+}
+
+.topbar {
+  margin-bottom: 0.5rem;
+}
+.bottombar {
+  margin-top: 0.5rem;
 }
 }

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

+* {
+  margin: 0;
+  padding: 0;
+}
+
 .container {
 .container {
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;