Merge branch 'dev' of https://github.com/TelwareSW/telware-frontend i…

…nto feat/delete-group
TelwareSW · Dec 21, 2024 · d2b8d55 · d2b8d55
2 parents 721efa0 + d679009
commit d2b8d55
Show file tree

Hide file tree

Showing 14 changed files with 80 additions and 32 deletions.
diff --git a/app/src/features/authentication/login/services/apiLogin.ts b/app/src/features/authentication/login/services/apiLogin.ts
@@ -1,5 +1,6 @@
 import { API_URL } from "@constants";
 import { User } from "../LoginForm/LoginForm";
+import toast from "react-hot-toast";
 
 export async function login(user: User) {
   const res = await fetch(`${API_URL}/auth/login`, {
@@ -15,6 +16,7 @@ export async function login(user: User) {
 
   const data = await res.json();
   if (data.status !== "success") {
+    toast.error(data.message);
     throw new Error(data.message);
   }
 

diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
@@ -81,6 +81,7 @@ function ChatBody() {
               chatType={chat?.type as "private" | "group" | "channel"}
               sender={members.find((member) => member._id === data.senderId)}
               numberOfMembers={chat?.numberOfMembers}
+              isAppropriate={data.isAppropriate}
             >
               <Message key={data._id} />
             </MessageProvider>
@@ -96,6 +97,7 @@ function ChatBody() {
               chatType="channel"
               sender={members.find((member) => member._id === data.senderId)}
               numberOfMembers={chat?.numberOfMembers}
+              isAppropriate={data.isAppropriate}
             >
               <Message key={data._id} />
             </MessageProvider>

diff --git a/app/src/features/chats/ChatInputIcons.tsx b/app/src/features/chats/ChatInputIcons.tsx
@@ -20,19 +20,25 @@ function ChatInputIcons() {
     setInput,
     file,
     setFile,
-    setIsFilePreviewOpen,
+    setIsFilePreviewOpen
   } = useContext(ChatInputContext);
 
   const toggleShowEmojies = () => {
     setIsEmojiSelectorOpen((show: boolean) => !show);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    setIsEmojiSelectorOpen(false);
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSubmit(e as unknown as Event);
     }
   };
+  const handleSetFile = (file: File) => {
+    setIsEmojiSelectorOpen(false);
+    setFile(file);
+    setIsFilePreviewOpen(true);
+  };
 
   return (
     <>
@@ -50,7 +56,7 @@ function ChatInputIcons() {
 
       <MediaUploadComponent
         file={file}
-        setFile={setFile}
+        setFile={handleSetFile}
         setIsFilePreviewOpen={setIsFilePreviewOpen}
       />
     </>

diff --git a/app/src/features/chats/ChatItem.tsx b/app/src/features/chats/ChatItem.tsx
@@ -59,7 +59,7 @@ type ChatItemProps = {
 
 const ChatItem = ({
   chat: { _id, lastMessage, name, photo },
-  onClick,
+  onClick
 }: ChatItemProps) => {
   const navigate = useNavigate();
 
@@ -86,7 +86,7 @@ const ChatItem = ({
           <Timestamp data-testid="chat-timestamp">
             {new Date(timestamp).toLocaleTimeString("en-US", {
               hour: "2-digit",
-              minute: "2-digit",
+              minute: "2-digit"
             }) || "No messages"}
           </Timestamp>
         </ChatHeader>

diff --git a/app/src/features/chats/MessageContent.tsx b/app/src/features/chats/MessageContent.tsx
@@ -36,6 +36,7 @@ function MessageContent() {
     media,
     contentType,
     chatType,
+    isAppropriate,
   } = useMessageContext();
 
   const { searchTerm, searchResults } = useAppSelector((state) => state.search);
@@ -49,6 +50,10 @@ function MessageContent() {
     media && (contentType === "GIF" || contentType === "sticker");
 
   const isFile = media && !(contentType === "GIF" || contentType === "sticker");
+  const filteredContent =
+    (chatType === "group" || chatType === "channel") && !isAppropriate
+      ? content
+      : "🚫️ This mesaage has unappropriate content";
 
   return (
     <Container>

diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
@@ -123,6 +123,7 @@ function Topbar() {
   const { chatId } = useParams<{ chatId: string }>();
   const userId = useAppSelector((state) => state.user.userInfo.id);
   const chats = useAppSelector((state) => state.chats.chats);
+  const dispatch = useAppDispatch();
   const { activeThread } = useAppSelector((state) => state.channelsThreads);
   const [isSearching, setIsSearching] = useState(false);
   const [isCollapsed, setIsCollapsed] = useState(false);
@@ -153,28 +154,31 @@ function Topbar() {
   const { removeFromBlockList } = useBlock();
 
   const { setIsRightSideBarOpen } = useRightSideBarContext();
-  const dispatch = useAppDispatch();
 
-  const handleOpenRightSideBar = useCallback(() => {
-    if (!chat) return;
-    if (chat?.type === "private") setIsRightSideBarOpen(false);
-    else {
-      dispatch(
-        updateSideBarView({
-          redirect:
-            chat?.type === "group"
-              ? sideBarPages.GROUP_INFO
-              : sideBarPages.CHANNEL_INFO,
-          data: { type: "right" }
-        })
-      );
-    }
-  }, [chat, dispatch, setIsRightSideBarOpen]);
+  const cachedOpenRightSideBar = useCallback(
+    function handleOpenRightSideBar() {
+      if (!chat) return;
+      if (chat?.type === "private") setIsRightSideBarOpen(false);
+      else {
+        dispatch(
+          updateSideBarView({
+            redirect:
+              chat?.type === "group"
+                ? sideBarPages.GROUP_INFO
+                : sideBarPages.CHANNEL_INFO,
+            data: { type: "right" }
+          })
+        );
+      }
+    },
+    [chat, dispatch, setIsRightSideBarOpen]
+  );
 
   useEffect(() => {
     if (!chatId) return;
-    handleOpenRightSideBar();
-  }, [chatId, handleOpenRightSideBar]);
+    cachedOpenRightSideBar();
+  }, [chatId, chat, cachedOpenRightSideBar]);
+
   let image;
   let lastSeen;
 

diff --git a/app/src/features/chats/audio/VoiceRecorder.tsx b/app/src/features/chats/audio/VoiceRecorder.tsx
@@ -82,9 +82,29 @@ const VoiceRecorder: React.FC = ({
         lastModified: Date.now()
       });
       audioChunks.current = [];
-      uploadVoiceNote(file);
+      try {
+        uploadVoiceNote(file, {
+          onSuccess: (url) => {
+            console.log("File uploaded successfully:", url);
+            handleSendMessage("", chatId, url);
+          },
+          onError: (error) => {
+            console.error("Error uploading file:", error);
+          }
+        });
+      } catch (error) {
+        console.error("Unexpected error while sending file:", error);
+      }
+      setIsRecording("idle");
     }
-  }, [isRecording, recordingMimeType, uploadVoiceNote]);
+  }, [
+    isRecording,
+    recordingMimeType,
+    setIsRecording,
+    uploadVoiceNote,
+    handleSendMessage,
+    chatId
+  ]);
 
   useEffect(() => {
     if (voiceNoteURL && isRecording === "pause") {

diff --git a/app/src/features/chats/contexts/MessageProvider.tsx b/app/src/features/chats/contexts/MessageProvider.tsx
@@ -18,6 +18,7 @@ type ProviderProps = {
   chatType: string;
   sender?: Member;
   numberOfMembers?: number;
+  isAppropriate: boolean;
 };
 
 function MessageProvider({
@@ -26,13 +27,21 @@ function MessageProvider({
   chatType,
   sender,
   numberOfMembers,
+  isAppropriate,
 }: ProviderProps) {
   const userId = useAppSelector((state) => state.user.userInfo.id);
   const isMine = userId === data.senderId;
 
   return (
     <MessageContext.Provider
-      value={{ ...data, isMine, chatType, sender, numberOfMembers }}
+      value={{
+        ...data,
+        isMine,
+        chatType,
+        sender,
+        numberOfMembers,
+        isAppropriate,
+      }}
     >
       {children}
     </MessageContext.Provider>

diff --git a/app/src/features/chats/hooks/useChatInput.ts b/app/src/features/chats/hooks/useChatInput.ts
@@ -32,7 +32,7 @@ function useChatInput() {
     e.preventDefault();
     setIsEmojiSelectorOpen(false);
     if (isRecording !== "idle") return;
-    handleSendMessage(input, chatId, voiceNoteName);
+    handleSendMessage(input, chatId, voiceNoteName, "audio");
     dispatch(clearActiveMessage());
     setInput("");
   };

diff --git a/app/src/features/chats/media/MediaUploadComponent.tsx b/app/src/features/chats/media/MediaUploadComponent.tsx
@@ -10,7 +10,7 @@ const InvisibleButton = styled.div`
 `;
 interface ChildProps {
   file: File | null;
-  setFile: React.Dispatch<React.SetStateAction<File | null>>;
+  setFile: (file: File) => void;
   setIsFilePreviewOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 

diff --git a/app/src/features/chats/media/hooks/useUploadMedia.tsx b/app/src/features/chats/media/hooks/useUploadMedia.tsx
@@ -1,15 +1,18 @@
 import { useMutation } from "@tanstack/react-query";
 import { uploadFile } from "../services/uploadfileHandler";
+import toast from "react-hot-toast";
 
 export function useUploadMedia() {
   const { mutate, isPending, error, data } = useMutation({
     mutationFn: uploadFile,
     onError: (error) => {
       const errorMessage =
         error instanceof Error ? error.message : "An unknown error occurred";
+      toast.error("Error uploading file: " + errorMessage);
       console.error("Error uploading file:", errorMessage);
     },
     onSuccess: (data) => {
+      toast.success("File uploaded successfully");
       console.log("File uploaded successfully:", data);
     },
   });

diff --git a/app/src/features/chats/services/apiFetchNextPage.ts b/app/src/features/chats/services/apiFetchNextPage.ts
@@ -25,10 +25,6 @@ async function apiFetchNextPage({
     throw new Error(data.message);
   }
 
-  if (data.status !== "success") {
-    throw new Error(data.message);
-  }
-
   return { messages: data.data.messages, nextPage: data.data.nextPage };
 }
 

diff --git a/app/src/types/messages.ts b/app/src/types/messages.ts
@@ -30,6 +30,7 @@ export interface MessageInterface {
 
   parentMessageId: string | null;
   status: MessageStatus;
+  isAppropriate: boolean;
 
   media?: string;
 

diff --git a/app/src/utils/helpers.ts b/app/src/utils/helpers.ts
@@ -24,7 +24,7 @@ function getElapsedTime(timestamp: string): string {
   } else if (minutes > 0) {
     return `${minutes}m`;
   } else {
-    return `${seconds}s`;
+    return `${Math.max(seconds, 1)}s`;
   }
 }