Likhith/74106/migrate file uploader to ts

packages/account/globals.d.ts

@@ -0,0 +1 @@
+declare module '@binary-com/binary-document-uploader';

packages/account/src/Components/file-uploader-container/__tests__/file-uploader-container.spec.js → packages/account/src/Components/file-uploader-container/__tests__/file-uploader-container.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { isDesktop, isMobile, PlatformContext } from '@deriv/shared';
-import FileUploaderContainer from '../file-uploader-container';
+import FileUploaderContainer, { TFileUploaderContainer } from '../file-uploader-container';
 
 jest.mock('@deriv/components', () => {
     const original_module = jest.requireActual('@deriv/components');
@@ -26,7 +26,7 @@ describe('<FileUploaderContainer />', () => {
         jest.clearAllMocks();
     });
 
-    const props = {
+    const props: TFileUploaderContainer = {
         getSocket: jest.fn(),
         onFileDrop: jest.fn(),
         onRef: jest.fn(),
@@ -52,11 +52,7 @@ describe('<FileUploaderContainer />', () => {
     });
 
     it('should render FileUploaderContainer component if getSocket is not passed as prop', () => {
-        const new_props = {
-            onFileDrop: jest.fn(),
-            onRef: jest.fn(),
-        };
-        render(<FileUploaderContainer {...new_props} />);
+        render(<FileUploaderContainer {...props} />);
         expect(screen.getByTestId('dt_file_uploader_container')).toBeInTheDocument();
     });
 
@@ -109,7 +105,7 @@ describe('<FileUploaderContainer />', () => {
             </PlatformContext.Provider>
         );
 
-        expect(screen.getAllByText('mockedIcon')).toHaveLength(1);
+        expect(screen.getByText('mockedIcon')).toBeInTheDocument();
         expect(screen.queryByText(file_size_msg)).not.toBeInTheDocument();
         expect(screen.queryByText(file_type_msg)).not.toBeInTheDocument();
         expect(screen.queryByText(file_time_msg)).not.toBeInTheDocument();
@@ -120,7 +116,7 @@ describe('<FileUploaderContainer />', () => {
     it('should call ref function on rendering the component', () => {
         render(
             <PlatformContext.Provider value={{ is_appstore: true }}>
-                <FileUploaderContainer onRef={props.onRef} />
+                <FileUploaderContainer {...props} />
             </PlatformContext.Provider>
         );
 

packages/account/src/Components/file-uploader-container/__tests__/file-uploader.spec.js → packages/account/src/Components/file-uploader-container/__tests__/file-uploader.spec.tsx

@@ -20,10 +20,14 @@ describe('<FileUploader />', () => {
         jest.clearAllMocks();
     });
 
-    const props = {
+    const props: {
+        onFileDrop: (file: File | undefined) => void;
+        getSocket: () => WebSocket;
+        ref: React.RefObject<HTMLElement>;
+    } = {
         onFileDrop: jest.fn(),
         getSocket: jest.fn(),
-        ref: React.createRef(),
+        ref: React.createRef<HTMLElement>(),
     };
 
     const large_file_error_msg = /file size should be 8mb or less/i;
@@ -48,11 +52,11 @@ describe('<FileUploader />', () => {
 
         const file = new File(['hello'], 'hello.png', { type: 'image/png' });
 
-        const input = screen.getByTestId('dt_file_upload_input');
+        const input: HTMLInputElement = screen.getByTestId('dt_file_upload_input');
         fireEvent.change(input, { target: { files: [file] } });
 
         await waitFor(() => {
-            expect(input.files[0]).toBe(file);
+            expect(input?.files?.length && input.files[0]).toBe(file);
             expect(input.files).toHaveLength(1);
         });
     });
@@ -101,12 +105,12 @@ describe('<FileUploader />', () => {
         render(<FileUploader {...props} />);
         const file = new File(['hello'], 'hello.png', { type: 'image/png' });
 
-        const input = screen.getByTestId('dt_file_upload_input');
+        const input: HTMLInputElement = screen.getByTestId('dt_file_upload_input');
         fireEvent.change(input, { target: { files: [file] } });
 
         await waitFor(() => {
             expect(screen.getByText(/hello\.png/i)).toBeInTheDocument();
-            expect(input.files[0]).toBe(file);
+            expect(input?.files?.length && input.files[0]).toBe(file);
             expect(input.files).toHaveLength(1);
         });
 
@@ -133,11 +137,11 @@ describe('<FileUploader />', () => {
         const blob = new Blob(['sample_data']);
         const file = new File([blob], 'hello.pdf', { type: 'application/pdf' });
 
-        const input = screen.getByTestId('dt_file_upload_input');
+        const input: HTMLInputElement = screen.getByTestId('dt_file_upload_input');
         fireEvent.change(input, { target: { files: [file] } });
         await waitFor(() => {
             expect(screen.getByText(/hello\.pdf/i)).toBeInTheDocument();
-            expect(input.files[0]).toBe(file);
+            expect(input?.files?.length && input.files[0]).toBe(file);
         });
         props.ref.current.upload();
         expect(compressImageFiles).toBeCalled();

packages/account/src/Components/file-uploader-container/file-uploader-container.jsx → packages/account/src/Components/file-uploader-container/file-uploader-container.tsx

@@ -1,10 +1,17 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Icon, Text } from '@deriv/components';
 import { PlatformContext, isDesktop, WS } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
-import FileUploader from './file-uploader.jsx';
+import FileUploader from './file-uploader';
+import { TFile, TPlatformContext } from 'Types';
+
+export type TFileUploaderContainer = {
+    is_description_enabled?: boolean;
+    getSocket: () => WebSocket;
+    onFileDrop: (file: TFile | undefined) => void;
+    onRef: (ref: React.RefObject<unknown> | undefined) => void;
+};
 
 const FileProperties = () => {
     const properties = [
@@ -37,8 +44,13 @@ const FileProperties = () => {
     );
 };
 
-const FileUploaderContainer = ({ is_description_enabled = true, getSocket, onFileDrop, onRef }) => {
-    const { is_appstore } = React.useContext(PlatformContext);
+const FileUploaderContainer = ({
+    is_description_enabled = true,
+    getSocket,
+    onFileDrop,
+    onRef,
+}: TFileUploaderContainer) => {
+    const { is_appstore } = React.useContext<Partial<TPlatformContext>>(PlatformContext);
     const ref = React.useRef();
 
     const getSocketFunc = getSocket ?? WS.getSocket;
@@ -124,11 +136,4 @@ const FileUploaderContainer = ({ is_description_enabled = true, getSocket, onFil
     );
 };
 
-FileUploaderContainer.propTypes = {
-    is_description_enabled: PropTypes.bool,
-    getSocket: PropTypes.func,
-    onFileDrop: PropTypes.func,
-    onRef: PropTypes.func,
-};
-
 export default FileUploaderContainer;

packages/account/src/Components/file-uploader-container/file-uploader.jsx → packages/account/src/Components/file-uploader-container/file-uploader.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import DocumentUploader from '@binary-com/binary-document-uploader';
@@ -12,6 +11,11 @@ import {
     max_document_size,
     supported_filetypes,
 } from '@deriv/shared';
+import { TFile } from 'Types';
+
+type TFileObject = {
+    file: TFile;
+};
 
 const UploadMessage = () => {
     return (
@@ -23,34 +27,38 @@ const UploadMessage = () => {
         </React.Fragment>
     );
 };
-const fileReadErrorMessage = filename => {
+
+const fileReadErrorMessage = (filename: string) => {
     return localize('Unable to read file {{name}}', { name: filename });
 };
 
-const FileUploader = React.forwardRef(({ onFileDrop, getSocket }, ref) => {
+const FileUploader = React.forwardRef<
+    HTMLElement,
+    { onFileDrop: (file: TFile | undefined) => void; getSocket: () => WebSocket }
+>(({ onFileDrop, getSocket }, ref) => {
     const [document_file, setDocumentFile] = useStateCallback({ files: [], error_message: null });
 
-    const handleAcceptedFiles = files => {
+    const handleAcceptedFiles = (files: TFileObject[]) => {
         if (files.length > 0) {
-            setDocumentFile({ files, error_message: null }, file => {
+            setDocumentFile({ files, error_message: null }, (file: TFile) => {
                 onFileDrop(file);
             });
         }
     };
 
-    const handleRejectedFiles = files => {
+    const handleRejectedFiles = (files: TFileObject[]) => {
         const is_file_too_large = files.length > 0 && files[0].file.size > max_document_size;
         const supported_files = files.filter(each_file => getSupportedFiles(each_file.file.name));
         const error_message =
             is_file_too_large && supported_files.length > 0
                 ? localize('File size should be 8MB or less')
                 : localize('File uploaded is not supported');
 
-        setDocumentFile({ files, error_message }, file => onFileDrop(file));
+        setDocumentFile({ files, error_message }, (file: TFile) => onFileDrop(file));
     };
 
     const removeFile = () => {
-        setDocumentFile({ files: [], error_message: null }, file => onFileDrop(file));
+        setDocumentFile({ files: [], error_message: null }, (file: TFile) => onFileDrop(file));
     };
 
     const upload = () => {
@@ -77,7 +85,9 @@ const FileUploader = React.forwardRef(({ onFileDrop, getSocket }, ref) => {
                     }
 
                     // send files
-                    const uploader_promise = uploader.upload(processed_files[0]).then(api_response => api_response);
+                    const uploader_promise = uploader
+                        .upload(processed_files[0])
+                        .then((api_response: unknown) => api_response);
                     resolve(uploader_promise);
                 });
             });
@@ -122,9 +132,4 @@ const FileUploader = React.forwardRef(({ onFileDrop, getSocket }, ref) => {
 
 FileUploader.displayName = 'FileUploader';
 
-FileUploader.propTypes = {
-    onFileDrop: PropTypes.func,
-    getSocket: PropTypes.func,
-};
-
 export default FileUploader;

packages/account/src/Components/file-uploader-container/index.js

@@ -1,3 +1,3 @@
-import FileUploaderContainer from './file-uploader-container.jsx';
+import FileUploaderContainer from './file-uploader-container';
 
 export default FileUploaderContainer;

packages/account/src/Components/file-uploader-container/upload-file.js → packages/account/src/Components/file-uploader-container/upload-file.ts

@@ -1,14 +1,24 @@
-import PropTypes from 'prop-types';
 import DocumentUploader from '@binary-com/binary-document-uploader';
 import { localize } from '@deriv/translations';
 import { compressImageFiles, readFiles, DOCUMENT_TYPE, PAGE_TYPE } from '@deriv/shared';
+import { TFile } from 'Types';
+
+type TDocumentSetting = {
+    documentType: keyof typeof DOCUMENT_TYPE;
+    pageType: keyof typeof PAGE_TYPE;
+    expirationDate: string;
+    documentId: string;
+    lifetimeValid: boolean;
+};
+
+type TProcessedFile = TFile & TDocumentSetting & { message: string };
 
-const fileReadErrorMessage = filename => {
+const fileReadErrorMessage = (filename: string) => {
     return localize('Unable to read file {{name}}', { name: filename });
 };
 
-const uploadFile = (file, getSocket, settings) =>
-    new Promise((resolve, reject) => {
+const uploadFile = (file: File, getSocket: () => WebSocket, settings: TDocumentSetting) => {
+    return new Promise((resolve, reject) => {
         if (!file) {
             reject();
         }
@@ -18,9 +28,9 @@ const uploadFile = (file, getSocket, settings) =>
 
         let is_file_error = false;
 
-        compressImageFiles([file]).then(files_to_process => {
-            readFiles(files_to_process, fileReadErrorMessage, settings).then(processed_files => {
-                processed_files.forEach(item => {
+        compressImageFiles([file]).then((files_to_process: File[]) => {
+            readFiles(files_to_process, fileReadErrorMessage, settings).then((processed_files: TProcessedFile[]) => {
+                processed_files.forEach((item: TProcessedFile) => {
                     if (item.message) {
                         is_file_error = true;
                         reject(item);
@@ -36,17 +46,6 @@ const uploadFile = (file, getSocket, settings) =>
             });
         });
     });
-
-uploadFile.propTypes = {
-    file: PropTypes.element.isRequired,
-    getSocket: PropTypes.func.isRequired,
-    settings: PropTypes.shape({
-        documentType: PropTypes.oneOf(Object.values(DOCUMENT_TYPE)).isRequired,
-        pageType: PropTypes.oneOf(Object.values(PAGE_TYPE)),
-        expirationDate: PropTypes.string,
-        documentId: PropTypes.string,
-        lifetimeValid: PropTypes.bool,
-    }),
 };
 
 export default uploadFile;

packages/account/src/Types/common-prop.type.ts

@@ -9,3 +9,18 @@ export type TToken = {
     scopes: string[];
     token: string;
 };
+
+export type TFile = {
+    path: string;
+    lastModified: number;
+    lastModifiedDate: Date;
+    name: string;
+    size: number;
+    type: string;
+    webkitRelativePath: string;
+};
+
+export type TPlatformContext = {
+    is_appstore?: boolean;
+    displayName?: string;
+};

packages/account/tsconfig.json

@@ -12,10 +12,9 @@
             "Modules/*": ["src/Modules/*"],
             "Sections/*": ["src/Sections/*"],
             "Stores/*": ["src/Stores/*"],
-            "Styles/*": ["src/Styles/*"],
             "Types": ["src/Types"],
-            "@deriv/*": ["../*/src"]
+            "@deriv/*": ["../*/src"],
         }
     },
-    "include": ["src", "globals.d.ts"]
+    "include": ["src","globals.d.ts"]
 }

packages/p2p/src/stores/my-profile-store.js

@@ -524,7 +524,7 @@ export default class MyProfileStore extends BaseStore {
             this.setIsConfirmDeleteModalOpen(true);
         }
     }
-  
+
     onSubmit() {
         const { general_store } = this.root_store;