fix errors

giacomo-folli · Jul 22, 2024 · 043d4d4 · 043d4d4
1 parent c8a7c16
commit 043d4d4
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 45 deletions.
diff --git a/frontend/src/components/messages/FileMessage.jsx b/frontend/src/components/messages/FileMessage.jsx
@@ -8,7 +8,64 @@ const FileMessage = ({
   isGroup,
   fromMe,
 }) => {
-  return message.type.split("/")[0] == "image" ? (
+  const messageType = message.type;
+  console.log(messageType);
+  return messageType == "audio/mpeg" ? (
+    <AudioFile
+      message={message}
+      isGroup={isGroup}
+      fromMe={fromMe}
+      chatClassName={chatClassName}
+    />
+  ) : (
+    <ImageOrPDFFile
+      message={message}
+      isGroup={isGroup}
+      fromMe={fromMe}
+      chatClassName={chatClassName}
+      bubbleBgColor={bubbleBgColor}
+    />
+  );
+};
+
+const AudioFile = ({ message, isGroup, fromMe, chatClassName }) => {
+  return (
+    <div
+      className={
+        "flex gap-3 items-center py-2 " +
+        (chatClassName == "chat-end" ? "flex-row-reverse" : "")
+      }
+    >
+      <div className="chat-image avatar">
+        <div className="w-10 rounded-full">
+          <img src={message.senderId.profilePic} alt="user avatar" />
+        </div>
+      </div>
+      <div className="rounded-lg w-full max-w-40">
+        <audio controls>
+          <source
+            src={"http://localhost:5000/api/upload/" + message.fileName}
+          />
+        </audio>
+        <div className="chat-footer opacity-50 text-xs text-right mt-0.5 gap-1 items-center">
+          {extractTime(message.createdAt)}
+          <span className="ml-auto capitalize">
+            {isGroup && !fromMe ? message.senderId.fullName : ""}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ImageOrPDFFile = ({
+  message,
+  isGroup,
+  fromMe,
+  chatClassName,
+  bubbleBgColor,
+}) => {
+  return (
     <div className={`chat ${chatClassName}`}>
       <div className="chat-image avatar">
         <div className="w-10 rounded-full">
@@ -46,32 +103,6 @@ const FileMessage = ({
         </span>
       </div>
     </div>
-  ) : (
-    <div
-      className={
-        "flex gap-3 items-center py-2 " +
-        (chatClassName == "chat-end" ? "flex-row-reverse" : "")
-      }
-    >
-      <div className="chat-image avatar">
-        <div className="w-10 rounded-full">
-          <img src={message.senderId.profilePic} alt="user avatar" />
-        </div>
-      </div>
-      <div className="rounded-lg w-full max-w-40">
-        <audio controls>
-          <source
-            src={"http://localhost:5000/api/upload/" + message.fileName}
-          />
-        </audio>
-        <div className="chat-footer opacity-50 text-xs text-right mt-0.5 gap-1 items-center">
-          {extractTime(message.createdAt)}
-          <span className="ml-auto capitalize">
-            {isGroup && !fromMe ? message.senderId.fullName : ""}
-          </span>
-        </div>
-      </div>
-    </div>
   );
 };
 

diff --git a/frontend/src/components/sidebar/SearchInput.jsx b/frontend/src/components/sidebar/SearchInput.jsx
@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { IoSearchSharp } from "react-icons/io5";
 import { FaPlus } from "react-icons/fa6";
 import { useAuthContext } from "../../context/AuthContext";
 import useGetUsers from "../../hooks/useGetUsers";
@@ -39,21 +38,6 @@ const SearchInput = ({ dialogOpen, setDialogOpen }) => {
   return (
     <>
       <form className="w-full flex items-center gap-2" onSubmit={handleSubmit}>
-        <div className="w-full hidden lg:flex lg:justify-between">
-          <input
-            type="text"
-            placeholder="Search..."
-            className="flex-grow bg-slate-500 bg-opacity-5 focus:bg-transparent input input-ghost border-slate-200 text-black"
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-          />
-          <button
-            type="submit"
-            className="btn btn-circle btn-ghost bg-transparent text-white"
-          >
-            <IoSearchSharp className="w-5 h-5 outline-none" />
-          </button>
-        </div>
         <button
           type="button"
           onClick={handleListUsers}

diff --git a/frontend/src/context/SocketContext.jsx b/frontend/src/context/SocketContext.jsx
@@ -15,8 +15,8 @@ export const SocketContextProvider = ({ children }) => {
 
   useEffect(() => {
     if (authUser) {
-      // const socket = io("http://localhost:5000/", {
-      const socket = io("https://react-chat-macm.onrender.com", {
+      const socket = io("http://localhost:5000/", {
+        // const socket = io("https://react-chat-macm.onrender.com", {
         query: {
           userId: authUser._id,
         },