react-native-nitro-fs/example/App.tsx at 73a3a3d5ca710d37bf8742a97432fdc74a25b668 · patrickkabwe/react-native-nitro-fs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import React from 'react';
import { StatusBar, StyleSheet } from 'react-native';
import { ActionPanel } from './src/components/action-panel';
import { DirectoryNavigation } from './src/components/directory-navigation';
import { FileEditor } from './src/components/file-editor';
import { FileList } from './src/components/file-list';
import { Header } from './src/components/header';
import { PathDisplay } from './src/components/path-display';
import { ProgressIndicator } from './src/components/progress-indicator';
import { useFileSystem } from './src/hooks/use-file-system';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

const AppContent = () => {
  const {
    currentPath,
    files,
    loading,
    uploadProgress,
    downloadProgress,
    selectedFile,
    setSelectedFile,
    createFile,
    createDirectory,
    deleteItem,
    readFile,
    saveFile,
    uploadFile,
    downloadFile,
    navigateToDirectory,
    navigateBack,
    checkExists,
    copyItem,
    renameItem,
    getPathInfo,
    navigateToDirectoryType,
    base64Encoding,
    copyImagesFromDCIMToCache,
    pickDocument,
  } = useFileSystem();

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="dark-content" backgroundColor="#f8f9fa" />

      <Header />

      <DirectoryNavigation
        currentPath={currentPath}
        onNavigate={navigateToDirectoryType}
      />

      <PathDisplay currentPath={currentPath} onNavigateBack={navigateBack} />

      <ProgressIndicator
        uploadProgress={uploadProgress}
        downloadProgress={downloadProgress}
      />

      <FileList
        files={files}
        loading={loading}
        selectedFile={selectedFile}
        onSelectFile={setSelectedFile}
        onNavigateToDirectory={navigateToDirectory}
        onReadFile={readFile}
        onDeleteFile={deleteItem}
      />

      <ActionPanel
        selectedFile={selectedFile}
        loading={loading}
        onCreateFile={createFile}
        onCreateDirectory={createDirectory}
        onUploadFile={uploadFile}
        onDownloadFile={downloadFile}
        onGetPathInfo={getPathInfo}
        onCheckExists={checkExists}
        onCopyItem={copyItem}
        onRenameItem={renameItem}
        onBase64Encoding={base64Encoding}
        onCopyImagesFromDCIMToCache={copyImagesFromDCIMToCache}
        onPickDocument={pickDocument}
      />

      <FileEditor
        selectedFile={selectedFile}
        loading={loading}
        onSaveFile={saveFile}
        onReadFile={readFile}
      />
    </SafeAreaView>
  );
};

const App = () => {
  return (
    <SafeAreaProvider>
      <AppContent />
    </SafeAreaProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f9fa',
  },
});

export default App;