refactor: updated upload component to typescript

It is believed this will help integrating with the
existing store logic.
No runtime changes are intended, only typings so everything is
as clear as possible when reusing the already existing mobile upload
flow

.eslintrc.json

@@ -20,5 +20,8 @@
         "react/display-name": "off"
       }
     }
-  ]
+  ],
+  "parserOptions": {
+    "project": "tsconfig.json"
+  }
 }

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['cozy-app', '@babel/env']
+  presets: ['cozy-app']
 }

jest.config.js

@@ -31,7 +31,7 @@ module.exports = {
   clearMocks: true,
   snapshotSerializers: ['enzyme-to-json/serializer'],
   transform: {
-    '^.+\\.jsx?$': 'babel-jest',
+    '^.+\\.(ts|tsx|js|jsx)?$': 'babel-jest',
     '^.+\\.webapp$': '<rootDir>/test/jestLib/json-transformer.js'
   },
   transformIgnorePatterns: ['node_modules/(?!cozy-ui)/'],

package.json

@@ -80,13 +80,15 @@
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "11.2.7",
     "@testing-library/react-hooks": "8.0.1",
+    "@types/react-redux": "7.1.26",
     "@welldone-software/why-did-you-render": "^6.1.4",
-    "babel-core": "7.0.0-bridge.0",
+    "babel-preset-cozy-app": "2.1.0",
     "babel-runtime": "^6.26.0",
     "bundlemon": "1.3.1",
     "chrome-remote-interface": "0.31.2",
     "cordova": "8.1.2",
     "cordova-android": "9.1.0",
+    "cozy-tsconfig": "1.2.0",
     "css-mediaquery": "^0.1.2",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",

src/declarations.d.ts

@@ -0,0 +1 @@
+declare module 'cozy-ui/*'

src/drive/targets/manifest.webapp

@@ -181,6 +181,6 @@
     "accepted_mime_types": ["*/*"],
     "max_number_of_files": 1,
     "max_size_per_file_in_MB": 10,
-    "route_to_upload": "/#/create?fromFlagshipUpload=true"
+    "route_to_upload": "/#/upload?fromFlagshipUpload=true"
   }
 }

src/drive/web/modules/navigation/AppRoute.jsx

@@ -26,7 +26,7 @@ import SearchView from '../views/Search/SearchView'
 import OnlyOfficePaywallView from '../views/OnlyOffice/OnlyOfficePaywallView'
 import FilesViewerRecent from '../views/Recent/FilesViewerRecent'
 import { ShareDisplayedFolderView } from 'drive/web/modules/views/Modal/ShareDisplayedFolderView'
