Merge pull request #8 from phillip-che/phillip-branch

merge

.gitignore

@@ -0,0 +1 @@
+/node_modules

client/components/Image.tsx

@@ -0,0 +1,24 @@
+import "../styles/Image.css"
+
+import { useEffect, useState } from 'react';
+
+const Image = ({ src, type } : {src: any, type: string}) => {
+
+    const [ image, setImage ] = useState<any>("");
+
+    useEffect(() => {
+        const blob = new Blob([src], {type: src.type });
+
+        const reader = new FileReader();
+        reader.readAsDataURL(blob);
+        reader.onloadend = () => {
+            setImage(reader.result);
+        };
+    }, []);
+
+    return (
+        <img className="image-container" src={image} />
+    )       
+}
+
+export default Image;

client/components/LoginFields.tsx

@@ -6,6 +6,8 @@ import TextField from '@mui/material/TextField';
 import Button from '@mui/material/Button';
 import { useSocket } from '@/context/socket.context';
 import EVENTS from '@/config/events';
+import { toast, ToastContainer } from 'react-toastify';
+import "react-toastify/dist/ReactToastify.css";
 
 const LoginFields = () => {
 
@@ -22,13 +24,41 @@ const LoginFields = () => {
   };
 
   const handleJoinRoomClick = () => {
+    if(usernameInput.length > 32) {
+      toast.error('Username cannot be more than 32 characters', {
+        position: "top-right",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "dark",
+        });
+        return;
+    }
     setUsername(usernameInput);
     localStorage.setItem("username", usernameInput);
-    socket.emit(EVENTS.CLIENT.JOIN_ROOM, {roomID: roomIDInput, username: username, socketID: socket.id});
+    socket.emit(EVENTS.CLIENT.JOIN_ROOM, {roomID: roomIDInput, username: usernameInput, socketID: socket.id});
   };
 
   const handleCreateRoomClick = () => {
-    socket.emit(EVENTS.CLIENT.CREATE_ROOM);
+    if(usernameInput.length > 32) {
+      toast.error('Username cannot be more than 32 characters', {
+        position: "top-right",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "dark",
+        });
+        return;
+    };
+    setUsername(usernameInput);
+    localStorage.setItem("username", usernameInput);
+    socket.emit(EVENTS.CLIENT.CREATE_ROOM, {username});
   };
 
   useEffect(() => {
@@ -148,6 +178,7 @@ const LoginFields = () => {
         </Button>
       </div>  
     </Box>
+    <ToastContainer />
   </div>
   );
 };

client/components/Message.tsx

@@ -2,20 +2,31 @@
 
 import "../styles/Message.css"
 import { useSocket } from "@/context/socket.context"
+import Image from '@/components/Image';
 
-const Message = ({author, text, timestamp} : {author: string, text: string, timestamp: string}) => {
+const Message = ({type, author, body, timestamp} : {type: string, author: string, body: string, timestamp: string}) => {
 
   const { username } = useSocket();
 
   return (
     <div>
       <div className="message" id={username === author ? "you" : "other"}>
-        <p className="user">{author}</p>
-        <p className="text">{text}</p>
-        <p className="timestamp">{timestamp}</p>
+        {type === "text" ? (
+          <>
+            <p className="user">{author}</p>
+            <p className="text">{body}</p>
+            <p className="timestamp">{timestamp}</p> 
+          </> 
+        ): (
+          <>
+            <p className="user">{author}</p>
+            <Image src={body} type={type} />
+            <p className="timestamp">{timestamp}</p> 
+          </>
+        )}
       </div> 
     </div>
   )
-}
+};
 
 export default Message;

client/components/MessageInput.tsx

@@ -1,38 +1,63 @@
 import "../styles/MessageInput.css"
 import { Button, TextField } from '@mui/material';
-import { useState } from 'react'
+import { useState, useRef } from 'react'
 import { useSocket } from "@/context/socket.context"
+import FileUploadOutlinedIcon from '@mui/icons-material/FileUploadOutlined';
+import SendOutlinedIcon from '@mui/icons-material/SendOutlined';
 import EVENTS from '@/config/events';
 
 const MessageInput = () => {
 
     const { socket, username, messages, setMessages, roomID } = useSocket();
     const [ textInput, setTextInput ] = useState("");
-
+    const fileRef = useRef(null);
+
     const handleChange = (e: any) => {
         setTextInput(e.target.value);
     };
 
     const handleKeyPress = (e: any) => {
-    if (e.key === "Enter") { 
-        handleSendClick();
-    }
+        if (e.key === "Enter") { 
+            handleSendClick();
+        }
+    };
+
+    const handleFile = (e: any) => {
+        fileRef.current = e.target.files[0];
+        const timestamp = getTime();
+        setMessages([...messages, {type: "file", username: username, body: fileRef.current, timestamp: timestamp}]);
+        socket.emit(EVENTS.CLIENT.SEND_MESSAGE, {type: "file", roomID: roomID, username: username, body: fileRef.current, timestamp: timestamp});    
     };
 
     const handleSendClick = () => {
         if (textInput.length < 1) {
             return;
         }
-        const date = new Date();
-        const timestamp = date.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });
-
-        setMessages([...messages, {username: username, text: textInput, timestamp: timestamp}]);
-        socket.emit(EVENTS.CLIENT.SEND_MESSAGE, {roomID: roomID, username: username, text: textInput, timestamp: timestamp});
+
+        const timestamp = getTime();
+        setMessages([...messages, {type: "text", username: username, body: textInput, timestamp: timestamp}]);
+        socket.emit(EVENTS.CLIENT.SEND_MESSAGE, {type: "text", roomID: roomID, username: username, body: textInput, timestamp: timestamp});    
+
         setTextInput("");
+        fileRef.current = null;
     };
 
+    const getTime = () => {
+        const date = new Date();
+        return date.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });
+    }
+
     return (
         <div className="message-input">
+            <div className="file-upload">
+                <label 
+                    onChange={handleFile} 
+                    htmlFor="formId"
+                >
+                    <input name="" type="file" id="formId" hidden />
+                    <FileUploadOutlinedIcon />
+                </label>
+            </div>
             <TextField
                 sx={{ 
                 input: { color: "#F7F7F8" }, 
@@ -48,21 +73,28 @@ const MessageInput = () => {
                 },
                 "& .MuiOutlinedInput-root:hover": {
                     "& > fieldset": {
-                    borderColor: "#F7F7F8"}
+                    borderColor: "#76736F"}
                 },
                 }}
                 value={textInput}
                 onChange={handleChange}
                 onKeyDown={handleKeyPress}
                 type="text"
