feat(next/web): new hooks

leancloud · Mar 14, 2024 · 6bfc276 · 6bfc276
1 parent cbf6618
commit 6bfc276
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 21 deletions.
diff --git a/next/web/src/App/Admin/Tickets/Ticket/mixed-ticket.tsx b/next/web/src/App/Admin/Tickets/Ticket/mixed-ticket.tsx
@@ -4,8 +4,8 @@ import { LCObject } from 'open-leancloud-storage/core';
 
 import { db } from '@/leancloud';
 import { TicketDetailSchema, UpdateTicketData, useTicket, useUpdateTicket } from '@/api/ticket';
-import { useCurrentRef } from '@/utils/useCurrentRef';
 import { Ticket_v1, UpdateTicket_v1Data, useTicket_v1, useUpdateTicket_v1 } from './api1';
+import { useEffectEvent } from '@/utils/useEffectEvent';
 
 interface MixedTicket {
   id: TicketDetailSchema['id'];
@@ -129,7 +129,7 @@ export function useMixedTicket(ticketId: string): UseMixedTicketResult {
     }
   };
 
-  const onUpdate = useCurrentRef((ticketObj: LCObject) => {
+  const onUpdate = useEffectEvent((ticketObj: LCObject) => {
     if (!ticket) {
       return;
     }
@@ -147,7 +147,7 @@ export function useMixedTicket(ticketId: string): UseMixedTicketResult {
     const subscription = db.query('Ticket').where('objectId', '==', ticket.id).subscribe();
     subscription.then((s) => {
       if (mounted) {
-        s.on('update', (o) => onUpdate.current(o));
+        s.on('update', onUpdate);
       }
     });
 

diff --git a/next/web/src/App/Admin/Tickets/Ticket/timeline-data.ts b/next/web/src/App/Admin/Tickets/Ticket/timeline-data.ts
@@ -5,8 +5,8 @@ import { last } from 'lodash-es';
 import { db } from '@/leancloud';
 import { ReplySchema } from '@/api/reply';
 import { fetchTicketReplies, fetchTicketOpsLogs, OpsLog } from '@/api/ticket';
-import { useCurrentRef } from '@/utils/useCurrentRef';
 import { useEffectEvent } from '@/utils/useEffectEvent';
+import { useFreshState } from '@/utils/useFreshState';
 
 interface Reader<T> {
   read: () => Promise<T | undefined>;
@@ -165,7 +165,7 @@ const reverseDataPageSize = 50;
 export function useTimeline(ticketId?: string) {
   const [timelineReader, setTimelineReader] = useState<Reader<TimelineData>>();
 
-  const ticketIdRef = useCurrentRef(ticketId);
+  const isFresh = useFreshState([ticketId]);
   const isMounted = useMountedState();
 
   const [data, setData] = useState<TimelineData[]>();
@@ -177,7 +177,6 @@ export function useTimeline(ticketId?: string) {
   const [isLoadingMore, setIsLoadingMore] = useState(false);
 
   const refetch = useEffectEvent(async () => {
-    const ticketId = ticketIdRef.current;
     if (!ticketId) return;
 
     const timelineReader = createTimelineReader({
@@ -199,13 +198,13 @@ export function useTimeline(ticketId?: string) {
         data.length === dataPageSize
           ? await take(reverseTimelineReader, reverseDataPageSize)
           : undefined;
-      if (ticketId === ticketIdRef.current && isMounted()) {
+      if (isMounted() && isFresh()) {
         setMoreData(undefined);
         setData(data);
         setReverseData(reverseData);
       }
     } finally {
-      if (ticketId === ticketIdRef.current && isMounted()) {
+      if (isMounted() && isFresh()) {
         setIsLoading(false);
       }
     }
@@ -220,15 +219,14 @@ export function useTimeline(ticketId?: string) {
     if (!data?.length || !reverseData?.length) return;
     if (last(data)!.ts >= last(reverseData)!.ts) return;
     if (!timelineReader) return;
-    const ticketId = ticketIdRef.current;
     try {
       setIsLoadingGap(true);
       const newData = await take(timelineReader, dataPageSize);
-      if (ticketId === ticketIdRef.current && isMounted()) {
+      if (isMounted() && isFresh()) {
         setData((data) => [...(data || []), ...newData]);
       }
     } finally {
-      if (ticketId === ticketIdRef.current && isMounted()) {
+      if (isMounted() && isFresh()) {
         setIsLoadingGap(false);
       }
     }
@@ -241,18 +239,17 @@ export function useTimeline(ticketId?: string) {
       refetch();
       return;
     }
-    const ticketId = ticketIdRef.current;
     if (!ticketId) return;
     try {
       setIsLoadingMore(true);
       const cursor = lastItem.data.createdAt;
       const reader = createTimelineReader({ ticketId, cursor, pageSize: 10 });
       const data = await take(reader, 10);
-      if (ticketId === ticketIdRef.current && isMounted()) {
+      if (isMounted() && isFresh()) {
         setMoreData((prev) => [...(prev || []), ...data]);
       }
     } finally {
-      if (ticketId === ticketIdRef.current && isMounted()) {
+      if (isMounted() && isFresh()) {
         setIsLoadingMore(false);
       }
     }

diff --git a/next/web/src/utils/useCurrentRef.ts b/next/web/src/utils/useCurrentRef.ts
diff --git a/next/web/src/utils/useFreshState.ts b/next/web/src/utils/useFreshState.ts
@@ -0,0 +1,13 @@
+import { DependencyList } from 'react';
+import { useLatest } from 'react-use';
+import { isEqual } from 'lodash-es';
+
+import { useEffectEvent } from './useEffectEvent';
+
+/**
+ * Check all states is fresh in async function or callback
+ */
+export function useFreshState(deps: DependencyList) {
+  const latestDeps = useLatest(deps);
+  return useEffectEvent(() => isEqual(deps, latestDeps.current));
+}