-import { UploadFromFlagship } from '../views/Upload/UploadFromFlagship'
+import UploaderComponent from '../views/Upload/UploaderComponent'
 
 const FilesRedirect = () => {
   const { folderId } = useParams()
@@ -40,7 +40,7 @@ const AppRoute = () => (
       {__TARGET__ === 'mobile' && (
         <Route path="uploadfrommobile" element={<UploadFromMobile />} />
       )}
-      <Route path="create" element={<UploadFromFlagship />} />
+      <Route path="upload" element={<UploaderComponent />} />
       <Route path="/files/:folderId" element={<FilesRedirect />} />
       <Route path="/" element={<Index />} />
 

src/drive/web/modules/upload/index.js

@@ -375,7 +375,13 @@ export const overwriteFile = async (client, file, path, options = {}) => {
 }
 
 export const uploadFilesFromNative =
-  (files, folderId, uploadFilesSuccessCallback, { client, vaultClient }) =>
+  (
+    files,
+    folderId,
+    uploadFilesSuccessCallback,
+    { client, vaultClient },
+    alternateUploader
+  ) =>
   async dispatch => {
     dispatch({
       type: ADD_TO_UPLOAD_QUEUE,
@@ -401,10 +407,17 @@ export const uploadFilesFromNative =
             contentType: file.file.type
           })
         } else {
-          await doMobileUpload(client, file.file.fileUrl, {
-            ...fileOpts,
-            contentType: file.file.type
-          })
+          if (alternateUploader) {
+            await alternateUploader(client, file.file.fileUrl, {
+              ...fileOpts,
+              contentType: file.file.type
+            })
+          } else {
+            await doMobileUpload(client, file.file.fileUrl, {
+              ...fileOpts,
+              contentType: file.file.type
+            })
+          }
         }
         dispatch(removeFileToUploadQueue(file.file))
       } catch (error) {

src/drive/web/modules/views/Upload/UploadTypes.ts

@@ -0,0 +1,40 @@
+import CozyClient from 'cozy-client'
+
+export interface Folder {
+  _id: string
+}
+
+export interface FileForQueue {
+  file: FileFromNative
+  isDirectory: false
+}
+
+export interface DumbUploadProps {
+  t: (key: string, options?: { smart_count: number }) => string
+  stopMediaBackup: () => void
+  navigate: (path: string) => void
+  uploadFilesFromNative: DispatchProps['uploadFilesFromNative']
+  client: CozyClient
+  vaultClient: CozyClient
+  startMediaBackup: () => void
+  items: FileFromNative[]
+}
+
+export interface DispatchProps {
+  uploadFilesFromNative: (
+    files: FileForQueue[],
+    folderId: string,
+    successCallback: () => void,
+    options: { client: CozyClient; vaultClient?: CozyClient },
+    alternateUploader?: (
+      files: FileForQueue[],
+      folderId: string
+    ) => Promise<void>
+  ) => Promise<void>
+  stopMediaBackup: () => void
+  startMediaBackup: () => void
+}
+
+export interface FileFromNative {
+  fileName: string
+}

src/drive/web/modules/views/Upload/UploadUtils.ts

@@ -0,0 +1,5 @@
+import type { FileFromNative, FileForQueue } from './UploadTypes'
+
+export const generateForQueue = (files: FileFromNative[]): FileForQueue[] => {
+  return files.map(file => ({ file: file, isDirectory: false }))
+}

src/drive/web/modules/views/Upload/UploaderComponent.spec.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { render, RenderResult, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { DumbUpload } from 'drive/mobile/modules/upload'
+import { generateForQueue } from './UploadUtils'
+
+jest.mock('cozy-keys-lib', () => ({
+  withVaultClient: jest.fn().mockReturnValue({})
+}))
+
+const tSpy = jest.fn()
+const uploadFilesFromNativeSpy = jest.fn()
+
+describe('DumbUpload component', () => {
+  const defaultItems = [{ fileName: 'File1.pdf' }]
+
+  const setupComponent = (): RenderResult<
+    typeof import('/home/anc/cozy/cozy-drive/node_modules/@testing-library/dom/types/queries'),
+    HTMLElement
+  > => {
+    const props = {
+      client: {},
+      vaultClient: {},
+      t: tSpy,
+      uploadFilesFromNative: uploadFilesFromNativeSpy,
+      stopMediaBackup: jest.fn(),
+      router: jest.fn(),
+      navigate: jest.fn()
+    }
+
+    return render(<DumbUpload {...props} />)
+  }
+
+  describe('generateForQueue', () => {
+    it('should generate the right object for the Drive queue', () => {
+      const genetaredForQueue = generateForQueue(defaultItems)
+      expect(genetaredForQueue).toEqual([
+        { file: defaultItems[0], isDirectory: false }
+      ])
+    })
+  })
+
+  describe('Upload files', () => {
+    it('should call uploadFileFromNative with the right arguments', async () => {
+      const { rerender } = setupComponent()
+      const folderId = 'io.cozy.root'
+
+      rerender(<DumbUpload items={defaultItems} folder={{ _id: folderId }} />)
+
+      await waitFor(() => {
+        const genetaredForQueue = generateForQueue(defaultItems)
+        expect(uploadFilesFromNativeSpy).toHaveBeenCalledWith(
+          genetaredForQueue,
+          folderId,
+          expect.any(Function),
+          { client: {}, vaultClient: {} }
+        )
+      })
+    })
+  })
+})