From 572405f21937bddf5d37c376ad331a9d6dfcfcdf Mon Sep 17 00:00:00 2001 From: Adam La Morre Date: Tue, 22 Mar 2022 19:24:17 -0700 Subject: [PATCH] Replace onSocketMount with fetchMilti/SingleChatData (#163) --- example/src/Pages/HomePage/ChatEngine.js | 1 - src/hooks/useMultiChatLogic.tsx | 79 ++++++++++-------------- src/hooks/useSingleChatLogic.tsx | 33 +++++----- src/sockets/MultiChatSocket/index.tsx | 2 - src/sockets/MultiChatSocket/props.tsx | 1 - src/sockets/SingleChatSocket/index.tsx | 1 - src/sockets/SingleChatSocket/props.tsx | 1 - 7 files changed, 51 insertions(+), 67 deletions(-) diff --git a/example/src/Pages/HomePage/ChatEngine.js b/example/src/Pages/HomePage/ChatEngine.js index 336571a..8833d9d 100644 --- 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 index 13c0bc2..c99f6a6 100644 --- 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(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 index ff3a07b..3641fe2 100644 --- 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(0); messageCountRef.current = messages.length; + // Fetch data on mount + const didMountRef = useRef(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 index eb4ba3b..d4cb6d1 100644 --- a/src/sockets/MultiChatSocket/index.tsx +++ b/src/sockets/MultiChatSocket/index.tsx @@ -29,8 +29,6 @@ export const MultiChatSocket: React.FC = (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 index e7caa74..1f0f877 100644 --- 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 index 7ce6428..a56d4f7 100644 --- a/src/sockets/SingleChatSocket/index.tsx +++ b/src/sockets/SingleChatSocket/index.tsx @@ -11,7 +11,6 @@ export const SingleChatSocket: React.FC = (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 index 01a2ca7..e947a02 100644 --- 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;