Replace onSocketMount with fetchMilti/SingleChatData (#163)

chatengine-io · Mar 23, 2022 · 572405f · 572405f
1 parent bd791a9
commit 572405f
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 67 deletions.
diff --git a/example/src/Pages/HomePage/ChatEngine.js b/example/src/Pages/HomePage/ChatEngine.js
@@ -23,7 +23,6 @@ const ChatWindowApp = (props) => {
         secret={chatProps.secret}
         isDevelopment={chatProps.isDevelopment}
         // Socket Hooks
-        onSocketMount={chatProps.onSocketMount}
         onConnect={chatProps.onConnect}
         onAuthFail={chatProps.onAuthFail}
         onNewChat={chatProps.onNewChat}

diff --git a/src/hooks/useMultiChatLogic.tsx b/src/hooks/useMultiChatLogic.tsx
@@ -83,6 +83,15 @@ export const useMultiChatLogic = (
   messageCountRef.current = messages.length;
   const chat = chats.find((chat) => chat.id === activeChatId);
 
+  // Fetch data on mount
+  const didMountRef = useRef<boolean>(false);
+  useEffect(() => {
+    if (!didMountRef.current) {
+      didMountRef.current = true;
+      fetchMultiChatData();
+    }
+  }, []);
+
   useEffect(() => {
     const chat = chats.find((chat) => chat.id === activeChatId);
     const chatPerson = chat?.people.find(
@@ -99,6 +108,29 @@ export const useMultiChatLogic = (
     }
   }, [chats, activeChatId, isChatFeedAtBottom]);
 
+  const fetchMultiChatData = () => {
+    const now = new Date()
+      .toISOString()
+      .replace('T', ' ')
+      .replace('Z', `${Math.floor(Math.random() * 1000)}+00:00`);
+
+    getChatsBefore(
+      host,
+      headers,
+      now,
+      chatCountRef.current > 0 ? chatCountRef.current : chatCountIterator,
+      (chats) => {
+        onGetChats(chats);
+
+        let currentChat = activeChatId;
+        if (!activeChatId && chats.length > 0) {
+          currentChat = chats[0].id;
+        }
+        currentChat && onChatCardClick(currentChat);
+      }
+    );
+  };
+
   const onGetChats = (chats: ChatObject[] = []) => {
     setHasMoreChats(chats.length >= chatCountRef.current + chatCountIterator);
 
@@ -183,51 +215,7 @@ export const useMultiChatLogic = (
   };
 
   const onConnect = () => {
-    // Same data as onSocketMount
-    const now = new Date()
-      .toISOString()
-      .replace('T', ' ')
-      .replace('Z', `${Math.floor(Math.random() * 1000)}+00:00`);
-
-    getChatsBefore(
-      host,
-      headers,
-      now,
-      chatCountRef.current > 0 ? chatCountRef.current : chatCountIterator,
-      (chats) => {
-        onGetChats(chats);
-
-        let currentChat = activeChatId;
-        if (!activeChatId && chats.length > 0) {
-          currentChat = chats[0].id;
-        }
-        currentChat && onChatCardClick(currentChat);
-      }
-    );
-  };
-
-  const onSocketMount = () => {
-    // Same data as onConnect
-    const now = new Date()
-      .toISOString()
-      .replace('T', ' ')
-      .replace('Z', `${Math.floor(Math.random() * 1000)}+00:00`);
-
-    getChatsBefore(
-      host,
-      headers,
-      now,
-      chatCountRef.current > 0 ? chatCountRef.current : chatCountIterator,
-      (chats) => {
-        onGetChats(chats);
-
-        let currentChat = activeChatId;
-        if (!activeChatId && chats.length > 0) {
-          currentChat = chats[0].id;
-        }
-        currentChat && onChatCardClick(currentChat);
-      }
-    );
+    fetchMultiChatData();
   };
 
   const onAuthFail = () => {};
@@ -359,7 +347,6 @@ export const useMultiChatLogic = (
 
   return {
     // Socket Hooks
-    onSocketMount,
     onConnect,
     onAuthFail,
     onGetChats,

diff --git a/src/hooks/useSingleChatLogic.tsx b/src/hooks/useSingleChatLogic.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 
 import { ChatObject, MessageObject, PersonObject } from '../interfaces';
 import { getDateTime } from '../components/util/dateTime';
@@ -63,6 +63,22 @@ export const useSingleChatLogic = (
   const messageCountRef = useRef<number>(0);
   messageCountRef.current = messages.length;
 
+  // Fetch data on mount
+  const didMountRef = useRef<boolean>(false);
+  useEffect(() => {
+    if (!didMountRef.current) {
+      didMountRef.current = true;
+      fetchSingleChatData();
+    }
+  }, []);
+
+  const fetchSingleChatData = () => {
+    getChat(host, headers, chatId, (chat) => {
+      setChat(chat);
+      onChatCardClick(chat.id);
+    });
+  };
+
   const onEditChat = (chat: ChatObject) => {
     setChat(chat);
   };
@@ -120,19 +136,7 @@ export const useSingleChatLogic = (
   };
 
   const onConnect = () => {
-    // Same data as onSocketMount
-    getChat(host, headers, chatId, (chat) => {
-      setChat(chat);
-      onChatCardClick(chat.id);
-    });
-  };
-
-  const onSocketMount = () => {
-    // Same data as onConnect
-    getChat(host, headers, chatId, (chat) => {
-      setChat(chat);
-      onChatCardClick(chat.id);
-    });
+    fetchSingleChatData();
   };
 
   const onAuthFail = () => {};
@@ -214,7 +218,6 @@ export const useSingleChatLogic = (
 
   return {
     // Socket Hooks
-    onSocketMount,
     onConnect,
     onAuthFail,
     onEditChat,

diff --git a/src/sockets/MultiChatSocket/index.tsx b/src/sockets/MultiChatSocket/index.tsx
@@ -29,8 +29,6 @@ export const MultiChatSocket: React.FC<Props> = (props: Props) => {
     if (!didMountRef.current) {
       didMountRef.current = true;
 
-      props.onSocketMount && props.onSocketMount();
-
       const host = props.isDevelopment
         ? 'http://127.0.0.1:8000'
         : 'https://api.chatengine.io';

diff --git a/src/sockets/MultiChatSocket/props.tsx b/src/sockets/MultiChatSocket/props.tsx
@@ -6,7 +6,6 @@ export interface Props {
   secret: string;
   sessionToken?: string;
   isDevelopment?: boolean;
-  onSocketMount?: () => void;
   onConnect?: () => void;
   onAuthFail?: () => void;
   onError?: () => void;

diff --git a/src/sockets/SingleChatSocket/index.tsx b/src/sockets/SingleChatSocket/index.tsx
@@ -11,7 +11,6 @@ export const SingleChatSocket: React.FC<Props> = (props: Props) => {
   useEffect(() => {
     if (!didMountRef.current) {
       didMountRef.current = true;
-      props.onSocketMount && props.onSocketMount();
     }
   }, []);
 

diff --git a/src/sockets/SingleChatSocket/props.tsx b/src/sockets/SingleChatSocket/props.tsx
@@ -5,7 +5,6 @@ export interface Props {
   chatId?: number | string;
   chatAccessKey?: string;
   isDevelopment?: boolean;
-  onSocketMount?: () => void;
   onConnect?: () => void;
   onAuthFail?: () => void;
   onError?: () => void;