From 4396f1df17441f80cb2e35b0a01d52533a3bf723 Mon Sep 17 00:00:00 2001
From: Vincent BRIDIER <vincent.bridier@ldc.fr>
Date: Thu, 6 Oct 2022 17:20:07 +0200
Subject: [PATCH] Add DirectoriesScreen

---
 ComApp/README.md                              |  4 +-
 ComApp/package-lock.json                      | 11 +++
 ComApp/package.json                           |  1 +
 ComApp/src/App.js                             |  6 ++
 ComApp/src/App/Models/Directory.js            | 68 +++++++++++++++
 ComApp/src/App/Store/Reducers/AppReducer.js   |  5 +-
 ComApp/src/App/Views/DirectoriesScreen.js     | 86 +++++++++++++++++++
 ComApp/src/App/Views/HomeScreen.js            | 39 ++++-----
 .../src/Resources/Styles/DirectoriesStyle.js  | 37 ++++++++
 ComApp/yarn.lock                              |  5 ++
 10 files changed, 238 insertions(+), 24 deletions(-)
 create mode 100644 ComApp/src/App/Views/DirectoriesScreen.js
 create mode 100644 ComApp/src/Resources/Styles/DirectoriesStyle.js

diff --git a/ComApp/README.md b/ComApp/README.md
index 6d315db..ce8145d 100644
--- a/ComApp/README.md
+++ b/ComApp/README.md
@@ -14,4 +14,6 @@
 - @react-navigation/native-stack
 - react-native-vector-icons
 - react-native-progress
-- react-native-svg
\ No newline at end of file
+- react-native-svg
+- react-native-b-crypt-bridge
+- react-native-animated-tree-view with https://github.com/shariqahmed525/react-native-animated-tree-view/pull/3/
\ No newline at end of file
diff --git a/ComApp/package-lock.json b/ComApp/package-lock.json
index 75460b9..afcb151 100644
--- a/ComApp/package-lock.json
+++ b/ComApp/package-lock.json
@@ -19,6 +19,7 @@
         "npm": "^8.19.2",
         "react": "18.1.0",
         "react-native": "0.70.1",
+        "react-native-animated-tree-view": "^0.1.4",
         "react-native-b-crypt-bridge": "file:react-native-b-crypt-bridge-2.0.0.tgz",
         "react-native-progress": "^5.0.0",
         "react-native-safe-area-context": "^4.4.1",
@@ -16613,6 +16614,11 @@
         "react": "18.1.0"
       }
     },
+    "node_modules/react-native-animated-tree-view": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/react-native-animated-tree-view/-/react-native-animated-tree-view-0.1.4.tgz",
+      "integrity": "sha512-/Lxo4o8MRvK0h9WNgsut0XBu7VTXlDHa737mrDuG+7bXJlNtvHKVuTxW580vN0GQNLM4orbiG6TSiOsvdY6MhQ=="
+    },
     "node_modules/react-native-b-crypt-bridge": {
       "version": "2.0.0",
       "resolved": "file:react-native-b-crypt-bridge-2.0.0.tgz",
@@ -31951,6 +31957,11 @@
         }
       }
     },
