Eric Whale

Setup chatroom page chatting room functionality

1 +import axios from "axios";
2 +import { useState, useEffect } from "react";
1 // components 3 // components
2 import Bottombar from "./components/Bottombar"; 4 import Bottombar from "./components/Bottombar";
3 import Topbar from "./components/Topbar"; 5 import Topbar from "./components/Topbar";
4 import ChatroomBox from "./components/ChatroomBox"; 6 import ChatroomBox from "./components/ChatroomBox";
5 7
6 function App() { 8 function App() {
9 + const [chats, setChats] = useState(null);
10 +
11 + useEffect(() => {
12 + axios.get("/api/chat").then((response) => {
13 + setChats(response.data);
14 + });
15 + }, []);
16 +
7 return ( 17 return (
8 <div> 18 <div>
9 <Topbar /> 19 <Topbar />
...@@ -17,10 +27,13 @@ function App() { ...@@ -17,10 +27,13 @@ function App() {
17 <br /> 27 <br />
18 28
19 <div> 29 <div>
20 - <ChatroomBox /> 30 + {Array.isArray(chats) ? (
21 - <ChatroomBox /> 31 + chats.map((chat, i) => {
22 - <ChatroomBox /> 32 + return <ChatroomBox key={i} chat={chat} />;
23 - <ChatroomBox /> 33 + })
34 + ) : (
35 + <h2>No chatting room!</h2>
36 + )}
24 </div> 37 </div>
25 <Bottombar /> 38 <Bottombar />
26 </div> 39 </div>
......
...@@ -5,7 +5,7 @@ function UserBox({ user }) { ...@@ -5,7 +5,7 @@ function UserBox({ user }) {
5 <div className="userBox"> 5 <div className="userBox">
6 <h1>{user.username}</h1> 6 <h1>{user.username}</h1>
7 <p>user info</p> 7 <p>user info</p>
8 - <div>chat!</div> 8 + <div>chat!(chatting functionality)</div>
9 </div> 9 </div>
10 ); 10 );
11 } 11 }
......