Merge pull request #44 from jphacks/feat/40-user-number

Headerにユーザー数表示
jphacks · Oct 27, 2024 · 91a571a · 91a571a
2 parents beac3eb + 2340292
commit 91a571a
Show file tree

Hide file tree

Showing 12 changed files with 200 additions and 33 deletions.
diff --git a/backend/src/types/interface.ts b/backend/src/types/interface.ts
@@ -22,3 +22,8 @@ export interface messageDownEventInterface {
   message: string;
   isSelfMessage: boolean;
 }
+
+export interface updateEventInterface {
+  name: string;
+  addressHash: string;
+}
diff --git a/backend/src/websocket/events.ts b/backend/src/websocket/events.ts
@@ -2,6 +2,7 @@ import { Server, Socket } from "socket.io";
 import {
   initEventInterface,
   messageDownEventInterface,
+  updateEventInterface,
   User,
 } from "../types/interface.js";
 import { hashIPAddress } from "../utils/hash.js";
@@ -18,7 +19,12 @@ const emitUpdate = (io: Server, groupId: number) => {
   groups[groupId].forEach((socketId: string) => {
     io.to(socketId).emit(
       "update",
-      groups[groupId].map((socketId) => users[socketId].name)
+      groups[groupId].map(
+        (socketId): updateEventInterface => ({
+          name: users[socketId].name,
+          addressHash: users[socketId].addressHash,
+        })
+      )
     );
   });
 };

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,6 +12,7 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@mui/base": "^5.0.0-beta.60",
+    "@mui/icons-material": "^6.1.5",
     "@mui/material": "^6.1.5",
     "next": "14.2.15",
     "react": "^18",

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import "@/styles/style.scss";
 import React from "react";
-import Header from "@/components/Header/Header";
 
 export const metadata: Metadata = {
   title: "What's Up!",
@@ -22,10 +21,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="ja">
-      <body>
-        <Header />
-        <main>{children}</main>
-      </body>
+      <body>{children}</body>
     </html>
   );
 }
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -11,8 +11,10 @@ import styles from "./page.module.scss";
 import {
   initEventInterface,
   messageDownEventInterface,
+  updateEventInterface,
   Position,
 } from "@/types/interface";
+import Header from "@/components/Header/Header";
 
 let socket: Socket;
 
@@ -22,7 +24,7 @@ export default function WebSocketPage() {
   );
   const [modalClosed, setModalClosed] = useState<boolean>(false);
   const [name, setName] = useState<string>("");
-  const [names, setNames] = useState<string[]>([]);
+  const [users, setUsers] = useState<updateEventInterface[]>([]);
   const scrollBottomRef = useRef<HTMLDivElement>(null);
   const [position, setPosition] = useState<Position | null>(null);
 
@@ -99,8 +101,8 @@ export default function WebSocketPage() {
       }
     );
 
