Merge branch 'develop'

Author: molvqingtai

src/constants/config.ts

@@ -200,7 +200,7 @@ export const APP_STATUS_STORAGE_KEY = 'WEB_CHAT_APP_STATUS' as const
  */
 export const MAX_AVATAR_SIZE = 5120 as const
 
-export const SYNC_HISTORY_MAX_DAYS = 30 as const
+export const SYNC_HISTORY_MAX_DAYS = 90 as const
 
 /**
  * https://lgrahl.de/articles/demystifying-webrtc-dc-size-limit.html

src/domain/ChatRoom.ts

@@ -358,12 +358,13 @@ const ChatRoomDomain = Remesh.domain({
       impl: ({ get }, { peerId, lastMessageTime }: { peerId: string; lastMessageTime: number }) => {
         const self = get(SelfUserQuery())
 
-        const historyMessages = get(messageListDomain.query.ListQuery()).filter(
-          (message) =>
+        const historyMessages = get(messageListDomain.query.ListQuery()).filter((message) => {
+          return (
             message.type === MessageType.Normal &&
             message.sendTime > lastMessageTime &&
-            message.sendTime - Date.now() <= SYNC_HISTORY_MAX_DAYS * 24 * 60 * 60 * 1000
-        )
+            message.sendTime >= Date.now() - SYNC_HISTORY_MAX_DAYS * 24 * 60 * 60 * 1000
+          )
+        })
 
         /**
          * Message chunking to ensure that each message does not exceed WEB_RTC_MAX_MESSAGE_SIZE

src/hooks/useDraggable.ts

@@ -1,5 +1,5 @@
 import { clamp, isInRange } from '@/utils'
-import { useCallback, useLayoutEffect, useRef, useState } from 'react'
+import { startTransition, useCallback, useLayoutEffect, useRef, useState } from 'react'
 
 export interface DargOptions {
   initX: number
@@ -14,8 +14,8 @@ const useDraggable = (options: DargOptions) => {
   const { initX, initY, maxX = 0, minX = 0, maxY = 0, minY = 0 } = options
 
   const mousePosition = useRef({ x: 0, y: 0 })
-
-  const [position, setPosition] = useState({ x: clamp(initX, minX, maxX), y: clamp(initY, minY, maxY) })
+  const positionRef = useRef({ x: clamp(initX, minX, maxX), y: clamp(initY, minY, maxY) })
+  const [position, setPosition] = useState(positionRef.current)
 
   useLayoutEffect(() => {
     const newPosition = { x: clamp(initX, minX, maxX), y: clamp(initY, minY, maxY) }
@@ -30,12 +30,13 @@ const useDraggable = (options: DargOptions) => {
     (e: MouseEvent) => {
       if (isMove.current) {
         const { clientX, clientY } = e
+        const prev = positionRef.current
         const delta = {
-          x: position.x + clientX - mousePosition.current.x,
-          y: position.y + clientY - mousePosition.current.y
+          x: prev.x + clientX - mousePosition.current.x,
+          y: prev.y + clientY - mousePosition.current.y
         }
 
-        const hasChanged = delta.x !== position.x || delta.y !== position.y
+        const hasChanged = delta.x !== prev.x || delta.y !== prev.y
 
         if (isInRange(delta.x, minX, maxX)) {
           mousePosition.current.x = clientX
@@ -44,15 +45,14 @@ const useDraggable = (options: DargOptions) => {
           mousePosition.current.y = clientY
         }
         if (hasChanged) {
-          setPosition(() => {
-            const x = clamp(delta.x, minX, maxX)
-            const y = clamp(delta.y, minY, maxY)
-            return { x, y }
-          })
+          const x = clamp(delta.x, minX, maxX)
+          const y = clamp(delta.y, minY, maxY)
+          positionRef.current = { x, y }
+          setPosition({ x, y })
         }
       }
     },
-    [minX, maxX, minY, maxY, position]
+    [minX, maxX, minY, maxY]
   )
 
   const handleEnd = useCallback(() => {