Merge pull request #4908 from kidroca/kidroca/file-handling-poc

ios/Podfile.lock

@@ -439,11 +439,11 @@ PODS:
     - react-native-config/App (= 1.4.5)
   - react-native-config/App (1.4.5):
     - React-Core
-  - react-native-document-picker (5.1.0):
+  - react-native-document-picker (7.1.1):
     - React-Core
-  - react-native-flipper (0.103.0):
+  - react-native-flipper (0.117.0):
     - React-Core
-  - react-native-image-picker (4.0.3):
+  - react-native-image-picker (4.1.2):
     - React-Core
   - react-native-netinfo (7.1.3):
     - React-Core

package.json

@@ -70,6 +70,7 @@
     "file-loader": "^6.0.0",
     "html-entities": "^1.3.1",
     "htmlparser2": "^7.2.0",
+    "localforage": "^1.10.0",
     "lodash": "4.17.21",
     "metro-config": "^0.64.0",
     "moment": "^2.27.0",
@@ -84,17 +85,17 @@
     "react-native-bootsplash": "^3.2.7",
     "react-native-collapsible": "^1.6.0",
     "react-native-config": "^1.4.5",
-    "react-native-document-picker": "^5.1.0",
+    "react-native-document-picker": "^7.1.1",
     "react-native-fast-image": "^8.5.11",
     "react-native-gesture-handler": "1.9.0",
     "react-native-google-places-autocomplete": "^2.4.1",
     "react-native-haptic-feedback": "^1.13.0",
     "react-native-image-pan-zoom": "^2.1.12",
-    "react-native-image-picker": "^4.0.3",
+    "react-native-image-picker": "^4.1.2",
     "react-native-image-size": "^1.1.3",
     "react-native-keyboard-spacer": "^0.4.1",
     "react-native-modal": "^11.10.0",
-    "react-native-onyx": "git+https://github.com/Expensify/react-native-onyx.git#00bcc1520cf6cf7846d8aa40b5161bd1f407341f",
+    "react-native-onyx": "git+https://github.com/Expensify/react-native-onyx.git#40c5b14dcc77e1193d027ecc9dd5f2563516e148",
     "react-native-pdf": "^6.2.2",
     "react-native-performance": "^2.0.0",
     "react-native-permissions": "^3.0.1",
@@ -172,7 +173,7 @@
     "pusher-js-mock": "^0.3.3",
     "react-hot-loader": "^4.12.21",
     "react-native-clean-project": "^4.0.0-alpha4.0",
-    "react-native-flipper": "^0.103.0",
+    "react-native-flipper": "^0.117.0",
     "react-native-performance-flipper-reporter": "^2.0.0",
     "react-native-svg-transformer": "^0.14.3",
     "react-test-renderer": "16.13.1",

src/ONYXKEYS.js

