From bb5c63986dc8afc645ca5971ff7d7f85d14d4461 Mon Sep 17 00:00:00 2001
From: Konrad Bochnia <kbochnia@gmail.com>
Date: Mon, 29 May 2023 10:26:55 +0200
Subject: [PATCH 1/2] Migrate AttachmentPicker/index.js to functional component

---
 src/components/AttachmentPicker/index.js | 72 ++++++++++++------------
 1 file changed, 37 insertions(+), 35 deletions(-)

diff --git a/src/components/AttachmentPicker/index.js b/src/components/AttachmentPicker/index.js
index 42c8e6928961..f2bc4ad1e37f 100644
--- a/src/components/AttachmentPicker/index.js
+++ b/src/components/AttachmentPicker/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useRef} from 'react';
 import CONST from '../../CONST';
 import {propTypes, defaultProps} from './attachmentPickerPropTypes';
 import * as FileUtils from '../../libs/fileDownload/FileUtils';
@@ -22,44 +22,46 @@ function getAcceptableFileTypes(type) {
  * a callback. This is the web/mWeb/desktop version since
  * on a Browser we must append a hidden input to the DOM
  * and listen to onChange event.
+ * @param {propTypes} props
+ * @returns {JSX.Element}
  */
-class AttachmentPicker extends React.Component {
-    render() {
-        return (
-            <>
-                <input
-                    hidden
-                    type="file"
-                    ref={(el) => (this.fileInput = el)}
-                    onChange={(e) => {
-                        let file = e.target.files[0];
+function AttachmentPicker(props) {
+    const fileInput = useRef();
+    const onPicked = useRef();
+    return (
+        <>
+            <input
+                hidden
+                type="file"
+                ref={fileInput}
+                onChange={(e) => {
+                    let file = e.target.files[0];
 
-                        if (file) {
-                            const cleanName = FileUtils.cleanFileName(file.name);
-                            if (file.name !== cleanName) {
-                                file = new File([file], cleanName);
-                            }
-                            file.uri = URL.createObjectURL(file);
-                            this.onPicked(file);
+                    if (file) {
+                        const cleanName = FileUtils.cleanFileName(file.name);
+                        if (file.name !== cleanName) {
+                            file = new File([file], cleanName);
                         }
+                        file.uri = URL.createObjectURL(file);
+                        onPicked.current(file);
+                    }
 
-                        // Cleanup after selecting a file to start from a fresh state
-                        this.fileInput.value = null;
-                    }}
-                    // We are stopping the event propagation because triggering the `click()` on the hidden input
-                    // causes the event to unexpectedly bubble up to anything wrapping this component e.g. Pressable
-                    onClick={(e) => e.stopPropagation()}
-                    accept={getAcceptableFileTypes(this.props.type)}
-                />
-                {this.props.children({
-                    openPicker: ({onPicked}) => {
-                        this.onPicked = onPicked;
-                        this.fileInput.click();
-                    },
-                })}
-            </>
-        );
-    }
+                    // Cleanup after selecting a file to start from a fresh state
+                     fileInput.current.value = null;
+                }}
+                // We are stopping the event propagation because triggering the `click()` on the hidden input
+                // causes the event to unexpectedly bubble up to anything wrapping this component e.g. Pressable
+                onClick={(e) => e.stopPropagation()}
+                accept={getAcceptableFileTypes(props.type)}
+            />
+            {props.children({
+                openPicker: ({onPicked: newOnPicked}) => {
+                    onPicked.current = newOnPicked;
+                    fileInput.current.click();
+                },
+            })}
+        </>
+    );
 }
 
 AttachmentPicker.propTypes = propTypes;

From 6c30d95a267aa4eeb5fe3af16090acbcd2f9d1fc Mon Sep 17 00:00:00 2001
From: Konrad Bochnia <kbochnia@gmail.com>
Date: Mon, 29 May 2023 10:33:01 +0200
Subject: [PATCH 2/2] Fix prettier

---
 src/components/AttachmentPicker/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AttachmentPicker/index.js b/src/components/AttachmentPicker/index.js
index f2bc4ad1e37f..fb2e95b88317 100644
--- a/src/components/AttachmentPicker/index.js
+++ b/src/components/AttachmentPicker/index.js
@@ -47,7 +47,7 @@ function AttachmentPicker(props) {
                     }
 
                     // Cleanup after selecting a file to start from a fresh state
-                     fileInput.current.value = null;
+                    fileInput.current.value = null;
                 }}
                 // We are stopping the event propagation because triggering the `click()` on the hidden input
                 // causes the event to unexpectedly bubble up to anything wrapping this component e.g. Pressable