fix(mobile): resolve cache sync issues, modularize notes API, and optimize swipe actions

batalabs · batalabs · commit d880cc9e7dda · 2025-11-11T14:14:49.000-05:00
diff --git a/apps/mobile/v1/src/screens/FolderNotes/components/NotesList/NoteListItem.tsx b/apps/mobile/v1/src/screens/FolderNotes/components/NotesList/NoteListItem.tsx
@@ -1,7 +1,7 @@
 import { Ionicons } from '@expo/vector-icons';
 import { Code2, Network } from 'lucide-react-native';
 import React, { useMemo, useRef } from 'react';
-import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import { ActivityIndicator, Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
 import Reanimated, { useAnimatedStyle } from 'react-native-reanimated';
 
@@ -29,6 +29,9 @@ interface NoteListItemProps {
   mutedColor: string;
   borderColor: string;
   backgroundColor: string;
+  isDeleting?: boolean;
+  isArchiving?: boolean;
+  closeSwipeables?: number; // Increment this to close all swipeables
 }
 
 const NoteListItemComponent: React.FC<NoteListItemProps> = ({
@@ -48,9 +51,19 @@ const NoteListItemComponent: React.FC<NoteListItemProps> = ({
   mutedColor,
   borderColor,
   backgroundColor,
+  isDeleting = false,
+  isArchiving = false,
+  closeSwipeables = 0,
 }) => {
   const swipeableRef = useRef<Swipeable>(null);
 
+  // Close swipeable when closeSwipeables prop changes
+  React.useEffect(() => {
+    if (closeSwipeables > 0) {
+      swipeableRef.current?.close();
+    }
+  }, [closeSwipeables]);
+
   // Detect note type from content with memoization for performance
   // MUST be called before any conditional returns (React hooks rules)
   const noteType = useMemo(() => detectNoteType(note), [note]);
@@ -127,11 +140,17 @@ const NoteListItemComponent: React.FC<NoteListItemProps> = ({
     return (
       <Reanimated.View style={[styles.deleteAction, styleAnimation]}>
         <Reanimated.View style={[styles.swipeActionContent, iconOpacity]}>
-          <Ionicons name="trash-outline" size={24} color="#fff" />
-        </Reanimated.View>
-        <Reanimated.View style={[styles.swipeActionContent, textOpacity]}>
-          <Text style={styles.swipeActionText}>Delete</Text>
+          {isDeleting ? (
+            <ActivityIndicator size="small" color="#fff" />
+          ) : (
+            <Ionicons name="trash-outline" size={24} color="#fff" />
+          )}
         </Reanimated.View>
+        {!isDeleting && (
+          <Reanimated.View style={[styles.swipeActionContent, textOpacity]}>
+            <Text style={styles.swipeActionText}>Delete</Text>
+          </Reanimated.View>
+        )}
       </Reanimated.View>
     );
   };
@@ -172,11 +191,17 @@ const NoteListItemComponent: React.FC<NoteListItemProps> = ({
     return (
       <Reanimated.View style={[styles.archiveAction, styleAnimation]}>
         <Reanimated.View style={[styles.swipeActionContent, iconOpacity]}>
-          <Ionicons name="archive-outline" size={24} color="#fff" />
-        </Reanimated.View>
-        <Reanimated.View style={[styles.swipeActionContent, textOpacity]}>
-          <Text style={styles.swipeActionText}>Archive</Text>
+          {isArchiving ? (
+            <ActivityIndicator size="small" color="#fff" />
+          ) : (
+            <Ionicons name="archive-outline" size={24} color="#fff" />
+          )}
         </Reanimated.View>
+        {!isArchiving && (
+          <Reanimated.View style={[styles.swipeActionContent, textOpacity]}>
+            <Text style={styles.swipeActionText}>Archive</Text>
+          </Reanimated.View>
+        )}
       </Reanimated.View>
     );
   };
@@ -198,12 +223,10 @@ const NoteListItemComponent: React.FC<NoteListItemProps> = ({
           // direction 'right' = swiping right = archive (left actions opening)
           if (direction === 'right' && canArchive) {
             onArchive?.(note.id);
-            // Close swipeable after action
-            setTimeout(() => swipeableRef.current?.close(), 300);
+            // Don't close swipeable - let the spinner stay visible until note is removed
           } else if (direction === 'left') {
             onDelete?.(note.id);
-            // Close swipeable after action
-            setTimeout(() => swipeableRef.current?.close(), 300);
+            // Don't close swipeable - let the spinner stay visible until note is removed
           }
         }}
       >
@@ -264,6 +287,7 @@ const NoteListItemComponent: React.FC<NoteListItemProps> = ({
         </View>
       </Pressable>
       </Swipeable>
+
       {!isLastItem && <View style={[styles.noteListDivider, { backgroundColor: borderColor }]} />}
     </View>
   );
@@ -334,8 +358,7 @@ const styles = StyleSheet.create({
     fontWeight: '400',
   },
   noteListDivider: {
-    // @ts-ignore - StyleSheet.hairlineWidth is intentionally used for height (ultra-thin divider)
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // StyleSheet.hairlineWidth is intentionally used for height (ultra-thin divider)
     height: StyleSheet.hairlineWidth,
     marginHorizontal: 16,
     marginVertical: 0,
diff --git a/apps/mobile/v1/src/screens/FolderNotes/components/NotesList/index.tsx b/apps/mobile/v1/src/screens/FolderNotes/components/NotesList/index.tsx
@@ -7,13 +7,11 @@ import { FlashList, type FlashList as FlashListType } from '@shopify/flash-list'
 import * as Haptics from 'expo-haptics';
 import { useRouter } from 'expo-router';
 import React, { useCallback,useEffect, useMemo, useRef, useState } from 'react';
-import { ActivityIndicator, Alert, Animated, DeviceEventEmitter, Pressable, RefreshControl, StyleSheet, Text, View } from 'react-native';
+import { ActivityIndicator, Alert, Animated, DeviceEventEmitter, InteractionManager, Pressable, RefreshControl, StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { type Folder, type Note, useApiService } from '@/src/services/api';
 import { useTheme } from '@/src/theme';
-import { detectNoteType } from '@/src/utils/noteTypeDetection';
-import { stripHtmlTags } from '@/src/utils/noteUtils';
 
 // Constants for FAB scroll behavior
 const FAB_SCROLL_THRESHOLD_START = 100; // Start showing FAB when scrolled past this
@@ -58,6 +56,9 @@ export default function NotesList({ navigation, route, renderHeader, scrollY: pa
   const { folderId, viewType, searchQuery } = route?.params || {};
 
   const [refreshing, setRefreshing] = useState(false);
+  const [deletingNoteId, setDeletingNoteId] = useState<string | null>(null);
+  const [archivingNoteId, setArchivingNoteId] = useState<string | null>(null);
+  const [closeSwipeables, setCloseSwipeables] = useState(0);
 
   // Performance tracking
   const screenFocusTime = useRef<number>(0);
@@ -203,6 +204,11 @@ export default function NotesList({ navigation, route, renderHeader, scrollY: pa
       if (flatListRef.current) {
         flatListRef.current.scrollToOffset({ offset: 0, animated: false });
       }
+
+      // Cleanup function - close all swipeables when navigating away
+      return () => {
+        setCloseSwipeables(prev => prev + 1);
+      };
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [folderId, viewType, searchQuery])
   );
@@ -225,7 +231,18 @@ export default function NotesList({ navigation, route, renderHeader, scrollY: pa
   const onRefresh = async () => {
     try {
       setRefreshing(true);
+
+      // Save current scroll position before refresh
+      const currentOffset = scrollY._value || 0;
+
       await loadNotes(true);
+
+      // Restore scroll position after a small delay to let FlashList settle
+      if (currentOffset > 0) {
+        setTimeout(() => {
+          flatListRef.current?.scrollToOffset({ offset: currentOffset, animated: false });
+        }, 50);
+      }
     } finally {
       setRefreshing(false);
     }
@@ -476,40 +493,71 @@ export default function NotesList({ navigation, route, renderHeader, scrollY: pa
   }, [api, notes, setNotes, loadNotes]);
 
   // Handle delete note (move to trash)
-  const handleDeleteNote = useCallback(async (noteId: string) => {
-    try {
-      // Update note as deleted FIRST
-      await api.updateNote(noteId, { deleted: true });
+  const handleDeleteNote = useCallback((noteId: string) => {
+    // Fire haptic feedback immediately
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
 
-      // Emit event - the event listener will handle removing from UI
-      DeviceEventEmitter.emit('noteDeleted', noteId);
-    } catch (error) {
-      console.error('Failed to delete note:', error);
-      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
-      Alert.alert('Error', 'Failed to delete note. Please try again.');
-    }
+    // Set deleting state IMMEDIATELY to show spinner
+    setDeletingNoteId(noteId);
+
+    // Run API call after interactions complete (non-blocking)
+    InteractionManager.runAfterInteractions(async () => {
+      try {
+        // Update note as deleted
+        await api.updateNote(noteId, { deleted: true });
+
+        // Success haptic feedback
+        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+
+        // Keep spinner visible briefly before removing note
+        await new Promise(resolve => setTimeout(resolve, 200));
+
+        // Emit event - the event listener will handle removing from UI
+        DeviceEventEmitter.emit('noteDeleted', noteId);
+      } catch (error) {
+        console.error('Failed to delete note:', error);
+        await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+        Alert.alert('Error', 'Failed to delete note. Please try again.');
+      } finally {
+        setDeletingNoteId(null);
+      }
+    });
   }, [api]);
 
   // Handle archive note
-  const handleArchiveNote = useCallback(async (noteId: string) => {
-    try {
-      // Update note as archived FIRST
-      await api.updateNote(noteId, { archived: true });
+  const handleArchiveNote = useCallback((noteId: string) => {
+    // Fire haptic feedback immediately
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
 
-      // Success haptic feedback
-      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+    // Set archiving state IMMEDIATELY to show spinner
+    setArchivingNoteId(noteId);
 
-      // Remove from current view immediately (archived notes don't show in folder/all views)
-      setNotes(prevNotes => prevNotes.filter(n => n.id !== noteId));
-      lastOptimisticUpdateRef.current = Date.now();
+    // Run API call after interactions complete (non-blocking)
+    InteractionManager.runAfterInteractions(async () => {
+      try {
+        // Update note as archived
+        await api.updateNote(noteId, { archived: true });
 
-      // Emit event for other listeners
-      DeviceEventEmitter.emit('noteUpdated', { id: noteId, archived: true });
-    } catch (error) {
-      console.error('Failed to archive note:', error);
-      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
-      Alert.alert('Error', 'Failed to archive note. Please try again.');
-    }
+        // Success haptic feedback
+        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+
+        // Keep spinner visible briefly before removing note
+        await new Promise(resolve => setTimeout(resolve, 200));
+
+        // Remove from current view immediately (archived notes don't show in folder/all views)
+        setNotes(prevNotes => prevNotes.filter(n => n.id !== noteId));
+        lastOptimisticUpdateRef.current = Date.now();
+
+        // Emit event for other listeners
+        DeviceEventEmitter.emit('noteUpdated', { id: noteId, archived: true });
+      } catch (error) {
+        console.error('Failed to archive note:', error);
+        await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+        Alert.alert('Error', 'Failed to archive note. Please try again.');
+      } finally {
+        setArchivingNoteId(null);
+      }
+    });
   }, [api, setNotes]);
 
   // Render individual note item
@@ -532,9 +580,12 @@ export default function NotesList({ navigation, route, renderHeader, scrollY: pa
         mutedColor={mutedColor}
         borderColor={borderColor}
         backgroundColor={backgroundColor}
+        isDeleting={deletingNoteId === note.id}
+        isArchiving={archivingNoteId === note.id}
+        closeSwipeables={closeSwipeables}
       />
     );
-  }, [filteredNotes.length, folderId, handleNotePress, handleNoteLongPress, handleDeleteNote, handleArchiveNote, folderPathsMap, foldersMap, skeletonOpacity, notesEnhancedDataCache, foregroundColor, mutedForegroundColor, mutedColor, borderColor, backgroundColor]);
+  }, [filteredNotes.length, folderId, handleNotePress, handleNoteLongPress, handleDeleteNote, handleArchiveNote, folderPathsMap, foldersMap, skeletonOpacity, notesEnhancedDataCache, foregroundColor, mutedForegroundColor, mutedColor, borderColor, backgroundColor, deletingNoteId, archivingNoteId, closeSwipeables]);
 
   // Render list header (subfolders and create note button)
   const renderListHeader = useCallback(() => {
@@ -607,14 +658,15 @@ export default function NotesList({ navigation, route, renderHeader, scrollY: pa
             onRefresh={onRefresh}
             tintColor={theme.isDark ? '#666666' : '#000000'}
             colors={[theme.isDark ? '#666666' : '#000000']}
+            progressViewOffset={insets.top}
           />
         }
         drawDistance={2000}
-        getItemType={(item) => {
+        getItemType={() => {
           // Help FlashList recycle items better
           return 'note';
         }}
-        overrideItemLayout={(layout, item) => {
+        overrideItemLayout={(layout) => {
           // Fixed layout for better scrolling performance
           // Padding: 12*2=24, Header: 23+8, Preview: 40+6, Meta: 20, Divider: 1
           layout.size = 112;
