Merge pull request #34723 from JKobrynski/migrateUpdateAppModalToType…

…Script

[No QA] [TS migration] Migrate 'UpdateAppModal' component to TypeScript

src/components/UpdateAppModal/BaseUpdateAppModal.js → src/components/UpdateAppModal/BaseUpdateAppModal.tsx

@@ -1,24 +1,25 @@
-import React, {memo, useState} from 'react';
+import React, {useState} from 'react';
 import ConfirmModal from '@components/ConfirmModal';
-import withLocalize from '@components/withLocalize';
-import {defaultProps, propTypes} from './updateAppModalPropTypes';
+import useLocalize from '@hooks/useLocalize';
+import type UpdateAppModalProps from './types';
 
-function BaseUpdateAppModal({translate, onSubmit}) {
+function BaseUpdateAppModal({onSubmit}: UpdateAppModalProps) {
     const [isModalOpen, setIsModalOpen] = useState(true);
+    const {translate} = useLocalize();
 
     /**
      * Execute the onSubmit callback and close the modal.
      */
-    function submitAndClose() {
-        onSubmit();
+    const submitAndClose = () => {
+        onSubmit?.();
         setIsModalOpen(false);
-    }
+    };
 
     return (
         <ConfirmModal
             title={translate('baseUpdateAppModal.updateApp')}
             isVisible={isModalOpen}
-            onConfirm={() => submitAndClose()}
+            onConfirm={submitAndClose}
             onCancel={() => setIsModalOpen(false)}
             prompt={translate('baseUpdateAppModal.updatePrompt')}
             confirmText={translate('baseUpdateAppModal.updateApp')}
@@ -27,7 +28,6 @@ function BaseUpdateAppModal({translate, onSubmit}) {
     );
 }
 
-BaseUpdateAppModal.propTypes = propTypes;
-BaseUpdateAppModal.defaultProps = defaultProps;
+BaseUpdateAppModal.displayName = 'BaseUpdateAppModal';
 
-export default memo(withLocalize(BaseUpdateAppModal));
+export default React.memo(BaseUpdateAppModal);

src/components/UpdateAppModal/index.desktop.js → src/components/UpdateAppModal/index.desktop.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
 import ELECTRON_EVENTS from '../../../desktop/ELECTRON_EVENTS';
 import BaseUpdateAppModal from './BaseUpdateAppModal';
-import {propTypes} from './updateAppModalPropTypes';
+import type UpdateAppModalProps from './types';
 
-function UpdateAppModal(props) {
+function UpdateAppModal({onSubmit}: UpdateAppModalProps) {
     const updateApp = () => {
-        if (props.onSubmit) {
-            props.onSubmit();
-        }
+        onSubmit?.();
         window.electron.send(ELECTRON_EVENTS.START_UPDATE);
     };
     return <BaseUpdateAppModal onSubmit={updateApp} />;
 }
-UpdateAppModal.propTypes = propTypes;
+
 UpdateAppModal.displayName = 'UpdateAppModal';
+
 export default UpdateAppModal;

src/components/UpdateAppModal/index.js → src/components/UpdateAppModal/index.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import BaseUpdateAppModal from './BaseUpdateAppModal';
-import {propTypes} from './updateAppModalPropTypes';
+import type UpdateAppModalProps from './types';
 
-function UpdateAppModal(props) {
+function UpdateAppModal(props: UpdateAppModalProps) {
     return (
         <BaseUpdateAppModal
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
         />
     );
 }
-UpdateAppModal.propTypes = propTypes;
+
 UpdateAppModal.displayName = 'UpdateAppModal';
+
 export default UpdateAppModal;

src/components/UpdateAppModal/types.ts

@@ -0,0 +1,6 @@
+type UpdateAppModalProps = {
+    /** Callback to fire when we want to trigger the update. */
+    onSubmit?: () => void;
+};
+
+export default UpdateAppModalProps;