-    socket.on("update", (names: string[]) => {
-      setNames(names);
+    socket.on("update", (users: updateEventInterface[]) => {
+      setUsers(users);
     });
 
     // クリーンアップ時にソケットを切断
@@ -111,27 +113,25 @@ export default function WebSocketPage() {
 
   return (
     <>
-      <NestedModal
-        initWebSocket={initWebSocket}
-        setModalClosed={setModalClosed}
-        setName={setName}
-        name={name}
-        position={position}
-      />
-      <div className={styles.messageList}>
-        <h2>グループメンバー</h2>
-        {names.map((name, index) => (
-          <p key={index}>{name}</p>
-        ))}
-        <div>
-          <h2>メッセージ</h2>
-          {messageList.map((bubble, index) => (
-            <Bubble key={index} bubble={bubble} />
-          ))}
-          <div ref={scrollBottomRef} />
+      <Header users={users} />
+      <main>
+        <NestedModal
+          initWebSocket={initWebSocket}
+          setModalClosed={setModalClosed}
+          setName={setName}
+          name={name}
+          position={position}
+        />
+        <div className={styles.messageList}>
+          <div>
+            {messageList.map((bubble, index) => (
+              <Bubble key={index} bubble={bubble} />
+            ))}
+            <div ref={scrollBottomRef} />
+          </div>
         </div>
-      </div>
-      <SendForm socket={socket}></SendForm>
+        <SendForm socket={socket}></SendForm>
+      </main>
     </>
   );
 }
diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
@@ -1,18 +1,23 @@
-"use client";
-
 import React from "react";
 import styles from "./Header.module.scss";
 import { ImExit } from "react-icons/im";
+import UserList from "./UserList/UserList";
+import { updateEventInterface } from "@/types/interface";
+
+interface HeaderProps {
+  users: updateEventInterface[];
+}
 
-export default function Header() {
+export default function Header({ users }: HeaderProps) {
   return (
     <header className={styles.header}>
       <div className={styles.navigationContainer}>
         <nav className={styles.navigation}>
           <span className={styles.logo}>What&apos;s up!</span>
-          <span className={styles.userNumber}>users</span>
+          <UserList users={users} />
           <div
             className={styles.logoutButton}
+            style={{ paddingTop: "12px" }}
             onClick={() => window.location.reload()}
           >
             <ImExit />

diff --git a/frontend/src/components/Header/UserList/UserList.module.scss b/frontend/src/components/Header/UserList/UserList.module.scss
diff --git a/frontend/src/components/Header/UserList/UserList.tsx b/frontend/src/components/Header/UserList/UserList.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import UserListModal from "../UserListModal/UserListModal";
+import styles from "./UserList.module.scss";
+import { IconButton, Badge } from "@mui/material";
+import PersonIcon from "@mui/icons-material/Person";
+import { updateEventInterface } from "@/types/interface";
+interface UserListProps {
+  users: updateEventInterface[];
+}
+export default function UserList({ users }: UserListProps) {
+  const [open, setOpen] = useState(false);
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+  return (
+    <div className={styles.userListContainer}>
+      <UserListModal
+        userNames={users.map(
+          (user) => user.name + " #" + user.addressHash.slice(0, 4)
+        )}
+        modalOpen={open}
+        setModalOpen={setOpen}
+      />
+      <IconButton onClick={handleClick} style={{ paddingTop: "13px" }}>
+        <Badge badgeContent={users.length} color="secondary">
+          <PersonIcon />
+        </Badge>
+      </IconButton>
+    </div>
+  );
+}
diff --git a/frontend/src/components/Header/UserListModal/UserLIstModal.module.scss b/frontend/src/components/Header/UserListModal/UserLIstModal.module.scss
@@ -0,0 +1,15 @@
+.modalBox {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 400px;
+  padding: 16px 32px 24px;
+  background-color: #fff;
+  border: 2px solid #000;
+  box-shadow: 24px;
+  transform: translate(-50%, -50%);
+}
+
+.modalButton {
+  float: right;
+}
diff --git a/frontend/src/components/Header/UserListModal/UserListModal.tsx b/frontend/src/components/Header/UserListModal/UserListModal.tsx
@@ -0,0 +1,75 @@
+import * as React from "react";
+import {
+  Modal,
+  Box,
+  Button,
+  Typography,
+  List,
+  ListItem,
+  ListItemAvatar,
+  Avatar,
+  ListItemText,
+} from "@mui/material";
+
+import styles from "./UserListModal.module.scss";
+
+interface UserListModalProps {
+  userNames: string[];
+  modalOpen: boolean;
+  setModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export default function UserListModal({
+  userNames,
+  modalOpen,
+  setModalOpen,
+}: UserListModalProps) {
+  const handleClose = () => {
+    setModalOpen(false);
+  };
+
+  return (
+    <>
+      <Modal
+        open={modalOpen}
+        onClose={handleClose}
+        aria-labelledby="parent-modal-title"
+        aria-describedby="parent-modal-description"
+      >
+        <Box
+          className={styles.modalBox}
+          style={{
+            width: "min(90vw, 300px)",
+            boxSizing: "border-box",
+            padding: "16px 22px 15px",
+            border: "none",
+            borderRadius: "15px",
+            backgroundColor: "white",
+            margin: "auto",
+          }}
+        >
+          <Typography variant="h6" id="user-list-modal-title">
+            ユーザーリスト
+          </Typography>
+          <List
+            style={{
+              overflowWrap: "break-word",
+            }}
+          >
+            {userNames.map((user, index) => (
+              <ListItem key={index} style={{ borderBottom: "1px solid #ccc" }}>
+                <ListItemAvatar>
+                  <Avatar>{user.charAt(0)}</Avatar>
+                </ListItemAvatar>
+                <ListItemText primary={user} />
+              </ListItem>
+            ))}
+          </List>
+          <Button className={styles.modalButton} onClick={handleClose}>
+            閉じる
+          </Button>
+        </Box>
+      </Modal>
+    </>
+  );
+}
diff --git a/frontend/src/types/interface.ts b/frontend/src/types/interface.ts
@@ -20,3 +20,8 @@ export interface initEventInterface {
   name: string;
   position: Position;
 }
+
+export interface updateEventInterface {
+  name: string;
+  addressHash: string;
+}