-                placeholder="Enter your message here.."
+                placeholder="Message"
                 fullWidth
             />
-            <Button 
-                sx={{color: "#F7F7F8"}}
+            <Button
+                className="send-message-button"
+                sx={{
+                    color: "#F7F7F8",
+                    ':hover': {
+                        bgcolor: 'transparent', 
+                        opacity: '0.5',
+                    }
+                }}
                 onClick={handleSendClick}
-            > 
-                Send 
+            >
+                <SendOutlinedIcon /> 
             </Button>
         </div>
     )

client/components/MessagesContainer.tsx

@@ -26,9 +26,10 @@ const MessagesContainer = () => {
     <div className="messages-container">
         {messages?.map((message, i) => (
             <Message 
-                key={i} 
+                key={i}
+                type={message.type}
                 author={message.username} 
-                text={message.text} 
+                body={message.body} 
                 timestamp={message.timestamp} 
             />
         ))}

client/config/events.ts

@@ -11,7 +11,7 @@ const EVENTS = {
         SEND_MESSAGE: 's_send_message',
         JOIN_ROOM: 's_join_room',
         LEAVE_ROOM: 's_leave_room',
-        CREATE_ROOM: 'c_create_room'
+        CREATE_ROOM: 's_create_room'
     }
 };
 

