Merge pull request Expensify#32199 from callstack-internal/pac-guerre…

…iro/refactor/migrate-iframe-to-typescript

[TS migration] Migrate 'IFrame.js' component to TypeScript

src/components/IFrame.js → src/components/IFrame.tsx

@@ -1,15 +1,20 @@
-/* eslint-disable es/no-nullish-coalescing-operators */
-import PropTypes from 'prop-types';
 import React, {useEffect, useState} from 'react';
-import {withOnyx} from 'react-native-onyx';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import ONYXKEYS from '@src/ONYXKEYS';
+import {Session} from '@src/types/onyx';
 
-function getNewDotURL(url) {
+type OldDotIFrameOnyxProps = {
+    session: OnyxEntry<Session>;
+};
+
+type OldDotIFrameProps = OldDotIFrameOnyxProps;
+
+function getNewDotURL(url: string): string {
     const urlObj = new URL(url);
     const paramString = urlObj.searchParams.get('param') ?? '';
     const pathname = urlObj.pathname.slice(1);
 
-    let params;
+    let params: Record<string, string>;
     try {
         params = JSON.parse(paramString);
     } catch {
@@ -48,7 +53,7 @@ function getNewDotURL(url) {
     return pathname;
 }
 
-function getOldDotURL(url) {
+function getOldDotURL(url: string): string {
     const urlObj = new URL(url);
     const pathname = urlObj.pathname;
     const paths = pathname.slice(1).split('/');
@@ -86,35 +91,27 @@ function getOldDotURL(url) {
     return pathname;
 }
 
-const propTypes = {
-    // The session of the logged in person
-    session: PropTypes.shape({
-        // The email of the logged in person
-        email: PropTypes.string,
-
-        // The authToken of the logged in person
-        authToken: PropTypes.string,
-    }).isRequired,
-};
-
-function OldDotIFrame({session}) {
+function OldDotIFrame({session}: OldDotIFrameProps) {
     const [oldDotURL, setOldDotURL] = useState('https://staging.expensify.com');
 
     useEffect(() => {
         setOldDotURL(`https://expensify.com.dev/${getOldDotURL(window.location.href)}`);
 
-        window.addEventListener('message', (event) => {
+        window.addEventListener('message', (event: MessageEvent<string>) => {
             const url = event.data;
             // TODO: use this value to navigate to a new path
-            // eslint-disable-next-line no-unused-vars
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const newDotURL = getNewDotURL(url);
         });
     }, []);
 
     useEffect(() => {
+        if (!session) {
+            return;
+        }
         document.cookie = `authToken=${session.authToken}; domain=expensify.com.dev; path=/;`;
         document.cookie = `email=${session.email}; domain=expensify.com.dev; path=/;`;
-    }, [session.authToken, session.email]);
+    }, [session]);
 
     return (
         <iframe
@@ -125,9 +122,7 @@ function OldDotIFrame({session}) {
     );
 }
 
-OldDotIFrame.propTypes = propTypes;
-
-export default withOnyx({
+export default withOnyx<OldDotIFrameProps, OldDotIFrameOnyxProps>({
     session: {
         key: ONYXKEYS.SESSION,
     },