Merge pull request #80 from Team-Futsukayoi/feature/#78_bug-fix-UI-im…

…prove feat: Improved chat functionality and UI
Team-Futsukayoi · Oct 27, 2024 · 323e1eb · 323e1eb
2 parents 50b8c66 + 1759d01
commit 323e1eb
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 173 deletions.
diff --git a/docs/Git・GitHub運用方針.md b/docs/Git・GitHub運用方針.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/pages/chatpage/ChatPage.jsx b/src/pages/chatpage/ChatPage.jsx
@@ -1,16 +1,19 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { db } from '../../firebaseConfig';
 import { collection, query, where, orderBy, onSnapshot, addDoc, serverTimestamp, doc, getDoc } from 'firebase/firestore';
-import { Box, Typography, TextField, Button, Avatar } from '@mui/material';
+import { Box, Typography, TextField, Button, Avatar, Paper, Container, ThemeProvider } from '@mui/material';
+import SendIcon from '@mui/icons-material/Send';
 import { useAuth } from '../../hooks/useAuth';
+import theme from '../../styles/theme';  // 先ほど作成したテーマをインポート
 
 function ChatPage() {
   const [messages, setMessages] = useState([]);
   const [newMessage, setNewMessage] = useState('');
   const { friendId } = useParams();
   const { currentUser } = useAuth();
   const [friendInfo, setFriendInfo] = useState(null);
+  const messagesEndRef = useRef(null);
 
   useEffect(() => {
     if (currentUser && friendId) {
@@ -50,6 +53,10 @@ function ChatPage() {
     }
   }, [currentUser, friendId]);
 
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
   const sendMessage = async (e) => {
     e.preventDefault();
     if (newMessage.trim() === '') return;
@@ -69,48 +76,59 @@ function ChatPage() {
   };
 
   return (
-    <Box sx={{ maxWidth: 600, margin: 'auto', p: 2 }}>
-      <Typography variant="h4" sx={{ mb: 2 }}>
-        {friendInfo ? friendInfo.username : 'チャット'}
-      </Typography>
-      <Box sx={{ height: 400, overflowY: 'auto', mb: 2, p: 2, bgcolor: 'background.paper' }}>
-        {messages.map((message) => (
-          <Box
-            key={message.id}
-            sx={{
-              display: 'flex',
-              justifyContent: message.userId === currentUser.uid ? 'flex-end' : 'flex-start',
-              mb: 1,
-            }}
-          >
-            <Box
-              sx={{
-                bgcolor: message.userId === currentUser.uid ? 'primary.main' : 'grey.300',
-                color: message.userId === currentUser.uid ? 'white' : 'black',
-                p: 1,
-                borderRadius: 1,
-                maxWidth: '70%',
-              }}
-            >
-              <Typography>{message.text}</Typography>
+    <ThemeProvider theme={theme}>
+      <Box sx={{ bgcolor: 'background.default', minHeight: '100vh', py: 3 }}>
+        <Container maxWidth="sm">
+          <Paper elevation={3} sx={{ p: 2, bgcolor: 'background.paper' }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+              <Avatar src={friendInfo?.icon} alt={friendInfo?.username} sx={{ mr: 2 }} />
+              <Typography variant="h5" sx={{ color: 'primary.main', fontWeight: 'bold' }}>
+                {friendInfo ? friendInfo.username : 'チャット'}
+              </Typography>
+            </Box>
+            <Box sx={{ height: '60vh', overflowY: 'auto', mb: 2, p: 2 }}>
+              {messages.map((message) => (
+                <Box
+                  key={message.id}
+                  sx={{
+                    display: 'flex',
+                    justifyContent: message.userId === currentUser.uid ? 'flex-end' : 'flex-start',
+                    mb: 1,
+                  }}
+                >
+                  <Paper
+                    elevation={1}
+                    sx={{
+                      p: 1,
+                      maxWidth: '70%',
+                      bgcolor: message.userId === currentUser.uid ? 'primary.light' : 'background.paper',
+                      color: message.userId === currentUser.uid ? 'text.primary' : 'text.secondary',
+                      borderRadius: message.userId === currentUser.uid ? '20px 20px 0 20px' : '20px 20px 20px 0',
+                    }}
+                  >
+                    <Typography variant="body1">{message.text}</Typography>
+                  </Paper>
+                </Box>
+              ))}
+              <div ref={messagesEndRef} />
+            </Box>
+            <Box component="form" onSubmit={sendMessage} sx={{ display: 'flex' }}>
+              <TextField
+                fullWidth
+                value={newMessage}
+                onChange={(e) => setNewMessage(e.target.value)}
+                placeholder="メッセージを入力"
+                variant="outlined"
+                sx={{ mr: 1 }}
+              />
+              <Button type="submit" variant="contained" endIcon={<SendIcon />}>
+                送信
+              </Button>
             </Box>
-          </Box>
-        ))}
+          </Paper>
+        </Container>
       </Box>
-      <form onSubmit={sendMessage} style={{ display: 'flex' }}>
-        <TextField
-          fullWidth
-          value={newMessage}
-          onChange={(e) => setNewMessage(e.target.value)}
-          placeholder="メッセージを入力"
-          variant="outlined"
-          sx={{ mr: 1 }}
-        />
-        <Button type="submit" variant="contained">
-          送信
-        </Button>
-      </form>
-    </Box>
+    </ThemeProvider>
   );
 }
 

diff --git a/src/pages/chats/ChatListPage.jsx b/src/pages/chats/ChatListPage.jsx
@@ -54,33 +54,22 @@ export const ChatListPage = () => {
   useEffect(() => {
     const unsubscribe = auth.onAuthStateChanged(async (user) => {
       if (user) {
-        // ユーザーが認証されている場合、Firestoreからユーザー情報を取得
-        const userDoc = await getDoc(doc(db, 'users', user.uid));
-        if (userDoc.exists()) {
-          setUserInfo(userDoc.data());
-        }
-      } else {
-        // ユーザーが認証されていない場合、ログインページにリダイレクト
-        navigate('/signin');
-      }
-    });
-
-    return () => unsubscribe();
-  }, [navigate]);
-
-
-  useEffect(() => {
-    const unsubscribe = auth.onAuthStateChanged(async (user) => {
-      if (user) {
+        console.log("User authenticated:", user.uid);
         const userDoc = await getDoc(doc(db, 'users', user.uid));
         if (userDoc.exists()) {
           const userData = userDoc.data();
+          console.log("User data:", userData);
           setUserInfo(userData);
-          // ユーザー固有のフレンドリストを取得
+
+          // フレンドリストを取得
           const friendList = await fetchFriendsFromFirestore(userData.userId);
+          console.log("Fetched friend list:", friendList);
           setIsFriendList(friendList);
+        } else {
+          console.log("User document does not exist");
         }
       } else {
+        console.log("User not authenticated, navigating to signin");
         navigate('/signin');
       }
     });
@@ -191,29 +180,6 @@ export const ChatListPage = () => {
     }
   };
 
-useEffect(() => {
-  const unsubscribe = auth.onAuthStateChanged(async (user) => {
-    if (user) {
-      console.log("User authenticated:", user.uid);
-      const userDoc = await getDoc(doc(db, 'users', user.uid));
-      if (userDoc.exists()) {
-        const userData = userDoc.data();
-        console.log("User data:", userData);
-        setUserInfo(userData);
-        const friendList = await fetchFriendsFromFirestore(user.uid);
-        console.log("Fetched friend list in useEffect:", friendList);
-        setIsFriendList(friendList);
-      } else {
-        console.log("User document does not exist");
-      }
-    } else {
-      console.log("User not authenticated, navigating to signin");
-      navigate('/signin');
-    }
-  });
-
-  return () => unsubscribe();
-}, [navigate]);
 
 
   if (!userInfo) {
@@ -285,7 +251,7 @@ useEffect(() => {
               <Grid container spacing={2} alignItems="center">
                 <Grid item xs={9}>
                   <StyledTextField
-                    label="フレンドのユーザーIDを入力"
+                    label="ユーザーIDを入力"
                     value={friendName}
                     onChange={(e) => setFriendName(e.target.value)}
                     fullWidth

diff --git a/src/pages/chats/FriendList.jsx b/src/pages/chats/FriendList.jsx
@@ -60,7 +60,7 @@ export const FriendList = ({ friendList }) => {
                         variant="subtitle1"
                         sx={{ fontWeight: 500 }}
                       >
-                        {username || `ID: ${userId}`}
+                        {username || `No Name (ID: ${userId})`}
                       </Typography>
                     }
                   />

diff --git a/src/styles/theme.js b/src/styles/theme.js
@@ -0,0 +1,27 @@
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#FFC107', // 黄色
+      light: '#FFE082',
+      dark: '#FFA000',
+    },
+    secondary: {
+      main: '#FF9800', // オレンジ
+    },
+    background: {
+      default: '#FFFDE7',
+      paper: '#FFFFFF',
+    },
+    text: {
+      primary: '#212121',
+      secondary: '#757575',
+    },
+  },
+  typography: {
+    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+  },
+});
+
+export default theme;