Optimize redundant chat fetch (#9584)

* optimize redundant chat fetch

* fix reverse altering returned data, update typing of data to readonly

Author: HexaField

packages/client-core/src/components/InstanceChat/index.tsx

@@ -65,12 +65,15 @@ export const useChatHooks = ({ chatWindowOpen, setUnreadMessages, messageRefInpu
 
   const targetChannelId = useHookstate(getMutableState(ChannelState).targetChannelId)
 
+  /** @todo allow paginated scrolling to retrieve earlier messages */
   const messages = useFind(messagePath, {
     query: {
-      channelId: targetChannelId.value
+      channelId: targetChannelId.value,
+      $limit: 20,
+      $sort: { createdAt: -1 }
     }
   })
-  const mutateMessage = useMutation(messagePath)
+  const mutateMessage = useMutation(messagePath, false)
 
   useEffect(() => {
     if (messages.data?.length && !chatWindowOpen) setUnreadMessages(true)
@@ -215,9 +218,7 @@ export const InstanceChat = ({ styles = defaultStyles }: InstanceChatProps) => {
     messageRefInput: messageRefInput as any
   })
 
-  const sortedMessages = messages.data
-    ? messages.data.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime())
-    : []
+  const sortedMessages = [...messages.data].reverse()
 
   const user = useHookstate(getMutableState(AuthState).user)
 
@@ -305,21 +306,21 @@ export const InstanceChat = ({ styles = defaultStyles }: InstanceChatProps) => {
                 } ${styles.dFlex}`}
               >
                 <div className={styles.msgWrapper}>
-                  {messages[index - 1] && messages[index - 1].isNotification ? (
+                  {sortedMessages[index - 1] && sortedMessages[index - 1].isNotification ? (
                     <h3 className={styles.sender}>{message.sender.name as UserName}</h3>
                   ) : (
-                    messages[index - 1] &&
-                    message.senderId !== messages[index - 1].senderId && (
+                    sortedMessages[index - 1] &&
+                    message.senderId !== sortedMessages[index - 1].senderId && (
                       <h3 className={styles.sender}>{message.sender.name as UserName}</h3>
                     )
                   )}
                   <p className={styles.text}>{message.text}</p>
                 </div>
-                {index !== 0 && messages[index - 1] && messages[index - 1].isNotification ? (
+                {index !== 0 && sortedMessages[index - 1] && sortedMessages[index - 1].isNotification ? (
                   <Avatar src={userThumbnail} className={styles.avatar} />
                 ) : (
-                  messages[index - 1] &&
-                  message.senderId !== messages[index - 1].senderId && (
+                  sortedMessages[index - 1] &&
+                  message.senderId !== sortedMessages[index - 1].senderId && (
                     <Avatar src={userThumbnail} className={styles.avatar} />
                   )
                 )}

packages/client-core/src/systems/ui/RecordingsWidgetUI.tsx

@@ -330,7 +330,7 @@ const RecordingPlayback = () => {
 const RecordingsList = () => {
   const recording = useFind(recordingPath)
 
-  const sortedRecordings = recording.data.sort(
+  const sortedRecordings = [...recording.data].sort(
     (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
   )
 

packages/engine/src/common/functions/FeathersHooks.tsx

@@ -208,7 +208,7 @@ export const useFind = <S extends keyof ServiceTypes>(serviceName: S, params: Pa
     skip: paginate.query.$skip,
     limit: paginate.query.$limit,
     sort: paginate.query.$sort,
-    data: data as ArrayOrPaginatedType<(typeof response)['data']>
+    data: data as Readonly<ArrayOrPaginatedType<(typeof response)['data']>>
   }
 }
 
@@ -244,17 +244,32 @@ type RemoveMethodParameters<S extends keyof ServiceTypes> = ServiceTypes[S]['rem
  * by the caller. as you create/update/patch/remove
  * entities using this helper, the entities cache gets updated
  */
-export function useMutation<S extends keyof ServiceTypes>(serviceName: S) {
+export function useMutation<S extends keyof ServiceTypes>(serviceName: S, forceRefetch = true) {
   const state = useHookstate({
     status: 'idle',
     data: null as unknown | null,
     error: null as string | null
   })
 
-  const create = useMethod('create', created, serviceName, state) as CreateMethodParameters<S>
-  const update = useMethod('update', updated, serviceName, state) as UpdateMethodParameters<S>
-  const patch = useMethod('patch', updated, serviceName, state) as PatchMethodParameters<S>
-  const remove = useMethod('remove', removed, serviceName, state) as RemoveMethodParameters<S>
+  const create = useMethod(
+    'create',
+    forceRefetch ? created : undefined,
+    serviceName,
+    state
+  ) as CreateMethodParameters<S>
+  const update = useMethod(
+    'update',
+    forceRefetch ? updated : undefined,
+    serviceName,
+    state
+  ) as UpdateMethodParameters<S>
+  const patch = useMethod('patch', forceRefetch ? updated : undefined, serviceName, state) as PatchMethodParameters<S>
+  const remove = useMethod(
+    'remove',
+    forceRefetch ? removed : undefined,
+    serviceName,
+    state
+  ) as RemoveMethodParameters<S>
 
   const mutation = useMemo(
     () => ({
@@ -274,7 +289,7 @@ export function useMutation<S extends keyof ServiceTypes>(serviceName: S) {
 
 function useMethod(
   method: Methods,
-  action: (props: { serviceName: keyof ServiceTypes; item: any }) => void,
+  action: undefined | ((props: { serviceName: keyof ServiceTypes; item: any }) => void),
   serviceName: keyof ServiceTypes,
   state: State<any>
 ) {
@@ -284,7 +299,7 @@ function useMethod(
       state.merge({ status: 'loading', loading: true, data: null, error: null })
       return service[method](...args)
         .then((item) => {
-          action({ serviceName, item })
+          action && action({ serviceName, item })
           state.merge({ status: 'success', loading: false, data: item })
           return item
         })

packages/ui/src/components/tailwind/RecordingList/index.tsx

@@ -60,7 +60,7 @@ const RecordingsList = (props: {
     query: { $sort: { createdAt: -1 }, $limit: 10, $skip: 0 }
   })
 
-  const sortedRecordings = recording.data.sort(sortByNewest)
+  const sortedRecordings = [...recording.data].sort(sortByNewest)
 
   const RecordingItem = (props: { recording: RecordingType }) => {
     const { recording } = props