@@ -145,9 +145,6 @@ export default {
     // Stores Workspace ID that will be tied to reimbursement account during setup
     REIMBURSEMENT_ACCOUNT_WORKSPACE_ID: 'reimbursementAccountWorkspaceID',
 
-    // Notifies all tabs that they should sign out and clear storage.
-    SHOULD_SIGN_OUT: 'shouldSignOut',
-
     // Set when we are loading payment methods
     IS_LOADING_PAYMENT_METHODS: 'isLoadingPaymentMethods',
 

src/components/AttachmentPicker/index.native.js

@@ -53,6 +53,7 @@ function getImagePickerOptions(type) {
   */
 const documentPickerOptions = {
     type: [RNDocumentPicker.types.allFiles],
+    copyTo: 'cachesDirectory',
 };
 
 /**
@@ -66,7 +67,7 @@ function getDataForUpload(fileData) {
     const fileResult = {
         name: fileData.fileName || fileData.name || 'chat_attachment',
         type: fileData.type,
-        uri: fileData.uri,
+        uri: fileData.fileCopyUri || fileData.uri,
         size: fileData.fileSize || fileData.size,
     };
 
@@ -127,20 +128,22 @@ class AttachmentPicker extends Component {
       * Handles the image/document picker result and
       * sends the selected attachment to the caller (parent component)
       *
-      * @param {ImagePickerResponse|DocumentPickerResponse} attachment
+      * @param {Array<ImagePickerResponse|DocumentPickerResponse>} attachments
       * @returns {Promise}
       */
-    pickAttachment(attachment) {
-        if (!attachment) {
+    pickAttachment(attachments = []) {
+        if (attachments.length === 0) {
             return;
         }
 
-        if (attachment.width === -1 || attachment.height === -1) {
+        const fileData = _.first(attachments);
+
+        if (fileData.width === -1 || fileData.height === -1) {
             this.showImageCorruptionAlert();
             return;
         }
 
-        return getDataForUpload(attachment).then((result) => {
+        return getDataForUpload(fileData).then((result) => {
             this.completeAttachmentSelection(result);
         }).catch((error) => {
             this.showGeneralAlert(error.message);
@@ -196,7 +199,7 @@ class AttachmentPicker extends Component {
                 }
 
                 // Resolve with the first (and only) selected file
-                return resolve(response.assets[0]);
+                return resolve(response.assets);
             });
         });
     }
@@ -225,7 +228,7 @@ class AttachmentPicker extends Component {
     /**
       * Launch the DocumentPicker. Results are in the same format as ImagePicker
       *
-      * @returns {Promise<DocumentPickerResponse>}
+      * @returns {Promise<DocumentPickerResponse[]>}
       */
     showDocumentPicker() {
         return RNDocumentPicker.pick(documentPickerOptions).catch((error) => {

src/libs/Network.js

@@ -179,7 +179,9 @@ function processNetworkRequestQueue() {
         networkRequestQueue = _.reject(networkRequestQueue, (request) => {
             const shouldRetry = lodashGet(request, 'data.shouldRetry');
             if (shouldRetry && request.data.persist) {
-                retryableRequests.push(request);
+                // exclude functions as they cannot be persisted
+                const requestToPersist = _.omit(request, val => _.isFunction(val));
+                retryableRequests.push(requestToPersist);
                 return true;
             }
         });

src/libs/actions/Report.js

@@ -1083,7 +1083,7 @@ function fetchAllReports(
  *
  * @param {Number} reportID
  * @param {String} text
- * @param {Object} [file]
+ * @param {File} [file]
  */
 function addAction(reportID, text, file) {
     // Convert the comment from MD into HTML because that's how it is stored in the database
@@ -1162,8 +1162,8 @@ function addAction(reportID, text, file) {
 
     API.Report_AddComment({
         reportID,
-        reportComment: commentText,
         file,
+        reportComment: commentText,
         clientID: optimisticReportActionID,
 
         // The persist flag enables this request to be retried if we are offline and the app is completely killed. We do

src/libs/actions/SignInRedirect.js

@@ -1,5 +1,4 @@
 import Onyx from 'react-native-onyx';
-import SignoutManager from '../SignoutManager';
 import ONYXKEYS from '../../ONYXKEYS';
 
 let currentActiveClients;
@@ -38,16 +37,14 @@ function clearStorageAndRedirect(errorMessage) {
         });
 }
 
-SignoutManager.registerSignoutCallback(clearStorageAndRedirect);
-
 /**
  * Clears the Onyx store and redirects to the sign in page.
  * Normally this method would live in Session.js, but that would cause a circular dependency with Network.js.
  *
  * @param {String} [errorMessage] error message to be displayed on the sign in page
  */
 function redirectToSignIn(errorMessage) {
-    SignoutManager.signOut(errorMessage);
+    clearStorageAndRedirect(errorMessage);
 }
 
 export default redirectToSignIn;

src/libs/migrateOnyx.js

@@ -3,6 +3,7 @@ import Log from './Log';
 import AddEncryptedAuthToken from './migrations/AddEncryptedAuthToken';
 import RenameActiveClientsKey from './migrations/RenameActiveClientsKey';
 import RenamePriorityModeKey from './migrations/RenamePriorityModeKey';
+import MoveToIndexedDB from './migrations/MoveToIndexedDB';
 
 export default function () {
     const startTime = Date.now();
@@ -11,6 +12,7 @@ export default function () {
     return new Promise((resolve) => {
         // Add all migrations to an array so they are executed in order
         const migrationPromises = [
+            MoveToIndexedDB,
             RenameActiveClientsKey,
             RenamePriorityModeKey,
             AddEncryptedAuthToken,