Load files, display on HomeScreen, backup to syncthing

app/HomeScreen.tsx

@@ -1,36 +1,32 @@
 import { Image } from 'expo-image';
-import { Platform, StyleSheet, useColorScheme, View } from 'react-native';
+import { Platform, RefreshControl, ScrollView, StyleSheet, useColorScheme, View, ViewToken } from 'react-native';
 
 import { HelloWave } from '@/components/HelloWave';
 import ParallaxScrollView from '@/components/ParallaxScrollView';
 import { ThemedText } from '@/components/ThemedText';
 import { ThemedView } from '@/components/ThemedView';
-import { FAB, IconButton, List, Text, useTheme } from 'react-native-paper';
+import { Card, FAB, IconButton, List, Surface, Text, useTheme } from 'react-native-paper';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { DATA_DIRECTORY_URI_KEY } from '@/constants/Settings';
 import { useNavigation } from 'expo-router';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useFileSystem, prettyName } from '@/hooks/useFilesystem';
+import { format } from 'date-fns';
+import { StorageAccessFramework } from 'expo-file-system';
+import { FlatList } from 'react-native-gesture-handler';
 
 export default function HomeScreen() {
-  const [dataDirectoryUri, setDirectoryUri] = useState<string | null>(null);
   const navigation = useNavigation();
-  useEffect(() => {
-    const loadDirectoryUri = async () => {
-      try {
-        const savedUri = await AsyncStorage.getItem(DATA_DIRECTORY_URI_KEY);
-        if (savedUri) {
-          setDirectoryUri(savedUri);
-        }
-      } catch (error) {
-        console.error('Error loading directory URI:', error);
-      }
-    };
-
-    loadDirectoryUri();
-  }, []);
-
   const theme = useTheme();
+  const { dataDirectoryUri, loadFiles, files, directorySize } = useFileSystem();
+  const [refreshing, setRefreshing] = useState(false);
 
+  const onRefresh = async () => {
+    setRefreshing(true);
+    await loadFiles();
+    setRefreshing(false);
+  };
 
   const styles = StyleSheet.create({
     fab: {
@@ -40,36 +36,111 @@ export default function HomeScreen() {
       bottom: 0,
       backgroundColor: theme.colors.primary, // Use your theme's primary color
     },
-    stepContainer: {
+    container: {
-      gap: 8,
+      backgroundColor: theme.colors.primary,
-      marginBottom: 8,
-    },
-    headerImage: {
-      width: 200,
-      height: 200,
-      bottom: 0,
-      left: 20,
       position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      height: 100,
+      zIndex: 1000,
+    },
+    safeArea: {
+      flex: 1,
+      marginTop: 100,
+      backgroundColor: theme.colors.surface,
+      // padding: 10
+    },
+    entryCard: {
+      backgroundColor: theme.colors.surface,
+      height: 150
+      ,
+      alignItems: 'center',
     },
   });
+  const [loadedContents, setLoadedContents] = useState<Map<string, string>>(new Map());
 
+  const loadFileContent = async (fileUri: string) => {
+    if (loadedContents.has(fileUri)) return; // Already loaded
+
+    try {
+      // Replace with your actual file reading logic
+      const content = await StorageAccessFramework.readAsStringAsync(fileUri);
+      setLoadedContents(prev => new Map(prev).set(fileUri, content));
+    } catch (error) {
+      console.error('Error loading file content:', error);
+    }
+  };
+
+  const onViewableItemsChanged = useCallback(({ viewableItems }: { viewableItems: ViewToken[] }) => {
+    viewableItems.forEach(({ item }) => {
+      loadFileContent(item.uri);
+    });
+  }, []);
+
+  const viewabilityConfig = {
+    itemVisiblePercentThreshold: 50, // Load when 50% visible
+  };
+
+  const renderFileItem = ({ item: f }: { item: typeof files[0] }) => (
+    <View key={f.uri} style={styles.entryCard}>
+      <View style={{
+        width: '90%',
+        height: '100%',
+        paddingTop: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: theme.colors.background,
+      }}>
+        <ThemedText style={{ fontWeight: "bold", marginBottom: 4 }}>
+          {format(f.datetime, "hh:mm aaa")}
+        </ThemedText>
+        {loadedContents.has(f.uri) && (
+          <ThemedText numberOfLines={3}>
+            {loadedContents.get(f.uri)}
+          </ThemedText>
+        )}
+      </View>
+    </View>
+  );
 
   return (
-    <ThemedView style={{ flex: 1, padding: 16 }}>
+    <ThemedView style={{ flex: 1 }}>
-      <View style={{
+      <View style={styles.container} />
-        backgroundColor: theme.colors.primary,
+      <SafeAreaView edges={['left', 'right']} style={styles.safeArea}>
-        position: 'absolute',
+        <FlatList
-        top: 0,
+          data={files}
-        left: 0,
+          renderItem={renderFileItem}
-        right: 0,
+          keyExtractor={(item) => item.uri}
-        height: 100,
+          onViewableItemsChanged={onViewableItemsChanged}
-        zIndex: 1000,
+          viewabilityConfig={viewabilityConfig}
-      }} />
+          refreshControl={
-      <ThemedText>Directory: {dataDirectoryUri} </ThemedText>
+            <RefreshControl
-      <FAB icon="plus" color={theme.colors.onPrimary} style={styles.fab} onPress={() => {
+              refreshing={refreshing}
-        console.log('New entry pressed');
+              onRefresh={onRefresh}
-        navigation.navigate('NewEntry' as never);
+              tintColor={theme.colors.primary}
-      }} />
+              colors={[theme.colors.primary]}
+            />
+          }
+          ListHeaderComponent={
+            <View style={{
+              marginBottom: 16,
+              backgroundColor: theme.colors.accent,
+              padding: 2,
+              paddingLeft: 10
+            }}>
+              <Text style={{ color: theme.colors.surface, fontSize: 10 }}>
+                <Text style={{ fontWeight: "bold" }}>
+                  {prettyName(dataDirectoryUri, { pathContext: 'full' })}:
+                </Text>
+                {' '}{files.length} {files.length == 1 ? "entry" : "entries"}, {directorySize} bytes
+              </Text>
+            </View>
+          }
+        />
+        <FAB icon="plus" color={theme.colors.onPrimary} style={styles.fab} onPress={() => {
+          navigation.navigate('NewEntry' as never);
+        }} />
+      </SafeAreaView>
     </ThemedView>
   );
 }

app/SettingsScreen.tsx

@@ -6,67 +6,25 @@ import { Directory, Paths } from 'expo-file-system/next';
 import { StorageAccessFramework } from 'expo-file-system';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { DATA_DIRECTORY_URI_KEY } from '@/constants/Settings';
+import { useFileSystem, prettyName } from '@/hooks/useFilesystem';
 
 
-const prettyName = (uri: string | null) => {
-    if (!uri) return null;
-    const decodedUri = decodeURIComponent(uri);
-    const match = decodedUri.match(/.*\/primary:(.+)/);
-
-    if (match) {
-        return match[1];
-    }
-
-    // Fallback to your original logic
-    return uri.split('%3A').pop() || "Unknown";
-
-}
-
 export default function SettingsScreen() {
-    const [directoryUri, setDirectoryUri] = useState<string | null>(null);
+    const { dataDirectoryUri, isLoading, files, hasDirectory, saveDataDirectoryUri } = useFileSystem();
-    // Load saved directory URI on component mount
-    useEffect(() => {
-        const loadDirectoryUri = async () => {
-            try {
-                const savedUri = await AsyncStorage.getItem(DATA_DIRECTORY_URI_KEY);
-                if (savedUri) {
-                    setDirectoryUri(savedUri);
-                }
-            } catch (error) {
-                console.error('Error loading directory URI:', error);
-            }
-        };
-
-        loadDirectoryUri();
-    }, []);
-
-    // Save directory URI whenever it changes
-    const saveDirectoryUri = async (uri: string | null) => {
-        try {
-            if (uri) {
-                await AsyncStorage.setItem(DATA_DIRECTORY_URI_KEY, uri);
-            } else {
-                await AsyncStorage.removeItem(DATA_DIRECTORY_URI_KEY);
-            }
-            setDirectoryUri(uri);
-        } catch (error) {
-            console.error('Error saving directory URI:', error);
-        }
-    };
 
     return (
         <View style={{ flex: 1, padding: 16, backgroundColor: 'white' }}>
             <List.Section title="Data" style={{ backgroundColor: 'white', }} titleStyle={{ fontSize: 24, fontWeight: 'bold' }}>
                 <List.Item
                     left={props => <List.Icon {...props} icon="folder" />}
-                    title={prettyName(directoryUri) ?? "No directory selected. Tap to select."}
+                    title={prettyName(dataDirectoryUri) ?? "No directory selected. Tap to select."}
                     right={props => <List.Icon {...props} icon="chevron-right" />}
 
                     onPress={async () => {
                         try {
                             const permissions = await StorageAccessFramework.requestDirectoryPermissionsAsync();
                             if (permissions.granted) {
-                                await saveDirectoryUri(permissions.directoryUri);
+                                await saveDataDirectoryUri(permissions.directoryUri);
                             }
                         } catch (err) {
                             console.error(err);
@@ -75,12 +33,12 @@ export default function SettingsScreen() {
                 />
             </List.Section>
             <Button title="Debug: List Files" onPress={async () => {
-                if (!directoryUri) {
+                if (!dataDirectoryUri) {
                     console.warn("No directory set.");
                     return;
                 }
                 try {
-                    const dir = await StorageAccessFramework.readDirectoryAsync(directoryUri);
+                    const dir = await StorageAccessFramework.readDirectoryAsync(dataDirectoryUri);
                     console.log("Directory contents:", dir.map((file, i) => prettyName(file)));
                 } catch (error) {
                     console.error("Error reading directory:", error);

components/ThemedText.tsx

@@ -41,8 +41,8 @@ export function ThemedText({
 
 const styles = StyleSheet.create({
   default: {
-    fontSize: 16,
+    fontSize: 12,
-    lineHeight: 24,
+    lineHeight: 16,
   },
   defaultSemiBold: {
     fontSize: 16,

hooks/useFilesystem.ts

@@ -0,0 +1,171 @@
+import { useState, useEffect, useCallback } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import * as FileSystem from 'expo-file-system';
+import { DATA_DIRECTORY_URI_KEY } from '@/constants/Settings';
+import { StorageAccessFramework } from 'expo-file-system';
+
+interface FileEntry {
+    name: string;
+    uri: string;
+    datetime: Date;
+    size: number;
+}
+interface PrettyNameOptions {
+    pathContext?: 'full' | 'short';
+}
+interface FileInfoWithSize {
+    uri: string;
+    exists: boolean;
+    isDirectory: boolean | null;
+    modificationTime: number | null;
+    size: number;
+}
+
+function datetimeFromFilename(filename: string): Date {
+    const match = filename.match(/(\d+)\.md$/);
+    if (match) {
+        const datePart = parseInt(match[1]) * 1000; // Convert seconds to milliseconds
+        const date = new Date(datePart);
+        if (!isNaN(date.getTime())) {
+            return date;
+        }
+    }
+    return new Date();
+}
+
+export function prettyName(uri: string | null, options: PrettyNameOptions = {}) {
+    if (!uri) return null;
+    const { pathContext = 'short' } = options;
+
+    var returnString = "";
+    if (pathContext === 'full') {
+        returnString = "/";
+    }
+
+    const decodedUri = decodeURIComponent(uri);
+    const match = decodedUri.match(/.*\/primary:(.+)/);
+
+    if (match) {
+        if (pathContext === 'short') {
+            const filename = match[1].split('/').pop() || "Unknown";
+            returnString = returnString.concat(filename);
+        }
+        else {
+            returnString = returnString.concat(match[1]);
+        }
+    }
+    else {
+        // Fallback to your original logic
+        returnString = returnString.concat(uri.split('%3A').pop() || "Unknown");
+    }
+    return returnString;
+}
+
+export function useFileSystem() {
+    const [dataDirectoryUri, setDataDirectoryUri] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [files, setFiles] = useState<FileEntry[]>([]);
+    const [directorySize, setDirectorySize] = useState<number>(0);
+
+    // Load saved directory URI
+    useEffect(() => {
+        const loadDirectoryUri = async () => {
+            try {
+                const savedUri = await AsyncStorage.getItem(DATA_DIRECTORY_URI_KEY);
+                if (savedUri) {
+                    setDataDirectoryUri(savedUri);
+                }
+            } catch (error) {
+                console.error('Error loading directory URI:', error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        loadDirectoryUri();
+    }, []);
+
+    // Load files when directory changes
+    const loadFiles = useCallback(async () => {
+        if (!dataDirectoryUri) return;
+
+
+        try {
+            const dirContents = await StorageAccessFramework.readDirectoryAsync(dataDirectoryUri);
+            const markdownFiles = [];
+            let totalSize = 0;
+
+            for (const fileName of dirContents.filter(name => name.endsWith('.md'))) {
+                try {
+                    const fileInfo = await FileSystem.getInfoAsync(fileName) as FileInfoWithSize;
+                    const fileEntry = {
+                        name: prettyName(fileName) ?? "",
+                        uri: fileInfo.uri,
+                        datetime: datetimeFromFilename(fileName),
+                        size: fileInfo.size,
+                    };
+
+                    markdownFiles.push(fileEntry);
+                    totalSize += fileEntry.size;
+                } catch (error) {
+                    console.warn(`Error getting info for file ${fileName}:`, error);
+                }
+            }
+            markdownFiles.sort((a, b) => b.datetime.getTime() - a.datetime.getTime()); // Sort by datetime descending
+            setFiles(markdownFiles);
+            setDirectorySize(totalSize);
+        } catch (error) {
+            console.error('Error loading files:', error);
+        }
+    }, [dataDirectoryUri]);
+
+    useEffect(() => {
+        loadFiles();
+    }, [loadFiles]);
+
+    const writeFile = useCallback(async (filename: string, content: string) => {
+        if (!dataDirectoryUri) throw new Error('No directory selected');
+
+        const fileUri = `${dataDirectoryUri}/${filename}`;
+        await FileSystem.writeAsStringAsync(fileUri, content);
+        await loadFiles(); // Refresh file list
+    }, [dataDirectoryUri, loadFiles]);
+
+    const readFile = useCallback(async (filename: string): Promise<string> => {
+        if (!dataDirectoryUri) throw new Error('No directory selected');
+
+        const fileUri = `${dataDirectoryUri}/${filename}`;
+        return await FileSystem.readAsStringAsync(fileUri);
+    }, [dataDirectoryUri]);
+
+    const saveDataDirectoryUri = useCallback(async (uri: string | null) => {
+        try {
+            if (uri) {
+                await AsyncStorage.setItem(DATA_DIRECTORY_URI_KEY, uri);
+            } else {
+                await AsyncStorage.removeItem(DATA_DIRECTORY_URI_KEY);
+            }
+            setDataDirectoryUri(uri);
+            // Refresh files when directory changes
+            if (uri) {
+                await loadFiles();
+            } else {
+                setFiles([]);
+            }
+        } catch (error) {
+            console.error('Error updating directory URI:', error);
+        }
+    }, [loadFiles]);
+
+    return {
+        dataDirectoryUri,
+        saveDataDirectoryUri,
+        isLoading,
+        files,
+        writeFile,
+        readFile,
+        loadFiles,
+        hasDirectory: !!dataDirectoryUri,
+        directorySize,
+    };
+}