client/context/socket.context.tsx

@@ -8,13 +8,13 @@ interface Context {
     socket: Socket,
     username?: string,
     setUsername: Function,
-    messages: {username: string, text: string, timestamp: string}[],
+    messages: {type: string, username: string, body: string, timestamp: string}[],
     setMessages: Function,
     roomID?: string
 }
 
 const SOCKET_URL =
-  process.env.NEXT_PUBLIC_SOCKET_URL || 'http://54.153.32.172:4000';
+  process.env.NEXT_PUBLIC_SOCKET_URL || 'http://localhost:4000';
 
 const socket = io(SOCKET_URL, {
     reconnection: true,
@@ -31,21 +31,21 @@ const SocketContext = createContext<Context>({
 
 const SocketsProvider = (props: any) => {
     const [username, setUsername] = useState<string>("");
-    const [messages, setMessages] = useState<{username: string, text: string, timestamp: string}[]>([]);
+    const [messages, setMessages] = useState<{type: string, username: string, body: string, timestamp: string}[]>([]);
     const [roomID, setRoomID] = useState<string>("");
 
     useEffect(() => {
-        socket.on(EVENTS.SERVER.SEND_MESSAGE, ({username, text, timestamp}) => {
-            setMessages([...messages, {username, text, timestamp}]);
+        socket.on(EVENTS.SERVER.SEND_MESSAGE, ({type, username, body, timestamp}) => {
+            setMessages([...messages, {type, username, body, timestamp}]);
         });
     }, [socket]);
 
     useEffect(() => {
         setMessages([]);
     }, [roomID]);
 
-    socket.on(EVENTS.SERVER.SEND_MESSAGE, ({username, text, timestamp}) => {
-        setMessages([...messages, {username, text, timestamp}]);
+    socket.on(EVENTS.SERVER.SEND_MESSAGE, ({type, username, body, timestamp}) => {
+        setMessages([...messages, {type, username, body, timestamp}]);
     });
 
     socket.on(EVENTS.SERVER.JOIN_ROOM, ({roomID}) => {
@@ -58,7 +58,8 @@ const SocketsProvider = (props: any) => {
     });
 
     return <SocketContext.Provider value={{ socket, username, setUsername, messages, setMessages, roomID }} {...props} />
-}
+
+  };
 
 export const useSocket = () => useContext(SocketContext);
 

client/package.json

@@ -16,6 +16,7 @@
     "next": "14.0.1",
     "react": "^18",
     "react-dom": "^18",
+    "react-toastify": "^9.1.3",
     "socket.io-client": "^4.7.2"
   },
   "devDependencies": {

client/styles/ChatContainer.css

@@ -1,6 +1,6 @@
 .chat-container {
     display: flex;
     flex-direction: column;
-    width: 500px;
+    width: 750px;
     margin: 50px auto;
 }

client/styles/Image.css

@@ -0,0 +1,4 @@
+.image-container {
+    width: 250px;
+    border-radius: 5px;
+}

client/styles/Message.css

@@ -1,8 +1,6 @@
 .message { 
     display: flex;
     flex-direction: column;
-    overflow: hidden;
-    text-overflow: ellipsis;
     margin-top: 10px;
 }
 
@@ -17,6 +15,7 @@
     font-size: 14px;
     padding: 8px;
     border-radius: 5px;
+    /* text-align: center; */
 }
 
 .timestamp {
@@ -26,7 +25,13 @@
 
 #you {
     align-items: flex-end;
-    margin-right: 5px;
+    margin-right: 10px;
+    margin-left: 100px;
+}
+
+#you .user, #you .timestamp {
+    display: flex;
+    justify-content: right;
 }
 
 #you .text {
@@ -37,7 +42,13 @@
 
 #other {
     align-items: flex-start;
-    margin-left: 5px;
+    margin-left: 10px;
+    margin-right: 100px;
+}
+
+#other .user, #other .timestamp {
+    display: flex;
+    justify-content: left;
 }
 
 #other .text {