fix: image edit ux

src/hooks/use-update-chunk-list.ts

@@ -7,8 +7,12 @@ interface ChunkedCollection {
   collection: any[];
   type: string | number;
 }
+
+type EventsType = 'CREATE' | 'UPDATE' | 'DELETE' | 'INSERT';
+
 // Only used to update lists without nested state
 export function useUpdateChunkedList(options: {
+  events?: EventsType[];
   dataList?: any[];
   limit?: number;
   setDataList: (args: any, opts?: any) => void;
@@ -17,10 +21,10 @@ export function useUpdateChunkedList(options: {
   mapFun?: (args: any) => any;
   computedID?: (d: object) => string;
 }) {
+  const { events = ['CREATE', 'DELETE', 'UPDATE', 'INSERT'] } = options;
   const deletedIdsRef = useRef<Set<number | string>>(new Set());
   const cacheDataListRef = useRef<any[]>(options.dataList || []);
   const timerRef = useRef<any>(null);
-  const countRef = useRef<number>(0);
   const limit = options.limit || 10;
 
   useEffect(() => {
@@ -57,7 +61,7 @@ export function useUpdateChunkedList(options: {
     }
     const ids: any[] = data?.ids || [];
     // CREATE
-    if (data?.type === WatchEventType.CREATE) {
+    if (data?.type === WatchEventType.CREATE && events.includes('CREATE')) {
       const newDataList = collections.reduce((acc: any[], item: any) => {
         const updateIndex = cacheDataListRef.current?.findIndex(
           (sItem: any) => sItem.id === item.id
@@ -77,7 +81,7 @@ export function useUpdateChunkedList(options: {
       ].slice(0, limit);
     }
     // DELETE
-    if (data?.type === WatchEventType.DELETE) {
+    if (data?.type === WatchEventType.DELETE && events.includes('DELETE')) {
       cacheDataListRef.current = cacheDataListRef.current?.filter(
         (item: any) => {
           return !ids?.includes(item.id);
@@ -89,7 +93,7 @@ export function useUpdateChunkedList(options: {
       });
     }
     // UPDATE
-    if (data?.type === WatchEventType.UPDATE) {
+    if (data?.type === WatchEventType.UPDATE && events.includes('UPDATE')) {
       collections?.forEach((item: any) => {
         const updateIndex = cacheDataListRef.current?.findIndex(
           (sItem: any) => sItem.id === item.id
@@ -97,7 +101,7 @@ export function useUpdateChunkedList(options: {
         const updateItem = { ...item };
         if (updateIndex > -1) {
           cacheDataListRef.current[updateIndex] = updateItem;
-        } else if (updateIndex === -1) {
+        } else if (updateIndex === -1 && events.includes('INSERT')) {
           cacheDataListRef.current = [
             updateItem,
             ...cacheDataListRef.current.slice(0, limit - 1)