+    "react-native-animated-tree-view": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/react-native-animated-tree-view/-/react-native-animated-tree-view-0.1.4.tgz",
+      "integrity": "sha512-/Lxo4o8MRvK0h9WNgsut0XBu7VTXlDHa737mrDuG+7bXJlNtvHKVuTxW580vN0GQNLM4orbiG6TSiOsvdY6MhQ=="
+    },
     "react-native-b-crypt-bridge": {
       "version": "file:react-native-b-crypt-bridge-2.0.0.tgz",
       "integrity": "sha512-nqjJtA0qUh6awVEmI41c3I3IxWHOm38UQGkXNg4iZmb4gg0MMFMBZFNAVHa5Xzl+YVDQ6rIfmrF0w/BnDaewsA==",
diff --git a/ComApp/package.json b/ComApp/package.json
index 5ecad0e..50dc8cf 100644
--- a/ComApp/package.json
+++ b/ComApp/package.json
@@ -21,6 +21,7 @@
     "npm": "^8.19.2",
     "react": "18.1.0",
     "react-native": "0.70.1",
+    "react-native-animated-tree-view": "^0.1.4",
     "react-native-b-crypt-bridge": "file:react-native-b-crypt-bridge-2.0.0.tgz",
     "react-native-progress": "^5.0.0",
     "react-native-safe-area-context": "^4.4.1",
diff --git a/ComApp/src/App.js b/ComApp/src/App.js
index fc37a40..17f93ae 100644
--- a/ComApp/src/App.js
+++ b/ComApp/src/App.js
@@ -29,6 +29,7 @@ import InstallScreen from './App/Views/InstallScreen';
 import HomeScreen from './App/Views/HomeScreen';
 import LoginScreen from './App/Views/LoginScreen';
 import SyncScreen from './App/Views/SyncScreen';
+import DirectoriesScreen from './App/Views/DirectoriesScreen';
 // Lang Flags
 import flagFR from './Resources/assets/img/flags/fr.png';
 import flagEN from './Resources/assets/img/flags/en.png';
@@ -174,6 +175,11 @@ class App extends React.Component {
             component={SyncScreen}
             options={{ headerTitle: () => CustomNavigation.LogoTitle(i18n.t('global.synchronization')) }}
           />
+          <Stack.Screen
+            name="DirectoriesScreen"
+            component={DirectoriesScreen}
+            options={{ headerTitle: () => CustomNavigation.LogoTitle(i18n.t('app.folders')) }}
+          />
         </Stack.Navigator>
       </NavigationContainer>
     </Provider>
diff --git a/ComApp/src/App/Models/Directory.js b/ComApp/src/App/Models/Directory.js
index f77ab6e..198da1d 100644
--- a/ComApp/src/App/Models/Directory.js
+++ b/ComApp/src/App/Models/Directory.js
@@ -26,12 +26,80 @@ class DirectoryModel {
     return tmp;
   }
 
+  getAll(role, authorizedFolders, format, lang) {
+    if (authorizedFolders !== null && authorizedFolders !== undefined) {
+      authorizedFolders = JSON.parse(authorizedFolders);
+    }
+    let tmp = this.realm.objects(this.schema);
+    if (role === 'USER') {
+      if (authorizedFolders.length > 0) {
+        tmp = tmp.filtered(
+          'needAuthorization = 0 OR ' +
+          authorizedFolders
+            .map(folder => ' id = "' + folder.id + '"')
+            .join(' OR '),
+        );
+      } else {
+        tmp = tmp.filtered(
+          'needAuthorization = 0'
+        );
+      }
+    }
+    if (format) {
+      return this._recursiveDir(tmp, lang);
+    }
+    return tmp;
+  }
+
   clear() {
     this.realm.write(() => {
       this.realm.delete(this.realm.objects(this.schema));
     });
   }
 
+  _recursiveDir(list, lang, parent = null) {
+    let root = list.filter(e => e.parent === parent);
+    let tmp = [];
+    for (let i = 0; i < root.length; i++) {
+      let childs = this._recursiveDir(list, lang, root[i].id);
+      let name = JSON.parse(root[i].name);
+      tmp[i] = {};
+      tmp[i].id = root[i].id;
+      tmp[i].name = this.getI18nName(lang, name);
+      tmp[i].items = [];
+      for (let j = 0; j < childs.length; j++) {
+        childs[j].value = childs[j].id;
+        tmp[i].items.push(childs[j]);
+      }
+      if (!tmp[i].items.length) {
+        delete tmp[i].items;
+      }
+    }
+    return tmp;
+  }
+
+  getI18nName(lang, name) {
+    let tmp = undefined;
+    switch (lang) {
+      case "fr":
+        tmp = name.fr;
+        break;
+      case "en":
+        tmp = name.en;
+        break;
+      case "de":
+        tmp = name.de;
+        break;
+      case "es":
+        tmp = name.es;
+        break;
+    }
+    if (tmp === undefined) {
+      tmp = name.fr;
+    }
+    return tmp;
+  }
+
 }
 
 export default DirectoryModel;
diff --git a/ComApp/src/App/Store/Reducers/AppReducer.js b/ComApp/src/App/Store/Reducers/AppReducer.js
index a9a65e5..29f479f 100644
--- a/ComApp/src/App/Store/Reducers/AppReducer.js
+++ b/ComApp/src/App/Store/Reducers/AppReducer.js
@@ -20,12 +20,13 @@ const initialState = {
 const reducer = (state = initialState, action) => {
     switch (action.type) {
         case 'INIT':
-            let docs = Document.getAll(Directory.getAll(
+            let directories = Directory.getAll(
                 state.currentUser.role,
                 state.currentUser.authorizedFolders,
                 false,
                 state.locale
-            ));
+            );
+            let docs = Document.getAll(directories);
             return {
                 ...state,
                 users: User.getAll(),
diff --git a/ComApp/src/App/Views/DirectoriesScreen.js b/ComApp/src/App/Views/DirectoriesScreen.js
new file mode 100644
index 0000000..8dcee02
--- /dev/null
+++ b/ComApp/src/App/Views/DirectoriesScreen.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import {
+    View,
+    ScrollView,
+    TouchableOpacity,
+    Text,
+    Image
+} from 'react-native';
+// Redux
+import { connect } from 'react-redux';
+// Treeview
+import TreeView from 'react-native-animated-tree-view';
+// Icon
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+// Assets
+import arrowDown from '../../Resources/assets/img/arrow_down.png';
+// Styles
+import styles from '../../Resources/Styles/DirectoriesStyle';
+
+function mapStateToProps(state) {
+    return {
+        documents: state.app.documents,
+    };
+}
+
+class DirectoriesScreen extends React.Component {
+    state = {
+        documents: [],
+    };
+
+    render() {
+        const { folder } = this.props.route.params;
+        let documentList = this.state.documents.map(document => {
+            return (
+                <TouchableOpacity
+                    key={document.id.toString()}
+                    style={styles.file}
+                    onPress={() => this.openDocument(document)}>
+                    {document.type === 'pdf' ? (
+                        <FontAwesome5 name="file-pdf" color={'white'} size={60} />
+                    ) : (
+                        <FontAwesome5 name="file-video" color={'white'} size={60} />
+                    )}
+                    <Text style={styles.fileTxt}>{document.title}</Text>
+                </TouchableOpacity>
+            );
+        });
+
+        return (
+            <View style={styles.container}>
+                <View
+                    style={{ width: 290, borderRightWidth: 1, borderColor: 'lightgrey' }}>
+                    <TreeView
+                        data={folder}
+                        leftImage={{}}
+                        rightImage={{ uri: Image.resolveAssetSource(arrowDown).uri }}
+                        containerStyle={styles.treeviewContainer}
+                        onClick={folder => {
+                            this.setState({
+                                documents: this.props.documents.filter(
+                                    tmp => tmp.directory === folder.id,
+                                )
+                            });
+                        }}
+                    />
+                </View>
+                <ScrollView style={styles.scrollview}>
+                    <View style={styles.filesContainer}>{documentList}</View>
+                </ScrollView>
+            </View>
+        );
+    }
+
+    openDocument(document) {
+        this.props.dispatch({ type: 'SET_CURRENT_OPENED_DOC', data: document });
+        if (document.type === 'pdf') {
+            this.props.navigation.navigate('PDFScreen', { uuid: document.uuid });
+        } else if (document.type === 'mp4') {
+            this.props.navigation.navigate('VideoScreen', { uuid: document.uuid });
+        } else {
+            console.log('Inconnu');
+        }
+    }
+}
+
+export default connect(mapStateToProps)(DirectoriesScreen);
diff --git a/ComApp/src/App/Views/HomeScreen.js b/ComApp/src/App/Views/HomeScreen.js
index 3859266..27a198b 100644
--- a/ComApp/src/App/Views/HomeScreen.js
+++ b/ComApp/src/App/Views/HomeScreen.js
@@ -2,28 +2,34 @@ import React from 'react';
 import { View, ImageBackground, TouchableOpacity, Text, Image } from 'react-native';
 // Common Styles 
 import commonStyles from '../../Resources/CommonStyles';
+// Redux
+import { connect } from 'react-redux';
 // Style
 import styles from '../../Resources/Styles/HomeStyle';
 // Translations
 import i18n from "../../I18n";
 // FileSytem
 import * as FileSystem from 'expo-file-system';
-// Database
-import { Setting } from "../../Database";
-import _ from 'lodash';
+
+function mapStateToProps(state) {
+    return {
+        directories: state.app.directories,
+        locale: state.app.locale,
+    };
+}
 
 class HomeScreen extends React.Component {
 
+    componentDidMount() {
+        this.props.dispatch({ type: 'INIT' });
+    }
+
     render() {
-        let buttons = Setting.get("HomeFolders");
-        //buttons = JSON.parse(buttons.value);
-        //console.log(typeof Object.values(buttons))
-        const arr = [1, 2, 3]
+        i18n.locale = this.props.locale;
         return (
             <ImageBackground source={{ uri: FileSystem.documentDirectory + 'BackgroundImage.png' }} style={commonStyles.background}>
                 <View style={styles.container}>
-                    {/* {this.getHomeButton()} */}
-                    <TouchableOpacity onPress={() => { }} style={styles.button}>
+                    <TouchableOpacity onPress={() => this.openFolder(2)} style={styles.button}>
                         <Image source={{ uri: FileSystem.documentDirectory + 'HomeButtonImage.png' }} style={styles.btnImg} />
                         <Text style={styles.btnTxt}>{i18n.t('global.videos')}</Text>
                     </TouchableOpacity>
@@ -40,19 +46,10 @@ class HomeScreen extends React.Component {
         );
     }
 
-    getHomeButtons() {
-        let buttons = Setting.get("HomeFolders");
-        if (buttons) {
-            buttons = JSON.parse(buttons.value);
-            _.forEach(buttons, function (value, key) {
-                console.log(JSON.parse(value.name).fr)
-            });
-        }
-    }
-
     openFolder(id) {
-        console.log(id)
+        const folder = this.props.directories.filter(tmp => tmp.id === id);
+        this.props.navigation.navigate('DirectoriesScreen', { folder: folder });
     }
 }
 
-export default HomeScreen;
\ No newline at end of file
+export default connect(mapStateToProps)(HomeScreen);
\ No newline at end of file
diff --git a/ComApp/src/Resources/Styles/DirectoriesStyle.js b/ComApp/src/Resources/Styles/DirectoriesStyle.js
new file mode 100644
index 0000000..fe65522
--- /dev/null
+++ b/ComApp/src/Resources/Styles/DirectoriesStyle.js
@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        flexDirection: 'row',
+    },
+    treeviewContainer: {
+        width: 290,
+    },
+    scrollview: {
+        flex: 2,
+    },
+    filesContainer: {
+        flex: 1,
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+    },
+    file: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 200,
+        width: 180,
+        backgroundColor: '#ce3029',
+        margin: 10,
+    },
+    fileTxt: {
+        textAlign: 'center',
+        color: 'white',
+        fontWeight: 'bold',
+        fontSize: 18,
+        padding: 5
+    }
+});
+
+export default styles;
\ No newline at end of file
diff --git a/ComApp/yarn.lock b/ComApp/yarn.lock
index 8d123c7..60c4e0f 100644
--- a/ComApp/yarn.lock
+++ b/ComApp/yarn.lock
@@ -8839,6 +8839,11 @@
   "resolved" "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
   "version" "17.0.2"
 
+"react-native-animated-tree-view@^0.1.4":
+  "integrity" "sha512-/Lxo4o8MRvK0h9WNgsut0XBu7VTXlDHa737mrDuG+7bXJlNtvHKVuTxW580vN0GQNLM4orbiG6TSiOsvdY6MhQ=="
+  "resolved" "https://registry.npmjs.org/react-native-animated-tree-view/-/react-native-animated-tree-view-0.1.4.tgz"
+  "version" "0.1.4"
+
 "react-native-b-crypt-bridge@file:react-native-b-crypt-bridge-2.0.0.tgz":
   "integrity" "sha512-nqjJtA0qUh6awVEmI41c3I3IxWHOm38UQGkXNg4iZmb4gg0MMFMBZFNAVHa5Xzl+YVDQ6rIfmrF0w/BnDaewsA=="
   "resolved" "file:react-native-b-crypt-bridge-2.0.0.tgz"